html、html5标签

最新推荐文章于 2022-03-15 21:35:22 发布

樊一翻

最新推荐文章于 2022-03-15 21:35:22 发布

阅读量141

点赞数

分类专栏：前端

原文链接：https://www.jianshu.com/p/8ffb01ce77e4

版权

前端专栏收录该内容

44 篇文章 3 订阅

订阅专栏

html、html5标签

1、30个html5新标签
2、90个html原标签
3、10个w3c不赞成使用
4、常用的9个语义化标签

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>
``

樊一翻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html、html5标签

30个H5新标签+90个html原有标签，共有120个标签。其中10个w3c官方不建议使用。30个H5新标签+90个html原有标签，共有120个标签。其中10个w3c官方不建议使用。
复制链接

扫一扫

专栏目录