HTML 常用标签
div 标签
div 标签用于组合其他 HTML 元素，本身无实在意义。常用于页面的布局，比如一个展开式的广告
<body>
<div id="wrap-container">
<div id="collapsed-container"></div>
<div id="expanded-container"></div>
</div>
</body>
div标签可修改
<div contenteditable="ture">你好</div>
span 标签
span 标签是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者Id属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<span> 与 <div> 元素很相似，但 <div> 是一个 块元素 而 <span> 则是 行内元素。
h1 ~ h6 标签
h1 ~ h6 用于设置文本字体大小
p 标签
p 标签表示文本的一个段落
<p>这是第一个段落。这是第一个段落。
这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。
这是第二个段落。这是第二个段落。</p>
strong 标签
strong 标签表示文本十分重要，一般用粗体显示。strong是一个逻辑状态，表示强调
b 标签
b 标签，一个物理状态，仅表示加粗。
ol 标签
ol 标签，用于有序列表
<ol>
<li>li 列表项（list item）</li>
<li>li 列表项（list item）</li>
</ol>
ul 标签
ul 标签，用于无序列表
<ul>
<li>li 列表项（list item）</li>
<li>li 列表项（list item）</li>
</ul>
dl dt dd 标签
dl 标签是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键-值对列表)。
<dl>
<dt>dt 字典标题（dictionary title）</dt>
<dd>dd 字典数据（dictionary data）
</dd>
<dt>dt 字典标题（dictionary title）</dt>
<dd>dd 字典数据（dictionary data）
</dd>
</dl>
form 标签
form 标签表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
<form action="#" method="post">
<input name="name" id="name">
<input name="password" id="password">
<button name="button">Click me</button>
</form>
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="提交">
</form>
<!-- 构造 /users 路径下的 post 请求， Form Data 中的数据结构是
username=xxx&password=xxx, 这部分数据其实是放在 body 里的-->
form 标签也有 target 参数，逻辑跟 a 标签一样
form 标签 type 属性细节
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button>button</button>
</form>
没有写 type 属性，自动升级为提交按钮
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<button type="button">button</button>
</form>
写了类型，点了没用，说明 form 表单没有提交按钮
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="button" value="button">
</form>
这也不能提交，只是个普通按钮
<form action="users" method="post">
<input type="text" name="username">
<input type="password" name="password">
<input type="submit" value="button">
</form>
属性是 submit，可以提交
<input type="checkbox">爱我
出现正方形的勾选框，只能点击勾选框有反应
<input type="checkbox" id="xxx"><label for="xxx">爱我</label>
点击爱我，就等于点击了勾选框
<form action="users" method="post">
<label for="xxx">用户名</label><input type="text" name="username" id="xxx">
<label for="yyy">密码</label><input type="password" name="password" id="yyy">
<input type="submit" value="button">
</form>
点击用户名或密码，光标就跳到对应的输入框内
<form action="users" method="post">
<label>用户名<input type="text" name="username"></label>
<label>密码<input type="password" name="password"></label>
<input type="submit" value="button">
</form>
这样写，不用 id 也跟上面同样效果
<form action="users" method="get">
<label>用户名<input type="text" name="username"></label>
<label>密码<input type="password" name="password"></label>
喜欢的水果
<label><input type="checkbox" name="fruit" value="orange">橘子</label>
<label><input type="checkbox" name="fruit" value="banana">香蕉</label>
爱我
<label><input type="radio" name="loveme" value="yes">yes</label>
<label><input type="radio" name="loveme" value="no">no</label>
<select name="group">
<option value="">-</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
<input type="submit" value="button">
</form>
输入用户名密码勾选橘子香蕉，单选框选中 yes,选项默认第四组，选择第一组，
点击提交按钮，发送 get 请求，请求地址为：
localhost:8080/users?username=1&password=2&fruit=orange&fruit=banana&loveme=yes&group=1
<select name="group multiple">
<option value="">-</option>
<option value="1">第一组</option>
<option value="2">第二组</option>
<option value="3" disabled>第三组</option>
<option value="4" selected>第四组</option>
</select>
select 有 multiple 属性，按住 Ctrl 键可以多选
button 标签
button 标签表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。
<form action="#" method="post">
<input name="name" id="name">
<input name="password" id="password">
<button name="button">提交</button>
</form>
table 标签
table 标签表示表格数据 — 即通过二维数据表表示的信息。
<table>
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
</tr>
</table>
<table>
<thead>
<tr>
<th>班级</th><th>姓名</th><th>分数</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>小明</td><td>93</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>2</td><td>小红</td><td>90</td>
</tr>
</tfoot>
</table>
textarea 标签
textarea 标签表示一个多行纯文本编辑控件。 用于多行文本输入。
<textarea id="story" name="story"
rows="5" cols="33">
It was a dark and stormy night...
</textarea>
<textarea style="resize=none; width:200px;height:100px;"
name="爱好" cols="30" rows="10"></textarea>
用 style 控制文本框的大小或用 cols 或 rows 控制
img 标签
img 标签用于链接图片,alt 这个属性定义了描述图像的替换文本。用户将看到这个显示，如果图像的URL是错误的，该图像不在 支持的格式 列表中，或者如果图像还没有被下载。
<img src="#" alt="图片" />
canvas 标签
canvas 标签提供了一个空白绘图区域，可以使用 APIs （比如 Canvas 2D 或 WebGL）来绘制图形。
<canvas id="canvas" width="宽度" height="高度">
您的浏览器不支援canvas元素（此信息在浏览器不支援canvas元素时显示）
</canvas>
a 标签
a 标签可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。
<p>You can reach Michael at:</p>
<ul>
<li><a href="https://example.com">Website</a></li>
<li><a href="mailto:m.bluth@example.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
iframe 标签
iframe 标签是在当前网页嵌套一个目标网页
<iframe name=xxx src="#" frameboder="0"></iframe>
<a target=xxx href="http://qq.com">QQ</a>
<a target=xxx href="http://baidu.com">baidu</a>
a 标签间的区别
<a href="http://qq.com" target="_blank">QQ</a>
// 在空页面打开
<a href="http://qq.com" target="_self">QQ</a>
// 在自己页面打开，如果嵌套在iframe中，就在iframe中打开
<a href="http://qq.com" target="_parent">QQ</a>
// 在父节点页面打开
<a href="http://qq.com" target="_top">QQ</a>
// 在祖先节点页面打开
<a href="http://qq.com" download>下载</a>
// 下载页面
// 不设置 download 属性，如果 http 的
// Content-type: application/octet-stream 会以下载的方式接收请求
a 标签的 href 细节问题
<a href="qq.com">QQ</a>
会将 qq.com 当作文件处理，加到当前网址后面
<a href="//qq.com">QQ</a>
当前文件是什么协议，就以什么协议打开。 若想以 http 协议打开，可以上传到 github 浏览方式打开，或启用本地的 nodejs server
npm i -g http-server
http-server -c -1 // 不用缓存启动本地nodejs server
<a href="xxx.html">QQ</a>
// 跳转到/xxx.html ，根目录下的xxx.html
<a href="#tx01">QQ</a>
// 锚点，直接加到网址上，本页锚点定位，不会发请求
<a href="?name=ben">QQ</a>
// 后缀直接加到网址上，发送一个带参数的 get 请求
<a href="javascript: alert(1);">QQ</a>
// 伪协议,点击出现 alert 窗口
<a href="javascript:;">QQ</a>
// 什么也不会做
<a href="">QQ</a>
// 发送一个 get 请求到自身网址，刷新页面
<br>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<p>hi</p>
<a href="#">QQ</a>// 点击，页面动一下，跳到 p 标签位置
正确的插入背景图片
<body style="background-image:url(background.gif)">
article 标签
article 标签表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。
section 标签
section 标签表示一个包含在HTML文档中的独立部分，它没有更具体的语义元素来表示，一般来说会有包含一个标题。（章节）
& 特殊符号在 HTML 中要转义处理
转义为
&
参考链接:
