HTML5页面元素及属性
1.无序列表—ul元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ul元素的使用</title>
</head>
<body>
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
</body>
</html>
2.有序列表—ol元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ol元素的使用</title>
</head>
<body>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>柠檬</li>
</ol>
</body>
</html>
3.定义列表—dl元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>dl元素的使用</title>
</head>
<body>
<dl>
<dt>计算机</dt> <!--定义术语名词-->
<dd>用于大型运算的机器</dd> <!--解释和描述名词-->
<dd>可以上网冲浪</dd>
<dd>工作效率非常高</dd>
</dl>
</body>
</html>
4.对列表的嵌套的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表的嵌套应用</title>
</head>
<body>
<h2>饮品</h2>
<ul>
<li>咖啡
<ol> <!--有序列表的嵌套-->
<li>拿铁</li>
<li>摩卡</li>
</ol>
</li>
<li>茶
<ul> <!--有序列表的嵌套-->
<li>碧螺春</li>
<li>龙井</li>
</ul>
</li>
</ul>
</body>
</html>
首先定义了一个包含两个列表项的无序列表，然后在第一个列表项中嵌套一个有序列表，在第二个列表项中嵌套一个无序列表，方法为在<li></li>中定义有序或无序列表。
5.header元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header元素的使用</title>
</head>
<body>
<header>
<h1>秋天的味道</h1>
<h3>你想不想知道秋天的味道？它是甜、是苦、是涩...</h3>
</header>
</body>
</html>
6.article元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>article元素的使用</title>
</head>
<body>
<article>
<header>
<h2>第一章</h2>
</header>
<section>
<header>
<h2>第1节</h2>
</header>
</section>
<section>
<header>
<h2>第2节</h2>
</header>
</section>
</article>
<article>
<header>
<h2>第二章</h2>
</header>
</article>
</body>
</html>
7.aside元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>aside元素的使用</title>
</head>
<body>
<article>
<header>
<h1>标题</h1>
</header>
<section>文章主要内容</section>
<aside>其他相关文章</aside>
</article>
<aside>右侧菜单</aside>
</body>
</html>
定义了两个aside元素，其中第1个aside元素位于article元素中，用于添加文章的其他相关信息。第2个aside元素用于存放页面的侧边栏内容。
8.section元素的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>section元素的使用</title>
</head>
<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>
</html>
header元素用来定义文章的标题，section元素用来存放对小张的评论内容，article元素用来划分section元素所定义的内容，将其分为两部分。
9.figure和figcaption元素的用法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>figure和figcaption元素的使用</title>
</head>
<body>
<p>信阳师范学院所在地——信阳市，位于河南省南部，东邻安徽，南接湖北，是江淮河汉间的战略要地，鄂豫皖区域性中心城市。山水秀丽，气候宜人，素有“北国江南，江南北国”之美誉，是中国著名的宜居之城、旅游之城、创业之城。学校坐落在信阳市贤山北麓、浉水之滨，西临“长淮明珠”南湾湖，南望“云中公园”鸡公山，校园四季有花，四季有绿，郁郁葱葱，高低错落，青山绿水，诗情画意，被誉为“河南省最美的校园”、“中国最美的大学之一”。</p>
<figure>
<figcaption>信阳师范学院</figcaption>
<p>2017欢迎你的到来</p>
<img src="D:\17416.jpg" alt="123">
</figure>
</body>
</html>
figcaption元素用来定义文章的标题，section元素用来存放对小张的评论内容，article元素用来划分section元素所定义的内容，将其分为两部分。
10.hgroup元素的用法<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hgroup元素的使用</title>
</head>
<body>
<header>
<hgroup>
<h1>69小石头</h1>
<h2>69小石头</h2>
</hgroup>
<p>开心快乐每一天</p>
</header>
</body>
</html>
11.hgroup元素与figcaption结合使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>hgroup元素与figcaption元素的结合使用</title>
</head>
<body>
<hgroup>
<figcaption>《致橡树》</figcaption>
<p>《致橡树》是舒婷创作于1977年3月的爱情诗。是朦胧诗派的代表作之一，作为新时期文学的发轫之作，《致橡树》在文学史上的地位是不言自明的。 作者通过木棉树对橡树的“告白”，来否定世俗的，不平等的爱情观，呼唤*，平等独立，风雨同舟的爱情观，喊出了爱情中男女平等，心心相印的口号，发出新时代女性的独立宣言，表达对爱情的憧憬与向往。</p>
<figcaption>《再别康桥》</figcaption>
<p>《再别康桥》是现代诗人徐志摩脍炙人口的诗篇，是新月派诗歌的代表作品。全诗以离别康桥时感情起伏为线索，抒发了对康桥依依惜别的深情。语言轻盈柔和，形式精巧圆熟，诗人用虚实相间的手法，描绘了一幅幅流动的画面，构成了一处处美妙的意境，细致入微地将诗人对康桥的爱恋，对往昔生活的憧憬，对眼前的无可奈何的离愁，表现得真挚、浓郁、隽永，是徐志摩诗作中的绝唱。</p>
<figcaption>《无怨的青春》</figcaption>
<p>《无怨的青春》是*著名女诗人席慕蓉的诗，澄明热烈，真挚动人，充满了田园式的牧歌情调和舒缓的音乐风格。她多写爱情、人生、乡愁，写得美极，淡雅剔透，抒情灵动，饱含着对生命的挚爱真情，充满着对人情、爱情、乡情的领悟。</p>
</hgroup>
</body>
</html>
12.details和summary元素
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>details和summary元素的使用</title>
</head>
<body>
<details>
<summary>显示列表</summary>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
</details>
</body>
</html>
13.progress元素的用法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>progress元素的使用</title>
</head>
<body>
<h1>我的工作进展</h1>
<p><progress min="0" max="100" value="50"></progress></p>
</body>
</html>
value值设为50，max值设为100，因此进度条显示到50%
14.meter元素的用法<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>meter元素的使用</title>
</head>
<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>
</html>
15.time元素的用法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>time元素的使用</title>
</head>
<body>
<p>我们早上<time>9:00</time>开始上班</p>
<p>今年的<time datetime="2015—10—01">十一</time>我们准备去旅游</p>
<time datetime="2015—08—15" pubdate="true">
本消息发布于2015年8月15日
</time>
</body>
</html>
16.mark元素的用法
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mark元素的使用</title>
</head>
<body>
<h3>小苹果</h3>
<p>我种下一颗<mark>种子</mark>，终于长出了<mark>果实</mark>，今天是个伟大日子。摘下星星送给你，拽下月亮送给你，让太阳每天为你升起。变成蜡烛燃烧自己，只为照亮你，把我一切都献给你，只要你欢喜。你让我每个明天都 变得有意义，生命虽短爱你永远，不离不弃。你是我的小呀<mark>小苹果儿</mark> 怎么爱你都不嫌多。红红的小脸儿温暖我的心窝 点亮我生命的火 火火火火。你是我的小呀<mark>小苹果儿</mark> 就像天边最美的云朵。春天又来到了花开满山坡 种下希望就会收获。</p>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cite元素的使用</title>
</head>
<body>
<p>也许愈是美丽就愈是脆弱,就像盛夏的泡沫。</p>
<cite>——明晓溪《泡沫之夏》</cite>
</body>
</html>
被元素cite标注的文字，以斜体的样式显示在了网页中。
18.draggable属性的应用<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>draggable属性的应用</title>
</head>
<body>
<h3>元素拖动属性</h3>
<article draggable="true">这些文字可以被拖动</article>
可拖动的图片<img src="images/td.jpg" draggable="true">
</body>
</html>
19.spellcheck属性的应用
<!doctype html>
<html>
<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>
20.contenteditable属性的应用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>contenteditable属性的应用</title>
</head>
<body>
<h3>可编辑列表</h3>
<ul contenteditable="true">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</body>
</html>
21.综合案例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弄着玩</title>
</head>
<body>
<header>
<h2 align="center">信阳师范学院</h2>
<p align="center">
<img src="D:\images\1.png">
</p>
</header>
<nav>
<P align="center">
<img src="D:\images\2.jpg">
<img src="D:\images\3.jpg">
<!--img src="D:\images\4.jpg"-->
<img src="D:\images\5.jpg">
<img src="D:\images\6.jpg">
</P>
</nav>
<article>
<details>
<summary ><img src="D:\images\7.png"></summary>
<ul contenteditable="true" >
<li>
<figcaption>学校简介</figcaption>
<p><mark>信阳师范学院</mark>所在地——信阳市，位于河南省南部，东邻安徽，南接湖北，是江淮河汉间的战略要地，鄂豫皖区域性中心城市。山水秀丽，气候宜人，素有“北国江南，江南北国”之美誉，是中国著名的宜居之城、旅游之城、创业之城。学校坐落在信阳市贤山北麓、浉水之滨，西临“长淮明珠”南湾湖，南望“云中公园”鸡公山，校园四季有花，四季有绿，郁郁葱葱，高低错落，青山绿水，诗情画意，被誉为“河南省最美的校园”、“中国最美的大学之一”。</p>
<img src="D:\images\9.png">
</li>
<li></li>
<li>
教育教学：<meter value="65" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</li>
<li>
科学研究：<meter value="90" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</li>
<li>
图书文献：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</li>
</ul>
</details>
<details>
<summary><img src="D:\images\8.png"></summary>
<ul contenteditable="true" >
<li>
<figcaption>计算机与信息技术学院</figcaption>
<p>学院历来重视师资队伍建设，现有教职工50余人，其中教授7人，副高级职称18人，博士17人；有全国优秀教师1人，河南省教学名师1人，河南省科技创新人才2人，河南省教育厅学术技术带头人4人，省优秀中青年骨干教师4人，河南省教学标兵3人，校长教学质量奖获得者1人。学院高度重视教育教学质量，不断修订和完善人才培养方案，优化课程结构，规范教学管理，积极开展教学改革与研究，人才培养质量不断提高，形成了“重基础、强能力、讲质量、重实践”的办学特色。近年来，获省优秀教学成果奖5项，我院教师多次在学校组织的教师教学竞赛中获奖。《高级语言程序设计》为河南省精品课程。</p>
<img src="D:\images\10.jpg">
</li>
<li></li>
<li>
教育教学：<meter value="85" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</li>
<li>
科学研究：<meter value="70" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</li>
<li>
图书文献：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</li>
</ul>
<hr size="3" color="#ccc">
</details>
</article>
</body>
</html>
