列表:
无序列表:
语法:
<ul>
<li>........</li>
<li>........</li>
<li>........</li>
</ul>
特性:
无序,块元素(独占一行)、默认内容之前加上实心小圆点
应用场景:
导航、侧边栏新闻、有规律的图文组合模块等。
有序列表:
语法:
<ol>
<li>.......</li>
<li>.......</li>
<li>.......</li>
</ol>
特性:
有序、块元素、内容之前默认阿拉伯数字递增
应用场景:
一般用于排序类型的列表,如试卷、问卷选项等。
定义列表:
语法:
<dl>
<dt>标题一</dt>
<dd>.......</dd>
<dd>.......</dd>
<dt>标题二</dt>
<dd>.......</dd>
<dd>.......</dd>
</dl>
特性:
无序、每个dt/dd标签独占一行、默认没有标记
应用场景:
一般用于一个标题下有一个或多个列表项的情况
表格:
表格的基本结构:
单元格、行、列
语法:
<table>
<tr>
<th>第1个单元格的内容</th>
<th>第2个单元格的内容</th>(一般用于表格标题)
.......
</tr>
<tr>
<td>第1个单元格的内容</td>
<td>第2个单元格的内容</td>
. .....
</tr>
</table>
<table border="2">:设置表格的边框属性
跨列:
单元格的横向合并
语法:
<td colspan="所需跨列的列数">单元格内容</td>
跨行:
单元格纵向合并
语法:
<td rowspan="所需跨行的行数">单元格内容</td>
媒体元素:
视频:
语法:
<video src="视频文件路径" controls="controls"></video>
controls为控件属性(播放、暂停、音量控制、下载等),属性还可以添加width/height等
注意:
由于各个浏览器所支持的视频格式会有差异,所以需要引入source属性
例:
<video controls>
<source src="xxxxx.webm"/>
<source src="xxxxx.mp4"/>
您的浏览器不支持video(提示语句)
</video>
音频:
基本语法和视频相同<audio></audio>
结构元素:
<header></header>
标记头部区域的内容
<section></section>
一般用于网页主体内容
<footer></footer>
标记脚部区域的内容
iframe框架:
应用场景:
主要作用是使页面的部分内容用框架实现,一般用于在页面中引用站外的页面内容。
语法:
<iframe sre="引用页面地址" name="框架标识名" ...></iframe>
使用示例:
(1)在被打开的框架上加name属性
<iframe name="mainFrame" src="subFrame/the_second.html"/>
(2)在超链接上设置target目标窗口属性为希望现实的框架窗口名
<a href="subFrame/the_second.html" target="mainFrame" >...</a>