• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 Web前端知识点之HTML规范

发布时间:2019-07-29 14:16:46 浏览 5613 来源:博学谷资讯 作者:照照

    本文就标签规则,标签语义化,属性规则,属性顺序和布尔属性五个方面,带大家梳理一下Web前端知识点之HTML规范。

     

    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规范的全部内容吗?

    申请免费试学名额    

在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!

上一篇: 前端面试题 HTML5 下一篇: Web前端开发在线课程怎么样?要学那些技术知识?

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码