head
head中主要有以下的标签：
meta - 元，定义了HTML文档中的元数据(设置网页的基本设置)
title - 设置网页标题
seyle - 在html中提供CSS代码对应的标签
link - 导入图标/CSS文件的标签
script - 导入js代码、文件的标签
base - url基本地址
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--设置网页中文本的编码方式-->
<title>狗神sb</title>
<!--设置网页标题-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
<!--设置网页图标
rel - 设置文件作用，stylesheet:样式表，icon:图标
type - 设置文件类型，文件类型/文件后缀；text/css:文本/后缀是css；image/ico:图片/后缀是ico
href - 设置文件路径
-->
</head>
<body>
<h1>狗神是个sb</h1>
</body>
</html>
body
<!--
如果需要在网页中显示文字，一般不直接将文字写在body中；而是根据这个文字的功能找到对应的标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签(h1-h6)-->
<h1>content</h1>
<p>
n.所容纳之物;所含之物;内容;(书的)目录，目次;(书、讲话、节目等的)主题，主要内容<br/>
adj.满意;满足;愿意<br/>
v.满足;满意;知足;使满意;使满足
</p>
<h2>context</h2>
<p>n.背景，环境，来龙去脉;上下文;语境</p>
<h3>contest</h3>
<p>n.比赛;竞赛;(控制权或权力的)争夺，竞争</p>
<p>v.争取赢得(比赛、选举等);争辩;就…提出异议</p>
<h4>contact</h4>
<p>n.(尤指经常的)联系，联络;触摸;接触;遇见(某人);碰上(要处理的事)</p>
<p>v.联系，联络(如用电话或信件)</p>
<h5>contract</h5>
<p>n.合同;合约;契约;(雇用杀人的)协议</p>
<p>v.(使)收缩，缩小;感染(疾病);得(病);与…订立合同(或契约)</p>
<h6>contrast</h6>
<p>n.明显的差异;对比;对照;明显不同的人(或事物);(摄影或绘画中的)颜色反差，明暗对比</p>
<p>v.对比;对照;(靠近或作比较时)显出明显的差异，形成对比</p>
<!--2.段落标签(p标签)
双标签，保证一个段落对应一个p标签
一个标签占一行
-->
<p>======啦啦啦========</p>
<!--3.font标签
双标签
一行可以有多个
-->
<font>性别 </font>
<font>男</font>
<font>女</font>
<!--4.文字效果相关标签
在HTML中直接敲或者空格、缩进是无效的。
<br/> - 单标签，让网页中的内容强制换行
- 一个像素(一个" "代表空一个像素)
  - 一个空格
