一、什么是列表
1.列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。
二、列表的分类：
1.无序列表：<ul></ul>申明无序列表、<li></li>声明无序列表项
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
无序列表的特点：
1.没有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有个实心小圆点
3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
2.有序列表：<ol></ol>申明有序列表、<li></li>声明列表项
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
有序列表的特性
1.有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有顺序标记
3.一般用于排序类型的列表，如试卷、问卷选项等
3. 定义列表：<dl></dl>申明有序列表、<dt></dt>声明列表项、<dd></dd>定义列表内容
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
定义列表的特性
a.没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
b.默认没有标记
c.一般用于一个标题下有一个或多个列表项的情况
| 类型 | 说明 | 项目符号 |
| 无序列表 | 以<ul>标签来实现 以<li>标签表示列表项 | 无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容 |
| 有序列表 | 以<ol>标签来实现 以<li>标签表示列表项 | 有序列表ol-li一般用于显示带有顺序编号的特定场合 |
| 定义类表 | 以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容 | 定义列表一般适用于带有标题和标题解释性内容的场合 |
三、表格
1.为什么使用表格：简单通用、结构稳定
2.表格的基本语法：<table></table>表格标签、<tr></tr>行标签<td></td>单元格标签
<table>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
3.表格的跨列：colspan代表所跨的列数
<table>
<tr>
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>
4. 表格的跨行：rowspan代表所跨的行数
<table >
<tr>
<td rowspan="n"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
5.表格的跨行和跨列
……
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
……
6.示例1
<body>
<table border="1px" cellspacing="0" cellpadding="0 ">
<tr align="center">
<th>总页面流量</th>
<th>共计来访</th>
<th>会员</th>
<th>游客</th>
</tr>
<tr>
<td>平均人流量</td>
<td colspan="3" align="center">1.58</td>
</tr>
</table>
</body>
注：align="center"代表单元格文字居中排列 ；cellspacing="0" 设置表格外边框；cellpadding="0 设置内边框
四、HTML5的媒体元素
1.视频元素(video):src指定要播放的视频文件路径、controls:提供播放、暂停和音量的控件
<video src="视频路径" controls></video>
a.插入视频时不同格式时使用浏览器解析的方式
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
b.自动播放属性(autoplay)
<video autoplay>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
你的浏览器不支持video元素
</video>
2.音频元素(audio)
<audio src="音频路径" controls></video>
a.插入音频时不同格式时使用浏览器解析的方式
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
五、HTML5的结构元素
| 元素名 | 描述 |
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>
六、<iframe>内联框架：name：代表框架标识名 src：引用页面地址
<iframe src="path" name="mainFrame" ></iframe>
1.<iframe>属性（实现页面间的相互跳转）
a.在被打开的框架上加name属性
<iframe name="mainFrame" src="subframe/the_second.html" />
b.在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>
扫一扫
370
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
