【前端系列教程之HTML5】02_HTML文档结构_html 特殊属性属性名和值一样,可以省略属性值-优快云博客

本文链接：https://blog.youkuaiyun.com/ligonglanyuan/article/details/121291856

本文详细介绍了HTML文件的定义，强调HTML5的重要性，并解释了HTML的结构，如文档声明、HTML标签、DOCTYPE声明的不同版本。此外，讨论了HTML5的新语法变化，如标签不再区分大小写、元素可以省略结束标签等。还提到了HTML5的特性，如多设备兼容、即时更新、新的标签和表单控件。文章还涵盖了HTML标签的分类，包括块级元素、行内元素和行内块元素，并讨论了长度单位和HTML注释。最后，提供了HTML标签和属性的语法规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML文件(文档)定义

试想:我们上网访问到底做了什么?

上一节提到URL问题,组成部分由HTTP,服务器地址,端口号,资源路径;这些东西组成了我们上网访问所谓的网址,其中有服务器地址和路径,从这里来看可以明确的知道,我们要访问的文件是在某一个服务器的某个位置存储，我们所谓的请求,其实就相当于访问服务器上的某个文件,那么这个文件到底是什么?

网页文件既HTML文件,任何一个类型的文件都有指定的后缀,那么html文件的后缀名就是.html或.htm;

二、HTML的结构

无论是html还是其它后缀的动态页面[jsp]其html语言结构都是这样的，只是在命名网页文件时以不同的后缀结尾。

2.1 HTML文档声明

什么是文档声明?

在编写HTML或XML等文档时，需要先使用文档声明来声明HTML或XML等文档。且必须出现在文档的第一行。

这就好比我们在写java文件的时候需要声明class一样, 就是个硬性的规定.

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……开头的语句。

这一行，就是文档声明头，DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

!DOCTYPE ... 声明必须是 HTML 文档的第一行，位于 html 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

DocType Declaration，简称DTD。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

注释：<!DOCTYPE> 声明没有结束标签。<!DOCTYPE> 声明对大小写不敏感。

常用的 DOCTYPE 声明:

HTML 5:

<!DOCTYPE html>

DOCTYPE 英文意思是文档类型，也就是HTML的版本类型声明。HTML从最开始没有任何规范经历了比较流行的HTML4，之后进入HTML5时代，每个时期的规范都不一样，比如在较早版本的HTML中不能实现br换行这是因为HTML标签必须成对出现，所以必须要以br/来表示。而在HTML4 后期已经很模糊这个概念了，带不带 “/” 结尾都是一样的。而在HTML 5 中已经规定不需要带“/”，直接br就可以了。

HTML 4.01:

<!--HTML 4.01 Strict该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--HTML 4.01 Transitional该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--HTML 4.01 Frameset该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!--XHTML 1.0 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--XHTML 1.0 Transitional该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--XHTML 1.0 Frameset该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<!--XHTML 1.1该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

在所有 HTML 文档中规定 DOCTYPE 是非常重要的，这样浏览器就能了解预期的文档类型。HTML 4.01 中的 DOCTYPE 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

总结:

下面对上图中的三种小规范进行解释：

strict：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。

那怎么给文本增加下划线呢？今后的css将使用css属性来解决。

那么，XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。

Transitional：表示“普通的”，这种模式就是没有一些别的规范。

Frameset：表示“框架”，在框架的页面使用。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如  和 
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

2.2 HTML文档根标签

html 元素是 HTML 页面的根元素:

此元素可告知浏览器其自身是一个 HTML 文档。

html 与 /html 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

文档的头部由 head 标签定义，而主体由 body 标签定义。

2.3 HTML head头部

head/head 标签包含了文档的元（meta）数据，用于定义文档的头部，它是所有头部元素的容器。head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

下面这些标签可用在 head 部分：base, link, meta, script, style, 以及 title。

<head标签的子标签:

base：描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

base会对Html文档中所有URL产生作用，慎用！

link：定义文档与外部资源的关系，通常用于链接到样式表。

