一，<a>

a for anchor 锚点。可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

一个典型的<a>标签长这样：Website 代码：<a href="https://example.com">Website</a>

<a>标签的属性：

1.href

包含超链接指向的 URL 或 URL 片段。也就是点击<a>标签后会跳往的目的地。

属性取值：

• URL。可以使用http:，https:，file:、ftp:和mailto：协议。以及javascript伪协议，用于执行js或实现无法点击的<a>标签功能。若为无协议URL，如//qq.com，则会自动填充为当前文件使用协议（不建议）。若为查询字符串，则会在当前URL后面加上字符串，并发起GET请求。例如?name=xxx会访问./index.html?name=xxx

• #id。用于跳往某个页面内的位置。不发起GET请求。

• href="#top" 或者 href="#"。返回到页面顶部。

2.download

表示下载URL到本地而不是导航到URL。如果此属性有值，则会作为预填充的文件名。

3.target

指定在哪里打开链接。

• _self: 默认值，在当前页面打开。
• _blank: 在新窗口打开。
• _parent: 当前框架/上下文的父辈打开。若没有父辈，则与_self相同。
• _top: 在顶级上下文中打开。

二，<form>

表单元素，表示一个区域，包含交互控制元件，用来向服务器提交信息。

<form>标签的属性：

1.action

一个处理这个form信息的程序所在的URL。

2.method

post: HTTP POST方法，表单数据会包含在表单体内然后发送到服务器。（一般都只会用post） get: HTTP GET方法，表达数据会附加在action属性的URI中，以?作为分隔符，再发送到服务器。会将数据暴露在URI，不建议。

3.target

指定在哪里打开链接。

• _self: 默认值，在当前页面打开。
• _blank: 在新窗口打开。
• _parent: 当前框架/上下文的父辈打开。若没有父辈，则与_self相同。
• _top: 在顶级上下文中打开。

4.enctype

当 method 属性值为 post 时, enctype 是将form的内容提交给服务器的 MIME 类型 。

可能的取值:

application/x-www-form-urlencoded: 未指定属性时的默认值。

multipart/form-data: 这个值用于一个 type 属性设置为 "file" 的<input>元素。

text/plain (HTML5)

这个值可以被<button> 或者<input>元素中的 formenctype 属性重载（覆盖）。

5.autocomplete

用于指示 input 元素是否能够拥有一个默认值，这个默认值是由浏览器自动补全的。这个设定可以被属于这个form的子元素的 autocomplete 属性重载（覆盖）。

可能的值有:

off: 在每一个用到的输入域里，用户必须显式的输入一个值，或者document 以它自己的方式提供自动补全；浏览器不会自动补全输入。

on: 浏览器能够根据用户之前在form里输入的值自动补全。

注意: 如果你在一个表单里把 autocomplete 设置成 off 是因为 document 提供了它独有的自动补全，那么你也应该把这个表单里每一个 input 元素的 autocomplete 设成 off 来让 document 能够自动补全.

三，<input>

表单输入元素，用于为表单创建交互式控件，以便接受来自用户的数据；可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。

<input>标签的属性

1.type

<input>的工作方式因其type(类型)属性的值而有很大差异，所以首先要确定type是什么。如果没有指定，则默认类型为text。

• text：单行字段；换行会将自动从输入的值中移除。

• password：一个值被遮盖的单行文本字段。在http协议中实际上也是明文传输。使用maxlength指定可以输入的值的最大长度。

• url：用于编辑URL的字段。换行会自动从输入值中被移队。

• button：无缺省行为按钮。

• reset：用于将表单所有内容设置为缺省值的按钮。

• submit：用于提交表单的按钮。

• image：图片显示按钮。必须使用src属性定义图片的来源及使用alt定义替代文本。还可以使用height和width属性以像素为单位定义图片的大小。

• checkbox：复选框。必须使用value属性定义此控件被提交时的值。也可以使用indeterminate指示复选框在一种不确定状态(大多数平台上，显示为一条穿过复选框的水平线)。

• radio：单选按钮。必须使用value属性定义此控件被提交时的值。使用checked必须只是控件是否缺省被选择。在同一个“单选按钮组”中，所有单选按钮的name属性使用同一个值；一个组中，同一时间只有一个单选按钮可以被选择。

