编码规范-html.md

tomlingtm 发布于2019-08-01 17:22 / 370人阅读

摘要：写在前面对于不同的编程语言来说，具体的编码规范各不相同，但是其宗旨都是一致的，就是保证代码在高质量完成需求的同时具备良好的可读性可维护性。减少标签的数量编写代码时，尽量避免多余的父元素。

写在前面

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

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

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

语法

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

嵌套元素应当缩进一次（即两个空格）。

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

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

不要省略可选的结束标签（closing tag）（例如，或）。

doctype

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

HTML5 doctype

HTML 4 doctype

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

文件兼容性模式

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

IE兼容行

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

chrome 优先

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

360极速模式优先

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

马丹写在最后

浏览器从前往后选择,但是太麻烦了,改用IE=edge,为了兼容chrome使用chrome=1触发Google Chrome Frame;但是马丹,chrome最新版本已经抛弃Google Chrome Frame了,所以最终使用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模式,并指定浏览器文档编码方式.

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

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

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

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

少用JavaScript 生成的标签
通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免。

GPU云服务器云服务器规范编码编码规范 php编码规范 js安全编码规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51128.html

roadhog 生产环境支持静态文件名加 hash 和 CDN 配置

摘要：问题来源于思路使用来给文件加使用插件来给文件加使用插件来自动根据加的来引入对应的和并生成文件安装无需安装因为已经带了版，如果自己安装了版反而可能出问题。问题来源于：https://github.com/sorrycc/ro... Workaround: 思路使用 webpack output 来给 js 文件加 hash 使用插件 extract-text-webpack-plu...

番茄西红柿 2019-07-16 14:29 评论0 收藏0
roadhog 生产环境支持静态文件名加 hash 和 CDN 配置

摘要：问题来源于思路使用来给文件加使用插件来给文件加使用插件来自动根据加的来引入对应的和并生成文件安装无需安装因为已经带了版，如果自己安装了版反而可能出问题。问题来源于：https://github.com/sorrycc/ro... Workaround: 思路使用 webpack output 来给 js 文件加 hash 使用插件 extract-text-webpack-plu...

jsummer 2019-08-20 16:20 评论0 收藏0
roadhog 生产环境支持静态文件名加 hash 和 CDN 配置

摘要：问题来源于思路使用来给文件加使用插件来给文件加使用插件来自动根据加的来引入对应的和并生成文件安装无需安装因为已经带了版，如果自己安装了版反而可能出问题。问题来源于：https://github.com/sorrycc/ro... Workaround: 思路使用 webpack output 来给 js 文件加 hash 使用插件 extract-text-webpack-plu...

izhuhaodev 2019-06-21 16:10 评论0 收藏0
HTML5-焦点管理

摘要：移动的实质则是切换焦点，所以我们需要去理解什么焦点。元素能够被聚焦的元素，比如接下来我们需要了解一下属性，这个很重要，没有它实现不了焦点管理。在开发TV web 应用时，发现在交互方式上和传统web开发很不一样。PC上的页面上都是通过鼠标进行交互，而TV则不同，它是通过遥控器按键进行交互，它有点击、移动(上下左右)、返回、主页等操作。移动的实质则是切换焦点，所以我们需要去理解什么焦点。 f...

233jl 2019-05-23 16:23 评论0 收藏0
作为一个前端工程师也要掌握的几种文件路径知识

摘要：前言之前在做配置时候多次用到路径相关内容，最近在写项目的时候，有一个文件需要上传到阿里云的功能，同时本地服务器也需要保留一个文件备份。如果返回的路径字符串长度为零，那么他会返回一个，代表当前的文件夹。 showImg(https://segmentfault.com/img/bVbwElJ?w=480&h=204); 前言之前在做webpack配置时候多次用到路径相关内容，最近在写项...

wslongchen 2019-08-26 14:06 评论0 收藏0