html、html5标签
30个H5新标签+90个html原有标签,共有120个标签。
其中10个标签w3c官方不建议使用。
其中常用的语义化标签有9个
1、30个html5新标签
标签 | 描述 | 兼容性 |
---|---|---|
<article> | 定义文章。 定义一个文章区域。 | E 9+、Firefox、Opera、Chrome 和 Safari 都支持 |
<aside> | 定义页面内容之外的内容。定义页面的侧边栏内容 | IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 |
<audio> | 定义声音内容。 | IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 |
<bdi> | 定义文本的文本方向,使其脱离其周围文本的方向设置。 | Firefox、Opera、Chrome 和 Safari 支持;ie不支持 |
<canvas> | 定义图形。定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形 | IE 9、Firefox、Opera、Chrome 和 Safari 支持 标签。 |
<command> | 定义命令按钮。比如单选按钮、复选框或按钮 | 主流浏览器都不支持 |
<datalist> | 定义下拉列表。 | ![]() |
<details> | 定义元素的细节。 | 只有 Chrome 和 Safari 6 支持 |
<dialog> | 定义对话框或窗口。 | ![]() |
<embed> | 定义外部交互内容或插件。不建议使用 | 主流浏览器都支持 |
<figcaption> | 定义 figure 元素的标题 | IE 9、Firefox、Opera、Chrome 和 Safari 支持 |
<figure> | 定义媒介内容的分组,以及它们的标题。规定独立的流内容(图像、图表、照片、代码等等)。 | IE 9、Firefox、Opera、Chrome 和 Safari 支持 |
<footer> | 定义 section 或 page 的页脚。 | IE 9、Firefox、Opera、Chrome 和 Safari 支持 |
<header> | 定义 section 或 page 的页眉。 | IE 9、Firefox、Opera、Chrome 和 Safari 支持 |
<keygen> | 定义生成密钥。已废弃 | Firefox、Opera、Chrome 和 Safari 6 都支持 标签。 |
<mark> | 定义有记号的文本。 | Internet Explorer 9+、Firefox、Opera、Chrome 和 Safari 支持 |
<meter> | 定义预定义范围内的度量。 | ![]() |
<nav> | 定义导航链接。 | 大多数浏览器支持 |
<output> | 定义输出的一些类型。 | ![]() |
<progress> | 定义任何类型的任务的进度。 | IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 |
<rp> | 定义若浏览器不支持 ruby 元素显示的内容。 | IE 9+、Firefox、Opera、Chrome 和 Safari 支持 标签。 |
<rt> | 定义 ruby 注释的解释。 | IE 9+、Firefox、Opera、Chrome 和 Safari 支持 标签。 |
<ruby> | 定义 ruby 注释。 | IE 9+、Firefox、Opera、Chrome 和 Safari 支持 标签。 |
<section> | 定义 section。 | IE 9+、Firefox、Opera、Chrome 和 Safari 支持 标签。 |
<source> | 定义媒介源。 | IE 9+、Firefox、Opera、Chrome 和 Safari 支持 标签。 |
<summary> | 为 <details> 元素定义可见的标题。 | 只有 Chrome 和 Safari 6 支持 标签。 |
<time> | 定义日期/时间。 | ![]() |
<track> | 定义用在媒体播放器中的文本轨道。 | IE 10、Opera 和 Chrome 浏览器支持 标签。 |
<video> | 定义视频。 | ![]() |
<wbr> | 定义可能的换行符。 | 除了IE,主流浏览器都支持 |
2、90个html原标签
标签 | 描述 |
---|---|
<applet> | 不赞成使用。定义嵌入的 applet。 |
<basefont> | 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 |
<center> | 不赞成使用。定义居中文本。 |
<dir> | 不赞成使用。定义目录列表。 |
<font> | 不赞成使用。定义文字的字体、尺寸和颜色。 |
<isindex> | 不赞成使用。定义与文档相关的可搜索索引。 |
<s> | 不赞成使用。定义加删除线的文本。 |
<strike> | 不赞成使用。定义加删除线文本。 |
<u> | 不赞成使用。定义下划线文本。 |
<xmp> | 不赞成使用。定义预格式文本。 |
<!–…--> | 定义注释。 |
<!DOCTYPE> | 定义文档类型。 |
<a> | 定义锚。 |
<abbr> | 定义缩写。 |
<acronym> | 定义只取首字母的缩写。 |
<address> | 定义文档作者或拥有者的联系信息。 |
<area> | 定义图像映射内部的区域。 |
<b> | 定义粗体字。 |
<base> | 定义页面中所有链接的默认地址或默认目标。 |
<bdo> | 定义文字方向。 |
<big> | 定义大号文本。 |
<blockquote> | 定义长的引用。 |
<body> | 定义文档的主体。 |
<br> | 定义简单的折行。 |
<button> | 定义按钮 (push button)。 |
<caption> | 定义表格标题。 |
<cite> | 定义引用(citation)。 |
<code> | 定义计算机代码文本。 |
<col> | 定义表格中一个或多个列的属性值。 |
<colgroup> | 定义表格中供格式化的列组。 |
<dd> | 定义定义列表中项目的描述。 |
<del> | 定义被删除文本。 |
<div> | 定义文档中的节。 |
<dfn> | 定义定义项目。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义列表中的项目。 |
<em> | 定义强调文本。 |
<fieldset> | 定义围绕表单中元素的边框。 |
<form> | 定义供用户输入的 HTML 表单。 |
<frame> | 定义框架集的窗口或框架。 |
<frameset> | 定义框架集。 |
<h1> to <h6> | 定义 HTML 标题。 |
<head> | 定义关于文档的信息。 |
<hr> | 定义水平线。 |
<html> | 定义 HTML 文档。 |
<i> | 定义斜体字。 |
<iframe> | 定义内联框架。 |
<img> | 定义图像。 |
<input> | 定义输入控件。 |
<ins> | 定义被插入文本。 |
<kbd> | 定义键盘文本。 |
<label> | 定义 input 元素的标注。 |
<legend> | 定义 fieldset 元素的标题。 |
<li> | 定义列表的项目。 |
<link> | 定义文档与外部资源的关系。 |
<map> | 定义图像映射。 |
<menu> | 定义命令的列表或菜单。 |
<menuitem> | 定义用户可以从弹出菜单调用的命令/菜单项目。 |
<meta> | 定义关于 HTML 文档的元信息。 |
<noframes> | 定义针对不支持框架的用户的替代内容。 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<object> | 定义内嵌对象。 |
<ol> | 定义有序列表。 |
<optgroup> | 定义选择列表中相关选项的组合。 |
<option> | 定义选择列表中的选项。 |
<p> | 定义段落。 |
<param> | 定义对象的参数。 |
<pre> | 定义预格式文本。 |
<q> | 定义短的引用。 |
<samp> | 定义计算机代码样本。 |
<script> | 定义客户端脚本。 |
<select> | 定义选择列表(下拉列表)。 |
<small> | 定义小号文本。 |
<span> | 定义文档中的节。 |
<strong> | 定义强调文本。 |
<style> | 定义文档的样式信息。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<table> | 定义表格。 |
<tbody> | 定义表格中的主体内容。 |
<td> | 定义表格中的单元。 |
<textarea> | 定义多行的文本输入控件。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<title> | 定义文档的标题。 |
<tr> | 定义表格中的行。 |
<tt> | 定义打字机文本。 |
<ul> | 定义无序列表。 |
<var> | 定义文本的变量部分。 |
3、10个w3c不赞成使用
标签 | 描述 |
---|---|
<applet> | 不赞成使用。定义嵌入的 applet。 |
<basefont> | 不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 |
<center> | 不赞成使用。定义居中文本。 |
<dir> | 不赞成使用。定义目录列表。 |
<font> | 不赞成使用。定义文字的字体、尺寸和颜色。 |
<isindex> | 不赞成使用。定义与文档相关的可搜索索引。 |
<s> | 不赞成使用。定义加删除线的文本。 |
<strike> | 不赞成使用。定义加删除线文本。 |
<u> | 不赞成使用。定义下划线文本。 |
<xmp> | 不赞成使用。定义预格式文本。 |
4、常用的9个语义化标签
标签 | 描述 |
---|---|
header | 文档的头部区域 |
section | 定义文档中的节(区段) |
article | 用来在页面中表示一套结构完整且独立的内容部分,如一篇文章 |
aside | 定义其所处内容之外的内容 |
hgroup | 定义对网页(整个网页或部分网页)标题的组合 |
figure | 规定独立的流内容(图像、图表、照片、代码等等) |
figcaption | 定义figure标签的标题 |
nav | 标记导航,仅对文档中重要的链接群使用 |
footer | section 或 document 的页脚 |
4.1 header、footer
- header:HTML5 规范描述为“一组解释性或导航型性的条目”,通常有网站标志、主导航、全站链接以及搜索框
- footer:和 header标签功能相反,可以实现比如附录、索引、版权页、许可协议等功能。
<header>
<h1>网页解释、主题</h1>
......
</header>
4.2section
- 包含一组相似主题的内容,一般会有一个标题。
- 实现显示文章的章节,对话框中的各种标签页功能等等。
4.3figure、figcaption
figure标签中的内容可以是图片、统计图或代码示例等,通常表示一个组合
通常有一个figcaption标签来对应组合的标题。
<figure>
<figcaption>北京鸟巢</figcaption>
<p>拍摄于2020年02月02日</p>
<img src="....." alt="">
</figure>
4.3hgroup
在html中,hgroup标签是使用来对网页或区段的标题进行组合,即对网页或区段中连续的h1~h6元素进行组合。
hgroup标签只是对标题进行组合,而对标题的样式没有影响。
<hgroup>
<h1>hgroup标签</h1>
<h2>标签用法</h2>
</hgroup>
4.4nav
- 页面的导航链接区域,用于定义页面的主要导航部分。
- HTML5 规范不推荐对辅助页脚链接使用 nav,除非页脚再次显示顶级全局导航、或者是公司介绍重要链接。
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">联系我们</li>
</ul>
</nav>
4.5article
- List item表示的是一个文档、页面、应用或是网站中的一个独立的容器。
- HTML5 规范声明
标签适用于自包含的窗口小部件:计算器,钟表,天气窗口小部件等。 -
这个标签可以嵌套使用,但是他们必须是部分与整体的关系。
<article><header>
<h1>article标签</h1></header>
<p>今天是星期天</p>
<p>article英文意思里有文章的意思</p>
</article>
4.6aside
1.表示一部分与页面的主体并没有较大关系的内容,内容可以独立存在。
2.实现比如升式引用、侧边栏、广告、链接,推荐,导航条等功能。
<p>一段内容</p>
<aside>
<h4>........</h4>
</aside>
``