1，HTML
注释：
<!-- -->
标签分为：
自闭合标签：</>，建议自闭合标签都加"/"，直接就可以知道是自闭合，br，input，image
主动闭合标签 ：<></>
标签分为：
块级标签（不管自己内容，都占一行），div，h，p
行内标签（也称内联标签，不会占一行），span，input, a
标签属性：
<html lang='en'> : lang属性
2，HEAD内的标签
1）title标签：HEAD内只有title标签可以看到
2）meta标签：编码、刷新、自动跳转、关键词、网站描述、兼容模式
<meta charset='UTF-8'> # 设置编码是UTF-8
<meta http-equiv="Refresh" content="5"> # 设置自动刷新
<meta http-equiv="Refresh" content="5, Url=http://www.sina.com.cn"> # 自动刷新，并在5秒后自动跳转百度
<meta name="keywords" content="k1,k2,k3"> # 设置关键字
<meta name="description" content="kkkkkk"> # 设置网站描述
<meta http-equiv="X-UA-Compatible" content="IE=IE9; IE=IE8; IE=IE7"> # 设置网站描述
3）link标签：设置页面图标，stylecss
<link rel="shortcut icon" href="image/favicon.ico"> # 设置页面shortcut icon图标
<link rel="stylesheet" href="/static/css/bootstrap.css"> # 引入CSS
4）style标签：CSS
<style>CSS代码</style> # 可以创建模板，后面拿来复用
5）script标签：javascript，<script>JS代码</script>
<script src="/static/js/jeuery-3.3.1.js"></script> # 引入jquery
3，BODY内的标签
1）各种符号： 空格，>大于号，<小于号等，不用记，网上搜索
效果：产生符号
2）p标签：段落标签
使用：<p>xxxxxxxxxxxx</p>
效果：间距+换行
3）br标签：换行标签
使用：<p>xxxxxx<br>xxxxxx</p>，直接在文字中间加<br>
效果：换行
4）h标签：标题标签
使用：<h1>xxxxxx</h1>
效果：h1~h6，依次从大到小，块级标签
6）div标签：块级标签，使用率最高的标签，学前端学div+css
使用：<div>xxxxxx</div>
效果：白板，不带任何特性
7）span标签：行内标签
使用：<span>xxxxxx</span><span>xxxxxx</span>
效果：白板，不带任何特性，行内标签多个span标签内的文字会呈现在一行内
8）input标签：能够向后台提交的标签，自闭合，行内，最重要必须要全部会
标签属性：
type：标签类型
name：POST提交到后台时，后台要通过name获取输入的值，相当于字典的key；对于radio和checkbox，name是选择框名，对于radio还有互斥作用
value：对于text，password，value是默认值；对于button，submit，value是按钮中的值；对于radio和checkbox，value是选中的值
使用：
<input type='text' name='user' value="默认值"/> # 文本输入框，value设置默认值
<input type='password' name='pwd' /> # 密码输入框
<input type='button' value='登录'/> # 按钮，可以用于ajax提交
<input type='submit' value='提交'/> # 按钮，POST提交时必须用submit
<input type='radio' name='gender' value='male' checked="checked"/> # 单选框，checked默认选中，name相同则互斥，value是选中的值
<input type='checkbox' name="hobby" value="football" checked="checked"/> # 复选框，checked默认选中，name复选框名，value是选中的值
<input type='file' name="f_name"/> # 上传文件，name是上传文件名
<input type='reset' value="重置"/> # 重置，还原所有input值
效果：结合form标签向后台提交数据
9）textarea标签：能够向后台提交的标签，文本输入标签，主动闭合
使用：<textarea name='blocktxt'>默认值</textarea> # 后台根据name取内容，默认值放在中间即可
效果：结合form标签向后台提交多行文本
10）select标签：能够向后台提交的标签，下拉选择标签
标签属性：
name：select名称
size：上下高度
multiple：多选
option-value：选中的值
optgroup：分组显示，分了个组，本身不能被选中
使用：
<select name='city' size="4" multiple="multiple"> # 后台根据name=city取值，size选择框高度(默认=1)，multiple是多选
<option value='1'>上海</option>
<option value='2'>北京</option>
<option value='3' selected="selected">成都</option> # value是city的值，selected是默认选择项
<option value='4'>福州</option>
</select>
效果：结合form标签向后台提交选择结果
多级选择联动：需要配合js
11）form标签：能够向后台提交的标签，最重要必须要全部会
标签属性：
action：提交到哪里去
method：GET拼接到url地址后发过去，POST在body里发过去，抓包都能抓到，默认GET提交
enctype：enctype="multipart/form-data"，input标签有上传文件时要加这个属性，表示把上传的文件一点点发给服务器
使用:
<form action="…", method="POST">
<input…/>
</form>
效果：
配合input，textarea，select，用于提交表单
样例：
搜索是以get请求的，以百度为例，get请求为：https://www.baidu.com/s?wd=guxh，于是自己做个跳转的方法：
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="搜索">
</form>
12）a标签：跳转，行内标签
标签属性：
href：跳转页面
target = _blank：跳转时新打开页面
使用：
跳转页面：<a href="http://www.baidu.com" target = _blank> 百度 </a>
做锚：<a href="#id1"> 第一章</a>
<div id='id1'> 第一章内容 </div>
效果：1）跳转，2）做锚
13）img标签：
属性：
src：图片位置
alt：图片获取不到后显示的名称
title：鼠标放上去时显示的名称
使用：
<img src="图片位置" alt="本图片名称" title="本图片名称"> # 放置图片
<a ref='http://www.baidu.com'> <img src="图片位置"> </a> # 放置图片并且点击图片后跳转
效果：呈现图片
14）列表：一般不用，都是通过CSS改造成自己想要的结果
使用：
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
有如下配对关系：ul（li）、ol（li）、dl（dt标题，dd内容）
15）表格：
标签属性：
border：边框
colspan：横跨多少列
rowspan：竖跨多少行
使用：
table表，thead表头，tbody表内容，tr行，th列，td列
<table border='1'> # 设置边框宽度为1
<thead>
<tr>
<th>第一列列名</th>
<th>第二列列名</th>
<th>第三列列名</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td >第一行第三列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td colspan='2'>第二行第二列和第三列</td>
</tr>
</tbody>
</table>
16）label标签
标签属性：
for：与input的id创建管理，点击lable后也能在input输入框内进行编辑输入
使用：只写内容是普通文本，一般结合input，创建关联，在input时显示用户名，输入时可编辑
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
用于：点击文字，获取关联的标签光标
4，用于选择或者值的标签属性
1）id = "i1"
html里，id不能重复，name可以重复
DOM获取：document.getElementById('i1')，获取内容.innerText
jquery获取：$('#i1')
2）class
可以用于jqeury选择，获取class='abc'，$('.abc')
3）name和value
name：POST时传key
value：POST时传value
5，调试
Chrome审查元素，放大镜选中后，可以看到标签
pycharm中，code》reformat code，可以自动帮代码缩进做好