a源自于，anchor 锚点的意思，可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。
<a href="https://www.example.com/">
<img src="https://www.example.com/foo.jpg">
</a>以下为常用的属性
1.1 href
href是hyperlink reference的缩写，包含超链接指向的 URL 或 URL 片段。属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
- 链接到外部地址
<a href="http://www.mozilla.com/">
External Link
</a>- 锚点到本页的某个部分
<!-- 链接到当前页面的 id="attr-href" -->
<a href="#属性">
Description of Same-Page Links
</a>- 创建一个email链接，点击链接可以直接调用系统邮件窗口
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>- 创建电话链接，在手机端常用的属性
提供电话链接有助于用户查看连接到手机的网络文档和笔记本电脑。
<a href="tel:+491570156">+49 157 0156</a>- 伪协议
<!-- 伪协议 -->
<a href="javascript: alert(1);">下载</a>
<!-- 使用 a 标签但是不跳转 -->
<a href="javascript:;">下载</a>1.2 target 属性
target="_blank"新窗口打开。target="_self"当前窗口打开，这是默认值。target="_parent"上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。target="_top"顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。targrt=*xxx*每一个链接都在同一个tab打开
1.3 rel 属性
下面是一些常见的rel属性的值。
alternate：当前文档的另一种形式，比如翻译。author：作者链接。bookmark：用作书签的永久地址。external：当前文档的外部参考文档。help：帮助链接。license：许可证链接。next：系列文档的下一篇。nofollow：告诉搜索引擎忽略该链接，主要用于用户提交的内容，防止有人企图通过添加链接，提高该链接的搜索排名。noreferrer：告诉浏览器打开链接时，不要将当前网址作为 HTTP 头信息的Referer字段发送出去，这样可以隐藏点击的来源。noopener：告诉浏览器打开链接时，不让链接窗口通过 JavaScript 的window.opener属性引用原始窗口，这样就提高了安全性。prev：系列文档的上一篇。search：文档的搜索链接。tag：文档的标签链接。
1.4 download
上面代码点击后，会出现下载对话框。注意，download属性只在链接与网址同源时，才会生效。也就是说，链接应该与网址属于同一个网站。如果download属性设置了值，那么这个值就是下载的文件名。
<a href="demo.txt" download>下载</a><img>标签用于插入图片。它是单独使用的，没有闭合标签。默认是一个行内元素，与前后的文字处在同一行。图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。所以一般会在css中设置max-width: 100% 用来适应各种浏览设备。
以下为常用的属性
2.1 src属性
src属性是必须的，它包含了你想嵌入的图片的文件路径。
<img src="foo.jpg"><img>可以放在<a>标签内部，使得图片变成一个可以点击的链接。
<a href="example.html">
<img src="foo.jpg">
</a>2.2 alt属性
alt属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。
<img src="foo.jpg" alt="示例图片">2.3 width 属性，height 属性
图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。不过，由于图片的显示大小可以用 CSS 设置，所以不建议使用这两个属性。一种特殊情况是，width属性和height属性只设置了一个，另一个没有设置。
<img src="foo.jpg" width="400" height="300">表格（table）以行（row）和列（column）的形式展示数据。HTML的 <table>标签表示表格数据 。是一个块级容器标签，所有表格内容都要放在这个标签里面。
属性
width ：设置表格的宽度
height：设置表格的高度
align：设置表格的对齐方式，取值: left/center/right
border：设置表格边框宽度
cellpadding：内边距（单元格边框与内容之间的距离）
cellspacing：外边距（单元格之间的距离）
bgcolor：设置表格的背景颜色完整的table结构包含了<thead>、<tbody>、<tfoot> 几个部分
<table>
<thead>... ...</thead>
<tbody>... ...</tbody>
<tfoot>... ...</tfoot>
</table>
3.1 thead 、tbody、tfoot
<thead>、<tbody>、<tfoot>都是块级容器元素，且都是<table>的一级子元素，就跟其名字一样，分别表示一个表格的表头、表体和表尾。
3.2 tr
<tr>（ table row）用来表示表格的一行。一般来说不能直接接在 <table>标签后面。如果直接接在 <table>标签后面，在浏览器中，会自动把<tbody>补上。
3.3 th、td
<th>和<td>都用来定义表格的单元格。其中，<th>（ table head）是标题单元格，<td>（ table data）是数据单元格。一般来说不能直接接在 <table>标签后面。如果直接接在 <table>标签后面，在浏览器中，会自动把<tbody> <tr>两个结构补上。
标签用来定义一个表单，所有表单内容放到这个容器元素之中。下面是一个比较常见的例子。
<form action="https://example.com/api" method="post">
<label for="POST-name">用户名：</label>
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
</form>上面代码就是一个表单，一共包含三个控件：一个<label>标签，一个文本输入框，一个提交按钮。其中，文本输入框的name属性是user，表示将向服务器发送一个键名为user的键值对，键值就是这个控件的value属性，等于用户输入的值。
4.1 form的常用属性。
action：服务器接收数据的 URL。method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<dialog>内部使用）。name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口）。
4.2 input标签的类型
主要属性
type：根据不同的type属性值可以创建各种类型的输入字段
value：最终提交给服务器的值
name：控件的名称，提供给服务器使用，没有name，控件则无法提交
id：唯一标识，只能在当前页面使用，服务器不能用
disabled：禁用，不能被提交<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。它有多种类型，以下为常用的类型。
type="text"是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。type="search"是一个用于搜索的文本输入框，基本等同于type="text"。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。type="button"是没有默认行为的按钮，通常脚本指定click事件的监听函数来使用。type="submit"是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。type="image"表示将一个图像文件作为提交按钮，行为和用法与type="submit"完全一致。type="checkbox"是复选框，允许选择或取消选择该选项。
<input type="checkbox" id="agreement" name="agreement" checked>
<label for="agreement">是否同意</label>type="radio"是单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。注意，多个单选框的name属性的值，应该都是一致的。提交到服务器的就是选中的那个值。
<fieldset>
<legend>性别</legend>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
</fieldset>type="email"是一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。type="password"是一个密码输入框。用户的输入会被遮挡，字符通常显示星号（*）或点（·）。type="file"是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。type="hidden"是一个不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。type="number"是一个数字输入框，只能输入数字。浏览器通常会在输入框的最右侧，显示一个可以点击的上下箭头，点击向上箭头，数字会递增，点击向下箭头，数字会递减。type="tel"是一个只能输入电话号码的输入框。由于全世界的电话号码格式都不相同，因此浏览器没有默认的验证模式，大多数时候需要自定义验证。type="color"是一个选择颜色的控件，它的值一律都是#rrggbb格式。type="date"是一个只能输入日期的输入框，用户可以输入年月日，但是不能输入时分秒。输入格式是YYYY-MM-DD。
注意事项
- 一般不监听input的click事件
- form里面的input要有name
- form必须要有一个含有 type=“submit” 属性的按钮，才能提交内容
4.3 button标签
<button>标签会生成一个可以点击的按钮，没有默认行为，通常需要用type属性或脚本指定按钮的功能。<button>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。
4.4 select标签
上面代码中，<select>生成一个下拉菜单，菜单标题是“--请选择一项--”，最右侧有一个下拉箭头。点击下拉箭头，会显示三个菜单项，供用户点击选择。
<label for="pet-select">宠物：</label>
<select id="pet-select" name="pet-select">
<option value="">--请选择一项--</option>
<option value="dog">狗</option>
<option value="cat">猫</option>
<option value="others">其他</option>
</select>4.5 textarea标签
<textarea>是一个块级元素，用来生成多行的文本框。用style="resize: none;" 来限制输入框是否可以拖动大小。
参考链接
