HTML 标签集合
语义化
-
文档章节
- 页面通常结构
- 标题标签
-
组合内容
- 段落标签
- 列表标签
- 无序列表
- 有序列表
- 自定义列表
- 水平线标签
- 换行标签
表格数据
-
文本级别语义
- 链接标签
- 文本格式化标签
- 引用标签
-
嵌入式内容
- 图像标签
- 路径
- 相对路经
- 绝对路径
- 路径
- canvas
- 热点区域标签
- 嵌入资源标签
- 多媒体 embed
- 图像标签
HTML 标签集合
语义化
语义化（Semantic Tag）是指用合适的标签标识适当的内容，它可以起到搜索引擎优化（Search Engine Optimization），提高可访问性（例如盲人使用的屏幕阅读器），与此同时还可以提高代码的可读性。简而言之也就是在正确的地方使用正确的标签
文档章节标签
<body> 页面内容
<header> 文档头部
<nav> 导航
main文档主要内容
<aside> 侧边栏
<article> 定义外部内容（如外部引用的文章）
<section> 一个独立的块
<footer> 尾部
页面通常结构
HTML5中有部分语义标签，在使用时十分简单，但是由于语义性更强，更利于
开发者以及搜索引擎对于网页的理解。
HTML5中代码示例：
<body>
<!--头部start-->
<header>
<!--导航start-->
<nav>
<a href="#">导航1</a>
<a href="#">导航2</a>
<a href="#">导航3</a>
</nav>
<!--导航end-->
</header>
<!--头部end-->
<!--主体start-->
<main>
<!--文章start-->
<article></article>
<!--文章end-->
<!--侧边栏start-->
<aside></aside>
<!--侧边栏end-->
</main>
<!--主体end-->
<!--底部start-->
<footer></footer>
<!--底部end-->
</body>
使用HTML5中新的语义标签,内容更为直观,即使删除了注释,依旧能够看出该标签的作用,语义性更强。说的通俗一些,内容一样,但是代码更少了。
但是老版本的浏览器，比如iE 8 及以下版本并不支持新语义标签，可以到「HTML 」语法中查找解决兼容性问题的方法。
标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
从<h1>到<h6>重要性递减。
其基本语法格式如下：
<hn> 标题文本 </hn>
注意： h1 标签因为重要，尽量少用，不要动不动就向你扔了一个h1。 一般h1 都是给logo使用。
组合内容标签
段落标签
在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是
<p> 文本内容 </p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
容器标签
作为容器存在，语义性不强，在网站布局中广泛使用，搜索引擎友好，但是搜索引擎更友好的依旧是内容。
列表标签
容器里面装载着文字或图表的一种形式，叫列表。
列表最大的特点就是 整齐 、整洁、 有序
无序列表
无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
比如一些新闻是没有顺序的，不用排队，先到先得，先发布先显示。
注意:
-
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。 -
<li>与</li>之间相当于一个容器，可以容纳所有元素。 - 无序列表会带有自己样式属性，放下那个样式，一会让CSS来！
有序列表
有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
所有特性基本与ul 一致。
但是实际工作中， 较少用 ol ，因此我们用一句话来总结下 ol：放开那个女...那个ol,让ul来
自定义列表
定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：
<dl>
<dt>名词1</dt> <!-- dt 表示标题 -->
<dd>名词1解释1</dd> <!-- dd 表示内容 -->
<dd>名词1解释2</dd>
<!-- dd 是对dt进行的表述 或者 解释 dd 是围绕着dt进行服务的 -->
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
注意：
dl 里面 只能有 dt 和dd 标签 ;
dt 和 dd 一对多的关系,
一个<dt>可以对应多个<dd>
dt 类似于皇帝,可以有多个妃子dd;一个dl 里面可以有多对 dt 和 dd.
tips: <dl> 为自定义列表，其中包含一个或多个 <dt> 及 一个或多个 <dd>，并且dt 与 dl列表会有缩进的效果。<pre> 会保留换行和空格，通常与 <code> 一同使用。
水平线标签
在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标记来完成，就是创建横跨网页水平线的标记。
其基本语法格式如下：
<hr />是单标记
在网页中显示默认样式的水平线。
换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br />
在HTML中，如果还像在word中直接敲回车键换行就不起作用了。
表格
存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见处理表格式数据。
表格代码示例
在HTML网页中，要想创建表格，就需要使用表格相关的标签。
<table>
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
在上面的语法中包含三对HTML标签，分别为<table></table>、<tr></tr>、<td></td>，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释。
<table>< </table>：用于定义一个表格。<tr>< </tr>：用于定义表格中的一行，必须嵌套在<table> </table>标签中，在<table> </table>中包含几对<tr> </tr>，就有几行表格。<td> </td>：用于定义表格中的单元格，必须嵌套在< <tr> </tr>标签中，一对<tr> </tr>中包含几对<td> </td>，就表示该行中有多少列（或多少个单元格）。表头标签
<thead></thead>一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。
注意：
<tr></tr>中只能嵌套<td></td><td></td>标签，他就像一个容器，可以容纳所有的元素
表格结构
在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：
<thead></thead>：用于定义表格的头部。
必须位于<table></table> 标签中，一般包含网页的logo和导航等头部信息。
<tfoot></ tfoot >：用于定义表格的页脚。
位于<table></table>标签中<thead></thead>标签之后，一般包含网页底部的企业信息等。
<tbody></tbody>：用于定义表格的主体。
位于<table></table>标签中<tfoot></ tfoot >标签之后，一般包含网页中除头部和底部之外的其他内容。
表格的标题： caption
caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
表格属性
合并单元格
使用 colspan=val 进行跨列，使用 rowspan=val 进行跨行。
总结表格：
1.表格提供了HTML 中定义表格式数据的方法。
2.表格中由行中的单元格组成。
3.表格中没有列元素，列的个数取决于行的单元格个数。
4.表格不要纠结于外观，那是CSS 的作用。
表单
<form action="WebCreation_submit" method="get" accept-charset="utf-8">
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 第一种添加标签的方法 -->
<label><input type="text/submit/hidden/button/etc" name="" value=""></label>
<!-- 第二种添加标签的方法 -->
<label for="input-id">Sample Label</label>
<input type="text" id="input-id">
</fieldset>
<fieldset>
<legend>title or explanatory caption</legend>
<!-- 只读文本框 -->
<input type="text" readonly>
<!-- 隐藏文本框，可提交影藏数据 -->
<input type="text" name="hidden-info" value="hiden-info-value" hidden>
</fieldset>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
使用fieldset可用于对表单进行分区
表单中的其他控件类型：
-
textarea（文本框） -
select与option（下拉菜单可多选）
更多关于表单的介绍，请点击这里查看。
文本级别语义
链接标签
在HTML中创建超链接非常简单，只需用标记环绕需要被链接的对象即可，
其基本语法格式如下：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href：用于指定链接目标的url地址，当为标记应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。
注意：
1.如果当时没有确定链接目标时，通常将链接标记的href属性值定义为“#”(即href="#")，表示该链接暂时为一个空链接。
2.不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接。
锚点定位
通过创建锚点链接，用户能够快速定位到目标内容。 创建锚点链接分为两步：
1.使用“<a href=”#id名“>链接文本</a>”创建链接文本。
2.使用相应的id名标注跳转目标的位置。
-
base 和 nofollow
- base 可以设置整体链接的打开状态
<head>
<base target = "_blank" />
</head>
<body>
<a target = "_self"></a>
</body>
- nofollow 设置不抓取链接,防止SEO搜索引擎抓取隐私
<a rel = "nofollow"></a>
链接标签常见的几种形式：
<!-- 默认超链接 -->
<a href="http://sample-link.com" title="Sample Link">Sample</a>
<!-- 当前窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_self">Sample</a>
<!-- 新窗口显示 -->
<a href="http://sample-link.com" title="Sample Link" target="_blank">Sample</a>
<!-- iframe 中打开链接 -->
<a href="http://sample-link.com" title="Sample Link" target="iframe-name">Sample</a>
<iframe name="iframe-name" frameborder="0"></iframe>
<!-- 页面中的锚点 -->
<a href="#achor">Achor Point</a>
<section id="achor">Achor Content</section>
<!-- 邮箱及电话需系统支持 -->
<a href="mailto:sample-address@me.com" title="Email">Contact Us</a>
<!-- 多个邮箱地址 -->
<a href="mailto:sample-address@me.com, sample-address0@me.com" title="Email">Contact Us</a>
<!-- 添加抄送，主题和内容 -->
<a href="mailto:sample-address@me.com?cc=admin@me.com&subject=Help&body=sample-body-text" title="Email">Contact Us</a>
<!-- 电话示例 -->
<a href="tel:99999999" title="Phone">Ring Us</a>
文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线效果，这时就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
| 标签 | 显示效果 | 语义强调标签（XHTML推荐使用） |
|---|---|---|
| <b> </b><strong> </strong> | 文字以粗体方式显示 |
<strong> </strong> |
| <i> </i><em> </em> | 文字以斜体方式显示 |
<em> </em> |
| <s> </s><del> </del> | 文字以加删除线方式显示 |
<del> </del> |
| <u> </u><ins> </ins> | 文字以加下划线方式显示 |
<ins> </ins> |
引用标签
<cite>引用作品的名字、作者的名字等<q>引用一小段文字（大段文字引用用<blockquote>）-
<blockquote>引用大块文字
<blockquote>拥有cite属性，它包含引用文本的出处，示例如下所示：<blockquote cite="http://example.com/facts"> <p>Sample Quote...</p> </blockquote> <pre>保存格式化的内容（其空格、换行等格式不会丢失）-
<code>引用代码<pre> <code> int main(void) { printf('Hello, world!'); return 0; } </code> </pre>
嵌入式内容
图像标签
HTML网页中任何元素的实现都要依靠HTML标记，要想在网页中显示图像就需要使用图像标记，接下来将详细介绍图像标记以及和他相关的属性。
其基本语法格式如下：
<img src = "图像URL"/>
该语法中src属性用于指定图像文件的路径和文件名，他是img标记的必需属性。
路径
网页需要图片,首先需要通过路径找到它..
实际工作中，通常新建一个文件夹专门用于存放图像文件，这时再插入图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为： 相对路径和绝对路径
相对路径
- 图像文件和html文件位于同一文件夹：只需输入图像文件的名称即可，如
[图片上传失败...(image-b7736a-1536892261783)]。 - 图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如
[图片上传失败...(image-d169c1-1536892261783)]。 - 图像文件位于html文件的上一级文件夹：在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如
[图片上传失败...(image-30391c-1536892261783)]。
绝对路径
- 绝对路径“D:\web\img\logo.gif”，
- 或完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。
canvas
canvas 基于像素，性能要求比较高，可用于实时数据展示。svg 为矢量图形图像。
热点区域标签
img中套用map以及area可以实现点击某部分图片触发一个链接，点击另一部分触发另一个链接
<img src="mama.jpg" width=100 height=100 usemap="#map" />
<map name="map">
<area shap="rect" coords="0,0,50,50" href="" alt="">
<area shap="circle" coords="75,75,25" href="" alt="">
</map>
嵌入资源标签
<iframe src=""></iframe> 页面操作可以不影响到iframe的内容
<!--object embed通常用来嵌入外部资源 -->
<object type="application/x-shockwave-player">
<param name="movie" value="book.pdf">
</object>
<!--视频 track可以引入字幕 autoplay可以使视频加载后自动播放，loop可以使其循环播放 -->
<video autoplay loop controls="controls" poster="poster.jpg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogg" type="video/ogg">
<track kind="subtitles" src="video.vtt" srclang="cn" label="cn">
</video>
多媒体 embed
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。兼容性较差。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
