文章目录
2.1 标签中的属性
（1）自结束标签与注释
- 例如
<img><input>，这些都是自结束标签，标签一般成对出现，但是自结束标签只有一个。 - HTML的注释写法为
<!-- 内容 -->，注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的，注释不能嵌套。
（2）属性
- 在标签中（开始标签或自结束标签）可以设置属性，属性是一个名值对，属性和标签名或其他属性应该使用空格隔开。
- 属性不能瞎写，应该根据文档中的规定来编写，有些属性有属性值，有些没有。如果有属性值，属性值应该使用引号（单引号双引号均可，统一）引起来。
示例如下：
<html>
<head>
<title>标签的属性</title>
</head>
<body>
<h1>这是<font color="red" size="3">第二个</font>网页</h1>
</body>
</html>
2.2 实体
有些时候，在HTML中不能直接书写一些特殊符号，如：
- 多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）。
- 比如字母两侧的大于小于号（可能会被认为是标签并解析）。
如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符），实体的语法：&实体的名字;，如：
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| " | 引号 | " |
| ¥ | 元 | ¥ |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实体</title>
</head>
<body>
<p>
今天 的 天气真不错！
</p>
<p>
a<b<c
</p>
</body>
</html>
更多的实体，可以参考这两个文档：HTML字符实体和HTML ISO-8859-1 参考手册
2.3 meta标签
（1）meta主要用于设置网页中的一些元数据，元数据并不是给用户看的。
- charset ：指定网页的字符集。
- name ：指定的数据的名称。
- keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用
,隔开。 - description：表示网站的描述信息。
- keywords：表示网站的关键字，可以同时指定多个关键字，关键字间使用
- content ：指定的数据的内容，会作为搜索结果的超链接上的文字显示。
示例如下（以京东为例）：
<meta charset="utf8" version='1'/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
（2）http-equiv属性
- 如果设置了http-equiv属性，
<meta>元素就是一个pragma指令，提供的信息相当于一个类似名称的HTTP头所能提供的信息。 - content-security-policy：允许页面作者为当前页面定义一个内容策略。内容策略主要指定允许的服务器来源和脚本端点，这有助于防范跨站脚本攻击。
- content-type：声明文档的MIME类型和字符编码。如果指定，content属性必须有 "text/html; charset=utf-8 "的值。这相当于一个指定了charset属性的
<meta>元素，并对文档中的位置有同样的限制。注意：只能在使用text/html的文档中使用，不能在使用XML MIME类型的文档中使用。 - default-style：设置默认的CSS样式表集的名称。
- x-ua-compatible： 如果指定，内容属性必须有 "IE=edge "的值。用户代理被要求忽略这个pragma。
- refresh：该指令指定页面重新加载及重定向的方式
- 直到页面应该被重新加载的秒数–只有当content属性包含一个正整数时。
- 直到页面重定向到另一个页面的秒数–只有当内容属性包含一个正整数，后面跟着字符串’
;url='，以及一个有效的URL。
2.4 语义化标签
在网页中HTML专门用来负责网页的结构，所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。
| 标签 | 作用 | 描述 | |
|---|---|---|---|
| 块元素 Block Element |
<h1> <h2> <h3> <h4> <h5> <h6> |
标题 | 一共有六级标题 从 h1 ~ h6重要性递减，h1最重要，h6最不重要h1在网页中的重要性仅次于 title标签一般情况下一个页面中只会有一个 h1一般情况下标题标签只会使用到 h1 ～ h3，h4 ～ h6很少用 |
<hgroup> |
标题组 | <hgroup>标签用来为标题分组，可以将一组相关的标题同时放入到<hgroup> |
|
<p> |
段落 | 页面中的一个段落。由空行或第一行缩进将相邻的文本块分开 | |
<blockquote> |
长引用 | 用缩进表示所包含文本 | |
| 行内元素 Inline Element |
<q> |
短引用 | 用一个简短的内联引号包围文本 大多数浏览器通过在文本周围加上引号来实现 |
<br/> |
换行 | ||
<em> |
强调 | 表示强调作用,<em>元素可以嵌套，每一级嵌套表示更高的强调程度<i>元素效果与它相同，不过<i>不属于语义标签 |
|
<strong> |
重要 | 表示重要性、严肃性或紧迫性,浏览器通常以粗体字呈现内容<b>元素效果与它相同，不过<b>不属于语义标签 |
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一</h2>
</hgroup>
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<p>今天天气<em>真</em>不错！</p>
<p>你今天必须要<strong>完成作业</strong>！</p>
鲁迅说：
<blockquote>
这句话我是从来没有说过的！
</blockquote>
子曰<q>学而时习之，乐呵乐呵！</q>
<br>
<br>
今天天气真不错
</body>
</html>
2.5 块元素、行内元素、内容修正
（1）块元素
- 在网页中一般通过块元素来对页面进行布局。
（2）行内元素
- 行内元素主要用来包裹文字。
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素。
- 块元素中基本上什么都能放，p元素中不能放任何的块元素。
（3）内容修正
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如
- 标签写在了根元素的外部。
- p元素中嵌套了块元素。
- 根元素中出现了除head和body以外的子元素等情况。
这个通过浏览器中的查看网页源代码并不能看到效果，但是使用F12进行开发者调试时是能够看到上述几种情况被修正的结果。
虽然浏览器能够对不规范的页面内容进行修正，但是不建议编写不规范的代码，因为这对后期代码维护或团队代码协作将是非常不好的后果和体验。
2.6 布局标签
网页的基本布局如下图所示：
下面对其中的标签进行解释说明：
-
header表示网页的头部（页眉），介绍性的内容。 -
main表示网页的主体部分（一个页面中只会有一个main）。 -
footer表示网页的底部（页脚），通常包含有关作者的信息、版权或文件链接。 -
nav表示网页中的导航，可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引。 -
aside和主体相关的其他内容（侧边栏），其内容与文档的主要内容只有间接的关系，经常以边栏或呼出框的形式出现。 -
article表示一个独立的文章，自成一体，独立分发，可重复使用。 -
section表示一个独立的区块，上边的标签都不能表示时使用section。 -
div块元素，没有任何的语义，就用来表示一个区块，目前来讲，div还是主要的布局元素。 -
span行内元素，没有任何的语义，一般用于在网页中选中文字。
2.7 列表
（1）有序列表
有序列表，使用<ol>标签来创建有序列表，使用<li>表示列表项。
（2）无序列表
无序列表，使用<ul>标签来创建无序列表，使用<li>表示列表项。
（3）定义列表
使用<dl>标签来创建一个定义列表，使用<dt>来表示定义的内容，使用<dd>来对内容进行解释说明。
列表之间可以互相嵌套，示例如下。
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
2.8 超链接
（1）超链接简介
- 超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。
- 使用
<a>标签来定义超链接，属性href指定跳转的目标路径，可以是一个外部网站的地址，也可以写一个内部页面的地址。 - 超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。
（2）相对路径
- 当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径。
- 相对路径都会使用
./或..//开头，./可以省略不写，如果不写./也不写../则就相当于写了./。 ./表示当前文件所在的目录，../表示当前文件所在目录的上一级目录。
（3）其他用法
1.target属性，用来指定超链接打开的位置。
- _self 默认值 在当前页面中打开超链接。
- _blank 在一个新的要么中打开超链接。
2.可以直接将超链接的href属性设置为#，这样点击超链接以后，页面不会发生跳转，而是转到当前页面的顶部的位置。
3.如果想跳转到页面的指定位置，只需将href属性设置#目标元素的id属性值，每一个标签都可以添加一个id属性，id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性。
4.在开发中可以将#作为超链接的路径的占位符使用，也可以使用javascript:;来作为href的属性，此时点击这个超链接什么也不会发生。
2.9 图片
（1）图片标签
图片标签用于向当前页面中引入一个外部图片，使用img标签来引入外部图片，img标签是一个自结束标签，img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点），常见属性如下：
src属性指定的是外部图片的路径（路径规则和超链接是一样的）。alt图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示。搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所收录。width为图片的宽度 (单位是像素)，height为图片的高度，宽度和高度中如果只修改了一个，则另一个会等比例缩放。
注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）。
（2）图片格式
1.jpeg(jpg)
- 支持的颜色比较丰富，不支持透明效果，不支持动图。
- 一般用来显示照片。
2.gif
- 支持的颜色比较少，支持简单透明，支持动图。
- 颜色单一的图片，动图。
3.png
- 支持的颜色丰富，支持复杂透明，不支持动图。
- 颜色丰富，复杂透明图片（专为网页而生）。
4.webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式。
- 它具备其他图片格式的所有优点，而且文件还特别的小。
- 缺点：兼容性不好。
5.base64
- 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片。
- 一般都是一些需要和网页一起加载的图片才会使用base64。
总结：效果一样，用小的；效果不一样，用效果好的。
2.10 内联框架
内联框架，用于向当前页面中引入一个其他页面。
src指定要引入的网页的路径。frameborder指定内联框架的边框。
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
2.11 音视频
（1）音频
audio标签用来向页面中引入一个外部的音频文件，音视频文件引入时，默认情况下不允许用户自己控制播放停止，该标签主要属性如下：
controls是否允许用户控制播放。autoplay音频文件是否自动播放。- 如果设置了
autoplay，则音乐在打开页面时会自动播放。 - 但是目前来讲大部分浏览器都不会自动对音乐进行播放。
- 如果设置了
loop音乐是否循环播放。
<audio src="./source/audio.mp3" controls autoplay loop></audio>
（2）source元素与embed元素
除了通过src属性来指定外部文件的路径以外，还可以通过<source>元素来指定文件的路径。
<audio controls>
对不起，您的浏览器不支持播放音频！请升级浏览器！
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio>
该音频在IE9、10、11下均可正常播放，但是在IE8下会出现自定义提示信息。
原因是IE8下不支持audio元素，但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容，这个内容是由外部应用程序或其他互动内容的来源提供的，如浏览器插件。
<embed src="./source/audio.mp3">
（3）视频
使用video标签来向网页中引入一个视频，使用方式和audio基本上是一样的，通过iframe和embed的方式也引入视频。
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=b00318l66nt" allowFullScreen="true" width="500" height="300"></iframe>