<b></b> - 加粗
<strong></strong> - 加粗(有强调意义)
<i></i> - 倾斜
<em></em> - 倾斜(有强调意义)
-->
<b>promote</b>
<strong>emphasize</strong>
<i>alongside</i>
<em>playground</em>
</body>
</html>
label_of_list
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.无序列表(ul)
ul标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
-->
<ul>
<li>Python</li>
<li>java</li>
<li>html5</li>
<li>C++</li>
</ul>
<!--2.有序列表(ol)
ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
-->
<ol>
<li><a href="02_textlabel_in_body.html">open the door</a></li>
<li>put it in</li>
<li>close the door</li>
</ol>
<!--3.自定义列表(dl)
dl标签 - 代表列表容器，是一个整体
dt标签 - 小分类标签(名词)
dd标签 - 小分类下面的元素(解释)
-->
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>绵阳</dd>
<dd>遂宁</dd>
<dd>眉山</dd>
</dl>
</body>
</html>
Hyperlink&Image
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和超链接</title>
</head>
<body>
<!--1.图片标签(img)
单标签
默认情况下一行可以显示多张图片
src属性:设置图片地址、路径；可以是本地路径也可以是网络地址
title属性:设置图片标题(当鼠标停留在图片上才会显示出来)
alt属性:图片加载失败的时候的提示信息
-->
<img src="img/aaa123.ico" title="luffy" alt="图片不存在"/>
<br/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557739007443&di=c0a97654926874356cdc2434de850222&imgtype=0&src=http%3A%2F%2Fimg.yzcdn.cn%2Fupload_files%2F2018%2F04%2F13%2FFsvJLLQDuskatmrjMK0yDCixiy7L.jpg%3FimageView2%2F2%2Fw%2F580%2Fh%2F580%2Fq%2F75%2Fformat%2Fjpg" title="nevermore"/>
<!--2.超链接(a)
双标签
1)href属性:跳转的目的地
网址 - 点击超链接直接加载网址对应的网页
本地html文件地址 - 点击超链接直接加载本地html文件对应的网页
# - 刷新
选择器 - 让当前页面滚动到指定的位置
2)target属性：跳转方式
_self - 在当前页面中加载新的网页(默认值)
_blank - 在新的页面中加载新的网页
-->
<a href="#num1" id="top">第一组</a>
<!--加载网页-->
<p id="num1">1.加载网页</p>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<br />
<!--加载本地html文件-->
<a href="01_label_in_head.html">01_label_in_head</a>
<a href="03_list_of_label.html"><img src="img/luffy1.png"/ title="luffy"></a>
<br />
<!--刷新当前网页-->
<a href="#">刷新</a>
<br />
<!--页面内跳转-->
<a href="#top">回到顶部</a>
<br />
<h1>---------分割线-----------</h1>
<font><img src="img/aaa.ico" />为保障您的账户安全和正常使用，请尽快完成手机验证！新版<a href="http://www.baidu.com">《京东隐私政策》</a>已上线</font>
</body>
</html>
label_of_table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!--表格
1.table标签 - 代表表格整体
cellspacing属性:设置表格中单元格和单元格以及单元格和表格边框的间距
bgcolor属性:设置整个表格的背景颜色
cellpadding:设置单元格中的内容到边框上下左右的距离
width属性:设置整个表格的宽度
height属性:设置整个表格的高度
align属性:center(居中)，left(左对齐)，right(右对齐)；让整个表格在它的父标签里面居中、居左或者具右
2.tr - 代表表格中的一行
bgcolor属性:设置一行中所有单元格的背景颜色
height属性:设置一行的高度
align属性:控制一行中的内容在单元格里的位置
3.td - 代表表格中的一个单元格
bgcolor属性:设置一个单元格的背景颜色
width属性:设置td所在的列的宽度
align属性:控制一个单元格中的内容在单元格里的位置
补充:细线表格
1)设置整个的table的背景颜色是边框线的颜色
2)设置每个单元格的颜色和边框线的颜色不一样
3)设置单元格和单元格之间的间距(cellspacing)为1
-->
<table cellspacing="5" border="5" bordercolor="black" bgcolor="white" cellpadding="10" align="center">
<!--第一行-->
<tr height="200px">
<td width="450px" align="center" >四川</td>
<td width="450px">在编人数</td>
<td>有效人数</td>
</tr>
<!--第二行-->
<tr bgcolor="aqua">
<td>成都本部</td>
<td>1200</td>
<td>250</td>
</tr>
<!--第三行-->
<tr>
<td>金牛</td>
<td>2000</td>
<td>450</td>
</tr>
<!--第四行-->
<tr>
<td>青羊</td>
<td>1700</td>
<td>350</td>
</tr>
</table>
<br />
<table cellspacing="0" border="1" bordercolor="gray">
<!--第一行-->
<tr height="50">
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100"></td>
<td width="100" colspan="2"></td>
</tr>
<!--第二行-->
<tr height="50">
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第三行-->
<tr height="50">
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td rowspan="3" colspan="2"></td>
</tr>
<!--第四行-->
<tr height="50">
<td></td>
<td colspan="2"></td>
</tr>
<!--第五行-->
<tr height="50">
<td></td>
<td></td>
<td></td>
</tr>
<!--第六行-->
<tr height="50">
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第七行-->
<tr height="50">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
