目录
一、整体代码布局
二、常用标签
1. 标题标签
2. 字样标签
3. 图片标签
4. 列表标签
5. 表格标签
一、整体代码布局
<head> </head>：是头部，存放元数据，不会显示在浏览器上，是一些针对网页的设置项
<body> </body>：body内的内容直接显示在页面上。内容一定要写在标签内。
二、常用标签
注意：大多数标签成对出现，后边的标签比前边的多一个 /
1. 标题标签
- <h>：标题标签
- <p>：段落标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<p>
风雨犹祝，山海同欢，是承天地之佑。
星移斗转，沧海桑田，烟火人间依旧。
</p>
2. 字样标签
- <br>：换行
- <hr>：分割线
- <strong>、<b>：字体加粗
- <i>、<em>：斜体字
- <big>：大字体
- <small>：小字体
- <u>：下划线
- <del>：删除线
- <sub>：上标
- <sup>：下标
这里是
<!-- （换行符） -->
<br>换行操作。
<hr> <!-- 分割线 -->
<strong>加粗</strong>
<b>加粗</b>
<i>斜体</i>
<em>斜体</em>
<big>大字体</big>
<small>小字体</small>
<u>下划线</u>
<del>删除线</del>
<sub>上标</sub>
<sup>下标</sup>
2<sup>4</sup>
<b>32<sup>4</sup></b>
3. 图片标签
<img>：图片标签
属性：
src 路径，即图片存放的位置。
alt 加载失败时的提示文字。
width height 宽高。
<a>：超链接标签
属性：
a之间填写显示的文字。
href：将要跳转去的地址链接。
target：target="_blank" 在新建标签页打开。
title ：鼠标放到图片上会显示的文字。
<img src="../image/1.jp" alt="图片加载失败" width="500px" height="300px">
<br>
<img src="../image/1.jpg" alt="" width="500px" height="300px">
<br>
<hr>
<p>百度一下<q>你就知道</q></p>
<a href="https://www.baidu.com/" target="">Baidu</a>
<a href="https://www.baidu.com/" target="_blank">Baidu</a>
<br>
<a href="https://www.baidu.com/" title="点击将跳转到百度"><img src="../image/1.jpg" alt="" width="80px" height="40px"></a>
4. 列表标签
（1）有序列表
ol 为整个列表，li 表示每一个项。
可以利用 type 属性来改变序号的样式：type=" "，默认为数字1
1代表数字，A代表大写字母，a代表小写字母，I代表罗马数字，i代表小写罗马数字。
（2）无序列表
同上。type属性默认是disc小圆点，其他还有 circle圆圈、square方块。
（3）自定义列表
dl为整个列表，dt为列表头，dd为列表项。
<!-- 有序列表 -->
<ol type="a">
<li>计算机</li>
<li>计算机</li>
<li>计算机</li>
</ol>
<!-- 无序列表 默认disc小圆点，circle圆，square方块-->
<ul type="">
<li>计算机</li>
<li>计算机</li>
<li>计算机</li>
</ul>
<!-- 自定义列表 -->
<dl>
<dt>列表头</dt>
<dd><b>列表项</b></dd>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
5. 表格标签
（1）创建表格：
表格有三层，最外层是table；中间层是tr，表示行；最内层是td，表示列。
caption 表示表格标题。
th 表头，自带加粗效果。 （注：th要写在tr内。）
（2）表格属性：
border为边框，不写border表示没有，一般写1。
width height 是需要定义的宽高。
cellspacing 表格之间的空隙，一般把cellspacing设为0。
align = “center” 水平居中。写在 tr 或 td 都可。
<table border="1" width="200" height="100" cellspacing="0">
<caption>标题</caption>
<tr align="center">
<th>(1,1)</th>
<td>(1,2)</td>
</tr>
<tr align="center">
<th>(2,1)</th>
<td>(2,2)</td>
</tr>
</table>
（3）合并单元格
合并列：
colspan （跨列合并），左合并右，把右边的删掉，删除的是同一个tr内的td。
合并行：
rowspan（跨行合并），上合并下，写在需要合并的最上面，把下面的删掉。删除的是不同tr内的td。
（4）练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="400" height="200" cellspacing="0" align="center">
<tr>
<td></td>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
<tr>
<td rowspan="2">上午</td>
<td>123</td>
<td>456</td>
<td>789</td>
<td>000</td>
<td>145</td>
<td>789</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="7">午休</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>