在线客服
扫描二维码
下载博学谷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前端开发在线课程怎么样？要学那些技术知识？
相关推荐 更多
HTML5在线培训哪个机构好？
在线培训哪个机构好？计划去参加培训HTML5的时候应该如何选择在线培训机构呢？现在的社会中各种培训机构遍地开花，很多人无从下手，其实选择HTML5在线培训的机构并不难，我们只需要需要从以下几点进行考虑：
11011
2019-07-24 18:31:54
30道常见Web前端面试题你会几个？
30道常见Web前端面试题你会几个？以下30到web前端面试答出了大多数的或者是全部的题表明你的基础扎实；只答出小部分或者答出了大部分题但答案不正确，说明水平还差的远，基础知识不扎实距离拿高薪还很遥远，需要基础夯实基础。
6460
2019-09-27 15:11:17
前端还能火几年？做前端有前途吗？
前端在前几年里有了飞速的发展，因此前端技术也逐渐变得成熟。但是相对稳定的前端技术，却让一些人担忧：前端还能火多久？可以这么说，只要IT行业还在发展，前端技术的需求就永远存在，不存在什么唱衰的说法。而且前端技术即将进入迭代优化阶段，在未来中高端的前端人才会更加缺乏。
7406
2019-09-29 16:57:16
前端模块化相关面试题整理
随着Web2.0时代的到来，使用模块化规范进行管理成为许多人开始考虑的想法。本文为大家整理总结了前端模块化的相关面试题，大家可以借此机会把模块化的相关知识点梳理一遍。了解异步模块加载机制、使用模块化的原模块化的优缺点等等内容。希望本文可以让大家彻底掌握前端模块化的相关面试题！
8382
2020-01-13 09:26:48
前端开发工程师的必修课——网站重构
网站重构并不是前端开发中的技术，也不是某种标准，而是一种网站前端的理念，也就是我们所理解的页面优化。网站重构是指在不改变网页整体UI设计以及网站外部相关行为的基础上，对整个网站/页面进行优化，让网站的结构更加简单，可读性更强，从而更加有利于搜索引擎的检索，增加搜索引擎对网站的收录，提升网站的排名。网站重构相对于web开发工作而言，更注重用户体验的设计。
5348
2020-08-07 10:30:22