script：用来引入外部js或定义内部js代码

style：定义了HTML文档的样式文件引用地址.

title：定义文档的标题，它是 head 部分中唯一必需的元素。

title 标签定义了不同文档的标题。

title 在 HTML/XHTML 文档中是必须的。

title 元素:

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题

显示在搜索引擎结果页面的标题

meta：meta表示“元”。“元”配置，就是表示基本的配置项目。

meta标签相关:

1、指定字符集,charset就是charactor set（即“字符集”）    浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
   <meta charset="utf-8">

2、页面描述,name即“名字”，content即“内容”。只要设置Description页面描述，那么百度搜索结果，就能够显示这些语。
   <meta name="description" content="具体描述。。。">

3、关键字：就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。有助于搜索引擎SEC优化，。
   <meta name="Keywords" content="网易，邮箱，游戏，新闻">

4、重定向
   <meta http-equiv="refresh" content="3,http://www.baidu.com">
   <meta http-equiv="refresh" content="30">   30s刷新当前页面

5、页面刷新
   <meta http-equiv="refresh" content="3">

6、定义网页作者
	<meta name="author" content="Jimbo">

非meta标签相关：

1、定义标题
   <title>百度一下，你就知道</title>

2、加载网页logo
   <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon">

3、引入外部css文件
   <link rel="stylesheet" href="my.css">

4、引入本地css样式
   <style>p {
      color: rebeccapurple;
      }
   </style>

5、引入文件js，不建议在head标签引用js,需在body标签最后引用
   <script src="hello.js"></script>

2.4 HTML`<body>`主体

body 元素定义文档的主体。

body 元素包含了可见的页面内容（比如文本、超链接、图像、表格和列表等等。）

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

三、HTML5的语法变化

1、标签不再区分大小写

2、元素可以省略结束标签

3、允许省略属性值的属性(不是所有属性)

<!-- 例如： -->
	<input checked type = "checkbox"/>

<!-- 严格的语法定义： -->
	<input checked = "checked" type = "checkbox"/>

4、允许属性值不使用引号

<label><input type=text name=price id=price/></label>

如果某个属性的属性值包含空格等容易引起浏览混乱的属性值，那么HTML 5依然建议使用引号把这种特殊的属性值引起来。

注意：本着规范的原则，在编写代码时要用小写，标签与符号是成对出现的，这样也会使代码页面看起来整齐整洁

编程习惯: 标签小写,不能省略结束标签,不要省略属性值的引号;但是可以省略属性值;

四、HTML5特点及优势

优点:

1、网络标准统一、HTML5本身是由W3C推荐出来的。

2、多设备、跨平台

3、即时更新。

4、提高可用性和改进用户的友好体验；

5、有几个新的标签，这将有助于开发人员定义重要的内容；

6、可以给站点带来更多的多媒体元素(视频和音频)；

7、可以很好的替代Flash和Silverlight；

8、涉及到网站的抓取和索引的时候，对于SEO很友好；

9、被大量应用于移动应用程序和游戏。

缺点:

1、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。

2、完善性：许多特性各浏览器的支持程度也不一样。

3、性能：某些平台上的引擎问题导致HTML5性能低下。

4、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

五、HTML5的新特性

用以绘画的 canvas 元素

用以媒介播放的 video 和 audio 元素

对本地离线存储的更好的支持

新的语义化标签例如:article footer header nav section

新的表单控件 例如:calendar date time email url search

六、HTML标签分类

html标签又叫做html元素，它分为块级元素、行内块元素和行内元素（也可以叫做内联元素），都是html规范中的概念。

PS:也有很多网站上面阐述:分为两类--> 块级元素、行内元素

6.1 块级标签

块级元素是指本身样式属性为display:block;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建。

块级元素的特点：（独占一行，可以设置宽高）

独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布

可以直接控制宽度、高度以及盒子模型的相关css属性

在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度

在不设置高度的情况下，块级元素的高度是它本身内容的高度

常用的块级元素:

