在线客服
扫描二维码
下载博学谷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规范的全部内容吗?
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
Web前端开发语言有哪些?各自有什么优势?
Web前端开发语言有哪些?各自有哪些优势?就目前Web前端开发可能涉及的语言来讲,有PHP语言、JavaScript、Ruby、HTML5、Java和Python。当然并不是说以上这些语言前端开发工程师都必须掌握,其实只选择一两门熟练掌握即可。下面我们来看看这些Web前端开发语言的具体介绍和自身的优势。
15191
2020-01-12 16:30:51
Web前端开发培训机构哪个比较好?
Web前端开发培训机构哪个比较好?选择攻略。从招聘平台看市场上对于Web前端开发人才缺口很大,Web前端技术性岗位自学存在很多问题,选择一家比较好的前端培训机构在短时间内掌握岗位技能的是一个很好的方式。市面上大大小小的培训机构众多,有些机构为了招生在宣传过程中会有夸大的成分。
8952
2020-08-31 11:54:53
北京Web前端工资一般多少?要求高吗?
前端程序员薪酬区间: 3K~50K,大多数人拿10K~15K 工资的占比最多,达28.8%,平均工资17.2K,数据统计依赖于各平台发布的公开薪酬,此数据仅供参考。
9947
2020-09-21 15:27:49
北京前端培训班哪家好?怎么选?
北京前端培训班哪家好?对于学生而言最重要的是技术知识,如何学会,如何把学到的技术运用到项目中去,如何在培训期间实操更多的实战项目,这些硬技能才能成为培训完以后面试时的核心竞争力,选择北京前端培训班时一定要重点考察课程更新、项目实战、师资力量这三个方面。
4220
2021-03-26 14:52:05
前端开发与后端开发的区别是什么?
在实际开发过程中,前端开发人员精通JS能熟练应用JQuery,懂CSS能熟练运用这些知识,进行交互效果的开发;后端开发人员会写Java代码SQL语句,能做简单的数据库设计会Spring和iBatis懂一些设计模式等。
6953
2021-05-05 10:18:54