HTML编写规则

发布时间:2020-05-08 16:25:47 作者:Leah
来源:亿速云 阅读:198

本篇文章展示了标签规则,标签语义化,属性规则,属性顺序和布尔属性五个方面,带大家梳理一下Web前端知识点的HTML编写规则。

 

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>

 关于HTML编写规则就分享到这里了,希望以上内容可以对大家有一定的参考价值,可以学以致用。如果喜欢本篇文章,不妨把它分享出去让更多的人看到。

推荐阅读:
  1. Python编写规则值得收藏
  2. HTML嵌套规则

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html规范 web前端知识

上一篇:Vue开发的7个技巧

下一篇:redis快的主要原因

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》