HTML标签

介绍

说起HTML标签，很多人都觉得很简单，比如我刚开始学的时候就是写网页不会的就去W3C school里去查标签，属性。每次都是查完就忘了，而且那个网页还特丑，访问还特慢，不如这次就好好的总结一下常用的HTML标签吧。

语义化

以前总是喜欢<div/>和<span/>，用这两个东西写遍天下的网页。后来在知乎逛多了才知道语义的重要性，简单来说就是能用有字面意思的标签就用字面意思的标签，如<main/>表示主要内容，<section/>表示每个区块，这样别人看自己的HTML代码的时候就会一目了然。

下面给出常用的语义化标签

<header>
    <nav>
        <ul>
            <li>主页</li>
            <li>产品</li>
            <li>关于我们</li>
        </ul>
    </nav>
</header>

<aside>
    我的广告
</aside>

<main>主要内容</main>
<section>区块1</section>
<section>区块2</section>

<article>
    <h1>主要标题</h1>

    <hr>

    <h2>次要标题</h2>
    <p>第一自然段</p>
    <p>第二自然段</p>

    <h2>次要标题</h2>
    <p>第一自然段</p>
    <p>第二自然段</p>
</article>

<footer>
    <small>版权所有</small>
</footer>

可替换标签

CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类外观渲染独立于CSS的 外部对象。

比如常用的<img/>，浏览器会先下载图片，然后用图片将这个标签替换掉。

<iframe/>

用法

<iframe src="https://www.baidu.com" name="xxx"></iframe>

和<a/> 一起用

在iframe里指定name，在a里指定target，这个target指向iframe里的name，这样就可以将a里面链接的内容投射到iframe里了。

<iframe src="#" name="xxx" frameborder="0"></iframe>
<a href="www.baidu.com" target="xxx">Baidu</a>
<a href="www.qq.com" target="xxx">QQ</a>

注意：

• 用iframe很卡，相当于新打开一个网页
• frameborder就是iframe的边框宽度，太丑了，一般设置为0

<a/>

这个标签可能我们都很熟悉，就是跳转页面的，但是还可以发送GET请求。

target

target属性是每用一次查一次，这里就简单总结一下

• target="" 默认为_blank，会在新窗口里打开
• target = "_blank" 新打开一个新的窗口，并打开
• target = "_self" 在当前窗口打开，如果嵌在别的页面的iframe里，则在iframe里打开: index1 -> index2，打开index2
• target = "_parent" 如果嵌在别的页面的iframe元素里，则不在iframe元素里打开，而是那个窗口打开: 如果index1 -> index2，打开index1
• target = "_top" 在顶层窗口打开，如果 index1 -> index2 -> index3 ，一个套一个，那么在index1里点击，则会在index1打开
• target="xxx" 在name="xxx"`的iframe里打开网页

download

• download属性，下载src里的内容

href

• href="qq.com" -> 会变成相对路径，不能正常访问qq.com，应该写成https://ww.qq.com，//qq.com（使用当前页面的协议）
• href="xxx.html" -> /xxx.html，以当前目录为基准
• href="#iiiii"直接加到 index.html 后面 -> index.html#iiii，只做页面内的跳转，不发起Get请求
• href="?name=hi"浏览器自动判断意思，将查询放到index.html后面 -> index.html?name=hi，自动发起Get请求
• href="javascript: alert('hi')"伪协议，可以写JS代码，直接执行JS代码。以前想点一个东西就执行代码，不写onclick事件。用法：javascript:; -> 点击一个a标签，但是不跳转

<form/>

form的作用一般是展示一个表单，而一般用来发送POST请求。并而只能发送GET和POST请求，RESTful的其他请求都不能发送。

示例

<form action="users" method="post">
        <input type="text">
      <input type="submit" value="提交">
</form>

提交

一般来说要加上method="POST"来发送POST请求，一般不发送GET请求，需要submit按钮来提交去发送POST请求。

注意：如果用HTTP协议来发送请求，那么数据将以明文形式传给服务器，如果想加密，那么必须用HTTPS来发送POST请求。

x-www-form-urlencoded

如果打开Chrome的Network会看到发请求的格式（Content-Type）是x-www-form-urlencoded，这就表示发请求的数据是用UTF-8来表示字符的，如：“你”就变成了%E4%BD%A0，其中E4 BD A0就是“你”。

target

其实很多人也不知道还有这个target属性的，这个target属性和标签<a/>里的target值是一样的，也是控制在哪个地方打开新的网页。

<input/>

<label/>

这个标签可以让我们点击文本的时候同时选中<input/>里的内容。不过一般人会这么写

<label for="xxx">Label</label>
<input id="xxx" type="radio" name="fruit" value="apple">

但是这样要写个ID，我们都知道一般不会给HTML元素起ID的，所以可以用<label/>标签包裹<input/>元素

<label >
    Hello
    <input type="checkbox" name="love" >
</label>

radio / checkbox

其实刚开始学radio或者checkbox的时候，总会发现怎么没有了这个field的数据，其实我们都比较容易忘记加上name属性啦，所以正确打开方式是

你喜欢的水果
<label >
    Banana
    <input type="checkbox" name="fruit" value="banana">
</label>
<label >
    Apple
    <input type="checkbox" name="fruit" value="apple">
</label>

爱我？
<label >
    爱
    <input type="radio" name="love" value="yes">
</label>
<label >
    不爱
    <input type="radio" name="love" value="no">
</label>

button / submit

我们经常会遇到这样的情况，有时候加<button/>就可以提交表单，有时候加<input/>也可以提交，但是不知道怎么回事，又不行了。下面说下这些坑

• 如果一个form里只有一个按钮没有写type <button>提交</button>，button标签，那么会自动升级为submit
• 如果按钮的写了type <button type="xxx">点我</button>，而不会变成submit
• 如果写了一个<input type="button>"，那么也是不能提交的，因为这只是一个普通的button
• 如果写了<input type="submit">，那么点击就可以提交

<textarea/>

关于这个标签，我们可能最不爽的就是可以拉动这个元素，可以添加CSS来控制这个行为。

textarea {
    resize: none;
}

虽然这个标签有属性 cols 和 rows ，但是一般不推荐使用，最好还是用CSS来控制元素的样式，因为这两个属性控制的不是那么准确。

<select/>

当我们想弄一个下拉菜单的时候，总想着Bootstrap里的<button/> + <ul/>，但是HTML里已经提供了这种元素啦，就是<select/>。

下拉菜单的每个菜单为<option/>，有属性 disabled 控制是否可选；selected 控制是否开始就选中哪一项。

<select name="group">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3" disabled>3</option>
    <option value="4" selected>4</option>
</select>

<table/>

这个元素用起来只要按照标准用法来就好了。不过我们可能不太熟悉还有<colgroup/>和<col/>标签吧，他们是控制每一列的大小的，单位是px。

<table border="1">
    <colgroup>
        <col width="100">
        <col bgcolor="red" width="200">
    </colgroup>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Sam</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Amy</td>
            <td>18</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>OK</td>
            <td>118</td>
        </tr>
    </tfoot>
</table>

<col/> 和 <colgroup/>

• width 表示每一列的宽度 + px
• bgcolor 表示每一列的颜色

注意事项

• th -> 表里的项目
• td -> 表里的数据
• thead,tbody,tfoot 不管怎么放，顺序都是一样的，浏览器会自动排顺序
• 如果没有写thead，所以内容都放到tbody里，如果不写tbody，浏览器会自动加上tbody
• 可以在CSS去掉table中间的空间

table {
    border-collapse: collapse;
}