HTML5 风格指南和编码方式

HTML编码习惯

网页开发者通常不确定在HTML里用什么编码风格和语法结构.

在2000年到2010年之间,许多开发者把HTML转换为XHTML.

在XHTML里,强制开发者们的代码写法必须合法且格式良好.

当验证代码时HTML5稍微更懒散.

在HTML5里,你必须创建你自己的最优方法,风格和编码习惯.

聪明点和未来校验

样式的后继使用,让其他人更容易理解和使用你的HTML.

今后,像XML阅读器这样的程序或许要阅读你的HTML.

使用格式良好(更接近XHTML)的语法,或许很聪明.

要一直保持你的编码风格良好,整洁,干净.

使用正确的文档类型

如果你想整个页面都用小写书写标签,你可以用:

用小写字母来书写元素名

HTML5允许元素名里大小写混合.

我们建立元素名用小写:

大小写混合的名字是不好的
开发者使用小写字母书写名字(像XHTML)
小写字母看起来更整齐
小写字母更容易书写

不好的

非常不好的

好的

关闭所有的HTML元素

在HTML5里,你可以不用关闭所有元素(例如<p>元素).

我们建议关闭所有的HTML元素:

看起来不好的:

看起来好的:

关闭空的HTML元素

在HTML5里,空元素可以不需要结束标签.

这是允许的:

这也是允许的:

斜线(/)在XHTML和XML都是需要的.

如果你期望XML软件来访问你的页面,保持这种写法是一个好主意.

属性名字用小写字母

HTML5允许属性名用大小写混合.

我们建议属性名用小写字母:

大小写混合来书写名字不好
开发者用小写字母名字(例如XHTML)
小写字母看起来更整洁
小写字母更容易书写

看起来不好的:

看起来好的:

属性值用引号引起来

HTML5允许属性值不带引号.

我们推荐属性值用引号引起来:

如果值包含空格,你就必须用引号
大小写字母混合写是不好的
值用引号引起来易于阅读

下面的这句将不会正常工作,因为值包含空格:

下面这句将正常工作:

图片属性

图片要一直用alt属性.当图片不可见时这很重要.

要一直定义图片大小.不然会产生闪烁,因为在图片加载前浏览器用空格显示.

空格和相等符号

等于符号两边有空格是合法的:

但是无空格更易于阅读,属性和值可以更好的在一起:

避免代码行很长

当用编辑器编辑HTML时,左右滚动来查看HTML代码很不方便.

尽量不要让一行的代码超过80个字符.

空行和缩进

不要无缘无故的添加一个空行.

为了可读性,添加空行来分割大的或逻辑代码块.

为了可读性,添加两个空格来缩进.不要用TAB.

不要用多余的空行和缩进.不必在短的或逻辑一样的代码之间添加空行.不必给每个元素添加缩进:

不必要的

较好的:

表格例子:

列表例子:

省略<html>和<body>?

在HTML5标准里,<html>标签和<body>标签能省略.

下面的代码将作为HTML5验证:

例子:

我们不建议省略<html>和<body>标签.

<html>元素是文档的根元素.推荐在这个元素上指定页面语言:

声明页面语言对于应用(屏幕阅读器)和搜索引擎的可访问性来说很重要.

省略<html>或<body>会使DOM和XML软件崩溃.

省略<body>在老版本浏览器(IE9)上会产生错误.

省略<head>?

在HTML5标准里,<head>标签也可以省略.

默认情况下,浏览前将把<body>标签前的所有元素放入一个默认的<head>标签里.

你可以通过省略<head>标签来减少HTML的复杂度:

省略标签对于网页开发者来说很陌生.需要时间习惯.

元数据

在HTML5里<title>元素是必须的.尽量使标题更有意义:

为了确保正常的解析,搜索引擎正确的检索,语言和编码方式应该尽早的在文档里定义:

HTML 注释

短的文档注释应该写在一行里,:

如果是很长的注释,生成很多行,注释应该这样写

长的注释如果缩进两个空格比较容易阅读.

样式表

用简单的语法来链接样式表(type属性不是必须的):

短规则可以压缩成这样写,在一行上,像这样

多条样式要分行写:

左花括号和选择器放在同一行.
在花括号之前留有一个空格.
用两个空格进行缩进.
属性和值之间用冒号和一个空格.
在每个逗号或分号之后加一个空格.
每个属性值对后面加分号,包括最后一对.
如果值有空格就用引号引起来.
把右花括号放在新的一行,没有前置空格.
避免每行超过80个字符.

在空格或分号后加一个空格.

在HTML里加载JavaScript

用简单的语法加载外部脚本(type属性不是必须的):

用JavaScript使用HTML元素

不整洁的HTML风格可能会导致JavaScript错误.

下面的两句JavaScript语句将产生不同的结果:

例子

如果可能的话,在HTML里使用相同的命名习惯(像JavaScript).

访问JavaScript风格指南

用小写字母书写文件名

大多数网络服务器(Apache,Unix)对文件名是区分大小写的:

london.jpg文件不能以London.jpg访问.

其它网络服务器(Microsoft,IIS)不区分大小写:

london.jpg可以以London.jpg或london.jpg访问.

如果你用大小写混合,将会很麻烦.

如果你从不区分大小写的服务器移到区分大小写的服务器,即使是一些小的错误也将破坏你的网站.

为了避免这些错误,要尽量一直用小写书写文件名.

文件扩展名

HTML文件的扩展名应该是.html或.htm.

CSS文件的扩展名应该是.css.

JavaScript文件的扩展名应该是.js.

.htm和.html之间的区别

.htm和.html这两个扩展名之间没有任何区别.两者都将被浏览器或服务器当做HTML处理.

不同的是:

.htm:在在早期的DOS系统里文件的扩展名限制为3个字符.

.html:Unix操作系统没有这个限制.

技术上的不同

当URL不指定文件名(例如:http://www.21xrx.com/css/),服务器将返回一个默认的文件名.通常默认文件名是index.html,index.htm,default.html和default.htm.

如果你的服务器只配置了"index.html"作为默认文件名,你的默认返回文件为"index.html",而不是"index.htm".

不管怎样,服务器可以配置多个默认文件,你可以根据需求设置许多默认文件.

无论如何,HTML文件的完整扩展名是".html".

评论区

()

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索