一 head中的标签
<!--
head中主要有以下标签：
meta -- 定义html文档中的元数据（设置网页的基本设置）
title -- 设置网页标题
style -- 在html中提供css代码对应的标签
link -- 导入图标/css文件的标签
scrpit -- 导入js代码文件的标签
base -- url基本地址
-->
<!DOCTYPE html>
<html>
<head>
<!--设置网页中文本的编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<!--设置网页图标
rel - 设置文件作用，stylesheet：样表示，icon：图标
type - 设置文件类型，文件类型/文件后缀；text/css：文本/后缀css，image，ico：图片/后缀是ico
href - 设置文件路径；可以是绝对路劲也可以是相对路径
-->
<title>head中的标签</title>
<link rel="icon" type='image/ico' href = './img/aaa.ico'/>
</head>
<body>
</body>
</html>
二 文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本标签</title>
<link rel="icon" type="image/ico" href = "./img/aaa.ico"/>
</head>
<body>
<!--1.标题标签(h1-h6)-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5></h5>
<h6></h6>
<!--2.段落标签（p标签）
双标签，保证一个段落对应一个p标签
一个标签占一行
-->
<p>
一月一次的“士兵接待日”活动如期开展，第83集团军某旅领导带领机关人员为基层士兵代表解难释惑……这天的士兵接待室，气氛融洽。
</p>
<p>
“到了部队头脑要灵活，少提意见多干事。”下士王熙鹏记得当兵时，曾在部队干过几年的表哥这样对他说。
</p>
<!--3.font标签
双标签：一行可以有多个
-->
<font>性别：</font>
<font>男</font>
<font>女</font>
<!--4.文字效果相关的标签
在html中直接敲回车或者空格缩进是无效的。
<br/> --单标签，网页中的内容强制换行
 ； --一个像素（" "代表空一个像素）
  -- 一个空格
<b></b> -- 加粗文字
<strong></strong> -- 加粗文字（有强调的意义）
<i></i> -- 倾斜文字
<em></em> -- 倾斜文字 有强调的意义
-->
<p>
窗前明月光，<br />
疑是地上霜。<br />
举头忘明月，<br />
 低头思<strong><em>故乡</em></strong>。
</p>
</body>
</html>
三 列表中的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小刚的网页</title>
</head>
<body>
<!--1.无序列表（ul）
ul标签 --- 代表的容器，是一个整体
li标签 -- 列表中的元素
-->
<ul>
<li>python</li>
<li>H5</li>
<li>java</li>
<li>testing</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>
<a href="#p1" href="#top">第一组</a><br />
<a href="#p2">第二组</a><br />
<a href="#p3">第三组</a><br />
<a href="#p4">第四组</a>
<!--1.图片标签（img）
单标签
默认情况下一行可以显示多张图片
src属性：设置图片得知/路径；可以是本地路径也可以是网络地址
title属性：设置图片标题 （当鼠标停留在图片上才会显示）
alt属性：图片加载失败的时候提示信息
-->
<p id="p1">第一组</p>
<img src="img/luffy1.png" title="路飞" alt="图片不存在"/>
<img src="http://www.114la.cn/static/images/baidu.png" title="百度"
<br />
<p id="p2">第二组</p>
<img src="img/luffy1.png" title="路飞" alt="图片不存在"/>
<img src="http://www.114la.cn/static/images/baidu.png" title="百度"
<br />
<p id="p3">第三组</p>
<img src="img/luffy1.png" title="路飞" alt="图片不存在"/>
<img src="http://www.114la.cn/static/images/baidu.png" title="百度"
<br />
<p id="p4">第四组</p>
<img src="img/luffy1.png" title="路飞" alt="图片不存在"/>
<img src="http://www.114la.cn/static/images/baidu.png" title="百度"
<br />
<!--2.超链接（a）
双标签
a.href属性：跳转的目的地
网址 -- 点击超链接直接加载网址对应的网页
本地html文件地址 -- 点击超链接直接加载本地html文件
# ---- 刷新
选择器 --- 让当前页面滚动到页面中指定的位置
_self -- 在当前页面中加载新的网页（默认值）
_blank -- 在新的页面加载新网页
-->
<!--加载网页-->
<a href="http:/www.baidu.com" target="_blank">百度一下</a>
<a href="http://www.baidu.com"><img src="http://www.114la.cn/static/images/baidu.png"/></a>
<br />
<!--加载本地html文件-->
<a href="03-列表标签.html">列表</a>
<!--刷新当前网页-->
<a href="#">刷新</a>
<!--页面内的跳转-->
<a href="#top">回到顶部</a>
</body>
</html>
五 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签</title>
</head>
<body>
<!--表格
标签
1.table标签 -- 代表表格整体
cellspacing属性：设置表格单元格和单元格以及单元格和表格之间的间距
bgcolor属性：设置整个表格背景颜色（包含单元格的部分）
cellpadding:设置单元格中的内容到单元格边框之间的距离（上下左右）
width属性:设置整个表格的宽度
heigth属性：设置整个表格的高度
align属性：center（居中），left（左对齐），right（右对齐）；让整个表格在他的父标签里面居中，居左或居右
bordercolor属性：单元格边框的颜色
border属性：设置单元格边框的宽度
2.tr标签 -- 代表表格中的一行
bgcolor属性：设置一行中所有单元格的背景颜色
heigth属性：设置一行的高度
align属性：让一行中所有单元格的内容，在单元格中居中，居左或者居右
3.td标签 -- 代表表格中的一个单元格
bgcolor属性：设置指定的单元格的格式
weigth属性：设置td所在列的宽度
align属性:让当前单元格的内容在单元格中居中、居左、居左
补充：细线表格
1）设置整个的table的背景颜色是边框的颜色
2）设置每个单元格的颜色和边框线的颜色不一样
3）设置单元格和单元格之间的间隙（cellspacing）为1
-->
<table cellspacing="1" bgcolor="black" cellpadding="20" height="100" width="200">
<!--第一行-->
<tr bgcolor="white">
<td bgcolor="peru">姓名</td>
<td>成绩</td>
<td>学员评价</td>
</tr >
<!--第二行-->
<tr bgcolor="red">
<td>王五</td>
<td>68</td>
<td>留级</td>
</tr>
<!--第三行-->
<tr bgcolor="aqua">
<td>张三</td>
<td>80</td>
<td>不留级</td>
</tr>
<!--第四行-->
<tr bgcolor="aquamarine">
<td>李四</td>
<td>92</td>
<td>不留级</td>
</tr>
<br/>
<table>
<table cellspacing="0" border="1" bordercolor="yellow" >
<!--第一行-->
<tr bgcolor="white" height="20">
<td bgcolor="peru" width="100">姓名</td>
<td>成绩</td>
<td>学员评价</td>
</tr >
<!--第二行-->
<tr bgcolor="white" height="80">
<td>王五</td>
<td>68</td>
<td>留级</td>
</tr>
<!--第三行-->
<tr height="80">
<td>张三</td>
<td>80</td>
<td>不留级</td>
</tr>
<!--第四行-->
<tr height="80">
<td>李四</td>
<td>92</td>
<td>不留级</td>
</tr>
</table>
</table>
</body>
</html>
