在线客服
扫描二维码
下载博学谷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规范的全部内容吗?
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
2019年前端与移动开发培训就业方向多不多?
前端与移动开发是目前互联网中的热门就业方向。但是随着前端多元化的发展,企业对于人才的需求在不断增多的同时,对从业人员的技术水平也提升了要求。因此想通过简单的自学就找到高薪的前端工作不再想几年前那样容易。所以建议想同时前端与移动开发的朋友尽可能通过参加前端与移动开发培训完善并提升下自己的实力。那2019年前端与移动开发培训的就业方向多不多呢?
5388
2019-08-15 16:41:13
JavaScript基础语法规则
编程语言是人与机器交互语言。我们每天接触的汉语外语都有其特定的语法和规则,编程语言同样适用。每一种计算机语言都有自己的语法规则。只有按照语法规则才能写出符合要求的代码。下面我们就来了解一下JavaScript基础语法规则。
7660
2019-10-25 18:09:23
Web前端面试排序算法总结
Web前端面试排序算法总结,前端工程师面试过程中会涉及排序算法的考察,经常用到的排序算法有冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序、计数排序、桶排序、基数排序。
4675
2020-03-24 14:14:19
Web前端进阶要学什么?
近几年,Web前端行业的人才需求一直持上升趋势,而前端开发也变的越来越复杂,仅仅掌握HTML、CSS和Javascript ,已经不能满足目前各大企业的用人需要了。那么Web前端进阶要学什么呢?简单来讲,HTML5+CSS3是Web前端开发关键性技术,可以应对现阶段与未来网页制作的高标准。
4961
2020-07-03 09:50:11
什么是HTTP协议?工作原理是怎样的?
什么是HTTP协议?工作原理是怎样的?HTTP协议全程是超文本传输协议,它的工作原理简单来讲,就是客户端连接到web服务器,然后发送HTTP请求,服务器接受并返回HTTP响应。下面让我们一起来详细了解一下HTTP协议。
6034
2020-07-30 19:33:30