在线客服
扫描二维码
下载博学谷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前端必备:JavaScript基础知识梳理
Web前端必须掌握的三种技能:HTML/CSS/JavaScript。其中JavaScript相对有一定的难度,甚至部分企业专门设置的JavaScript开发工程师的岗位。今天和大家分享一下JavaScript部分基础知识。
8752
2019-06-25 18:31:26
前端工程师与UI设计师的职责划分
前端工程师和UI设计师的工作内容都是围绕前端页面的视觉体验和用户体验,但二者在岗位定位以及工作职责上有明显的不同。UI设计属于产品方向,重点在于设计视觉感官;前端工程师属于开发方向,主要是通过代码实现页面功能是视觉效果。两者具体的职责划分如下:
7177
2019-11-26 19:15:05
Web前端面试排序算法总结
Web前端面试排序算法总结,前端工程师面试过程中会涉及排序算法的考察,经常用到的排序算法有冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。
5478
2020-03-24 14:14:19
六种前端排序算法代码演示
排序算法是前端算法中一个十分经典的算法,因此它也是前端面试中常见的考察重点。如今前端行业火爆,就业市场对前端人才的要求也越来越高,排序算法是每个前端从业者都必须掌握的基础知识。众所周知,排序算法有六种,分别是冒泡排序、选择排序、快速排序、归并排序、基数排序。下面我为大家逐一用代码演示这六大排序算法,感兴趣的朋友一起来看看吧!
5843
2020-04-13 10:23:09
网站开发中前端的重要性
前端开发在整个网站开发的过程中扮演什么角色?有什么重要的意义?我们通过各大招聘平台可以看到,目前互联网技术领域招聘中,前端开发工程师占有非常大的比重,这足以说明前端开发的重要性。另外除了简单易学,岗位薪资高之外,前端开发具有什么重要性呢?
8238
2020-08-07 10:34:03
