html一些常用标签介绍

code_susu
219 阅读3分钟

今天要写的是一些html的常用标签的介绍。 我们经常会被问到，你如何理解html语义化，那么什么是html语义化呢？

什么是语义化？

维基百科的解释为：

语义化是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的html结构，有利于搜索引擎的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。

如何可以使html语义化呢？

那就是让正确的标签做正确的事情。大部分的标签都是有它自己的意义的，把合适的标签用在合适的地方，才是正确的html打开方式。

html一些常用标签：

<a>

<a target="_top" href="xxx"></a> 在顶层窗口或iframe中打开
<a target="xxx" href="xxx"></a> 在name为xxx的窗口或iframe 中打开
<a target="_blank" href="xxx"></a> 在新的窗口中打开
<a target="_self" href="xxx"></a> 在自己所在的页面打开
<a target="_parent" href="xxx"></a> 在父页面打开，如果自己是被嵌套到里面的,
一般是直接引入这个页面的
<a target="_top" href="xxx"></a> 最高级的页面中

download
<a href="http://baidu.com" download>下载</a>,点击下载可下载这个网页，此属性
指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

href
href="" 会刷新当前页面
href="#" 会给页面会跳到顶部，因为给a加了一个回到顶部的锚点
href="/.." 浏览器发起 GET /http/1.1 的请求
href="baidu.com" 此时会点击会出错，不会链接到百度首页
href="//qq.com" :
1.这是个无协议链接，点击之后，浏览器会根据当前协议来补全该无协链接的协议
2.如果是使用file://协议浏览页面，就会访问到file://qq.com，这是一个不存在的路径（尽量不要使用这种）
href="/?name=xxx" 会在当前页面发起个带name参数的请求
href="index.html" 会打开当前目录下的index.html
href="javascript:;"  伪协议

<iframe>

HTML内联框架元素 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。

iframe与a搭配使用，主要在于它的name属性，如下代码，在点击打开qq时，则会在iframe中打开qq的首页

    <iframe src="#" name="xxx"></iframe>
    <a target="xxx" href="http://qq.com" >打开qq</a>

iframe的src 属性 也可以写相对路径。

<form>

    form标签可发起Get或者POST请求
    action属性指定请求路径，method属性指定请求动词
    form标签中，<input type="submit" /> 或者<button></button>可以被用户提交

<label

label，将input 用label标签包起来，就可以实现点击文字，就定位到输入框中的功能（下面的输入框可以试一下）

    <label>输入姓名<input type="text"/></label>

输入姓名

<colgroup>

使用<colgroup>可以控制table中每一列的宽度，<colgroup>放在

里面的之前

    <colgroup>
        <col width="70">
        <col width="100">
        <col width="200">
    </colgroup>

其他标签

<hr>：水平分割线，<main>:主要内容，<h1>～<h6>:标题，<dl>,<dt>,<dd>:描述列表，<section>:表示章节

拓展阅读

可访问MDN学习更详细的知识。

avatar
文章
阅读
粉丝