<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>无序列表</title> ???<!-- ???什么是列表 ????列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来， ????以便浏览者能更快捷地获得相应的信息！ ????01.前面有默认的实心圆 ????02.每个li独占一行 ????03.适用于我们的新闻列表，导航栏 ???--></head><body><ul> ???<li>好好学习</li> ???<li>好好学习</li> ???<li>好好学习</li></ul></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>有序列表</title> ???<!-- ?????01.有顺序，前面默认是阿拉伯数字 ?????02.适用与试卷 和问卷调查！ ???--></head><body> ??<ol> ??????<li>好好学习</li> ??????<li>好好学习</li> ??????<li>好好学习</li> ??</ol></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>自定义列表</title> ???<!-- ??????01.每个dt ?dd都独占一行 ??????02.默认前面没有任何标记 ??????03.适用于一个标题下，有多个列表项的场景 ???--></head><body> ?<dl> ?????<dt>C盘</dt> ?????<dd>文件1</dd> ?????<dd>文件2</dd> ?????<dt>D盘</dt> ?????<dd>文件1</dd> ?????<dd>文件2</dd> ?</dl></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>表格</title> ???<!-- ?????01.简单易用，便于阅读 ?????02.结构简单 ?????table中的属性： ??????01.border： 边框的像素 ??????02.cellpadding 设置内容和单元格之间的距离 ??????03.cellspacing 设置单元格和单元格之间的距离 ??????04.bgcolor ?整个表格的背景色 ???#ffc0cb :代表的是16进制的颜色码 ??????05.width ??表格在浏览器中的宽度比 td节点中的 ????align="left" ????默认 ????align="right" ????align="center" ???--></head><body> ???<table border="1px" cellpadding="5px" cellspacing="5px" ???????????bgcolor="pink" width="50%"> ???????<tr> ????????????<td>第1行的第1列</td> ????????????<td>第1行的第2列</td> ????????????<td>第1行的第3列</td> ???????</tr> ???????<tr> ????????????<td>第2行的第1列</td> ????????????<td>第2行的第2列</td> ????????????<td>第3行的第3列</td> ???????</tr> ???</table></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>跨行跨列</title> ???<!-- ???都必须写在td中 ???????rowspan :跨行 ???????colspan:跨列 ???--></head><body> ?<table border="1px" cellpadding="5px"> ???????<tr> ???????????<td colspan="3" ?align="center"> 学生成绩表</td> ???????</tr> ???????<tr> ????????????<td rowspan="2">张三</td> ????????????<td>math</td> ????????????<td>80</td> ???????</tr> ???????<tr> ????????????<td>java</td> ????????????<td>90</td> ???????</tr> ???????<tr> ????????????<td rowspan="2">李四</td> ????????????<td>math</td> ????????????<td>85</td> ???????</tr> ???????<tr> ????????????<td>java</td> ????????????<td>95</td> ???????</tr> ?</table></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>高级表格</title></head><body><table border="1" cellspacing="0" width="70%"> ??<caption>年终数据报表</caption> ?<!--标题--> ?????<thead bgcolor="red"> ??<!--页眉--> ?????????<tr> ??????????????<th>月份</th> ??????????????<th>收入</th> ?????????</tr> ?????</thead> ???????<tbody bgcolor="pink"> ?<!--主体--> ???????<tr> ???????????<td>1月份</td> ???????????<td>5000</td> ???????</tr> ???????<tr> ???????????<td>2月份</td> ???????????<td>5000</td> ???????</tr> ???????<tr> ???????????<td>3月份</td> ???????????<td>6000</td> ???????</tr> ???????<tr> ???????????<td>4月份</td> ???????????<td>8000</td> ???????</tr> ???????</tbody> ???????<tfoot bgcolor="green"> ?<!--页脚--> ??????????<tr> ??????????????<td>平均月收入</td> ??????????????<td>6000</td> ??????????</tr> ??????????<tr> ??????????????<td>总收入</td> ??????????????<td>24000</td> ??????????</tr> ???????</tfoot></table></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>音频标签</title> ???<!-- ???audio:音频标签 ???controls：是否显示 控制条 ???autoplay：是否自动播放 ???--></head><body> ??<audio controls autoplay> ???????<source src="../audio/music.mp3"> ??</audio></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>视频标签</title> ???<!-- ???video:视频标签 ???controls：是否显示 控制条 ???autoplay：是否自动播放 ???--></head><body> ?<video controls ?autoplay src="../video/video.mp4"> </video></body></html>
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>结构元素</title> ???<!-- ????用于网页的布局： ?????header: 头部区域 ?????section：html页面中的一块独立的部分 ?????footer：脚部区域 ?????nav:导航菜单 ?????article:独立的文章内容 ?????aside：常用于侧边栏 ???--> ???<style type="text/css"> ???????header{ ????????????height: 20px; ???????????border: 1px solid red; ???????} ???????section{ ???????????height: 1000px; ???????????border: 1px solid black; ???????} ???????footer{ ???????????height: 50px; ???????????border: 1px solid blue; ???????} ???</style></head><body> ?<header> ?</header> <section> </section> <footer> </footer></body></html><!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title>内联框架</title> ???<!-- ???src ：指的是 我们需要引入的外部文件地址 ??需求： ????用户点击不同的超链接，在iframe框架中 显示不同的页面！ ???--></head><body> ?<a ?href="http://www.jd.com" target="myIframe">京东</a> ?<a ?href="http://www.taobao.com" ?target="myIframe">淘宝</a> ?<a ?href="http://www.baidu.com" ?target="myIframe">百度</a> ???<iframe name="myIframe" src="http://www.baidu.com" scrolling="no" ?width="500" height="500"></iframe></body></html>
HTML5⑥
原文地址：http://www.cnblogs.com/wwlw/p/7773232.html