标签	描述
div	常用块级容器，也是css layout的主要标签
h1~h6	标题标签
hr	水平分隔线
ol	有序列表
ul	无序列表
li	列表项
dl	自定义列表
dt	自定义列表项
dd	定义描述
table	表格
p	段落
form	交互表单

6.2 行内元素

内联元素是指本身属性为display:inline;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。

行内元素的特点:（有多大占多大，不可以设置宽高）

和其他内联元素从左到右在一行显示

不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的

内联元素的宽高是由本身内容的大小决定（文字、图片等）

内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）

常用的行内元素:

标签	描述
span	常用内联容器，定义文本内区块
a	锚点，超链接
b	加粗
strong	加粗强调
i	斜体
em	斜体强调
del	文档中已被删除的文本
br	强制换行
u	下划线
textarea	多行文本输入框
input	输入框
select	下拉列表
sub	下标
sup	上标
small	小字体文本

6.3 行内块元素

行内块元素是指本身属性为display:inline-block;的元素。

行内块元素的特点:（有多大占多大，可以设置宽高）

元素排列在一行

宽度默认由内容决定

元素间默认有间距

支持宽高、外边距、内边距的所有样式的设置

常用的行内元素:

标签	描述
img	图片标签

七、HTML和CSS中的长度单位

CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性：width、height、margin、padding、border。除此之外还有很多其他的CSS属性的值同样也是长度值，像偏移量(offset)、box-shadow的大小或者字体的大小、间距等。CSS中有哪些长度单位可以作为属性的值呢？这样的单位有很多。

7.1 绝对长度单位

.wrap { width: 400px; }

像素或许被认为是最好的“设备像素”，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

像素应该是设备和显示器中显示趋于一致，但是他越来越不正确。比如：在迷你ipad上显示的网站和ipad本身显示的网页是一样的，意味着如果那些设置的像素值标准化后就超出了窗口的范围

在web上，像素仍然是典型的度量单位，很多其他长度单位直接映射成像素，最终，他们被按照像素处理，javascript语言里的单位就是使用的像素。

.wrap { width: 4in; }

英寸是一个物理度量单位，但是在CSS领域，英寸只不过被直接映射成像素罢了。

但是，到目前为止我还没有见过哪个实例用的是英寸，当然也没见过使用下面那些物理度量单位的实例。

1in == 96px

.wrap { width: 20cm; }

对于世界上大多数的人来说，厘米是比较熟悉有用的物理度量单位。它也映射成像素。

1cm == 37.8px

.wrap { width: 200mm; }

毫米是个小数量级的物理度量单位。

1mm == 0.1cm == 3.78px

7.2 相对字体的长度

.wrap { width: 40em; }

em 是一个相对单位。起初排版度量时是基于当前字体大写字母”M”的尺寸的。当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生变化。

在没有任何CSS规则的前提下，1em的长度是：

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm 浏览器默认字体大小16px

如果有任何CSS规则改变了字体大小（不管在文档的什么位置），1em的长度会变成相对于新的font-size的大小。

em单位有点古怪，当设置了font-size属性后，它会逐级向上相乘，所以如果一个设置了font-size:1.1em的元素在另一个设置了font-size:1.1em的元素里，而这个元素又在另一个设置了font-size:1.1em的元素里，那么最后计算的结果是1.1X1.1X1.1=1.331rem（根em）。这意味着即使一个元素设置为10em，这个元素也不会在他出现的每个地方都是10em。如果font-size变化了，它可能会宽点，也可能会窄点。

rem

.wrap { width: 40rem; }

rem和em一样也是一个相对单位，但是和em不同的是rem总是相对于根元素(如:root{})，而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。

值得注意的浏览器支持问题： IE8，, Safari 4或 iOS 3.2中不支持rem单位。

points

.wrap { width: 12pc; }

Point是一个物理度量单位，1pt=1/72 in.在CSS之外point是最常用的尺寸类型（可能这就是css支持point的原因）。它在语言里也很常见“当然他们把这个重要的信息设置成了小八号字体”。

在打印样式表和物理媒介中，point是最有意义的，当然你也可以用在屏幕媒介上使用，或者其他的地方

