【HTML基础】HTML基本语法

简介: 学习了解HTML基本语法。

HTML语法

1.单标记

2.双标记

3.属性


1.单标记


HTML中是不区分大小写的,空格与回车在其中无效果


HTML中用于描述功能的符号称为“标记”,单标记是其中的一种。


单独使用单标记就可以表达完整的意思,使用一对尖括号将标记名称括起来就能表示一个单标记了。


换行单标记:

<br>

为了展示br单标记的效果,我们来看下面一段代码:

<html>
 <head>
  <meta charset="UTF-8">
  <title>br标记示例</title>
 </head>
 <body>
  这是第一行。
  这是第二行。
  这是第三行。
  点赞
  收藏
  关注
 </body>
</html>

网页效果:

微信图片_20221028234533.png


可以发现,代码中看似不同行的内容,在浏览器窗口中被显示在同一行,而这时候br单标签就能实现换行操作。


添加br标记:

<html>
 <head>
  <meta charset="UTF-8">
  <title>br标记示例</title>
 </head>
 <body>
  这是第一行。<br>
  这是第二行。<br>
  这是第三行。<br>
  点赞<br>
  收藏<br>
  关注
 </body>
</html>

添加br标记后的网页效果:

微信图片_20221028234543.png


单标签还有:

<HR>
<!=绘制水平线-->
<BASEFONT>
<!=设置渲染文本时作为默认字体的基础字体值。-->
<COL>
<!=指定基于列的表格默认属性。-->
.....


2.双标记


双标记由首标记和尾标记两部分构成,必须成对使用;

首标记告诉Web浏览器从此处开始执行该标记所表示的功能;

尾标记告诉Web浏览器在此处结束该标记;


注意:左尖括号与右尖括号是任何标记的开始和结束,双标记中结束的标记总是在开始标记前加一个斜杠/


部分双标记示例:

<html>...</html><!=html开始与结束-->
<head>...</head><!=头部内容-->
<body>...</body><!=主体内容-->
<b>...</b><!=加粗-->
<i>...</i><!=斜体-->
<u>...</u><!=下划线字体-->
<p>...</p><!=段落o-->
<s>...</s><!=删除线字体-->

为了展示标记的效果,我们看下面代码:

<html>
 <head>
  <meta charset="UTF-8">
  <title>标记示例</title>
 </head>
 <body>
  这是第一行。<br>
  <p>这是一个段落</p><br>
  <b>加粗--</b>
  <i>斜体--</i>
  <u>下划线--</u>
  <s>删除线</s><br>
  <hr>
  <b><i>点赞</i></b><br>
  <s><i>收藏</i></s><br>
  <b><u><i>关注</i></u></b>
 </body>
</html>


网页效果:

微信图片_20221028234552.png


3.属性


HTML使用标记告诉浏览器如何展示网页,在此同时,还可以为标记元素附加一些信息,这些附加信息就是属性。

没有声明属性的标记,不代表没有属性,而是使用的默认属性。


在上文的展示中,我们是到了hr单标签可以在网页中绘制一条水平线,没有声明属性,默认就是实线,颜色是黑色。

<hr>

让我们来为它声明一些属性,改变其形态:

<html>
 <head>
  <meta charset="UTF-8">
  <title>标记示例</title>
 </head>
 <body>
  <p>这是一个段落</p><br>
  <hr size=50px color=greenyellow>
  <hr>
  <hr size="8px" align ="center" color=red>
  <b><i>点赞</i></b><br>
  <s><i>收藏</i></s><br>
  <b><u><i>关注</i></u></b>
 </body>
</html>

网页效果:

微信图片_20221028234601.png


通过代码中hr标签声明不同属性展示效果的对比,可以明显体会到属性的作用,可以按照爱好调整标签的样式属性。


属性语法基本就是:

属性名与标签名需要空格间隔开,属性值可用 “” 括起来,也可不用。

<标签名称 属性名1 = "属性值" 属性名2 = 属性值>

如果觉得文章实用:

–点赞

–收藏

–关注

微信图片_20221028215712.jpg



目录
相关文章
|
4月前
html基础语法
【2月更文挑战第26天】html基础语法
40 5
|
4月前
|
移动开发 前端开发 数据安全/隐私保护
HTML的基本语法以及如何使用HTML来创建网页
HTML的基本语法以及如何使用HTML来创建网页
100 0
|
11天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
38 19
|
11天前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
24天前
|
移动开发 HTML5
HTML5语法
【8月更文挑战第28天】HTML5语法。
32 3
|
1月前
|
存储 移动开发 前端开发
HTML5语法总结
这只是HTML5标准的一个简要概述。它涵盖了基本的元素和属性,还有很多其他细节和特性可以探索,例如Web存储、Web工作线程、离线Web应用等,这些都大大扩展了在网页中可能实现的功能。随着Web技术的不断发展,掌握HTML5是每个前端开发者的必修课,并且也是创建现代化、响应式和互动网页的基础。
38 5
|
1月前
Markdown使用HTML语法实现复杂表格
Markdown使用HTML语法实现复杂表格
72 1
|
2月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
2月前
|
开发者
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
33 1
|
3月前
|
移动开发 前端开发 JavaScript
html语法基础
【6月更文挑战第28天】html语法基础
27 1