HTML标签

2018-10-16  本文已影响10人  写代码的海怪

介绍

说起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>

注意：

<a/>

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

target

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

download

href

<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/>也可以提交，但是不知道怎么回事，又不行了。下面说下这些坑

<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/>

注意事项

table {
    border-collapse: collapse;
}
上一篇下一篇

猜你喜欢

热点阅读