本文就标签规则，标签语义化，属性规则，属性顺序和布尔属性五个方面，带大家梳理一下Web前端知识点之HTML规范。
1.标签规则
很多人觉得HTML太简单，但她恰恰是前端开发中最基础最重要的部分。
标签名统一使用小写，不要使用大写；
不要在自闭（self-closing）元素的尾部添加斜线；
不要省略可选的结束标签（closing tag）
不要轻易使用实体字符；
<body>
<ul>
<li>
<img src="images/image.jpg">
</li>
</ul>
</body>
2.标签语义化
根据各个标签的用途去使用它们很重要，它涉及到文档的可访问性、重用和代码效率等方面。
去掉样式或者样式丢失时页面结构依然清晰；
移动设备能够更加完美的展示网页（移动设备对css的支持较弱）；
阅读器会根据标签的语义自动解析，呈现更容易阅读的内容形式（无障碍阅读）；
便于后期的开发和维护，提高团队合作效率；
便于搜索引擎根据标签的语义确定上下文的权重问题；
<body>
<header>
<a href="recomment">
</header>
<section>
<article>文章</article>
</section>
<footer>
<address>地址</address>
</footer>
</body>
3.属性规则
使用标签时尽量符合语义
属性名统一使用小写，不要用大写；
务必用双引号包含属性值；
自定义属性请加data- 前缀；
属性过长时请分行；
尽量避免style属性和javascript事件；
4.属性顺序
HTML属性应当按照以下给出的顺序依次排列，确保代码的易读性。
class
id，name
data-*
src，for，type，href
title，alt
aria-*，role
class用于标识高度可复用组件，因此应该排在首位。id用于标识具体组件，应当谨慎使用（例如：页面内的标签），因此排在第二位。
<a class="..." id="..." data-model="..." href="#"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
5.布尔属性
布尔型属性可以在声明时不赋值。
<input type="text" disabled>
<inut type="checkbox" value="1" checked>
<option value="1" selected>1</option>
有关Web前端知识点今天就先讲到这里，大家都理解了HTML规范的全部内容吗？
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
前端面试题 HTML5
下一篇：
Web前端开发在线课程怎么样？要学那些技术知识？
相关推荐 更多
编辑工具Sublime和VS code优缺点对比
对于不同的程序员来说，用什么样的编辑工具是十分重要的。因此小编为大家对比了两款编辑工具Sublime和VS code优缺点，希望可以给大家的选择提供一些参考。
9270
2019-08-01 12:52:42
Web前端工程师需要学什么？需要掌握哪些技能？
Web前端工程师需要学什么？需要掌握哪些技能？像HTML、CSS、JS、jQuery、Java编程语言等等内容，都是Web前端工程师必须学习的基础知识。总之，一名合格的Web前端工程师掌握的所有技能，都是为了最大提升用户体验。下面我们来看看成为Web前端工程师的具体要求。
3522
2019-09-16 17:26:51
微信H5页面兼容性问题分析及解决方法
随着H5页面越来越流行，越来越多的开发者都开始用最近H5做微信公众号，在这个过程中自然也会遇到不少的问题。小编在这里整理了五种常见的微信H5页面兼容性问题，来和大家分析一下问题的详情、出现原因以及相对应的解决方法。有相关问题的小伙伴，就一起来看看吧！
4279
2019-11-12 16:12:01
HTML入门基础知识学习教程
HTML基础知识早已成为设计师、前端工程师、后台开发工程师、电子商务的人员的必备技能之一。那么如何学习HTML基础知识呢？这里向大家推荐博学谷的在线免费视频课程，课程包括了前端的核心基础技术HTML和CSS，同时还有相关案例拆分讲解，帮助大家全面掌握基础知识，轻松入门学习HTML。下面是具体的教程介绍：
1736
2019-12-10 17:36:28
前端浏览器对象模型BOM常用对象用法介绍
前端浏览器对象模型BOM常用对象介绍，BOM即Broswer Object Model 浏览器对象模型，在JavaScript中可以理解为window对象，用来进行与浏览器相关的一些操作，学习BOM就是学习 JavaScript中的window对象。
1173
2020-08-24 10:37:08
热门文章
- 删除又恢复？微软怎么惹恼了开源社区？
- 程序员为什么不爱炫富？
- Python 新版本中的 6 个新特性，你去体验了么？
- 搞Java开发，你知道哪些城市最赚钱吗？
- 互联网行业都有哪些岗位？看看自己适合哪个吧！
- 10月数据库排行榜出炉，火速围观！
- GitLab上市,GitHub的最大对手来了！
- 中办、国办发文！推动现代职业教育高质量发展！
- 如何实现代码审查反馈？
- 初学者，你有没有想过放弃这一行 查看更多
扫描二维码，了解更多信息
