无序列表
<ul> </ul>
:无序列表
<ul>
:声明无序列表
<li>
:声明列表项
无序列表的特性:
没有顺序,每个<li>标签独占一行(块元素)
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等
<ul type=""> <li>111</li> <li>222</li> </ul> <type="circle">:空心圆 <type="disc">:实心圆 <type="square">:方形
有序列表
<ol> </ol>
:有序列表
<ol>
:声明有序列表
<li>
:声明列表项
有序列表的特性:
1.有顺序,每个<li>
标签独占一行(块元素)
2.默认<li>
标签项前面有顺序标记
3.一般用于排序类型的列表,如试卷、问卷选项等
<ol> <li>111</li> <li>222</li> </ol>
定义列表
<dl> </dl>
:定义列表
<dl>
:声明定义列表
<dt>
:声明列表项
<dd>
声明列表项内容
定义列表的特性:
没有顺序,每个<dt>
标签、<dd>
标签独占一行,默认没有标记
一般用于一个标题下有一个或多个列表项的情况
<dl> <dt>水果</dt> <dd>苹果</dd> <dd>桃子</dd> </dl>
表格
<table border="1"> <tbody align="middle"> <tr> <td colspan="3" >aaa</td> <td >bbb</td> <td >ccc</td> </tr> <tr> <td >ddd</td> <td rowspan="3" valign="top" >eee</td> <td >fff</td> <td colspan="2" rowspan="2" valign="top" >ggg</td> </tr> <tr> <td >hhh</td> <td >iii</td> </tr> <tr> <td >jjj</td> <td >kkk</td> <td >mmm</td> <td >nnn</td> </tr></tbody> </table> <table>:表格标签 <tr></tr>:行标签 <td></td>:单元格标签 <border>:表格边框 <colspan>:合并列 <rowspan>:合并行 <align>:设置文字位置(left左 middle中 right右) <valign>:设置文字高低(top顶 middle中 bottom下) 在HTML5中:<thead>表头 <tbody>内容 <tfoot>总结 <th>(自带加粗并居中字体)
媒体元素
视频播放
<video muted="muted" autoplay="autoplay" loop="loop" width="600" height="600" controls> <source src="css/bizhishipin.mp4" type="audio/mp4"></source> <source src="css/bizhishipin.ogg" type="audio/ogg"></source> </video> <video>:视频播放器 <muted>:静音播放 <autoplay>:自动播放 <loop>:循环播放 <controls>:播放按钮 <source>:浏览器所支持的视频格式
音频播放
<audio muted="muted" controls="controls" loop="loop"> <source src="css/1.mp3" type="audio/mpeg"></source> </audio> <audio>:音频播放器
HTML5结构框架
header:标题头部区域内容
section:Web页面中的一块独立区域
footer:标题脚部区域内容
nav:导航类辅助内容
iframe内联框架
<h1>使用iframe嵌套网页</h1><br /> <a href="http://www.baidu.com" target="baidu">点击打开百度</a><br /> <a href="http://www.bilibili.com" target="baidu">点击打开B站</a><br /> <a href="index7.html" target="baidu">点击打开了一个HTML页面</a><br /> <iframe name="baidu" src="http://www.163.com" / width="600" height="600" frameborder="0" scrolling="no"> <iframe>:内敛框架标签 <name>:框架标识名 <frameboder>:内联框架边框 <scroling>:内联框架滑轮