HTML5——列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性
列表元素
无序列表:网页中最常用的列表,其各个列表项之间没有顺序级别之分,通常是并列的。其基本语法格式:
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
有序列表:有排列顺序的列表,其各个列表项按照一定的顺序排列。其基本语法格式:
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
定义列表:用于对术语或名词进行解释和描述。与无需列表不同,定义列表的列表项前没有任何项目符号。其基本语法格式:
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
...
</dl>
结构元素
HTML5中所有元素都是有结构性的,且这些元素与块元素非常相似。下面将介绍常用的结构性元素。
1.header元素
HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题,也可以包含网站Logo图片、搜索表单或者其他相关内容。其基本语法格式如下:
<header>
<h1>网页主题</h1>
...
</header>
注:header元素并非head元素,是HTML5新增的元素,并不限制header元素的个数,一个网页中可以使用多个header元素,也可以为每一个内容块添加header元素。
2.nav元素
nav元素用于定义导航链接,是HTML5新增的元素,该元素可以将具有导航性质的链接归纳在一个区域中,使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面,或者当前页面的其他部分。
在上面这段代码中,通过在nav元素内部嵌套无序列表ul来搭建导航结构。通常,一个HTML页面中可以包含多个nav元素,作为页面整体或不同部分的导航。具体来说,nav元素可以用于以下几种场合。
* 传统导航条:目前主流网站上都有不同层级的导航条,其作用是跳转到网站的其他主页面。
* 侧边栏导航:目前主流播客网站及电商网站都有侧边栏导航,目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。
* 页内导航:它的作用是在本页面几个主要的组成部分之间进行跳转。
* 翻页操作:翻页操作切换的是网页的内容部分,可以通过点击“上一页”或“下一页”切换,也可以通过点击实际的页数跳转到某一页。
除了以上几点以外,nav元素也可以用于其他重要的、基本的导航链接组中。
注:并不是所有的链接都要被放进nav元素,只需要将主要的和基本的链接放进nav元素即可。
3.article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分,该元素经常被用于定义一篇日志、一条新闻或者用户评论等。article元素通常使用多个section元素划分,一个页面中article元素可以出现多次。
4.aside 元素
aside 元素用来定义当前页面或者文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside 元素的用法主要分为两种:
* 被包含在 article 元素内作为主要内容的附属信息。
* 在 article 元素之外使用,作为页面或站点全局的附属信息。
5.section元素
section元素用于对网站或应用程序中页面上的内容进行分块,一个section元素通常由内容和标题组成。在使用section元素时,需要注意以下3点:
* 不要将section元素用作设置样式的页面容器,那是div的特性。section元素并非一个普通的容器元素,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。
* 如果article元素、section元素或nav元素更符合使用条件,那么不要使用section元素。
* 没有标题的内容区块不要使用section元素定义。
header元素用来定义文章的标题,section元素用来存放对小张的评论内容,article元素用来划分section元素所定义的内容,将其分为两部分。
在HTML中,article元素可以看作是一种特殊的section元素,它比section元素更具有独立性,即section元素强调分段或分块,而article元素强调独立性。如果一块内容相对来说比较独立、完整时,应该使用article元素,但如果想要将一块内容分成多段时,应该使用section元素。
6.footer元素
footer元素用于定于一个页面或者区域的底部,它可以包含所有通常放在页面底部的内容。在HTML5出现之前,一般使用<div id="footer"></div>标记来定义页面底部,而通过HTML5的footer元素可以轻松实现。
一个页面中可以包含多个footer元素。同时,也可以在article元素或者section元素中添加footer元素。
分组元素
7.figure 和 figcaption元素
在HTML5中,figure元素用于定义独立的内容(图像、图表、照片、代码等),一般指一个单独的单元。figure元素的内容应该与主内容相关,但如果被删除,也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题,一个figure元素最多允许使用一个figcaption元素,该元素应该放在figure元素的第一个或最后一个子元素的位置。
不带有标题的figure元素(没有图片):
带有标题的figure元素:
多个元素同一个标题的figure元素:
8.hgroup元素
hgroup元素用于将多个标题(主标题和副标题或者子标题)组成一个标题组,通常它与h1~h6元素组合使用。通常,将hgroup元素放在header元素中。
在使用hgroup元素时要注意以下几点:
* 如果只有一个标题元素不建议使用hgroup元素
* 当出现一个或者一个以上的标题与元素时,推荐使用hgroup元素作为标题元素。
* 当一个标题包含副标题、section或者article元素时,建议将hgroup元素和标题相关元素存放到header元素容器中。
页面交互元素
9.details 和 summary 元素
details 元素用于描述文档或文档某个部分的细节。summary 元素经常与 details元素配合使用,作为 details 元素的第一个子元素,用于为 details 定义标题。标题是可见的,当用户点击标题时,会显示或隐藏details 中的其他内容。
10.progress元素
progress 元素用于定义一个正在完成的进度条,这个进度条可以是不确定的,只是表示进度正在进行,但是不清楚还有多少工作量没有完成。也可以用0到某个最大数字(如100)之间的数字来表示准确的进度完成情况(如进度百分比)。
progress 元素的常用属性值有两个:
* value:已经完成的工作量。
* max:总共有多少工作量。
需要注意的是 value 和 max 属性的值必须大于0,且 value 的值要小于或等于 max 属性的值。
11.meter元素
meter 元素用于表示指定范围内的数值。例如,显示硬盘容量或者对某个候选者的投票人数占投票总人数的比例等,都可以使用meter 元素。
meter 元素的常用属性
文本层次语义元素
12.time 元素
time元素用于定义时间或日期,可以代表24小时中的某一时间。time 元素不会在浏览器中呈现任何特殊效果,但是该元素能够以机器可读的方式对日期和时间进行编码,这样,用户能够将生日提醒或其他事件添加到日程表中,搜索引擎也能够生成更智能的搜索结果。
time 元素有两个属性:
* datetime:用于定义相应的时间或日期。取值为具体时间(例如:14:00)或具体日期(例如2015——09——01),不定义该属性时,由元素的内容给定日期 / 时间。
* pubdate:用于定义 time 元素中的日期 / 时间是文档(或 article 元素)的发布日期。取值一般为“pubdate”。
13.mark元素
mark 元素的主要功能是在文本中高亮显示某些字符,以引起用户注意。该元素的用法与 em 和 strong 有相似之处,但是使用 mark 元素在突出显示样式时更随意灵活。
14.cite元素
cite 元素可以创建一个引用标记,用于对文档参考文献的引用说明,一旦在文档中使用了该标记,被标记的文档内容将以斜体的样式展示在页面中,以区别于段落中的其他字符。
全局属性
15.draggable属性
draggable属性用来定义元素是否可以拖到,该属性有两个值:true 和 false,默认为flase,当值为 true 时表示元素选中之后可以进行拖到操作,否则不能拖动。
16.hidden元素
在HTML5中,大多数元素都是支持hidden属性,该属性有两个属性值:true和false。当hidden属性取值为true时,元素将会被隐藏,反之则会显示。元素中的内容是通过浏览器创建的,页面装载后允许使用JavaScript脚本将该属性取消,取消后该元素变为可见状态,同时元素中的内容也及时显示出来。
17.spellcheck属性
spellcheck属性主要针对于input元素和textarea文本输入框,对用户输入的文本内容进行拼写和语法检查。spellcheck属性有两个值:true(默认值)和false,值为true时检测输入框中的值,反之不检查。
有红色波浪线表示对用户输入的文本内容进行拼写和语法检查
18.contenteditable属性
contenteditable属性规定是否可编辑元素的内容,但是前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。