HTML
HTML常用設置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="keywords" content="關鍵詞1，關鍵詞2"/>
<meta name="description" content="網站描述。"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<link rel="shortcut icon" href="/image/chicken.icon">
</head>
<body>
</body>
</html>
注意：
- 定义字符编码的标签必须放在最上方；
- 乱码现象：文件编码和charset字符串编码不一致时，浏览器会根据charset定义去读取内容，所以就会出现乱码。
1. head
1.1 title 标题
<title>Document</title>
1.2 meta 元
<meta charset="UTF-8"> 编码
<meta http-equiv="Refresh" content="5" /> 页面延迟刷新
<meta http-equiv="Refresh" content="5;Url=http://www.baidu.com" /> 页面延迟刷新跳转
<meta name="keywords" content="欧美，日韩，国产，网红" /> 关键字，用于搜索引擎收录和关键字搜索
<meta name="description" content="野鸭子是一个面向全球的皮条平台。" /> 描述信息，用于在搜索引擎搜索时，显示网站基本描述信息
<meta http-equiv="X-UA-Compatible" content="IE=edge"> meta IE浏览器
<meta name="renderer" content="webkit"> meta 国产浏览器
（國產瀏覽器一般都支持 IE内核（兼容模式）和webkit 内核（高速模式）两种模式，默認IE，如上設置默認高速模式渲染）
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
width=device-width ，表示宽度按照设备屏幕的宽度。
initial-scale=1.0，初始显示缩放比例。
minimum-scale=0.5，最小缩放比例。
maximum-scale=1.0，最大缩放比例。
user-scalable=yes，是否支持可缩放比例（触屏缩放）
1.3 link 引入
<link rel="shortcut icon" href="图标文件路径"> 网页标题上的图标
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"> css
2. body
先明白兩個概念：
块级标签----->独占整行。
行内标签----->内容有多少就占多少空间。
<h>标题（1-6） <p>段落 <br>换行 <b>加粗 <strong>也是加粗
<strike>中间横线 <em>斜体 <sub><sup>下角标，上角标 <div>盒子
<hr>横线  空格 < > " © ®
<span> <ul>无序列表 <ol>有序列表 <li> <dl>自定义<dt><dd>
内联标签只能嵌套内联标签
块标签：div,form,table,p,pre,h1-5
内联标签：span,a,strong,em,label,input,select,img,br
2.1 div和span
div，仅块级标签样式。span，仅行内标签样式。
br 换行
p 块 段落（段落和段落之间有些间距，一般用于多内容多段落展示，例如：文章、作文、博客等）
h 块 标题（加大加粗的样式,从h1~h6依次变小）
a 超链接（a标签主要有两个作用：分别是做超链接，点击之后可以跳转到指定地址；做锚点，点击后跳转到页面指定位置。）
ul 列表系列
ul、li（无序）ol、li（有序）dl、dt、dd（定义列表）
table 表格
tr等于table row th等于table head td等于table division<table border="1"> <!-- 边框 --> <thead> <tr> <th colspan="3">人员信息</th> <!-- 合并单元格 --> </tr> <tr> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td>安娜</td> <td>18</td> <td>看书</td> </tr> <tr> <td rowspan="3">娜娜</td> <td>18</td> <td>吃</td> </tr> <tr> <td>25</td> <td>睡</td> </tr> <tr> <td>30</td> <td>玩</td> </tr> <tr> <td>明明</td> <td>男</td> <td>跑</td> </tr> </tbody> </table>
img 图片
<img src="img/lover.png" alt="美女"> <img src="https://i0.hdslb.com/bfs/archive/7fd16d78b326fd55264d827837685928b46c2271.png" alt="说明">
form 表单（把输入的内容提交到后台）
<form action="http://www.baidu.com" method="post"> <p>用户名：<input type="text" name="user"></p> <p>密 码：<input type="password" name="pwd"></p> <p>性别： <input type="radio" name="gender" value="2">男 <input type="radio" name="gender" values="3">女 <p/> <p>爱好： <input type="checkbox" name="favor" value="2">篮球 <input type="checkbox" name="favor" value="8">足球 <input type="checkbox" name="favor" value="10">橄榄球 </p> <p>城市： <select name="city"> <option value="1">上海</option> <option value="2">北京</option> </select> </p> <p>备注：<textarea name="memo"></textarea></p> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
注意：
提交时，只会提交form标签内部【用户交互】相关的标签。
<input type="submit" value="提交">用于提交当前所在的表单。
<input type="reset" value="重置">用于重置当前标签中的选项。form标签内置属性：
action="/xx/"，表示表单要提交的地址。
method="post"，表示表单的提交方式（get 或 post。get获取，post修改）。
enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置。<form action="http://www.baidu.com" method="get" enctype="multipart/form-data"> <input type="file" name="xxxxx"> <input type="submit" value="提交"> </form>form内部【用户交互】相关标签必须设置name，后端通过name获取。
提交表单之后，实际上会将表单中的数据构造成一种特殊的结构，发送给后台，类似于： { user:用户输入的姓名, pwd:用户输入的密码, ... }
radio、checkbox、select除了要设置name属性以外，还必须设置value属性，因为这三种标签在form表单提交时，不会把看到的内容提交到后台，而是把选择选项对应的value值提交到后台。
input 输入【用户交互】
type:
- text，文本框。
- password，密码框。
- radio，单选框（必须设置name属性相同，否则无法实现）。
- checkbox，复选框。
- file，文件上传。
<input type="text"> <input type="password"> <!-- 单选框 --> <input type="radio" name="gender">男 <input type="radio" name="gender">女 <!-- 多选框 --> <input type="checkbox" name='hobby'>篮球 <input type="checkbox" name='hobby'>足球 <input type="checkbox" name='hobby'>橄榄球 <input type="file">
select 下拉框【用户交互】
<h3>单选</h3> <select name='position1'> <option>上海</option> <option>北京</option> <option>深圳</option> </select> <h3>多选</h3> <select multiple name='position2'> <option>上海</option> <option>北京</option> <option>深圳</option> </select>
textarea 多行文本框【用户交互】