HTML(HyperText Markup Language)，超文本标记语言。是一长串字符串，能够被浏览器所解析。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
html分三个重要的模块。
HTML：一个赤裸的人
CSS：是这个人的衣服
JS（JavaScript）：这个人的动作
1、html head部分
<!DOCTYPE html><!--规定标准的html--> <!--一个页面只有一个html标签--> <!--标签的属性 lang="en"指定英文--> <html lang="en"> <head> <!-- 在head中所写的所有标签全部都看不到，是内部的一些东西，除了一个标签就是title--> <!--meta是自闭和标签--> <meta charset="UTF-8"> <!--每隔一秒钟刷新一次--> <meta http-equiv="refresh" content="1"> <meta http-equiv="refresh" content="2;url=http://www.baidu.com"> <!--titlt是主动闭合标签--> <!--更改浏览器tab的名字--> <title>双鱼座</title> <!--rel 代表link做什么用，href代表路径--> <link rel="shortcut icon" href="http://www.imdsx.cn/wp-content/themes/QQ/images/logo.jpg">
<!-- 引入css -->
<link rel="stylesheet" href="tmp.css">
<!-- css样式-->
<style></style>
<!-- 引入js -->
<script src="tmp.js"></script> </head> <body> </body> </html>
2.html body部分
符号
<a href="http://www.imdsx.cn">大 师 兄</a>
<a href="http://www.imdsx.cn"><a></a>
空格：  大于号：> 小于号 < 记住常用的这三个，其他的用时百度
块级标签：H标签(加大加粗)，P标签(段落间有间距)，DIV(白板)
行内标签：SPAN标签(白板)
H，标题标签，由h1到h6，标题由大到小
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
</body>
</html>
p，段落标签，每行文字之间有一定的间距，在检查模式下可查看到（也属于块级标签，鼠标悬浮去看，如果占了整行就是块级标签）；
br，换行；
span，（行内标签），鼠标悬浮去看，如果只占了文字的那一块就是行内标签；（白板标签），没有任何的样式，可以通过css修饰变成p标签等任何标签。
div，块级标签，也叫伪白板标签，可以通过css修饰变成任何一种标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<p>年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。</p>
<span>年轻,就是拿来折腾的。</span>
<div>年轻,就是拿来折腾的。</div>
</body>
</html>
input，文本框标签，包含多个属性，button、text、password、checkbox、radio、file、submit、reset
form， 表单标签可以理解为载体，承载着所有要像后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中
label，label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双鱼座</title> </head> <body> <input type="text" placeholder="请输入用户名" name="username" value="admin"> <input placeholder="请输入密码" type="password" name="password"> <span>是否记住登录</span><input type="checkbox" checked="checked" name="xxx" > <div>性别</div> <span>男</span><input type="radio" checked="checked" name="sex"> <span>女</span><input type="radio" name="sex"> <input type="file" name="file"> <!--button是需要和js连用，通过js进行提交操作--> <input type="button" value="提交"> <form action="http://www.baidu.com" method="post"> <!--- form标签是一个承载体，可以理解为一张白纸，input是往白纸上写字 --> <input type="text" name="username" value="admin"> <input type="reset" value="重置"> <!--submit如果和form表单连用，则直接提交表单--> <input type="submit" value="提交"> <input type="button" value="button登录">
</form> <label for="i1">用户名</label><input id="i1" type="text" value="admin"> <!-- 扩展了input的可点击范围 --> <span>密码</span><input type="password">
<!-- 多行文本 -->
<textarea>多行文本，内容较多的时候会出现下拉条</textarea> </body> </html>
select option，select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple
select optgroup，对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<select name="city" size="3" multiple="multiple">
<option value="1">北京</option>
<option value="2" selected="selected">河北</option>
<option value="3">黑龙江</option>
<option value="4">湖北</option>
</select>
<select>
<optgroup label="黑龙江">
<option>牡丹江</option>
<option>哈尔冰</option>
</optgroup>
<optgroup label="湖北">
<option>武汉</option>
<option>荆州</option>
</optgroup>
</select>
</body>
</html>
a，超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none
ul，列表 ul li · 形式的列表；列表 ol li 数字形式的列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<!--超链接标签-->
<a href="http://www.baidu.com">百度一下</a>
<a href="#kk">跳转</a>
<div id="kk">ddddddddddddddddddddddddd</div> <!--锚点-->
<ul>
<li>武汉</li>
<li>荆州</li>
</ul>
<ol>
<li>北京</li>
<li>河北</li>
</ol>
<dl>
<dt>湖北</dt>
<dd>武汉</dd>
<dd>荆州</dd>
</dl>
</body>
</html>
table，table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<table border="1">
<thead>
<!--行-->
<tr>
<!--表头当中的列-->
<th>id</th>
<th>请求方式</th>
<th>参数</th>
<th>接口</th>
<th colspan="2">操作</th>
</tr>
</thead>
<tbody>
<!--行-->
<tr>
<!--表体当中的列-->
<td>1</td>
<td rowspan="4">post</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>{'name':'dsx'}</td>
<td>/login</td>
<td><a href="http://www.baidu.com" style="text-decoration: none">修改</a></td>
<td><a href="http://www.sina.com" style="text-decoration: none">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
img，img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双鱼座</title>
</head>
<body>
<a href="http://www.baidu.com"><img src="http://ui.imdsx.cn/static/image/dsx.jpg" alt="图片加载失败时显示的文字" title="鼠标悬浮时显示的文字"></a>
</body>
</html>