什么是HTML语义化标签
语义化的标签，顾名思义，即每个标签都有属于自己的含义 ，标签的特点是简短、描述性、唯一
<H1>一级标题</H1>
<p>一段文字</p>
HTML5常用的语义标签
| 标签名 | 描述 |
|---|---|
| header | 文档的头部区域 |
| section | 定义文档中的节(区段) |
| article | 用来在页面中表示一套结构完整且独立的内容部分，如一篇文章 |
| aside | 定义其所处内容之外的内容 |
| hgroup | 定义对网页(整个网页或部分网页)标题的组合 |
| figure | 规定独立的流内容（图像、图表、照片、代码等等） |
| figcaption | 定义figure标签的标题 |
| nav | 标记导航，仅对文档中重要的链接群使用 |
| footer | section 或 document 的页脚 |
header标签
HTML5 规范描述为“一组解释性或导航型性的条目”，通常有网站标志、主导航、全站链接以及搜索框
<header>
<h1>网页解释、主题</h1>
......
</header>
nav标签
-
页面的导航链接区域，用于定义页面的主要导航部分。
-
HTML5 规范不推荐对辅助页脚链接使用 nav，除非页脚再次显示顶级全局导航、或者是公司介绍重要链接。
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">联系我们</li>
</ul>
</nav>
article标签
- List item表示的是一个文档、页面、应用或是网站中的一个独立的容器。
- HTML5 规范声明
标签适用于自包含的窗口小部件:计算器，钟表，天气窗口小部件等。 -
这个标签可以嵌套使用，但是他们必须是部分与整体的关系。
<article><header>
<h1>article标签</h1></header>
<p>今天是星期天</p>
<p>article英文意思里有文章的意思</p>
</article>
aside标签
- 表示一部分与页面的主体并没有较大关系的内容，内容可以独立存在。
- 实现比如升式引用、侧边栏、广告、链接，推荐，导航条等功能。
<p>一段内容</p>
<aside>
<h4>........</h4>
</aside>
section标签
- 包含一组相似主题的内容，一般会有一个标题。
- 实现显示文章的章节，对话框中的各种标签页功能等等。
footer标签
和 header标签功能相反，可以实现比如附录、索引、版权页、许可协议等功能。
<body >
<p>这是一个段落</p>
<footer><p>footer</p>
</footer></body>
figure、figcaption标签
- figure标签中的内容可以是图片、统计图或代码示例等，通常表示一个组合
- 通常有一个figcaption标签来对应组合的标题。
<figure>
<figcaption>北京鸟巢</figcaption>
<p>拍摄于2020年02月02日</p>
<img src="....." alt="">
</figure>
hgroup标签
- 在html中，hgroup标签是使用来对网页或区段的标题进行组合，即对网页或区段中连续的h1~h6元素进行组合。
- hgroup标签只是对标题进行组合，而对标题的样式没有影响。
<hgroup>
<h1>hgroup标签</h1>
<h2>标签用法</h2>
</hgroup>
detail和summary标签
- 用details标签来描述详情信息和用summary标签来描述概要信息，能用尽可能少的空间来表达更多的信息
- 用于文档说明，有自带收缩、展开功能
<body>
<details>
<summary>HTML 5描述</summary>
描述内容
</details>
</body>
progress标签
- 定义运行中的任务进度/进程
- 属性有max：规定需要完成的值；value：规定进程的当前值
- progress是双标签，但是标签中的内容不在浏览器中显示
<body>
<h3>progress标签</h3>
<progress value="25" max="100"></progress>
<progress value="100" max="100"></progress>
<progress value="60" max="200"></progress>
<progress value="125" max="200"></progress><
</body>
meter标签
- meter标签是双标签，但是标签中的内容不在浏览器中显示
- 定义已知范围或分数值内的标量测量（如硬盘使用度等等）
- 属性有：value：规定度量的当前值，必需参数；
- form：规定meter标签元素所属的一个或多个表单；
high：规定被视作高的值的范围；
low：规定被视作低的值的范围；
max：规定范围的最大值；
min：规定范围的最小值；
optimum：定度量的优化值；
<body>
十分之一：<meter value="7" min="0" max="10">十分之一</meter>
百分之八十<meter value="0.8">百分之八十</meter>
</body>
time标签
定义日期或时间，或者两者。
<p>
我在 <time datetime="2020-02-14">情人节</time> 有个约会。
我在<time>9:00</time> 赴约
</p>
Mark标签
- 可以高亮显示文档中的文字以达到醒目的效果
- 定义带有记号的文本。
<body>
<p><mark>mark</mark>的<mark>用法</mark></p>
</body>
cite标签
- 表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
- 按照惯例，引用的文本将以斜体显示。
<p><cite>引用的文章</cite></p>
draggable属性
- 标签元素要设置draggable=true
- 拖拽的时候把一个标签拖动到另一个框，如果这个框里已经有元素的话，则不可以拖进去
<div title="可以拖拽" draggable="true">一个列表</div>
hidden属性
- 隐藏的元素不会被显示。
- 可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。
- 可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。
<p hidden>此段落已经被隐藏了</p>
spellcheck 属性
- 规定是否对元素内容进行拼写检查。
- 可对以下文本进行拼写检查：
类型为 text 的 input 元素中的值（非密码）
textarea 元素中的值
可编辑元素中的值
<p contenteditable="true" spellcheck="true">带有编写检查的可编辑段落</p>
contenteditable 属性
- 规定元素内容是否可编辑。
- 如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。
<p contenteditable="true">这是一个可编辑的段落。</p>
扫一扫
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
