HTML5列表分为三种类型：
1：无序列表 <ul></ul>
无序列表由<ul>和<li>标签组成，<ul>标签表示无序列表的声明 <li>标签表示每个列表项的起始
无序列表的特性是：
1：没有顺序，每个<li>标签独占一行（是块元素）。
2：默认<li>标签项前面有个实心小圆点
3：一般用于无序类型的列表，如导航，侧边新闻，有规律的图文组合模块等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无序列表的应用</title>
</head>
<body>
<h5>今日看点</h5>
<ul>
<li>恒大的4个好消息，为何每次都能转危为安关键在</li>
<li>李兆基给儿子取名李家诚，李嘉诚给孙子取名扳回</li>
<li>买房必看!首套房换二套房，满足这两点能节约几</li>
<li>楼市还有多少刚需可透支人民日报打消了炒作房</li>
<li>全款买房有哪些优缺点这些注意事项要擦亮眼睛</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表的应用</title>
</head>
<body>
<p><h1>热门活动 更多</h1></p>
<ul>
<li><img src="https://p4.qhimg.com/dmfd/224_124_75/t01fdc7c5212f73310d.webp" height="106" width="277"/></li>
<p>推荐活动| 原创音乐现金榜T榜</p>
<li><img src="https://p4.qhimg.com/dmfd/224_124_75/t01fdc7c5212f73310d.webp" height="110" width="279"/></li>
<p>推荐节目| 《TAImUSic》爆笑来袭</p>
<li><img src="https://p4.qhimg.com/dmfd/224_124_75/t01fdc7c5212f73310d.webp" height="111" width="275"/></li>
<p>推荐歌曲| 继续宠爱张国荣</p>
<li><img src="https://p4.qhimg.com/dmfd/224_124_75/t01fdc7c5212f73310d.webp" height="112" width="277"/></li>
<p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
</ul>
</body>
</html> 
2：有序列表 <ol></ol>
有序列表由<ol>和<li>标签组成，<ol>标签表示有序列表的声明 <li>标签表示每个列表项的起始
有序列表的特性是：
1：有顺序，每个<li>标签独占一行（是块元素）
2：默认<li>标签项前面有顺序标记（序号）
3：一般用于排序类型的列表，如试卷，问卷选项等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表的应用</title>
</head>
<body>
<p><h1>音乐排行榜</h1></p>
<ol><li><a href="#">潇洒走一回</a><img src="../abc/pic1.png" height="16" width="13"/></li>
<li> <a href="#">偏偏喜欢你</a><img src="../abc/pic1.png" height="16" width="13"/></li>
<li><a href="#">往后余生</a><img src="../abc/pic1.png" height="16" width="13"/></li>
<li> <a href="#">不说再见</a><img src="../abc/pic1.png" height="16" width="13"/></li>
<li><a href="#">舍不得你</a><img src="../abc/pic1.png" height="16" width="13"/></li>
<li><a href="#">请跟我来</a><img src="../abc/pic1.png" height="16" width="13"/></li>
</ol>
</body>
</html>
3：定义列表 <dl></dl>
定义列表是一种很特殊的列表形式，它是标题及列表项的结合，由<dl>标签作为列表的开始， 由<dt>标签作为每个列表项的起始， 由<dd>标签作为每个列表项的定义，
定义列表的特性是：
1：没有顺序，每个<dt>.<dd>标签独占一行（是块元素）
2：默认没有标记
3：一般用于（一个标题下有一个或者多个列表项）的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列表的应用</title>
</head>
<body>
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>香蕉</dd>
<dd>梨子</dd>
</dl>
<dl>
<dt>蔬菜</dt>
<dd>白菜</dd>
<dd>黄瓜</dd>
<dd>青菜</dd>
<dd>西红柿</dd>
</dl>
</body>
</html>
表格 <table></table>
表格的基本结构：1单元格，2行，3列
创建表格标签使用<table>
创建行标签使用<tr>
创建表格标题标签使用<th>
创建单元格标签使用<td>
表格跨行使用 rowspan
表格跨列使用 colspan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格的应用</title>
</head>
<body>
<p><h1>流量调查表</h1></p>
<table border="2">
<tr>
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>975644</td>
<td>97656</td>
<td>7538087</td>
<td>43364677</td>
</tr>
<tr>
<td>46776686</td>
<td>85544</td>
<td>69357</td>
<td>568787</td>
</tr>
<tr>
<td>7538087</td>
<td>546774</td>
<td>476897</td>
<td>334545</td>
</tr>
<tr>
<td>平均每人浏览</td>
<td colspan="3">1.58</td>
</tr>
</table>
</body>
</html>
跨列
<table border="1">
<tr>
<td colspan='2'>学生成绩</td>
</tr>
<tr>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>75</td>
</tr>
</table>
跨行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义列表的应用</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>75</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>75</td>
</tr>
</table>
</body>
</html>
最终效果
<table border="1">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>75</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>85</td>
</tr>
<tr>
<td>数学</td>
<td>75</td>
</tr>
</table>
HTNL5的媒体元素：视频元素、音频元素
视频元素使用 <video></video>
loop 属性实现视频的循环播放
controls 属性可以在页面上以默认的方式进行播放控制
也可以使用autoplay 属性元素让视频文件加载完成后自动播放
<source/>元素来链接不同的视频文件 ,浏览器会自动选择第一个可以识别的格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宣传片</title>
</head>
<body>
<video controls>
<source src="vedio.webm"/>
<source src="vedio.mp4"/>
你的浏览器不支持video标签
</video>
</body>
</html><video autoplay loop>
<source src="vedio.webm">
<source src="vedio.mp4">
</video>
音频元素使用 <audio></audio>
controls属性可以用于提供播放、暂停和音量控件
source属性元素来链接不同的音频文件 ,浏览器会自动选择第一个可以识别的格式
<audio controls>
<source src="music.mp3">
<source src="music.ogg">
</audio>
HTML5的结构元素
页面布局需要有规矩，有排列
页面大体结构分为三块：
1：页面头部
2：页面主体
3：页面底部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构元素布局页面</title>
<style>
header{
height:100px;
border:1px solid red;
}
section{
height:300px;
border:1px solid red;
}
footer{
height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<header>
<h2>网页头部</h2>
</header>
<section>
<h2>网页主体部分</h2>
</section>
<footer>
<h2>网页底部</h2>
</footer>
</body>
</html>
<iframe>框架
主要作用是使页面中的部分内容用框架实现，一般用于在页面中引用站外的页面内容；
语法：<iframe src=引用页面地址 name=框架标识名></ iframe >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe框架的应用</title>
</head>
<body>
<h1>使用iframe嵌套网页</h1>
<p>
<a href="https://www.baidu.com" target="mainFrame">点我进入百度</a><br/>
<a href="https://bj.58.com" target="mainFrame">点我进入58同城</a><br/>
<a href="index.html" target="mainFrame">点我进入主页</a><br/>
</p>
<iframe name="mainFrame"width="800px"height="500px"></iframe>
</body>
</html>
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
