列表
列表分为有序列表,无序列表以及定义列表
有序列表
<ol>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ol>
ol 声明有序列表,li里面是每一行的内容
无序列表
<ul>
<li>范冰冰演藏族女孩</li>
<li>撞死两个人后自拍</li>
<li>诗隆甜蜜出游</li>
<li>一线城市楼市退烧</li>
</ul>
ul声明无序列表,li里面是每一行的内容,前面的小点可以换样式,加个type属性就好了
我们一般都是用无序列表
定义列表
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>桃子</dd>
<dd>李子</dd>
</dl>
dl声明无序列表,dt(define list title)定义标题,dd是写每一行内容,需要注意的是,dd会默认缩进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>音乐排行榜</h1>
<ol>
<li><a href="#">潇洒走一回</a><img src="img/pic1.png"/></li>
<li><a href="#">偏偏喜欢你</a><img src="img/pic1.png"/></li>
<li><a href="#">酒干倘卖无</a><img src="img/pic1.png"/></li>
<li><a href="#">不说再见</a><img src="img/pic1.png"/></li>
<li><a href="#">舍不得你</a><img src="img/pic1.png"/></li>
<li><a href="#">请跟我来</a><img src="img/pic1.png"/></li>
</ol>
</body>
</html>
类型 | 说明 | 项目符号 |
无序列表 | 以<ul>标签来实现 以<li>标签表示列表项 | 无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容 |
有序列表 | 以<ol>标签来实现 以<li>标签表示列表项 | 有序列表ol-li一般用于显示带有顺序编号的特定场合 |
定义列表 | 以<dl>标签来实现 以<dt>标签定义列表项 以<dd>标签定义内容 | 定义列表一般适用于带有标题和标题解释性内容的场合 |
表格表格
表格的优点(简单通用,结构稳定)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1"cellspacing="0">
<tr>
<td colspan="3">aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>ddd</td>
<td rowspan="3">eee</td>
<td>fff</td>
<td rowspan="2"colspan="2">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>
</table>
</body>
</html>
<table>标签声明我要使用表格,
<tr>开始写每一行的内容
<border>定义边宽,
<cellspacing>定义边框与边框的距离
<rowspan>合并行
<colspan>合并列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1"width="200"height="200">
<thead>
<th>今天天气</th>
<th>2</th>
<th>3</th>
</thead>
<tbody align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
<thead>声明头部
<tbody>声明身体
<tfoot>声明脚(这个一般用不到,统计总结的时候可能会用到)
<thead>(能用到是因为在翻页的时候,最上面的部分不需要动,效果是居中加粗)
<align>属性可以让数据左右或者中间(left center right)
<valign>可以让数据靠上靠下居中(top middle bottom)
网页播放视频或者音频
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<video muted autoplay="autoplay" loop="loop"controls="controls">
<source src="img/vedio.mp4" type="video/mp4"></source>
</video>
</body>
</html>
<muted>静音播放,
<autoplay>自动播放,
<loop>循环播放
<controls>控件
需要注意的是,属性值等于属性名,只写属性名就好
页面结构分析
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容(用于整个页面或页面的一块区域) |
section | Web页面中的一块独立区域 |
article | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
常用的标签是<header>,<footer><section><nav>
内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>使用iframe嵌套网页</h1>
<a href="index06.html" target="myframe">点击打开一个HTML页面</a> <br/>
<a href="http://www.qq.com" target="myframe">QQ</a> <br/>
<a href="http://www.sohu.com" target="myframe">搜狐</a> <br/>
<iframe name="myframe" width="100%" height="800"frameborder="0"scrolling="no"></iframe>
</body>
</html>
需要注意的是target的值和内联框架的name值应该相同,<frameborder>可以调节边框是隐藏,<scrolling>可以调节是否需要滚动条