第二章 列表、表格与媒体元素
1,列表的应用:
无序列表:以<ul>标签来实现 以<li>标签表示列表项 无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容
示例:<ul>
<li>xxx演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
有序列表: 以<ol>标签来实现 以<li>标签表示列表项 有序列表ol-li一般用于显示带有顺序编号的特定场合
示例: <ol>
<li>xxx演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
定义列表: 以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容 定义列表一般适用于带有标题和标题解释性内容的场合
示例: <dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
表格的基本语法:
<table>...</table> 表格标签
<tr>...</tr> 行标签
<td>...</td>单元格标签
示例:<table>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
…… </tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
……
</tr>
</table>
2,表格的跨行和跨列
表格的跨列(列合并)colspan
示例:<table>
<tr>
<td colspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>
表格的跨行(行合并)rowspan
示例:<table>
<tr>
<td rowspan="n">单元格内容</td>
</tr>
<tr>
<td>单元格内容</td>
……
</tr>
......
</table>
3, 网页上播放视频和音频的方法
视频元素video
语法:<video src="视频路径" controls></video>
示例:<video src="video/video.mp4" controls></video>
音频元素audio
语法:<audio src="视频路径" controls></audio>
公共属性:_contrrols控制面板 autoplay自动播放 loop循环播放
解决视频格式无法播放问题:(多重路径哪一个能用播放哪个)
<video controls autoplay="autoplay">
<source src="voide/VID20240722171323.mp4"></source>
<source src="voide/VID20240722171323.avi"></source>
<source src="voide/VID20240722171323.webm"></source>
</video>
4, 页面结构分析
页面布局分析
header 标题头部区域的内容(用于页面或页面中的一块区域
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容
示例:<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>
5, <iframe>内联框架
语法:<iframe src="path" name="mainFrame" ></iframe>
name是属性
scrolling表示是否取消滚动条
frameborder是否需要边框
src是路径
提示:1,可以设置src的属性值为http://www.bdqn.cn,在这个页面中也可以打开一个线上的网页
2,在超链接上设置target目标窗口属性为希望显示的框架窗口名
例如:<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>