在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
本文就标签规则，标签语义化，属性规则，属性顺序和布尔属性五个方面，带大家梳理一下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前端开发在线课程怎么样？要学那些技术知识？
相关推荐 更多
手机HMTL5开发框架推荐
本文将向大家推荐十个手机HMTL5开发框架，它们分别是jquery mobile框架、bootstrap框架、ionic框架、Mobile Angular UI框架、Intel XDK框架、Appcelerator Titanium框架、Sencha Touch框架、Kendo UI框架、.mui框架，相信在这些框架中你一定可以找到适合自己的。
9396
2019-08-02 14:58:17
参加前端HTML5开发专业培训哪家好？
HTML5是目前最火爆的软件开发之一，随着微信小程序的爆红和移动手机的广泛普及，无疑又给HTML5添了一把火。而且HTML5也是前端的核心技术之一，只要做前端开发必然就离不开HTML5技术。因此不少渴求高薪工作的小伙伴都开始学习HTML5技术了，而选择专业的培训机构是快速入门的最佳方法。然而前端HTML5开发专业培训机构这么多，参加前端HTML5培训哪家好呢？
7425
2019-10-15 16:42:05
Web前端面试排序算法总结
Web前端面试排序算法总结，前端工程师面试过程中会涉及排序算法的考察，经常用到的排序算法有冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。
7145
2020-03-24 14:14:19
前端学习中的重点难点总结
在互联网技术岗位中，前端一直被定义为入门简单，发展潜力巨大的技术方向。尤其对于新接触编程的同学们而言，非常容易理解并掌握HTML和CSS的基本知识，但是作为一门技术岗位，前端开发依旧具有一定的挑战性。因此我们一定要注意前端学习中的重点难点知识，在学习的过程中尽量掌握其要点，保障在实际工作中减少踩雷的风险。
8726
2020-08-07 10:27:04
女孩子做前端是青春饭吗？适合web开发吗？
其实年龄并不是是衡量职业生涯的一个标准，无论是男性还是女性，如果有有丰富的前端开发经验，随着经验的不断积累，在职场中的优势越明显。强化内功，哪怕无法成为最前面的前端开发大牛，但也不会成为被淘汰的一员。
7113
2020-11-25 14:07:14
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么？先掌握这三大核心关键技术
- 前端开发的工作方向有哪些？
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试？两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些，才能成为架构师 查看更多
扫描二维码，了解更多信息
