在线客服
扫描二维码
下载博学谷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在线培训哪个机构好?
在线培训哪个机构好?计划去参加培训HTML5的时候应该如何选择在线培训机构呢?现在的社会中各种培训机构遍地开花,很多人无从下手,其实选择HTML5在线培训的机构并不难,我们只需要需要从以下几点进行考虑:
9080
2019-07-24 18:31:54
为什么要使用HTML5开发手机APP?
为什么要使用HTML5开发手机APP?从未来的发展趋势看,现在的大部分开发商都因为HTML5的便捷性而广泛使用它,而且使用HTML5可以带来更好的互动。从程序员开发的角度来讲,HTML5的代码更加清晰简单。下面我们就从HTML5的七大特性,来详细分析使用HTML5开发手机APP的优势。
5299
2019-10-10 16:55:06
哪里前端培训机构好?怎么选?
哪里前端培训机构好?怎么选?可以从师资、课程内容、口碑、就业情况,根据自己的需求选择几所符合条件的机构,然后再对这几所机构进行对比分析,看哪一个是比较好的符合自己的web前端培训机构。
4738
2020-07-23 09:56:18
前端浏览器对象模型BOM常用对象用法介绍
前端浏览器对象模型BOM常用对象介绍,BOM即Broswer Object Model 浏览器对象模型,在JavaScript中可以理解为window对象,用来进行与浏览器相关的一些操作,学习BOM就是学习 JavaScript中的window对象。
3667
2020-08-24 10:37:08
前端要学多久才能去工作?具备什么技能?
零基础的初学者系统学习前端知识,学完差不多需要6个月左右的才能找工作。有一定基础的同学能够更快掌握前端技术。学习前端找工作要多久因人而异,更应该注意的是学习质量才对。只有学到了有用的技能才能不愁找不到工作。
4839
2021-01-29 16:22:03