编码规范-html.md

 2023-09-05 阅读 372 评论 0

摘要:写在前面 对于不同的编程语言来说,具体的编码规范各不相同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。 本文大部分内容来自网上,仅供个人参考学习! 网络上的知识浩如烟海,而学到了才是

写在前面


对于不同的编程语言来说,具体的编码规范各不相同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。

本文大部分内容来自网上,仅供个人参考学习!

网络上的知识浩如烟海,而学到了才是自己的!!
然后,老规矩,带上我们可爱的小伙伴...
小伙伴

语法

  • 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。

  • 嵌套元素应当缩进一次(即两个空格)。

  • 对于属性的定义,确保全部使用双引号,绝不要使用单引号。

  • 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。

  • 不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>)。

doctype

为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。

  • HTML5 doctype

      <!DOCTYPE html><html></html>
  • HTML 4 doctype

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"></html>

    Tips:
    <!DOCTYPE> 声明不是 HTML 标签
    告诉浏览器HTML文档类型


文件兼容性模式

文件兼容性用于定义让浏览器如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。

  • IE兼容行

      <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    说明:IE=Edge设置 通知IE以最高级别模式加载文档;其他的有:11/10/9/8/7/5/EmulateIE11/EmulateIE10

  • chrome 优先

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    说明:优先使用最新版本的IE 和 Chrome 内核

  • 360极速模式 优先

      <meta name="renderer" content="webkit|ie-comp|ie-stand"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    说明:优先使用webkit内核,IE兼容内核,IE标准内核

  • 马丹写在最后

      <meta http-equiv="X-UA-Compatible" content="IE=10;IE=9;IE=8;IE=7;" />

    浏览器从前往后选择,但是太麻烦了,改用IE=edge,为了兼容chrome使用chrome=1触发Google Chrome Frame;但是马丹,chrome最新版本已经抛弃Google Chrome Frame了,所以最终使用IE=edge搞定.

      <meta http-equiv="X-UA-Compatible" content="IE=Edge">

浏览器内核

  • Trident内核
    又称其为IE内核,是微软开发的一种排版引擎。
    浏览器产品: IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等

  • Gecko内核
    开源,以C++编写的网页排版引擎。
    浏览器产品:Firefox、Netscape6至9

  • WebKit内核
    开源,目前流行的浏览器内核,常见于Google和Mac的产品中.
    浏览器产品:Safari、Chrome、傲游3、国内各种浏览器

  • Presto内核
    Opera Software开发的浏览器排版引擎
    浏览器产品:Opera 7.0以上

Tips : CSS3中各个浏览器内核兼容的设置

- -moz-:代表FireFox浏览器私有属性  
- -ms-:代表IE浏览器私有属性  
- -webkit-:代表safari、chrome浏览器私有属性  
- -o-:代表opera浏览器私有属性  
    .class{border-radius:20px 40px 10px;-webkit-border-radius:20px 40px 10px;-moz-border-radius:20px 40px 10px;-ms-border-radius:20px 40px 10px;-o-border-radius:20px 40px 10px;}
sublime有插件可以自动生成:Autoprefixer

Tips : JS各个浏览器内核兼性

其他问题

  • 文件编码格式
    编写文件时全部使用无BOM UTF-8模式,并指定浏览器文档编码方式.

      <meta charset="UTF-8">
  • 引入 CSS 和 JavaScript 文件
    根据HTML5规范,在引入CSS和JavaScript文件时一般不需要指定type属性,因为text/css和text/javascript分别是它们的默认值。非H5的加!

      <!-- External CSS --><link rel="stylesheet" href="code-guide.css"><!-- JavaScript --><script src="code-guide.js"></script>

    说明:js放文件底部,css放文件head

  • 标签语义化
    尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

  • 减少标签的数量
    编写 HTML 代码时,尽量避免多余的父元素。

      <!-- Not so great --><span class="avatar"><img src="..."></span><!-- Better --><img class="avatar" src="...">
  • 少用JavaScript 生成的标签
    通过 JavaScript 生成的标签让内容变得不易查找、编辑,并且降低性能。能避免时尽量避免。

      <span class="avatar"></span><script>document.getElementsByClass('avatar')[0].value = "";</script>

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/1/511.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息