HTML学习笔记之常见标签的用法和易踩坑的点

最近在学习HTML的时候，遇到一些容易踩坑的点，梳理一遍，顺便把常用的标签再巩固巩固。

1、article 标签(H5新标签)

（1）定义：<article>元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构。

（2）使用范围：如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。如下图所示：

2、section 标签(H5新标签)

（1）定义：section标签，表示文档中的一个区域（或节）。

（2）使用范围：如内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>。如下图所示：

（3）与article标签的区别：article 本身就是独立的、完整的，而section仅表示一部分。article和section的结构可以视为从属关系section不能独立出现，它的出现必定是在article下。就像一篇文章，每个article标签为一大章节，可以单独使用却互不干涉，独立成文；而大章节里的小章节就是section，是附属在大章节article之内的。

3、audio、video 标签(H5新标签)

定义：这两个标签分别用于在HTML或者XHTML文档中嵌入音频和视频内容。如下图所示：

4、button 标签

定义：button 标签表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。如下图所示：

5、nav 标签

定义：导航栏 (<nav>) 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。如下图所示：

6、 input 标签

（1）定义：<input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据。

（2）常用参数：button、checkbox、date、emai、password、radio、range、submit、text、url等。如下图所示：

（3）几个易踩坑的点：

1>.checkbox和radio的区别：复选和单选，字面意思，一个是多选按钮，一个是单选按钮，切记不能混淆。

2>.checkbox和radio的区别：复选和单选，字面意思，一个是多选按钮，一个是单选按钮，切记不能混淆。

3>.checkbox和radio的区别：复选和单选，字面意思，一个是多选按钮，一个是单选按钮，切记不能混淆。

转载于:https://juejin.im/post/5bc1d68ce51d450e5162d10c