j8# 列表元素
ul元素
无序列表是网页中最长用的列表，之所以成为“无序列表”，是因为其各个列表项之间没有顺序级别之分，通常是并列的。
<ul>
<li>列表一<li>
<li>列表二<li>
<li>列表三<li>
</ul>
ol元素
有序列表级为有排列顺序的列表，其各个列表按照一定的顺序排列。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
dl元素
定义列表用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的表项前没有任何项目符号。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</d1>
列表的嵌套应用
在使用列表中，列表项中也有可能包含若干子列表项要想在列表中定义子列表项就需要将列表进行嵌套。
<ul>
<li>咖啡
<ol>
<li>拿铁</li>
<li>摩卡</li>
</ol>
</li>
<li>茶
<ul>
<li>碧螺春</li>
<li>龙井</li>
</ul>
</li>
</ul>
结构元素
header元素
HTML5中的header元素是一种具有特殊引导和导航作用的结构元素，该元素可以包含所有常放在页面头部的内容。
<header>
<h1>网页主题</h1>
</herder>
nav元素
nav元素用于定义导航链接，是HTML5新增的元素，该元素可以将具有导航性质的链接归纳在一个区域中，使得页面元素语义更加明确。
<nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概况</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>
article元素
article元素代表文档、页面或者应用程序中与上下文不相关的独立部分，该元素经常被用于定义一篇日志、一条新闻或用户评论等。
<body>
<article>
<header>
<h2>第二章</h2>
</header>
<section>
<header>
<h2>第1节</h2>
</header>
</section>
<section>
<header>
<h2>第2节</h2>
</header>
</section>
</article>
</body>
aside元素
aside元素用来定义当前页面或文章的附属信息部分，他可以包含当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似有别于主要内容的部分。
用法有两种：
- 被包含在article元素内作为主要内容的附属信息
- 在article元素之外使用，作为页面或站点全局的附属信息部分。最常用的使用形式是在侧边栏。其中的内容可以是友情链接或者是广告单元。
<body>
<article>
<header>
<h1>标题</h1>
</header>
<section>文章主要内容</section>
<aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>
</body>
section元素
section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。
没有标题的内容区块不要使用section元素定义
<body>
<article>
<header>
<h2>小张的个人简介</h2>
</header>
<p>小张是一个好学生</p>
<section>
<h2>评论</h2>
<article>
<h3>评论者：A</h3>
<p>小张真的很帅</p>
</article>
<article>
<h3>评论者：B</h3>
<p>小张真的学习很好</p>
</article>
</section>
</article>
</body>
footer元素
用于定义一个页面或者区域的底部，他可以包含所有通常放在页面底部的内容。
与header元素相同，一个页面可以包含多个footer元素。同时，也可以在article元素或者section元素中添加footer元素
<body>
<article>
文章内容
<footer>
文章分页列表
</footer>
</article>
<footer>
文章底部
</footer>
</body>
分组元素
figure元素和figcaption元素
figure元素用于定义独立的流内容，一般指一个独立的单元。
figcaption元素用于为figure元素组添加标题。
<body>
<p>国家体育场（鸟巢）位于北京奥林匹克公园中心区南部，为2008年北京奥运会的主体育场。
工程总占地面积21公顷，场内观众坐席约为91000个。举行了奥运会、残奥会开闭幕式、田径比赛及足球比赛决赛。
奥运会后成为北京市民参与体育活动及享受体育娱乐的大型专业场所，并成为地标性的体育建筑和奥运遗产。
体育场由雅克·赫尔佐格、德梅隆、艾未未以及李兴刚等设计，由北京城建集团负责施工。
体育场的形态如同孕育生命的“巢”和摇篮，寄托着人类对未来的希望。
设计者们对这个场馆没有做任何多余的处理，把结构暴露在外，因而自然形成了建筑的外观。</p>
<figure>
<figcaption>北京鸟巢</figcaption>
<p>拍摄者：小张。拍摄时间：2015年2月2日</p>
<img src="img/niaochao.jpg" alt=""/>
</figure>
</body>
hgroup元素
hgroup元素用于将多个标题组成一个标题组，通常他与h1~h6元素组合使用。通常将hgroup元素放在herder元素中。
<body>
<header>
<hgroup>
<h1>我的个人网站</h1>
<h2>我的个人作品</h2>
</hgroup>
<p>开心快乐每一天</p>
</header>
</body>
页面交互元素
details元素和summary元素
detail元素用于描述文档或文档某个部分的细节。summary元素用于为detail定义标题。标题可见，单击标题会显示或隐藏detail中的其他内容。
<body>
<details>
<summary>显示列表</summary>
<ul>
<li>列表一</li>
<li>列表二</li>
</ul>
</details>
</body>
progress元素
progress用来表示一个任务的完成进度。
<body>
<h1>我的工作进度</h1>
<p>
<progress value="50" max="100"></progress>
</p>
</body>
meter元素
meter元素用于表示指定范围内的数值。
<body>
<h1>学生成绩列表</h1>
<p>
小红:<meter value="65" min="0" max="100" low="60" high="80" title="65分"optimum="100">65</meter></br>
小明:<meter value="80" min="0" max="100" low="60" high="80" title="80分"optimum="100">80</meter></br>
小丽:<meter value="75" min="0" max="100" low="60" high="80" title="75分"optimum="100">75</meter></br>
</p>
</body>
文本层次语义元素
time元素
time元素用于定义时间和日期，可以代表24小时中的某一时间。
time元素有两个属性：
- datetime:用于定义相应的时间或者日期。
- pubdate：用于定义time元素中的日期/时间是文档的发布时间。
<body>
<p> 我们早上<time>9：00</time>开始上课</p>
<p>今年的<time datetime="2015-10-01">十一</time>我们准备取旅游</p>
<time datetime="a2015-08-15" pubdate="pubdate">本消息发布于2015年8月15日</time>
</body>
mark元素
mark元素主要功能是在文本中高亮显示某些字符，以引起用户注意。
<body>
<h3>小苹果</h3>
<p>苹果是人们爱吃的水果，<mark>筷子兄弟</mark>认为用苹果比喻珍爱的人和物十分贴切，因此取名，<mark>《小苹果》。</mark>
这首歌曲的创作初衷就是为了配合电影《老男孩之猛龙过江》中的场景。
筷子兄弟一直想在音乐中加入多样化的元素，因为他们小时候常听荷东、猛士等迪斯科舞曲，
所以采用复古节奏搭配神曲元素，是为了致敬流行，怀念青春</p>
</body>
cite元素
cite元素可以创建一个引用标记，用于对文档参考文献的引用说明，标记的文档内容以斜体样式展示在页面中。
<body>
<p>也许愈是美丽就是愈美丽</p>
<cite>----明晓溪《泡沫之夏》</cite>
</body>
全局属性
draggable属性
draggable属性用来定义是否可以拖动，该属性有两个值：true和false，默认为false，当为true时可以进行拖动，否则不能拖动。
<body>
<h3> 元素拖动属性</h3>
<article draggable="true">这些文字可以被拖动</article>
</body>
hidden属性
当属性为true时元素将被隐藏，反之会被显示。
spellcheck属性
spellcheck属性主要针对Inpute元素和textarea文本输入框，对用户输入的文本内容进行拼写和语法检查。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>spellcheck属性的应用</title>
</head>
<body>
<h3>输入框语法检测</h3>
<p>spellcheck 属性值为 true<br/>
<textarea spellcheck="true">html5</textarea>
</p>
<p>spellcheck 属性值为 false<br/>
<textarea spellcheck="false">html5</textarea>
</p>
</body>
</html>
contenteditable属性
contenteditable属性规定是否可编辑元素的内容，前提是该元素必须可以获得鼠标焦点并且其内容不是只读的。true表示可编辑，false表示不可编辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>contenteditable属性</title>
</head>
<body>
<h3>可编辑列表</h3>
<ul contenteditable="true">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>
</html>
扫一扫
300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
