HTML常用标签详解

Harlan_Zhang
208 阅读6分钟

前端三件套HTML、CSS、JavaScript中虽然HTML是学习难度最低的，但也因此导致了很多人简单上手后就没有再深入学习了，这篇文章除了介绍常用标签之外还会简单介绍一下HTML的规范。

指路

W3C官方HTML文档：www.w3.org/TR/html52/，感兴趣的可以阅读。 MDN: developer.mozilla.org/zh-CN/,HTML、CSS、JavaScript的所有基础知识可以在这里找到，不要再去w3school了。

基本标签和用法规范

  1. div 可以说是使用最多的标签了，代表一个没有任何意义的块级元素。现在的前端开发把HTML语义化作为一个重要的开发规范，语义化指的是用含有特定含义的标签来完成HTML页面结构，比如说标题用h1标签，而不是用div再用CSS将内容放大加粗，所以要尽可能的少用没有语义的div之类的标签。HTML5新增了许多的语义化标签，使用这些标签可以让页面的结构更加清晰，让代码更容易看懂，也更便于SEO。所以不要全篇div + span 了。
  2. span span代表一个行内元素，没有语义，于div基本类似。
  3. h1~h6
h系列标签代表标题，h6到h1字号逐渐变大
  1. nav 块级元素，语义是导航，一般页面的导航栏使用
  2. ul li
<ul>
  <li></li>
  <li></li>
</ul>

ul内只能放li标签，代表无序列表，比如说导航栏的选项卡一般可以用li来实现。 6. ol li 这一组标签于 ul li 类似，但是表示的是有序列表。 7. dl dt dd

<dl>
  <dt>定义</dt>
  <dd>描述</dd>
</dl>

包含一组术语定义及描述的列表。 8. html head body title 每个页面必会用到的四个标签，页面基本结构如下

<html>
  <head>
    <title></title>
  </head>
  <body></body>
</html>

head规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。不能放div、span之类的标签。
body标签放页面的主体内容，一般可以在网页上看到的所以内容都是放在body里面的。
html是最外层的标签，也是html的根节点。 title内放标题，可以在浏览器最上方的网页的选项卡中看到。
9. input 表示输入元素的控件，使用type属性来表示不同的种类

<input type="text"> 最常用的输入框
<input type="radio">  单选框
<input type="checkbox"> 复选框
<input type="number"> 输入数字
<input type="password">  密码框
<input type="email">  输入邮件
<input type="file">  让用户选择文件
<input type="button"> 按钮，但不推荐使用，推荐使用<button></button>按钮

以上是常用的几种，更多input的类型可以到MDN查看 10. button

<button></button>  标签中可以放文件、图标以及图片，<input type="button">只能放文字

button标签的使用最好规定一下type属性,写成<button type="button"></button>这种形式.
因为在某些浏览器中button的默认type是submit,<button type="submit"></button>,在与form标签一起使用时可能会造成不想要的效果。
  1. iframe
    iframe标签可以在当前页面嵌入一个其他的HTML页面，但是会对网页性能有比较大的影响，现在用到的比较少了。
  2. form
<form action="https://www.baidu.com" method="post">
<input type="text">
<input type="password">
</form>

form标签表示表单，一般搭配input来发送http请求 13. table

<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
</table>

table表示表格。 14. b、i、em、strong、mark、big、small、sub、sup

<b></b> 规定粗体文字，没有语义
<i></i> 表示斜体效果
<em></em> 表示强调的文本
<strong></strong> 表示重要文本
<mark></mark> 表示标注的/突出显示的文本
<big></big> 放大字号
<small></small> 缩小字号
<sub></sub> 定义下标文本
<sup></sup> 定义上标文本
  1. del、ins
<del> </del> 移除的内容
<ins> </ins> 添加的内容
  1. header、footer
<header></header> 页眉
<footer></footer> 页脚
  1. main
<main></main>   页面主要内容，一个页面只能用一次
  1. section
<section> </section> 具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
  1. article
<article></article> 表示文档、页面、应用或一个独立的容器。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
  1. aside
<aside></aside> 指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
  1. code
<code></code> 定义代码模块。
  1. figure、figcaption
<figure></figure>：创建图（默认有40px左右margin）。
<figcaption></figcaption>：figure的标题，必须是figure内嵌的第一个或者最后一个元素。
  1. cite
<cite></cite> 指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。  
只用于参考源本身，而不是从中引述。
  1. blockquoto
<blockquoto></blockquoto> 引述文本，默认新的一行显示。
  1. abbr
 <abbr></abbr>：解释缩写词。使用title属性可提供全称
  1. dfn
 <dfn></dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
  1. pre
  <pre></pre>：预格式化文本。保留文本固有的换行和空格。
  1. address
 <address></address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。

总结

HTML5新增了许多的语义化标签，在日常开发中希望大家可以有意识的使用这些语义化标签，而不是 div + span到底。

avatar
文章
阅读
粉丝