在线客服
扫描二维码
下载博学谷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规范的全部内容吗?
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
常见三大缓存问题分析及解决方案
一般来讲,常见三大缓存问题不外乎就是缓存穿透、缓存击穿、缓存雪崩。三者的共同点都是高并发,缓存更新、缓存失效居多。而且三者也会相互恶化,导致问题更加严重,因此一旦有一个问题就需要马上解决,以免最引起“雪崩”。本文将分别分析缓存并发、缓存雪崩、缓存击穿三大问题,并提出对应的解决方案。
7511
2019-11-01 18:23:18
全栈开发项目教程学什么?学了有什么用?
全栈开发项目教程学什么?总体看来,全栈开发者要学习的内容大致会涉及前端开发、后端开发、数据库存储和服务端渲染等等。本文将为大家详细介绍一下全栈开发项目教程的学习内容。至于学了该教程有什么用?当然是不用担心的,只要能够认真按照教程指导地去学习和练习,相信大家学完之后,都能掌握全栈开发的经验和技能,提升自身的职场竞争力。
6030
2019-12-17 15:46:08
HTTP/3的原理和发展历程分析
随着前端开发中新技术的层出不穷, HTTP 已经不知不觉发展到HTTP/3。对于前端开发技术者来讲,要想不断进步,永葆职业竞争力,最重要的就是紧随技术潮流的发展。本文为大家总结并分析了HTTP/3的原理和发展历程,大家花几分钟来看一下吧~
4610
2020-06-01 11:09:33
找Java Web培训机构靠谱吗?好不好?
找Java Web培训机构靠谱吗?相比于自学找Java Web培训机构学习效率更高。保证学习效果主要看课程内容和就业薪资。课程内容齐全、符合企业人才需求,学员所学知识与时俱进、就业薪资水平高,满足这两点的培训机构可进入备选区。
4214
2020-08-26 14:58:47
Three.js基础知识分享 帮你入门学习JavaScript 3D 库
Three.js基础知识分享 帮你入门学习JavaScript 3D 库,学习Three.js需要先了解一下 OpenGL 和 WebGL。OpenGL 是一个跨平台的3D/2D的绘图标准,WebGL是一种3D绘图协议。WebGL允许把JavaScript和OpenGL 结合在一起运用,但使用WebGL原生的API来写3D程序非常的复杂,同时需要相对较多的数学知识对于前端开发者来说学习成本非常高。
4602
2022-04-19 16:10:42