HTML5常用语义化标签和属性

什么是HTML语义化标签

语义化的标签，顾名思义，即每个标签都有属于自己的含义 ，标签的特点是简短、描述性、唯一

一级标题
一段文字

HTML5常用的语义标签

标签名	描述
header	文档的头部区域
section	定义文档中的节(区段)
article	用来在页面中表示一套结构完整且独立的内容部分，如一篇文章
aside	定义其所处内容之外的内容
hgroup	定义对网页(整个网页或部分网页)标题的组合
figure	规定独立的流内容（图像、图表、照片、代码等等）
figcaption	定义figure标签的标题
nav	标记导航，仅对文档中重要的链接群使用
footer	section 或 document 的页脚

header标签

HTML5 规范描述为“一组解释性或导航型性的条目”，通常有网站标志、主导航、全站链接以及搜索框

网页解释、主题
......

nav标签

1. 页面的导航链接区域，用于定义页面的主要导航部分。

2. HTML5 规范不推荐对辅助页脚链接使用 nav，除非页脚再次显示顶级全局导航、或者是公司介绍重要链接。

    

    
首页

    
公司概况

    
联系我们

    

article标签

1. List item表示的是一个文档、页面、应用或是网站中的一个独立的容器。
2. HTML5 规范声明
   标签适用于自包含的窗口小部件:计算器，钟表，天气窗口小部件等。
3. 这个标签可以嵌套使用，但是他们必须是部分与整体的关系。

 

 
article标签
 
今天是星期天
 
article英文意思里有文章的意思
 

aside标签

1. 表示一部分与页面的主体并没有较大关系的内容，内容可以独立存在。
2. 实现比如升式引用、侧边栏、广告、链接，推荐，导航条等功能。

一段内容

........

section标签

1. 包含一组相似主题的内容，一般会有一个标题。
2. 实现显示文章的章节，对话框中的各种标签页功能等等。

footer标签

和 header标签功能相反，可以实现比如附录、索引、版权页、许可协议等功能。

这是一个段落
footer

figure、figcaption标签

1. figure标签中的内容可以是图片、统计图或代码示例等，通常表示一个组合
2. 通常有一个figcaption标签来对应组合的标题。

    
北京鸟巢
    
拍摄于2020年02月02日
    

hgroup标签

1. 在html中，hgroup标签是使用来对网页或区段的标题进行组合，即对网页或区段中连续的h1~h6元素进行组合。
2. hgroup标签只是对标题进行组合，而对标题的样式没有影响。

hgroup标签
标签用法

detail和summary标签

1. 用details标签来描述详情信息和用summary标签来描述概要信息，能用尽可能少的空间来表达更多的信息
2. 用于文档说明，有自带收缩、展开功能

HTML 5描述
描述内容

progress标签

1. 定义运行中的任务进度/进程
2. 属性有max：规定需要完成的值；value：规定进程的当前值
3. progress是双标签，但是标签中的内容不在浏览器中显示

progress标签



<

meter标签

1. meter标签是双标签，但是标签中的内容不在浏览器中显示
2. 定义已知范围或分数值内的标量测量（如硬盘使用度等等）
3. 属性有：value：规定度量的当前值，必需参数；
4. form：规定meter标签元素所属的一个或多个表单；
   high：规定被视作高的值的范围；
   low：规定被视作低的值的范围；
   max：规定范围的最大值；
   min：规定范围的最小值；
   optimum：定度量的优化值；

十分之一：十分之一
百分之八十百分之八十

time标签

定义日期或时间，或者两者。

我在 情人节 有个约会。
 我在9:00 赴约

Mark标签

1. 可以高亮显示文档中的文字以达到醒目的效果
2. 定义带有记号的文本。

 
mark的用法
 

cite标签

1. 表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
2. 按照惯例，引用的文本将以斜体显示。

 
引用的文章

draggable属性

1. 标签元素要设置draggable=true
2. 拖拽的时候把一个标签拖动到另一个框，如果这个框里已经有元素的话，则不可以拖进去

一个列表

hidden属性

1. 隐藏的元素不会被显示。
2. 可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。
3. 可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。

spellcheck 属性

1. 规定是否对元素内容进行拼写检查。
2. 可对以下文本进行拼写检查：
   类型为 text 的 input 元素中的值（非密码）
   textarea 元素中的值
   可编辑元素中的值

带有编写检查的可编辑段落

contenteditable 属性

1. 规定元素内容是否可编辑。
2. 如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。

这是一个可编辑的段落。