HTML常用标签

一、a 标签的用法

HTML 的 a标签可以创建通向其他网页、文件、电子邮件地址、电话、同一页面内的位置或任何其他 URL 的超链接。
a标签的常用属性：

1. href

href 属性给出超链接指向的网址。它的值应该是一个 URL 或者锚点。
• 网址
链接通过a标签表示，用户点击后，浏览器会跳转到指定的网址。下面的三条代码都定义了超链接，浏览器会显示出三个Google，且下面自带下划线。用户点击其中任意一个Google，浏览器都会跳转到Google的首页。推荐使用//google.com，因为它会自动选择适用 https 还是 http，也是一个无协议网址，可以在控制台勾选network -->Preserve log来确定。

<a href="https://google.com">Google</a>
<a href="http://google.com">Google</a>
<a href="//google.com">Google</a>

a标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。

<a href="https://google.com"><img src="google.png"/></a>

上面代码中，a标签内部就是一个图像。用户点击图像，就会跳转到指定网址。
• 路径
链接也可以指向一个文件，用户点击后，浏览器打开文件内容。
1、链接到当前文件中的 a/b/c.html 的两种方式

<a href="/a/b/c.html">c.html</a>
<a href="a/b/c.html">c.html</a>

2、链接到当前目录中的 index.html 的两种方式

<a href="index.html">index.html</a>
<a href="./index.html">index.html</a>

• 伪协议
1、javascript:代码；
链接指向一个 javascript 代码，用户点击后，浏览器执行代码。

<a href="javascript:alert(1);">javascript 伪协议 1</a>

上面代码中，链接就指向 javascript 代码。点击后，浏览器会执行代码，显示结果为“1”。
如果是空的 javascript 代码也是允许的。点击后，访问 a 标签，但是页面没有任何反应，现在普遍使用这种空的伪协议。

<a href="javascript:;">空的伪协议</a>

2、 mailto:邮箱
链接指向一个邮件地址，使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。

<a href="mailto:1152****86@qq.com">发邮件给XX</a>

上面代码中，链接就指向邮件地址。点击后，浏览器会打开一个邮件地址，让你可以向 1152****86@qq.com 发送邮件。
不指定邮箱也是允许的，就像下面这样。这时用户自己在邮件程序里面，填写想要发送的邮箱，通常用于邮件分享网页。

<a href="mailto:">发邮件</a>

3、 tel:手机号
如果是手机浏览的页面，还可以使用tel协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。

<a href="tel:151****0995">打电话给151****0995</a>

• id
跳转到内部锚点。

