一.无序列表
<ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> </ul>
特性:1.没有顺序,每个<li>标签独占一行(块级元素)
2.默认每一个li标签前有一个实心小圆点
3.主要用于无序类型信息的展示,如导航栏等
二.有序列表
<ol> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> </ol>
特性:1.有顺序,每个<li>标签独占一行(块级元素)
2.默认每一个li标签前有顺序标识
3.一般用于排序类型的列表,如试卷、问卷选项等
三:定义列表
<dl> <dt>列表项1</dt> <dd>列表项1内容1</dd> <dd>列表项1内容2</dd> <dt>列表项2</dt> <dd>列表项2内容1</dd> <dd>列表项2内容2</dd> </dl>
特性:1.没有顺序,每一个dt和dd标签独占一行(块元素)
2.默认没有标记
3.一般用于一个标题下有一个或多个列表项的情况
四.表格
组成部分:行
列
单元格
表格优点:结构稳定
简单通用
<table border="1" align="right"> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> <tr> <td>数学</td> <td>89</td> </tr> </tr> <tr> <td rowspan="2">李四</td> <td>语文</td> <td>76</td> <tr> <td>数学</td> <td>60</td> </tr> </tr> </table> <table border="1" align="center"> <tr> <td colspan="2" align="center">分数</td> </tr> <tr> <td>89</td> <td>95</td> </tr> </table>
<!--border:边框粗细 align:位置 center:居中 colspan:跨列 rowspan:跨行-->
五.媒体元素
video:视频
<video controls autoplay> <source src="视频地址 " type="video/视频格式"> <source src="视频地址 " type="video/视频格式"> </video>
audio:音频
<audio controls autoplay> <source src="音频地址 " type="audio/音频格式"> <source 9.8src="音频地址 " type="audio/音频格式"> </audio>
六.页面格局结构
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容
<header style="border: 1px; height: 100px;"><h1>页面头部</h1></header> <section style="border: 1px; height: 500px;"><h1>页面主题部分</h1></section> <footer style="border: 1px; height: 100px;"><h1>页面脚部</h1></footer>
七.内联框架
<iframe src="嵌套地址" name="自定义名称"></iframe>
<!--target值必须和iframe的name属性值相等才能完成点击a标签时会在内联框架中显示要跳转的页面-->
<a href="页面地址" target="内联框架自定义名称"></a>