• file：此控件可以让用户选择文件。使用accept属性,可以定义控件可以选择的文件类型。若type属性的值不是file，则accept属性将被忽略。

  注意： accept属性的值必须为一个逗号分割的列表,包含了多个唯一的内容类型声明：

  以 STOP 字符 (U+002E) 开始的文件扩展名。（例如：".jpg,.png,.doc"）

  • 一个有效的 MIME 类型，但没有扩展名

  • audio/* 表示音频文件 HTML5

  • video/* 表示视频文件 HTML5

  • image/* 表示图片文件 HTML5

• hidden：不显示在页面上的控件，但它的值会被提交到服务器。

2.checked

如果该元素的type属性的值为radio或checkbox，有checked属性表示默认选择。

3.src

如果type属性的值是image，这个属性指定了按钮图片的路径；否则它被忽视。

4.autocomplete

这个属性表示这个控件的值是否可被浏览器自动填充。如果type属性的值是hidden、checkbox、radio、file，或为按钮类型（button、submit、reset、image），则本属性被忽略。

可用的值：

• off：用户必须手动填值，或者该页面提过了自己的自动补全方法。浏览器不会此字段自动填充。
• on：浏览器可以根据用户先前的填表情况对此字段自动填值。
• name：完整的姓名。
• given-name：名。
• family-name：姓。
• nickname：昵称
• email：email
• username：用户名
• new-password: 新密码（如创建帐号或更改密码时使用）
• current-password：现有密码
• country：国家
• tel：电话
• ect...

如果<input>元素上没有autocomplete属性，浏览器可使用包含该input元素的表单或通过input的form属性指定的表单的autocomplete属性值。

5.autofocus

这个布尔属性允许你指定的表单控件在页面加载时自动获得焦点，除非用户将其覆盖，例如键入不同的控件。

文档中只能有一个表单元素可以具有autofocus属性。

如果type属性为hidden则不能应用。

6.autosave

此属性应该定义为一个独特的值。如果type的值为search，之前的搜索关键词会保持。

7.disabled

该布尔属性表示此表单控件不可用。在禁用的控件中，click事件将不会被分发，控件的值在提交表单时也不会被提交。如果type属性为hidden，此属性将被忽略。

8.required

这个属性指定用户在提交表单之前必须为该元素填充值。当type属性是hidden,image或者按钮类型(submit,reset,button)时不可使用

9.pattern

检查控件值的正则表达式。pattern必须匹配整个值，而不仅仅是某些子集.。使用title属性来描述帮助用户的模式.。当类型属性的值为text, search, tel, url 或 email时，此属性适用，否则将被忽略。

10.form

input所关联的form表单 (它的"表单拥有者"). 如果这个属性被明确定义, 那么它的值一定是在同一个document中表单ID. 这样能够让你把input标签放在任何的位置, 不仅限于作为form表单的后代元素. 这样在提交表单时，可以把表单外与该表单通过form属性相关联的表单元素值一并提交。

四，<label>

label元素表示用户界面中某个元素的说明。

配合<input>元素使用：

1.给<input> 一个 id 属性， <label> 一个 for 属性，其值和 input 的 id 一样。

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

效果如下：

可以单击关联的<label>标签来聚焦或激活<input>。视觉上相关联，亦增加了点击区域。

2.另外，可以将<input>直接放在<label>里，省去for和id属性。

<label>Do you like cheese?
  <input type="checkbox" name="cheese">
</label>
<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

Do you like cheese? Do you like peas?

其他使用事项：

• 标签标记的表单控件成为标签元素的标签控件。一个input可以与多个标签相关联。
• 标签本身并不与表单直接相关。只通过相关联的控件间接地与表单相关联。
• 当点击或触屏(tap)一个与表单控件相关联的<label>时，关联的控件的click事件也会触发。

五，<select><option><optgroup>

<select>元素表示一个控件，提供一个选项菜单。菜单内的选项为<option>，可以由<optgroup>元素分组。选项可以被用户预先选择。

<label for="pet-select">Choose a pet:</label>

<select id="pet-select">
        <option value="">--Please choose an option--</option>
     <optgroup label="big">    
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
     </optgroup>   
     <optgroup label="small">
        <option value="hamster">Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
     </optgroup>
</select>

Choose a pet:

--Please choose an option-- Dog Cat Hamster Parrot Spider Goldfish

一般预设值为value=""。

<select>标签的属性

• autocomplete
• autofocus
• disabled：这个布尔值的属性表面一个用户是否可以操控该表单对象。如果这个属性没有被明确定义，则从它的父元素继承；如果没有父元素设置disabled属性，则默认该表单对象为enabled。
• form
• multiple：这个布尔值的属性标记select是否可以多选。默认是单选。
• required：规定值不能为空。

<option>标签的属性

• selected：如果存在，这个选项初始被选中。

  如果<option>元素是<select> 元素的后继，并且它的 multiple 属性没有设置，这个 <select>元素只有一个 <option>元素可以拥有 selected 属性。

• value：这个属性的内容代表这个选项选中的话，提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

• label：这个属性是用于表示选项含义的文本。如果 label 属性没有定义，它的值就是元素文本内容。

注解：label 属性为包含短的标签而设计，通常用在层级菜单中。 value 属性描述了更长的标签，为用在单选按钮附近而设计。

• disabled：如果设置了这个布尔属性，选项就不是可选的。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，如果元素的祖先是禁用的 <optgroup> 元素，元素仍然是禁用的 。

<optgroup>标签的属性

• disabled
• label：见上述注解。

六、<textarea>

textarea元素表示一个多行纯文本编辑控件。

• 多行文本域专指使用 <textarea>元素，而不是使用<input>元素。

• <textarea>元素与<input>元素的编写略有不同。<input>元素是一个空元素，这意味着它不能包含任何子元素。另一方面，<textarea>元素是一个常规元素，可以包含文本内容的子元素。

• 如果您想为<input>元素定义一个默认值，那么必须使用value属性;另一方面，对于<textarea>元素，将默认的文本放在起始标记和<textarea>的结束标记之间。

• 因为它的本质， <textarea>元素只接受文本内容；这意味着将任何HTML内容放入<textarea>中都呈现为纯文本内容。

• 注意到在大多数浏览器中，文本区域在右下角有一个拖放操作，允许用户调整它的大小。这种调整能力可以通过使用CSS设置文本区域的resize性质为 none 来关闭。

textarea {
  resize: none;
}

<textarea>的属性

• cols：文本域的可视宽度。必须为正数，默认为20。

• rows：输入文本的行数(显示的高度)。

• wrap：指定文本换行的方式。默认为soft。

  • hard：在文本到达元素最大宽度的适合，浏览器自动插入换行符。比如指定cols值。
  • soft：不插入。

• placeholder：向用户提示可以在控件中输入的内容。 在渲染提示时，占位符文本中的回车符(\r)或换行符(\n)一定会被作为行断（换行）处理。

• autocomplete：on/off。

  如果不指明autocomplete属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是textarea元素的父级<form>或者textarea有跟表单相同的id（参见下面的form属性）。

• autofocus

• disabled：禁用文本域。默认为false。如果未指定，也可以从父级上如<fieldset>继承而来。

• readonly：不允许用户修改元素内文本。

和 disabled 属性不同的是，readonly能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

• required
• form

七，<button>

button元素表示一个可点击的按钮，可以用在表单或文档其他需要使用简单标准按钮的地方。

<button>的属性

• type：button的类型。

  可选值：

  • submit: 此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。

  • reset: 此按钮重置所有组件为初始值。

  • button: 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。如果省略了type属性，那么这就是默认值。

如果你的按钮不是用于向服务器提交数据，请确保这些按钮的 type 属性设置成 button。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。

• value：button的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。
• name
• autofocus
• disabled
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget

几个form属性与input相同

<button>与<input>的异同

从技术上讲，使用<button>元素或<input>元素定义的按钮几乎没有区别。

<button> 元素比 <input> 元素更容易使用样式。你可以在元素内添加HTML内容（像 <em>、<strong> 甚至 <img>），以及 ::after 和 ::before 伪元素来实现复杂的效果，而<input>元素是空元素,它们的标签被插入到value属性中，只支持文本内容。

八，<table>相关

<p>Simple table with header</p>
<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>

---

Simple table with header

First name	Last name
John	Doe
Jane	Doe

-----------------------------------------------------

<p>Table with thead, tfoot, and tbody</p>
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
</table>

---

Table with thead, tfoot, and tbody

Header content 1	Header content 2
Footer content 1	Footer content 2
Body content 1	Body content 2

---

<p>Table with colgroup</p>
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Countries</th>
    <th>Capitals</th>
    <th>Population</th>
    <th>Language</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 million</td>
    <td>English</td>
  </tr>
  <tr>
    <td>Sweden</td>
    <td>Stockholm</td>
    <td>9 million</td>
    <td>Swedish</td>
  </tr>
</table>

---

Table with colgroup

Countries	Capitals	Population	Language
USA	Washington D.C.	309 million	English
Sweden	Stockholm	9 million	Swedish

---

<p>Table with colgroup and col</p>
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Lime</th>
    <th>Lemon</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Green</td>
    <td>Yellow</td>
    <td>Orange</td>
  </tr>
</table>

---

Table with colgroup and col

Lime	Lemon	Orange
Green	Yellow	Orange

---

<p>Simple table with caption</p>
<table>
  <caption>Awesome caption</caption>
  <tr>
    <td>Awesome data</td>
  </tr>
</table>

---

Simple table with caption

Awesome caption

Awesome data