```javascript
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p id="xxx">5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<a href="#xxx">查看xxx</a>

上面代码中，href属性的值是#加上锚点名称。若页面超过一页，点击后，会停在id为 xxx 锚点所在的位置。

2. target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在iframe里面打开。
• _self:在当前窗口打开，如果没有指定属性_self为默认值。

<a href="//baidu.com" target="_self">self</a>

• _blank:在新窗口打开。

<a href="//baidu.com" target="_block">blank</a>

• _parent：在上层窗口打开，这通常用于从父窗口打开的子窗口，或者iframe里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。

<a href="//baidu.com" target="_parent">parent</a>

• _top：在顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。

<a href="//baidu.com" target="_top">top</a>

target还能实现在指定的窗口打开。下面代码中，两个链接都在名叫 test 的窗口打开。首先点击链接 Google，浏览器发现没有叫做 test 的窗口，就新建一个窗口，起名为 test，在该窗口打开 google.com。然后，用户又点击链接 baidu，由于已经存在 test 窗口，浏览器就在该窗口打开 baidu.com，取代里面已经打开的 google.com。

<a href="//google.com" target="test">Google</a>
<a href="//baidu.com" target="test">baidu</a>

二、img 标签的用法

img标签用于发出 get 请求，展示一张图片，<img />
img标签有如下属性：

1. src

src属性指定图片的网址，下例是相对 URL，表示图片与网页在同一个目录。

<img src="dog.png"/>

2. alt

alt 属性用来设定图片的文字说明。图片不显示时（比如下载失败，或用户关闭图片加载），图片的位置上会显示该文本。

<img src="dog.png" alt="dog" />

上面代码中，alt 是图片的说明。图片下载失败时，浏览器会在图片位置，显示文字“dog”。

3. width/height

图片默认以原始大小插入网页，width属性和height属性可以指定图片显示时的宽度和高度，单位是像素或百分比。

<img src="dog.png" width="200" height="150" />

上面代码中，width属性指定图片显示的宽度为 200 像素，height属性指定显示高度为 150 像素。
如果width和height同时设置，可能造成图片变形，通常width和height只设置其中一个，这时浏览器会根据图片的原始大小，自动设置对应比例的图片宽度或高度。

4.max-width:100%

<style>
  *{
    padding:0;
    margin:0;
    box-sizing:border-box;
  }
  img{
    max-width:100%;
  }
</style>

用作手机响应式，像上述代码一样，页面的所有图片都是响应式的。

三、table 标签的用法

table是一个块级容器标签，所有表格内容都要放在这个标签里面。
table有如下子元素：

1. caption

caption总是table里面的第一个子元素，表示表格的标题。该元素是可选的。

<caption>成绩单</caption>

2. thead、tbody、tfoot

thead、tbody、tfoot都是块级容器元素，且都是table的一级子元素，分别表示表头、表体和表尾。这三个元素都是可选的，在源代码中没有先后顺序要求。

<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

3. tr

tr标签表示表格的一行（table row）。如果表格有thead、tbody、tfoot，那么tr就放在这些容器元素之中，否则直接放在table的下一级。

<table>
  <tr>...</tr>
  <tr>...</tr>
</table>

上面代码表示表格共有 2 行。

4. th、td

th和td都用来定义表格的单元格。其中，th是标题单元格，td是数据单元格。

<table>
  <thead>
    <tr><th></th><th>张三</th><th>李四</th><th>王五</th></tr>
  </thead>
  <tbody>
    <tr><th>数学</th><td>61</td><td>91</td><td>85</td></tr>
    <tr><th>语文</th><td>79</td><td>82</td><td>92</td></tr>
    <tr><th>英语</th><td>100</td><td>97</td><td>87</td></tr>
  </tbody>
  <tfoot>
    <tr><th>总分</th><td>240</td><td>270</td><td>264</td></tr>
  </tfoot>
</table>

上面代码中，表格为一个成绩单，第一行是标题行，所以使用th；第二行和第五行中的分数是数据，所以使用td。

table标签的相关样式

• table-layout：是 CSS 属性，定义用于布局表格单元格、行和列的算法。
table-layout取值为auto时，表示采用自动表格布局算法对表格布局，表格及单元格的宽度取决于其包含的内容。

table {
table-layout: auto;
}

table-layout取值为fixed时，表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。通常可结合width属性来限制表格的宽。

table {
table-layout: fixed;
width: 120px;
}

• border-collapse： 是 CSS 属性，用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。
border-collapse取值为collapse时，相邻的单元格共用同一条边框。

table {
border-collapse: collapse;
}

border-collapse取值为separate时，每个单元格拥有独立的边框，它是默认值。

table {
border-collapse: separate;
}

• border-spacing:指定相邻单元格边框之间的距离，该属性只适用于border-collapse值是separate的时候。

table {
border-spacing: 2px;
}

上面代码表示单元格边框之间的距离为 2 像素。

四、表单标签的用法

1. form 标签的用法

form标签用来定义一个表单，所有表单内容放到这个容器元素之中。
form有如下属性：
• action：服务器接收数据的 URL。
• method：提交数据的 HTTP 方法，可能的值有POST（表单数据作为 HTTP 数据体发送），GET（表单数据作为 URL 的查询字符串发送）。
• autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。
• target：在哪个窗口展示服务器返回的数据。

<form action="https://example.com/api" method="post" autocomplete="on" target="_blank">
<input type="text" name="user">
<input type="submit"></form>

上面代码就是一个表单，包含一个文本输入框和一个提交按钮，文本输入框的name属性是user。用户在文本输入框里面，输入用户名，比如 Lucy，然后点击提交按钮，浏览器就会向服务器https://example.com/api发送一个 POST 请求，发送 user=Lucy 这样一段数据，并在一个空白窗口展示服务器返回的数据。

2. input 标签的用法

input标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
input有多种类型，取决于type属性的值。type属性有如下取值：
• type=“text”：普通的文本输入框，用来输入单行文本。

<input name="username" type="text" />

• type=“email”：一个只能输入电子邮箱的文本输入框。表单提交之前，浏览器会自动验证是否符合电子邮箱的格式，如果不符合就会显示提示，无法提交到服务器。

<input name="email" type="email" />

• type=“password”：一个密码输入框。用户的输入会被遮挡，字符通常显示星号“*”或点“·”。

<input name="password" type="password" />

• type=“radio”：单选框，表示一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。

<input name="gender" type="radio" />男
<input name="gender" type="radio" />女

• type=“checkbox”：复选框，允许选择或取消选择该选项。

<input name="hobby" type="checkbox" />网球
<input name="hobby" type="checkbox" />篮球
<input name="hobby" type="checkbox" />乒乓球
<input name="hobby" type="checkbox" />游泳

• type=“file”：一个文件选择框，常用于文件上传功能。默认只能选择一个文件，添加multiple属性后允许选择多个文件。

<input name="file" type="file" />
<input name="files" type="file" multiple />

• type=“submit”：表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。如果不指定value属性，浏览器会在提交按钮上显示默认的文字，通常是“提交”。

<input type="submit" value="保存并提交" />

注意：form里面放一个type="submit"才能触发 submit 事件。

五、localhost

1、http-server

# 安装
yarn global add http-server
# 运行
http-server . -c-1

运行时命令的.可以不要，简写成http-server -c-1或者是hs -c-1，其中-c是缓存的意思，加上-1就是不要缓存的意思，其中.是可以省略的，不要进行双击打开页面，可以用http-server。

2、parcel

# 安装
yarn global add parcel
# 运行
parcel a-href.html