head中的标签
<!--
head中主要有以下标签：
meta --- 定义了html文档中的元数据（设置网页的基本设置）
title --- 设置网页标题
========================
style --- 在html中提供css代码对应的标签
base --- url基本地址
link --- 导入图标或css文件的标签
script --- 导入js代码或者文件的标签
-->
<!DOCTYPE html>
<html>
<head>
<!--设置网页中文本的编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>head中的标签</title>
<!--设置网页图标
rel 设置文件作用 ，stylesheet：样式表，icon：图标
type 设置文件类型，文件类型/文件后缀；text/css:文本/后缀是css；image/ico 图片/后缀是ico
href 设置文件路径，可以是绝对路径也可以是相对路径
-->
<link rel="icon" type="image/ico" href="./img/aaa.ico"/>
</head>
<body>
</body>
</html>
文本相关的标签
<!--
如果需要在网页中（body的部分）显示文字，一般不直接将文字写在body中，而是根据文字的工找到对应的标签
-->
<!DOCTYPE html>
<html>
<head>
<!--设置网页中文本的编码方式-->
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签
h1/h2...h6
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4 </h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--2.段落标配（p标签）
双标签，保证一个段落对应一个p标签
一个标签占一行
-->
<!--3.font标签
双标签，一行可以显示多个
-->
<!--4.文字效果相关的标签
在html中直接敲回车或者tab/空格 是无效的！！
<br/> -- 单标签，网页中的内容强制换行
-- 一像素，一个  代表一个空一个像素
  -- 一空格
<b></b> -- 加粗
<strong></strong> -- 加粗（还有强调的意义）
<i></i> -- 倾斜
<em></em> -- 倾斜（有强调的意义）
-->
<p>abc</p>
<p>123</p>
<p>vdsnblf</p>
<font>性别：</font><br />
<font>男</font>
<font>女</font><br />
床前<b>明月光</b>，<br />
<i>疑是</i>地上霜；<br />
举头<strong><em>望明月</em></strong>；<br />
 低头思故乡。
</body>
</html>
列表相关标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.无序列表（ul标签）
ul标签 -- 代表列表容器，是一个整体
li标签 -- 列表中的元素
-->
<ul>
<li>python</li>
<li>Java</li>
<li>H5</li>
<li>Test</li>
<li>UI</li>
</ul>
<!--2.有序列表（ol）
ol标签 -- 代表列表容器，是一个整体
li标签 -- 列表中的元素
-->
<ol>
<li>买小龙虾</li>
<li>洗小龙虾</li>
<li>炒小龙虾</li>
</ol>
<!--3.自定义列表（dl）
dl标签 -- 代表列表容器，是一个整体
dt标签 -- 小分类标签（名称）
dd标签 -- 小分类下的元素（解释）
-->
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>绵阳</dd>
<dd>眉山</dd>
<dt>辽宁</dt>
<dd>大连</dd>
<dd>沈阳</dd>
<dd>盘锦</dd>
</dl>
</body>
</html>
超链接和图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.图片标签（img）
单标签
默认情况下一行可以显示多张图片
src属性： 设置图片路径/地址；可以是本地路径也可以是网络地址
alt属性： 图片加载失败的时候的提示信息
title属性： 设置标题（当鼠标停留在图片上才会显示出来）
-->
<a href="" id="top"></a>
<img src="img/luffy1.png" alt="图片不存在！" title="路飞" />
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<!--2超链接（a）
双标签
href属性： 跳转的目的地
1.网址 --- 点击超链接直接跳到该网址
2.本地html文件地址 --- 点击超链接直接加载本地的html文件对应的网页
3.刷新# --- 刷新网页
4.选择器 --- 让当前页面滚动到指定的位置
5.target属性 -- 跳转方式
_self --- 在当前页面中加载新网页（默认的）
_blank --- 在新的页面中加载新网页
-->
<!--加载网页-->
<a href="https://www.baidu.com" target="_blanks">百度</a><br />
<a href="https://www.baidu.com"><img src="https://www.baidu.com/img/bd_logo1.png"/></a><br />
<br />
<!--加载本地-->
<a href="03-列表标签.html">列表</a>
<!--刷新当前网页-->
<a href="#">刷新</a><br />
<!--选择器-->
<a href="#top">返回顶部</a>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表格
1.table 标签 --- 代表表格整体
cellspacing 属性 --- 设置表格中单元格和单元格以及和单元格和表格边框的间距
bgcolor 属性 --- 设置整个表格背景颜色（包含单元格的部分）
cellpadding 属性： 设置单元格中的内容到单元格边框之间的距离（上下左右）
width/height 属性 --- 设置整个表格的宽度和高度
align 属性 --- 让整个表格在他的父标签里面对齐
border 属性 --- 设置单元格边框的宽度
bordercolor 属性 -- 设置单元格边框的颜色
2.tr 标签 --- 一个tr代表表格一行
bgcolor 属性 --- 设置这一行表格背景颜色
height 属性 --- 设置这一行的高度
align 属性 --- 让这一行的内容在单元格内对齐
3.td 标签 --- 一个td代表表格中的一个单元格
bgcolor 属性 --- 设置这一个单元格背景颜色
width 属性 --- 设置所在列的宽度
align 属性 --- 让这个单元格的内容在单元格内对齐
补充： 细线表格 -- 先设置整个table的背景颜色是边框线的颜色
再设置每个丹阳的颜色和边框线的颜色不一样
再设置单元格和单元格之间的间距（cellspacing）为1
-->
<br />
<br />
<table cellspacing="2" bgcolor="black" cellpadding="20" width="1000" height="900" align="center">
<tr bgcolor="azure" height="70" align="center">
<td>姓名姓名姓名姓名姓名姓名</td>
<td>成绩</td>
<td bgcolor="aquamarine">学员评价</td>
</tr>
<tr bgcolor="blue" height="20">
<td width="120">张三</td>
<td>90</td>
<td>不留级</td>
</tr>
<tr bgcolor="bisque">
<td>李四</td>
<td width="80">60</td>
<td align="right">留级</td>
</tr>
</table>
<br />
<table cellspacing="0" border="1" bordercolor="yellow">
<tr>
<td>姓名</td>
<td>成绩</td>
<td>学员评价</td>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>不留级</td>
</tr>
<tr>
<td>李四</td>
<td>60</td>
<td>留级</td>
</tr>
</table>
</body>
</html>
复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table cellspacing="0" border="1" bordercolor="black" width="1000" height="500">
<!--第一行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第二行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第三行-->
<tr>
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td colspan="2" rowspan="3"></td>
</tr>
<!--第四行-->
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<!--第五行-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!--第六行-->
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第七行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br />
<br />
<table cellpadding="2" bgcolor="black" cellpadding="50" width="800" height="600">
<tr bgcolor="aqua">
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aqua">
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aqua">
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="aqua">
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr bgcolor="aqua">
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2" colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="aqua">
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>
</body>
</html>