值得注意的浏览器支持问题：在屏幕呈现pt尺寸的时候，会有很大的不同。

pica

.wrap { width: 12pc; }

Pica和points一样，只不过1pc=12pt。

ex是一个基于当前字体的x字母高度度量的。ex度量时有时候根据字体自身的信息，有时候由浏览器指明是通过一个小写字形来度量，最糟糕的情况是，它被设置成0.5em。它之所以被命名为“x”的高度，是因为是基于x字母的高度的。要理解x-height，想象一个小写字母，比如“d”，它会有一部分翘起，x-height是不包括翘起的这一部分的，它的高度是那个字母最下面的那一部分。

ch的内涵和x高度相似，只是ch是基于字符0的宽度的而不是基于字符x高度的。当font-family改变的时候ch也会随着改变。

值得注意的浏览器支持问题：任何一个webkit内核的浏览器都不支持这个单位。

7.3 可视区百分比长度单位

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

vh和vw（viewport widht）单位一样，不同的是vh是相对于可视区的高度。

vmin

vmin的值是当前vw和vh中较小的值。在标准尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。

vmax

vmax的值是vw和vh中的较大的值。

值得注意的浏览器支持问题：webkit内核的浏览器支持vmin，不支持vmax。但是Firefox支持vmax。

7.4 离奇的长度单位

百分比

以百分比为单位的长度值是基于具有相同属性的父元素的长度值。例如，如果一个元素呈现的宽度是450px，子元素的宽度设为50%，那么子元素呈现的宽度为225px。

杂言：百分比不是一个专门的长度单位，我把它也包括在本文中是因为百分比和长度关系很大。

八、HTML注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。写法:

注释: 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

九、HTML文档快捷语法

写出指定规则,按住tab即可快速创建HTML文档

标签名快速创建标签

标签名{标签内容}：快速创建标签及内容

标签名属性名=属性值{内容}：快速创建标签、标签属性及内容

$表示一个具体的递增的数值,一般情况下*结合使用,创建多个相同标签的时候使用shi

<!-- 快捷语法的实现：tab一下 -->
<!-- 写上标签名,可以快速创建完整的标签标记 -->
<a href="">百度一下</a>

<!-- 标签名{内容}：创建标签及其内容 -->
<p>我是p标签的内容</p>

<!-- 标签名[属性名=值]: 创建标签及其属性及其值 -->
<p id="cp1">我的id为cp1的p标签</p>

<!-- 标签名[属性名=值]{内容} -->
<p id="cp2">我是标签的内容</p>

<!-- 标签名*数值：一次性创建多个标签 -->
<p>我是p标签的内容</p>
<p>我是p标签的内容</p>
<p>我是p标签的内容</p>
<p>我是p标签的内容</p>
<p>我是p标签的内容</p>

<!-- 标签名[属性名=值$]*数值 -->
<!-- $必须结合*来使用,表示从1开始的数值 -->
<p id="cp1">我是第 001 个p标签的内容</p>
<p id="cp2">我是第 002 个p标签的内容</p>
<p id="cp3">我是第 003 个p标签的内容</p>
<p id="cp4">我是第 004 个p标签的内容</p>
<p id="cp5">我是第 005 个p标签的内容</p>

<!-- 父标签>子标签：创建父标签及其子标签 -->
<div id="div1">
    <p>我是div1里面的p元素</p>
</div>

<div id="div2">
    <p>我是div1里面的第1个p标签</p>
    <p>我是div1里面的第2个p标签</p>
    <p>我是div1里面的第3个p标签</p>
    <p>我是div1里面的第4个p标签</p>
    <p>我是div1里面的第5个p标签</p>
</div>

<!-- 标签名1+标签名2：创建兄弟标签 -->
<h1>我是h1的内容</h1>
<h1>我是h1的内容</h1>
<h1>我是h1的内容</h1>
<p>我是p的内容</p>
<p>我是p的内容</p>

<!-- 块级创建表格 -->
table>tr*5>td{我是单元格内容}*3