怎么编写(如何自己编写)

这次给大家带来的是如何写出灵活、稳定、高质量的HTML和css代码。编写灵活、稳定、高质量的HTML和css代码有哪些注意事项？以下为实战案例。让我们来看看。

黄金法则
总是遵循同一套编码规范。无论有多少人参与同一个项目，都要确保每一行代码看起来都是由同一个人写的。

1.语法:
1。使用两个空框代替制表符；
2。嵌套元素应该缩进一次(两个空单元格)；
3。对于属性的定义，一定要用双引号，千万不要用单引号；
4。不要在自结束元素的末尾加斜杠HTML 5规范(https://dev.w3.org/html5/spec-author-view/syntax.html #语法-start-tag)中明确说明了这是可选的；
5。不要省略可选的结束标记；
6。在每个HTML页面的第一行添加标准模式的声明，以确保在每个浏览器中显示一个；

二、语言属性:
根据HTML5规范，建议为HTML根元素指定lang属性，以便为文本设置正确的语言。这将帮助语音合成工具确定它应该采用的发音，并帮助翻译工具确定翻译时应该遵循的规则等。语言属性列表:http://www.sitepoint.com/web-foundations/iso-2-letter.

三。IE兼容模式:
IE支持通过特定的标签来确定当前回执页面应该使用的IE版本。除非有很强的需求，否则最好设置为边缘模式，这样IE就可以采用其支持的最新模式。

四。字符编码:
通过声明字符编码，可以保证浏览器快速方便的判断页面内容的呈现方式。这可以避免在HTML中使用字符实体标签，从而使其与文档编码完全一致。

动词 （verb的缩写）css和JavaScript文件介绍:
根据HTML5规范，导入css和JavaScript文件时一般不需要指定type属性，因为text/css和text/javascript分别是它们的默认值。

6.实用性为王:
尽量遵循HTML标准和语义，但不要牺牲实用性。尝试使用尽可能少的标签，并始终保持最低的复杂度。

七。属性顺序:
HTML属性应该按照以下顺序排列，以保证代码的可读性:
1。第二类。ID，name
3。Data-*
4。src，for，type，href [/]。

八、减少标签数量
编写HTML代码时，尽量避免冗余的父元素。很多时候，这需要迭代和重构。

9.JavaScript生成的标签
JavaScript生成的标签使内容难以查找和编辑，情况以性能为导向。尽可能避免。

X.CSS语法:
1。使用两个空框代替制表符；
2。将选择器分组时，将单个选择器放在一行上；
3。为了代码的可读性，在每个声明块的左花括号中加一个空框；
4。声明块的右大括号应该在单独的一行中；
5。应该在每个语句的:后面插入空网格；
6。为了得到更准确的错误报告，每条语句都应该在自己的行上；
7。所有的声明语句都应该以分号结束，最后一个声明语句后面的分号是可选的，但是如果省略了这个分号，代码可能更容易打印；
8。对于用逗号分隔的属性值，应该在每个逗号后插入空网格；
9。对于属性值或颜色参数，省略小于1的小数前的0(例如用0.5代替0.5)；
10。十六进制值应该全部小写，比如#fff。尽量使用短格式的十六进制值，如#fff而不是# ffffff
11。为选定的属性添加双引号，例如，input[type = & quot；文本& quot];
12。避免为0值指定单位，例如，用margin: 0替换margin:0px。

XI。语句顺序:

相关的属性声明应该组合在一起，并按以下顺序排列:

1 .定位(位置:绝对；top:0；底部:0；右:0；左:0；z指数:100；);
2 .箱式模型(显示器:block浮动:左；宽度:100px高度:100px);
3 .排版(字体:normal 13px & quot微软雅黑& quot；行高:1.5厘米；颜色:# 333；文本对齐:居中；);
4 .视觉(背景:黄色；边框:1px纯色# c00边框半径:3px不透明度:1；);

因为定位可以从正常的文档流中移除元素，还可以覆盖与盒子模型相关的样式，所以排在第一位。箱式模型排在第二位，因为它决定了建筑物的大小和位置。其他属性知识影响到了构建内部或者不影响前两组属性，所以排在后面。

12.不要使用@import
与标签相比，@import指令要慢很多，不仅增加了额外的请求数量，还会导致不可预知的问题。有几种选择:
1。使用多个元素；
2。通过一个类似于sass或更小的css预处理程序将多个css文件视为一个文件；
3。通过rails、jekyll或其他系统已经提供了css文件合并功能。

十三。媒体查询的位置
将媒体查询放在尽可能靠近相关规则的位置。不要把它们打包在一个单独的样式文件中或者文档的底部。

14.前缀属性:
使用特定厂商的前缀属性时，每个属性的值通过锁定垂直对齐，方便多行编辑。

十五。单行规则声明:
对于值包含一个声明的样式，为了可读性和快速编辑，建议将语句放在同一行。对于有多个声明的样式，声明应该分成多行。其中的关键因素是错误检测。例如，css检查器在第180行有一个语法错误。如果是单行和单个声明，就不会忽略这个错误。如果是单行多声明，关键因素是检测错误。

16.在Less和Sass
中嵌套可以避免不必要的嵌套。这是因为尽管您可以使用嵌套，但这并不意味着您应该使用嵌套。只有当样式必须限于父元素(即后代选择器)并且有多个元设计器需要嵌套时，才能使用嵌套。

十七。点评:
代码是人写的，人维护的。请确保您的代码能够自我描述，被很好地注释，并且容易被他人理解。好的代码注释可以传达上下文和代码目的；
不要简单地重复组件或类名；
长笔记一定要写完整的句子，一般笔记可以写简短的短语。

18.类名
类名中只能出现谢小字和破折号(不能是下划线或驼峰命名法)。破折号应该用于相关类的命名(类似于空，比如。btn和。为了避免过于武断的速记..btn代表按钮，但是。
类名尽量简短，意思要明确；
使用有意义的名字，有组织或有目的的名字，不要使用表达性的名字；
基于最新的类或基本类为新类添加前缀；
使用。js-*类来标识行为(与样式相对)，并且不要在css文件中包含这些类；
命名sass和less变量也可以参考上面列出的规范。

十九。选择器
对常用元素使用类，有利于渲染性能的优化；
对于经常出现的组件，请避免使用属性选择器(例如，[class = " & quot；])，浏览器的性能会受到这些因素的影响；
选择器应该尽可能的短，组成选择器的元素数量应该尽可能的少。建议不超过3；
仅在必要时将类限制到最近的父元素。

XX。代码组织:
按组织组织代码段；
指定一致的批注规范；
使用一致的空白色字符将代码分块，有利于扫描大文档；
如果使用多个css文件，将它们拆分成组件而不是页面，因为页面会被重新组织，组件只会被移动。

相信看完这些案例你已经掌握了方法。更多精彩请关注AdminJS.cn其他相关文章！

相关阅读:

如何处理响应式框架中表头的自动换行

如何使表格显示边框

HTML表格应该如何布局

以上就是如何写出灵活、稳定、高质量的HTML和css代码的细节。请多关注AdminJS.cn的其他相关文章！