前端三件套HTML、CSS、JavaScript中虽然HTML是学习难度最低的，但也因此导致了很多人简单上手后就没有再深入学习了，这篇文章除了介绍常用标签之外还会简单介绍一下HTML的规范。
指路
W3C官方HTML文档：https://www.w3.org/TR/html52/，感兴趣的可以阅读。
MDN: https://developer.mozilla.org/zh-CN/,HTML、CSS、JavaScript的所有基础知识可以在这里找到，不要再去w3school了。
基本标签和用法规范
- div
可以说是使用最多的标签了，代表一个没有任何意义的块级元素。现在的前端开发把HTML语义化作为一个重要的开发规范，语义化指的是用含有特定含义的标签来完成HTML页面结构，比如说标题用<h1></h1>标签，而不是用<div></div>再用CSS将内容放大加粗，所以要尽可能的少用没有语义的div之类的标签。HTML5新增了许多的语义化标签，使用这些标签可以让页面的结构更加清晰，让代码更容易看懂，也更便于SEO。所以不要全篇div + span 了。 - span
span代表一个行内元素，没有语义，于div基本类似。 - h1~h6
<h1>标题<h1>
h系列标签代表标题，h6到h1字号逐渐变大 - nav
块级元素，语义是导航，一般页面的导航栏使用<nav></nav> - ul li
<ul>
<li></li>
<li></li>
</ul>
ul内只能放li标签，代表无序列表，比如说导航栏的选项卡一般可以用li来实现。
- ol li
这一组标签于 ul li 类似，但是表示的是有序列表。 - dl dt dd
<dl>
<dt>定义</dt>
<dd>描述</dd>
</dl>
包含一组术语定义及描述的列表。
- html head body title
每个页面必会用到的四个标签，页面基本结构如下
<html>
<head>
<title></title>
</head>
<body></body>
</html>
head规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。不能放div、span之类的标签。
body标签放页面的主体内容，一般可以在网页上看到的所以内容都是放在body里面的。
html是最外层的标签，也是html的根节点。
title内放标题，可以在浏览器最上方的网页的选项卡中看到。
- 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查看
- button
<button></button> 标签中可以放文件、图标以及图片，<input type="button">只能放文字
button标签的使用最好规定一下type属性,写成<button type="button"></button>这种形式.
因为在某些浏览器中button的默认type是submit,<button type="submit"></button>,在与form标签一起使用时可能会造成不想要的效果。
- iframe
<iframe></iframe>可以在当前页面嵌入一个其他的HTML页面，但是会对网页性能有比较大的影响，现在用到的比较少了。 - form
<form action="https://www.baidu.com" method="post">
<input type="text">
<input type="password">
</form>
form标签表示表单，一般搭配<input>来发送http请求
- 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表示表格。
- <b> <em> <strong> <mark> <i> <big> <small>
<b></b> 规定粗体文字，没有语义
<i></i> 表示斜体效果
<em></em> 表示强调的文本
<strong></strong> 表示重要文本
<mark></mark> 表示标注的/突出显示的文本
<big></big> 放大字号
<small></small> 缩小字号
<sub></sub> 定义下标文本
<sup></sup> 定义上标文本
- <del> <ins>
<del> </del> 移除的内容
<ins> </ins> 添加的内容
- <header> <footer>
<header></header> 页眉
<footer></footer> 页脚
- <main>
<main></main> 页面主要内容，一个页面只能用一次
- <section>
<section> </section> 具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。
- <article>
<article></article> 表示文档、页面、应用或一个独立的容器。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。
20.<aside>
<aside></aside> 指定附注栏，包括引述、侧栏、指向文章的一组链接、广告、友情链接、相关产品列表等。
- <code>
<code></code> 定义代码模块。
- <figure> <figcaption>
<figure></figure>：创建图（默认有40px左右margin）。
<figcaption></figcaption>：figure的标题，必须是figure内嵌的第一个或者最后一个元素。
- <cite>
<cite></cite> 指明引用或者参考，如图书的标题，歌曲、电影、等的名称，演唱会、音乐会、规范、报纸、或法律文件等。
只用于参考源本身，而不是从中引述。
24.<blockquoto>
<blockquoto></blockquoto> 引述文本，默认新的一行显示。
25 <abbr>
<abbr></abbr>：解释缩写词。使用title属性可提供全称
- <dfn>
<dfn></dfn>：定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
- <pre>
<pre></pre>：预格式化文本。保留文本固有的换行和空格。
- <address>
<address></address>：作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
总结
HTML5新增了许多的语义化标签，在日常开发中希望大家可以有意识的使用这些语义化标签，而不是 div + span到底。
网友评论