文章目录
标签查找
一、简介
1、前端开发最核心技术
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
(1) html是什么？
超文本标记语言（外国语简称：HTML）标记标签通常被称为HTML标签，HTML标签是HTML语言中最基本的单位，HTML标签是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
HTML标签的大小写无关的，例如“主体”跟表示的意思是一样的，推荐使用小写。
(2) css
CSS（层叠样式表） 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS节省了大量的工作。 样式可以通过定义，保存在外部.css文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。
(3) javaScript
JavaScript 编程语言允许你在 Web 页面上实现复杂的功能。. 如果你看到一个网页不仅仅显示静态的信息，而是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等——你基本可以确定，这需要 JavaScript 的参与。.
2、前端开发必须的其他核心技术
前端技术最核心的是HTML、CSS和JavaScript，但是对于一个真正的前端工程师来说，哪怕你精通这三个，你也不能称为一个真正的“前端工程师”。 因为前端技术除了HTML、CSS和JavaScript这三种，还需要学习Ajax、SEO，vue等。
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Ajax，即“Asynchronous Javascript And XML（异步JavaScript和XML）”，是指一种创建交互式网页应用的网页开发技术。
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。
二、Html基础内容
1、 html语言的基本标签
(1) HTML标签
整个网页是从<html>这里开始的，然后到结束。
(2)head标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
| <head>内部标签 | 说明 |
|---|---|
| < title > | 定义网页的标题 |
| < meta> | 定义网页的基本信息（供搜索引擎） |
| <style > | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
(2)body标签
body标签代表页面的主体，定义网页展示的内容，这些内容往往都是“可见内容”（在浏览器可见）。
2、段落与文字
(一)、段落标签
(1)、段落标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~ <h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
(2)、文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup> | superscripted（上标 | 上标 |
| <sub> | subscripted（下标） | 下标 |
(二)、网页特殊符号
网页特殊符号只需要记忆一个就行了，就是HTML的空格“ ”，当需要使用其他的特殊符号时点此链接查找可查找: link.
【载自：前端向朔 .】
(三)、自闭合标签
HTML标签分为2种，一种是“一般标签”，另外一种是“自闭合标签”。一般标签有开始符号和结束符号，自闭合标签只有开始符号没有结束符号。
一般标签可以在开始符号和结束符号之间插入其他标签或文字。
自闭合标签由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
(1)、一般标签
举例： <body> </body>
(2)、自闭合标签
<br/> 、<hr/>
(四)、块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
- （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
- （2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
- （1）可以与其他行内元素位于同一行；
- （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果；
常见行内元素有：strong、em、span等。
3、列表
(一)、列表
列表分为以下三种：
- 有序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表使用 <ul> 标签
- 无序列表： 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于<li> 标签。列表项使用数字来标记。
- 定义列表:自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
| 标签 | 语义 |
|---|---|
| <ol> | 有序列表 |
| <ul> | 无序列表 |
| <dl> | 定义列表 |
(1)、有序列表
type属性可以改变列表符号的样式,start属性可以修改其开始的值，不添加type属性默认为数字1、2、3....
| type属性值 | 列表项的序号类型 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50" type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
演示结果：
(2)、无序列表
是三个列表中最重要的一个列表，其中type属性可以改变列表符号的样式,默认为实心圆
| type属性值 | 列表项的序号类型 |
|---|---|
| disc | 默认值，实心圆“●” |
| circle | 空心圆“○” |
| square | 实心正方形“■” |
<h4>无序列表:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul type="square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
演示结果：
(3)、定义列表
说明：
<dl>即“definition list（定义列表）”，<dt>即“definition term（定义名词）”，而<dd>即“definition description（定义描述）”。
在该语法中，<dl>标记和</dl>标记分别定义了定义列表的开始和结束，<dt>后面添加要解释的名词，而在<dd>后面则添加该名词的具体解释。
<dl>
<dt>定义名词1</dt>
<dd>定义描述1</dd>
<dt>定义名词2</dt>
<dd>定义描述2</dd>
</dl>
演示结果：
(二)注意事项 - 有用提示
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
4、表格
(一)、表格标签
| 标签 | 描述 |
|---|---|
| table | 定义表格 |
| caption | 定义表格标题 |
| tr | 定义表格中的行 |
| td | 定义表格中的单元 |
| th | 定义表格中的表头单元格 |
| thead | 定义表格中的表头内容 |
| tbody | 定义表格中的主体内容 |
| tfoot | 定义表格中的表注内容（脚注） |
| col | 定义表格中一个或多个列的属性值 |
<!--定义表格-->
<table border="1" cellspacing="0">
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1（表头）</th>
<th>表头单元格2（表头）</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1（表身）</td>
<td>标准单元格2（表身）</td>
</tr>
<tr>
<td>标准单元格1（表身）</td>
<td>标准单元格2（表身）</td>
</tr>
</tbody>
<!--表注脚-->
<tfoot>
<tr>
<td>标准单元格1（注脚）</td>
<td>标准单元格2（注脚）</td>
</tr>
</tfoot>
</table>
演示结果：
(二)合并单元格
（1）合并行
语法：<td rowspan=“跨度的行数”>
<table border="1">
<!--第1行-->
<tr>
<td>一行一列:</td>
<td>一行二列</td>
</tr>
<!--第2行-->
<tr>
<td rowspan="2">二行一列:</td>
<td>二行二列</td>
</tr>
<!--第3行-->
<tr>
<td>三行一列</td>
</tr>
</table>
演示结果 ：
(2) 合并列
语法：<td colspan=“跨度的列数”>
<table border="1">
<!--第1行-->
<tr>
<td colspan="2">一行一列</td>
</tr>
<!--第2行-->
<tr>
<td >二行一列:</td>
<td>二行二列</td>
</tr>
<!--第3行-->
<tr>
<td>三行一列</td>
<td>三行二列</td>
</tr>
</table>
演示结果：
5、图片
在HTML中，图像标签为。是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。
| 属性 | 描述 |
|---|---|
| src | 图像的文件地址 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上的提示文字 |
6、链接
超链接使用a标签，语法如下：
<a href=“链接地址” target=“目标窗口的打开方式”>
| target属性值 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
我们只需要掌握“_self”和“_blank”这两个属性值就可以了，其他两个用不到。
(一)锚点链接
<html>
<head>
<title>锚点链接</title>
</head>
<body>
<div>
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
<a href="#article">推荐文章</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的下图</li>
<li>曲婉婷-在我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系统</li>
<li>复仇者联盟</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br /
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
</body>
</html>
锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。如下图：(可自行复制上面代码演示)
只要我们点击“推荐音乐”、“推荐电影”和“推荐文章”这三个超链接，滚动条就会滚动到相应的版块。
7、表单
表单标签共有4个：<input>、<textarea>、<select>和<option>。其中和是配合使用的。
(一）input标签
大部分的表单都是用input去完成的
语法：
<input type=“表单类型”/>
说明：
当type属性不同时，它所代表的功能也不同。以下是几个常用的不同type属性所展现的效果
(二)、textarea标签表单
(1)、多行文本框语法：
<textarea rows=“行数” cols=“列数”>多行文本框内容
表现形式如下：
(三)、textarea标签表单
下拉列表由标签和标签配合使用。
语法：
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi" >Audi</option>
</select>
9、多媒体
(一)、插入音频、视频和flash
在网页中插入音频、视频和flash都是使用embed标签。
语法：
<embed src=“多媒体文件地址” width=“播放界面的宽度” height=“播放界面的高度”></embed>
说明：
多媒体文件地址可以是相对地址，也可以是绝对地址。
width和height使用px作为单位。
三、Html扩展知识
1、HTML、XHTML和HTML5
我经常分不清楚HTML、XHTML和HTML5，特地摘录一些文章以供参考。
(一）、HTML 和 XHTML
HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的 主要语言。我们常说的HTML指的是HTML 4.01。
XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。
HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语 法越松散，处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML
XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML主要区别如下。
(1)、XHTML标签必须闭合
在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标 签也需要闭合，例如<br>要写成<br/>。
错误写法：<p>欢迎来到绿叶学习网
正确写法：<p>欢迎来到绿叶学习网</p>
(2)、XHTML标签以及属性必须小写
在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。
错误写法：<Body><DIV></DlV></Body>
正确写法：<body><div></div></body>
(3)、XHTML标签属性必须用引号。
在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。
错误写法：<input id=txt type=text/>
正确写法：<input id=“txt” type=“text”/>
(4)、XHTML标签用id属性代替name属性。
在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。
错误写法：<div name=“wrapper”></div>
正确写法：<div id=“wrapper”></div>
下面是一个完整的XHTML文档。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>
(二）HTML5
HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。
不过HTML 5已经不再是单纯意义上的标签了，它已经远远超越了标签的范畴。HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。
对于HTML 5中的新技术，在此不做详细介绍。单纯从新增的标签上来看，HTML 5有 以下几个特点。
（1）、文档类型说明
基于HTML 5设计准则中的“化繁为简”原则，页面的文档类型<!DOCTYPE>被极大地 简化了。
XHTML文档声明如下：
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
HTML5文档声明如下：
<!DOCTYPE html5>
（2）、标签不再区分大小写
<div>绿叶学习网</DIV>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属 性都采用小写方式。
（3）、允许属性值不加引号
<div id=wrapper style=co1or: red> 绿叶学习网 </div>
上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值 都加引号，单引号或双引号都可以。
（4）、允许部分属性的属性值省略
在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符 合HTML 5规范的：看似杂乱无章，实则杂乱无章 但是在html5 它却是可行的
<input type="ntext" readonly/>
<input type="checkbox" checked/>
一句话概括 HTML、XHTML 和 HTML 5 就是：HTML 指的是 HTML 4.01, XHTML 是HTML的过渡版，HTML5是HTML的升级版。
2、div和span
对于div和span这两个元素，使用起来也不能很随便。因此，这里有必要简单介绍一下。
div和span没有任何语义,正是因为没有语义，这两个标签一般都是配合CSS来定义元素 样式的。
(一）、div和span区别如下：
(1 ) div是块元素，可以包含任何块元素和行内元素，不会与其他元素位于同一行；span 是行内元素，可以与其他行内元素位于同一行。
(2 ) div常用于页面中较大块的结构划分，然后配合CSS来操作；span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。
其实，除了 div和span外，还有一个label标签。div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>
在这个例子中，我们想要对“视觉化思考”这几个文字加粗或者改变颜色，此时可以 使用span包含文字，然后再进行样式修改。事实上，span标签往往都是用来配合CSS来 修饰元素的。
3、id和class
id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选 择元素，以便进行CSS操作或者JavaScript操作。但是很多新手对id和class这两个属性感 到很迷茫，不知道什么时候用id,什么时候用class,甚至随便使用。1
(一）id 属性
id属性具有唯一性，也就是说在一个页面中相同的id只允许出现一次。W3C建议，对 于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、 主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。
我们知道搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。对于id和 class的命名，我们在CSS进阶部分会详细介绍。
(二）class属性
class,顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。 我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元 素具有相同的CSS样式。
如果你要为两个或者两个以上元素定义相同的样式，建议使用class属性。因为这样可以 减少大量的重复代码。
注意，对于一个元素而言，我们可以定义多个classo 一般来说，定义多个class的目的 在于：一般用一个class抽取公共样式，然后用另外一个class定义单独样式。
对于id和class,我们总结一下：对于页面关键结构，建议使用id；对于小地方，建议 使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。
4、浏览器标题栏小图标
在浏览网页的时候，我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小 图标
想要实现这个效果，我们只需要在head标签添加一个link标签即可。
语法：
<link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>
说明：
rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址, 这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。
这里注意一下，小图标格式是.ico,而不是.jpeg、.png、.gif等格式。对于.ico格式的 图标制作，我们可以搜索一下“在线icon",会发现很多不错的在线工具，大家可以收藏一下。
5、语义化
(一）简介
由于HTML简单，很多初学者对它存在一种偏见，觉得它没多少东西，因此在学习的过 程中随便对待。其实，学习HTML的重点不在于掌握了多少标签，而是在于掌握标签的语义 以及如何编写一个语义结构良好的页面。
在实际开发过程中，很多人由于对标签语义不熟悉，常常用某一个标签代替另外一个标 签来实现某些效果。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.body {
font-family: "微软雅黑";
font-size: 14px;
}
.content {
width: 300px;
padding: 10px;
border: 1px dashed gray;
}
.content div {
font-size: 16px;
font-weight: bold;
height: 24px;
line-height: 24px;
}
</style>
</head>
<body>
<div class='content'>
<div>web 前端开发 </div>
<p>web前端开发最核心3个技术：HTML、CSS和JavaScript HTML控制网页的 结构，CSS控制网页的样式，JavaScript控制网页的行为。</p>
</div>
</body>
</html>
在浏览器预览效果如图所示。
对于上面的标题效果，正确的做法应该是
使用h1 ~ h6标签来实现，但这里却使用div 来代替了。虽然页面效果一样，但是这种“用某一个标签代替另外一个标签来实现相同效果”的做法是完全不可取的，因为它违背了 HTML这 门语言的初衷。
HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义，例如p标签，表示的是"paragraph",标记的是一个段落；hl标签，表示“headerl”,标记的是一 个最高级标题……而div和span是无语义的标签，我们应该尽可能少用。
HTML很简单，因此很多初学者往往忽略了它的目的和重要性。我们学习HTML并不 是看自己学了多少标签，更重要的是在你需要的地方能否用到正确的语义化标签。把标签用在对的地方，这才是HTML学习的目的所在。
我们都知道前端最核心的技术是HTML、CSS和JavaScript这三种。.其中HTML是网 页的结构，CSS是网页的外观，JavaScript是网页的行为。在这三大元素中，HTML才是最 重要的，而CSS和.JavaScript只是用来修饰结构的。就像你盖房子，房子装饰得再漂亮，如果结构不稳也容易塌。
整站开发时，编写的代码往往都是成千上万行，如果我们全部使用div和span来代替 语义化标签，后期维护会非常困难。此外对于一个页面来说，我们可以根据一个页面的外观来判断哪些是标题，哪些是图片。但是搜索引擎跟人不一样，它可“看不懂” 一个页面长什 么样的。它只会根据HTML代码来识别。搜索引擎一般都是根据HTML标签来识别这里是 一个img标签，那里是一个p标签等。如果整个页面都是div和span,捜索引擎小爬虫很容易会迷路，可能以后都不想来光顾你这个站点，这样你的老板肯定要崩溃了。
从上面我们知道，编写一个语义结构良好的页面在实际开发中极其重要。主要有两个最大的优点：①利于开发调试和后期维护；②利于搜索引擎优化。
(二）标题语义化
h1 - h6是标题标签，h表示“header”。h1~ h6在HTML语义化中占有极其重要的地位。 h1 ~ h6按照标题的重要性依次递减，其中h1重要性最高，h6重要性最低。
相对于其他语义化标签，h1~ h6在搜索引擎优化(即SEO)中占有相当重要的地位。 在一个页面中，h1 ~ h6这6个标签，我们不需要全部都用上，都是根据需要才用的。对于 h1~ h6,—般情况下我们只会用到h1、h2、h3和h4，很少再会去用h5和h6,因为一个页面不可能用到那么多级的标题。并且从搜索引擎优化的角度来说，h1、h2、h3和h4这4个 标签会被赋予一定的权重，而h5和h6的权重跟普通标签差不多，在SEO优化上意义不大。
对于标题h1 ~ h6的语义化，我们需要注意以下四个方面。
(1）一个页面只能有一个h1标签。
hl标签表示每个页面中最高层级的标题，捜索引擎会赋予hl标签最高权重。虽然W3C 没有明确规定一个页面不能有多个h1标签，但是我们还是推荐“一个页面一个h1标签”的 做法。如果一个页面出现多个h1,对搜索引擎可能不好，也可能会被判以作弊。就像你写文 章一样，一个页面就等于一篇文章，你见过一篇文章有多个主标题的么？
(2）h1 ~ h6之间不要断层。
搜索引擎对h1 ~ h6标签比较敏感，尤其是h1和h2。一个语义良好的页面，h1~ h6 应该是完整有序而没有出现断层的。也就是说，要按照“h1、h2、h3、h4”这样的顺序依次 排列下来，不要出现“h1、h3、h4”而漏掉h2的情况。
(3）不要用h1 ~ h6来定义样式。
我们都知道h1 ~ h6是有默认样式的，如图所示。在实际开发中，很多时候我们需 要为文本定义字体加粗或者字体大小。有些人喜欢用h1 ~ h6来代替CSS,使用标签来控制 样式，这是一种非常不好的做法。我们一定要记住，HTML关注的是结构(语义)，CSS关注 的是样式，结构跟样式应该分离。
(4）不要用div来代替h1 ~ h6.
从语义上来说，一个页面的标题应该使用h1〜h6标签，不要使用div来代替。
分析：
div是无语义的标签，如果使用div来代替h1〜h6,后期维护比较困难，而且对搜索引擎优化(SEO) 影响也非常大。因为这种做法会让一个页面丢失大量的权重。
(三）图片语义化
在HTML中，我们使用img标签来表示图片。对于图片的语义化，我们从以下两个方面 来深入探讨一下。
(1)、alt属性和title属性
img标签有两个重要属性：alt和title。
alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面 会显示alt中的文字。
title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上时，会显示title中的内容。
语法：
<img src="" alt=“图片描述(给搜索引擎看)” title=“图片描述(给用户看)”>
说明：
搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会査看HTML代码， 通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。
请一定要注意；alt属性是img标签必需属性，一定要添加；title属性是img标签可选属 性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。
(2)、 figure 元素和 figcaption 元素
对于如图所示的这种“图片+图注”的效果，我们可以使用如下代码来实现。
<div class="img-list">
<img src="" alt=""/>
<span>HTML入门教程 </span>
<div>
但是这种实现方式的语义并不好。在HTML 5中，引入了 figure和figcaption两个元素 来增强图片的语义化。
语法：
<figure>
<img src="" alt=""/>
<figcaption></figcaption>
</figure>
说明：
figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中， 对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使 得页面的语义更加良好。
(四）表格语义化
(1)、简介
在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。
问大家一个问题：如图所示的这种表格数据的展示，应该怎么实现呢？不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上，对于这种表格数据形式, 最好的选择还是table。
| font-weight属性值 | 说明 |
|---|---|
| normal | 默认值,正常体 |
| lighter | 较细 |
| bold | 较细 |
| bolder | 加粗 |
在表格中，我们比较常用的标签是table, tr和td这3个。不过为了加强表格的语义 化，W3C还增加了 5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”； caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。在本篇介绍html时也有介绍过表格的基本用法这里就不多加赘述了。
注意：
thead, tbody和tfoot这三个标签也是表格中非常重要的标签，它从语义上区分了表头、 表身和表脚。很多人容易忽略这三个标签。
举例:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table, thead, tbody, tfoot, th, td
{
border: 1px dashed gray;
}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
说明：
对于theadx tbody和tfoot这3个标签，不一定能够全部都用得上，例如tfoot就很少用。 一般情况下，我们都是根据实际需要来使用这3个标签的。
(五）表单语义化
表单跟表格，这是两个完全不一样的概念，不过还是有不少初学者傻傻分不清。对于表单语义化，我们从2个方面来探究一下。
(1)、label 标签
W3C规范定义，label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。
语法：
<label for=""> 说明性文字 </label>
说明：
label标签for属性值为所关联的表单元素的id,例如<input id=“name” type=“text”/>, 则其所关联的label标签应该为<label for=“name”>
label标签的for属性有两个作用。
①语义上绑定了 label元素和表单元素。
②增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会 获得焦点。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<input id="Radio1" type="radio"/>单选框
<input id="Checkbox1" type="checkbox" />复选框
</div>
<hr />
<div>
<input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
<input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>
</div>
</body>
</html>
分析:
从这个例子可以看到，在第一组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。在第二组表单中，我们可以点击单选框来选中单选 框，并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的效果。
其实，这就是label标签for属性的作用。for属性使得鼠标单击的范围扩大到label元素 上，极大地提高了用户单击的可操作性。事实上，label标签有两种关联方式，我们拿复选框来说，下面两行代码是等价的。
<input id="cbk" type="checkbox" /><label for="cbk"> 复选框 </label>
<label>复选框<input id="cbk" type="checkbox"/></label>
对于图中的效果，我们使用label标签来增强语义化，修改后的代码如下
<!DOCTYPE html>
<html >
<head>
<title></title>
</head>
<body>
<form action="index.aspx" method="post">
<div>登录QQ号</div>
<p>
<label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
</p>
<label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id= "remember-me" name="remember-me"/> <label for="remember-me"> 记住我 </label>
<input type="submit" value="登录"/>
</form>
</body>
</html>
效果：
(2)、fieldset 标签和 legend 标签。
语法：
<fieldset>
<legend> 表单组标题 </legend>
</fieldset>
说明：
使用fieldset和legend标签有两个作用。
（1）增强表单的语义。
（2）可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。
对于图中的效果，我们使用fieldset和legend这两个标签来增强语义化，修改后的代码如下。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form action="index.aspx" method="post">
<fieldset>
<legend>登录绿叶学习网</legend>
<p>
<label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
</p>
<label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
</p>
<input type="checkbox" id="remember-me" name="remember-me" /> <label for="remember-me"> 记住我 </label>
<input type="submit" value="登录" />
</fieldset>
</form>
</body>
</html>
(六) 其他语义化
(1)、 换行符
我经常会使用＜br/＞标签来换行，或者使用多个＜br/＞标签来实现元素之间的上下间距。
举例：
<div>
<span> 标题 </span><br/><br/>
<span>第 1 部分内容 </span><br/>
<span>第 2 部分内容 </span><br/>
<span>第 3 部分内容 </span>
</div>
上面两个例子使用＜br/＞标签的方式是错误的，这也是＜br/＞标签很常见的错误用法。 事实上，＜br/＞标签有自己特定的语义，不能随便用来实现换行效果。W3C标准规定，＜br/＞ 标签仅仅用于段落中的换行，不能用于其他情况。也就是说，＜br/＞标签只适合用于p标签内 部的换行，不能用于其他标签。
(2)、无序列表ul
在实际开发中，对于列表型的数据，为了实现良好的语义，我们还是建议使用无序列表 或者有序列表，不建议使用div等来实现。
对于如图所示效果，很多人可能会写出如下代码来实现。
<div>
<div><span>l</span>HTML 教程 </div>
<div><span>2</span>CSS 教程 </div>
<div><span>3</span>JavaScript 教程 </div>
</div>
这种实现方式缺乏语义化，并且也不利于维护。正确的做法是:
<ul>
<li><span>l</span>HTML 教程 </li>
<li><span>2</span>CSS 教程 </li>
<li><Sp^n>3</span>JavaScript 教程 </li>
</ul>
有人问，每一个列表项前都有数字，不应该使用有序列表来实现吗？为什么这里使用无序 列表来实现呢？假如使用有序列表，我们是做不到这种外观效果的。因为有序列表前的数字外 观是固定的。在实际开发中，大多数情况下都是使用无序列表，极少情况下会使用有序列表。
(3)、strong标签和em标签
strong用于实现加粗文本，em用于实现斜体文本。基于 结构和样式分离的原则，标签仅仅是为了实现简单的加粗或者 斜体效果，我们一般不会用这两个。实际上，W3C对这两个标 签赋予“强调”的语义，在strong或者em标签内部的文本被 强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权 重。如果在一个页面中，为了 SEO而想要突出某些关键字，可以使用strong和em这两个标 签。一般情况下，我们都是去掉strong和em的默认样式，然后使用CSS重新定义新的样式, 但这并不影响这两个标签的语义。也就是说，样式只会改变标签的外观，但不会改变标签的语义。
(4)、del标签和ins标签
在HTM L中，del和ins这两个标签是配合使用的。del表示“delete”，用于定义被删除的文本。ins表示“insert”，用于定义被更新的文本。一般情况下，我们会使用CSS来重 新定义del和ins标签的样式。
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p>新鲜的新西兰奇异果</p>
<p><del>原价:￥6.50/kg</del></p>
<p><ins>现在仅售：￥4.00/kg</ins></p>
</body>
</html>
效果：
(5)、img标签
想要在页面显示一张图片，我们有两种方式：一是使用img标签；二是使用背景图片。 这两种实现方式最明显的区别在于：使用img标签添加图片，是通过HTML来实现；使用背 景图片，是通过CSS来实现。
在实际开发中，很多人添加图片的方式很随意。对于什么时候使用img标签，什么时候 使用背景图片，并不是很清楚我们应该根据HTML的语义来判断。如果图片作为HTML的一 部分，并且想要被捜索引擎识别，则应该使用img标签，例如常见的各种图片列表。如果图 片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。
举个例子，图左这个页面中的图标图片就应该使用背景图片实现，因为这些图标并不 需要被搜索引擎识别，也不作为HTML的一部分。而图右页面中应该使用img标签来实 现，因为这是页面HTML结构的一部分，并且希望被搜索引擎识别。
【总结】
以上只是列举了在实际开发中比较常见的语义标签，其实HTML5新增了很多结构语义 标签，例如header、nav、aside、footer、article、section等。如果想要实现语义更为良好 的页面，我们也应该去关注这些新增的标签。不过结构语义标签是HTML5的内容，因此这里不展开介绍。
(七) 语义化验证
前面这几节，我们介绍了页面语义化需要注意的各个地方。那么平常有什么好的办法来 判断一个页面是否语义良好呢？ 一个很简单的办法就是：去掉CSS样式，然后看页面是否还 具有很好的可读性。
我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标 签对字体加粗、ul标签有缩进效果，等等。
在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但 是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。
语义不好的页面和语义好的页面
从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非常高的。
对于HTML语义化，我们需要注意以下两点。
1.我们应该果断舍弃那些仅仅为了定义样式而存在的HTML标签。如果仅仅是为了改 变样式，我们应该使用CSS来实现，不要使用HTML标签。
2.在不同的页面部分，我们优先使用正确的语义化标签。如果没有语义标签可用，才去考虑div和span等无语义标签。
四、HTML5
1、什么是html5
(一)、HTML5的概念与定义
-
定义：HTML5 定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，号称下一代的 HTML
-
两个概念：
-
是一个新版本的 HTML 语言，定义了新的标签、特性和属性
-
拥有一个强大的技术集，这些技术集是指： HTML5 、CSS3 、javascript, 这也是广义上的 HTML5
-
(二).HTML5 拓展了哪些内容
-
语义化标签
-
本地存储
-
兼容特性
-
2D、3D
-
动画、过渡
-
CSS3 特性
-
性能与集成
(三).HTML5 的现状
绝对多数新的属性，都已经被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性，
总的来说：HTML5 已经是大势所趋
2、HTML5 新增标签
(一)、什么是语义化
(二)、新增了那些语义化标签
-
header — 头部标签
-
nav — 导航标签
-
article — 内容标签
-
section — 块级标签
-
aside — 侧边栏标签
-
footer — 尾部标签
(三)、使用语义化标签的注意
-
语义化标签主要针对搜索引擎
-
新标签可以使用一次或者多次
-
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
-
语义化标签，在移动端支持比较友好，
另外，HTML5 新增的了很多的语义化标签，随着深入学习，还会学习到其他的
3、多媒体音频标签
(一)、多媒体标签有两个，分别是
- 音频 – audio
- 视频 – video
(二).audio 标签说明
-
可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
-
但是：播放格式是有限的
(三).audio 支持的音频格式
- audio 目前支持三种格式
(四)、audio 的参数
(五)、audio 代码演示
<body>
<!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
<!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->
<!--
因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
-->
<audio controls>
<source src="./media/snow.mp3" type="audio/mpeg" />
</audio>
</body>
4、多媒体视频标签
(一)、video 视频标签
- 目前支持三种格式
(二)、语法格式
<video src="./media/video.mp4" controls="controls"></video>
(三)、video 参数
(四)、video 代码演示
<body>
<!-- <video src="./media/video.mp4" controls="controls"></video> -->
<!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
<video controls="controls" autoplay muted loop poster="./media/pig.jpg">
<source src="./media/video.mp4" type="video/mp4">
<source src="./media/video.ogg" type="video/ogg">
</video>
</body>
(五)、多媒体标签总结
-
音频标签与视频标签使用基本一致
-
多媒体标签在不同浏览器下情况不同，存在兼容性问题
-
谷歌浏览器把音频和视频标签的自动播放都禁止了
-
谷歌浏览器中视频添加 muted 标签可以自己播放
-
注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册
5、新增 input 标签
6、新增表单属性
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
