<!--整个页面的根标签，一个页面只需要一个，由头和体组成。-->
<html>
<!--头标签，用于引入脚本、导入样式等。一般情况下头标签的内容在浏览器端都不显示。-->
<head>
<!--子标签，用于显示浏览器标题。-->
<title>这是标题</title>
</head>
<!--体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。-->
<body>
这是正文
</body>
</html>
案例相关的标签
<h1></h1> 标题标签
<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn>n的取值1-6
<hr />水平线标签
<hr /> 标签在 HTML 页面中创建一条水平分隔线。
size属性： 水平线的高度，单位像素：px
noshade属性： 没有阴影，取值：noshade，表示显示纯色
<font>字体标签
<font size="1">我个子最小</font>
<font size="3">可能的值：从 1 到 7 的数字。浏览器默认值是 3。</font>
<font size="8">我个子最大</font>
<font color="#c00FFFF">未知颜色1号</font>
<font color="#F00">未知颜色1号</font>
<font color="blue">我是蓝色</font>
<font face="微软雅黑">微软雅黑字体</font>
<font face="黑体">黑体</font>
<b></b>加粗标签
<b>我是粗体标签</b>
<i></i>斜体标签
<i>我是斜体标签</i>
<p></p>段落标签
<br />换行标签
<p>前面P与P之间是段落标记<br/>而前面的br/标志是代表着换行</p>
特殊字符标签
符号名称HTML页面展示
空格符
<小于号<
>大于号>
©版权符©
¥元(yen)¥
图片标签
<img src="图片的路径地址" />
1）src：表示图片的路径，一般使用当前服务器，也可以使用其它服务器。不能使用本地地址。
属性名称含义作用
src图片的路径地址表示图片的路径，一般使用当前服务器，也可以使用其它服务器。不能使用本地地址。
width宽度如果只设置其中一项，那么图片会等比例缩放
height高度
title提示文本鼠标悬停在图片上方会出现的文字信息
alt替换文本图片加载失败的时候才会出现的文字信息
border边框只能定义边框的粗细
5、网站列表页展示
5.2、相关知识点
5.2.1、列表标签：<ul><ol>
5.2.1.1、无序列表<ul>
<ul type="disc">
<li>内容一</li>
<li>内容二</li>
</ul>
ul无序列表的属性：
名称含义
type="circle"空心圆
type="disc"默认值，实心黑色圆
type="square"实心黑色正方形
5.2.1.2、有序列表<ol>
<ol type="1">
<li>内容一</li>
<li>内容二</li>
</ol>
ol有序列表的属性：
名称形式
type="1"默认值，1、2、3...
type="a"小写的英文字母，a、b、c...
type="A"大写的英文字母，A、B、C...
type="i"小写的罗马数字，i、ii、iii...
type="I"大写的罗马数字，I、II、III...
5.2.2、超链接标签：<a>
<a> 标签是超链接。页面中必不可少的一个标签，互联网正是因为有了超链接而变得丰富多彩，我们可以通过超链接跳转页面、跳转图片等相应的操作。
<a href="跳转的路径地址"></a>
超链接的属性：
名称作用取值
href用于确定需要显示页面的路径（URL）必写属性
target确定以何种方式打开href所设置的页面_blank 新窗口打开
_self 在自己的页面中打开，将原来页面覆盖。
默认打开方式
5.2.2.2、空连接
如果我们希望这是一个链接，但是用户单击之后又不需要跳转，那么这种称之为空链接，也叫做假链接。
<a href="#"></a>
<a href="javascript:;"></a> √建议使用这个
<a href="javascript:"></a> √建议使用这个
<a href="javascript:void(0);"></a>
<a href="javascript:void(0)"></a>
锚点链接
用法：
1、首先创建点击跳转的链接a标签，href写上 #锚点名 实现一个绑定的操作。
2、定义一个锚点a标签，定义一个name属性，name的值要与锚点名一致，这个操作也称之为抛锚。
<a href="#锚点名">点击跳转</a>
<a name="锚点名">目标区域</a>
6.2.1.1、表格标签<table><tr><td>
HTML表格由<table>标签以及一个或多个<tr>、<th>(表头)或<td>标签组成
<table> 是父标签，相当于整个表格的容器。
table标签的属性：
名称作用
border表格边框的宽度
width表格的宽度
height表格的高度
cellpadding单元格边沿与其内容之间的空白
cellspacing单元格之间的空白
bgcolor表格的背景颜色
<tr>标签用于定义行
tr标签的属性：
名称作用
align单元格内容的水平对齐方式,
取值：left 左 、right 右、center 居中
<td>标签用于定义表格的单元格（一个列）
td标签的属性：column 列 row 行
名称作用
colspan单元格可横跨的列数(横向合并单元格)
rowspan单元格可横跨的行数(纵向合并单元格)
align单元格内容的水平对齐方式,
取值：left 左 、right 右、center 居中
<!--表格的属性:边框宽度 表格宽度 表格高度 -->
<table border="1px" width="400px" height="300px"
<!--单元格间距 单元格边距 背景颜色排列方式 居中-->
cellspacing="0" cellpadding="0" bgcolor="blue" align="center">
注意:表格属性也可以单独设置为列属性行属性
1）表格默认是没有边框的，需要手动添加border的属性，每一个单元格的大小是根据内容自动适配的，
同样可以给表格标签设置整体的大小。
2）改变table表格的背景颜色，在table标签中添加一个属性 bgcolor，然后设置属性值即可。
3）通过添加表格边框我们发现单元格和单元格之间具有缝隙，如果想把单元格之间的距离以及
单元格和内容之间的距离清除，那么需要在table表格标签上加上cellspacing(单元格之间
的空白)和cellpadding(单元格边沿与其内容之间的空白)分别设置为0。
<tr align="center">
4）另外还有一个属性align水平对齐方式，加在tr身上是改变这一行里面所有单元格的内容，
如果加在td身上就是改变这一个单元格内容。
6.2.3、带有表头的表格
如果希望某一个单元格是一个标题，可以把单元格标签td改写成th，
标题自带加粗和居中的页面显示效果。
6.2.4、合并单元格
表格可以合并单元格的操作，通过跨行和跨列的标签属性进行合并，
但是要注意被合并的单元格标签需要手动删除才可以。
1)跨行使用td标签中的rowspan属性可以实现纵向合并单元格。(合并行)
2)跨列使用td标签中的colspan(横向合并单元格)。 (合并列)
<table border="1" width="400" cellspacing="0" cellpadding="10" align="center">
<tr>
<th>姓名</th>
<th colspan="4">手机号</th>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
<tr>
<td>合并行专用</td>
<td>合并行专用</td>
</tr>
<tr>
<td>李四</td>
<td>13800000000</td>
<td>13800000001</td>
</tr>
</table>
6.2.5、关于table表格的标签补充
标签名作用
caption整个表格的标题
tbody表格主体，无论有没有写tbody，浏览器都会在解析的时候生成一个tbody标签