整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

你的HTML页面书写规范吗?必须知道的HTML书写规范

言:每一个行业都有自己的规范,不已规矩,不成方圆。尤其是代码,代码规范便于阅读,便于维护。

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

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

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

4.不要在自闭合(self-closing)元素的尾部添加斜线

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

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

7.语言属性

根据 HTML5 规范:

强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等.

<html>

<!-- ... -->

</html>

8.IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。

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

9.字符编码

通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是,可以避免在 HTML 中使用字符实体标记(character entity),从而全部与文档编码一致(一般采用 UTF-8 编码)。

<head>

<meta charset="UTF-8">

</head>

10.引入 CSS 和 JavaScript 文件

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

<!-- External CSS -->

<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->

<style>

/* ... */

</style>

<!-- JavaScript -->

<script src="code-guide.js"></script>

11.

布尔(boolean)型属性

布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值,但是 HTML5 规范不需要。

<input type="checkbox" value="1" checked>

12.

减少标签的数量

编写 HTML 代码时,尽量避免多余的父元素。很多时候,这需要迭代和重构来实现。请看下面的案例:

<!-- Not so great -->

<span>

<img src="...">

</span>

<!-- Better -->

<img src="...">

13.

不要使用 @import

与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:

使用多个 <link> 元素

通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

14.

class 命名

class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。

避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。

class 名称应当尽可能短,并且意义明确。

使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。

基于最近的父 class 或基本(base) class 作为新 class 的前缀。

使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。

.t { ... }

.red { ... }

.header { ... }

/* Good example */

.tweet { ... }

.important { ... }

.tweet-header { ... }

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容:正式引入HTML网页开发,学习并了解HTML的相关知识。变身Web开发达人,做全栈程序员。这是HTML技术的第二课,主要讲解一下开发工具及HTML的结构,做出来属于我们的第一个Web网页。


开发工具

作为程序员,只要做电脑编程写代码,一定会选择一款合适的开发工具。HTML的书写的话,开发工具就有的选择了。

程序员写代码

作为HTML的开发,其实使用记事本完全就可以了,因为HTML网页本身就是文本文件。但是没人会使用记事本进行开发,因为一款适合自己的开发工具可以大大的提高写代码的效率。

下面我列出来几个比较常用的HTML开发工具:

NotePad++、EditPlus、Adobe Dreameaver、Sublime、WebStorm、Visual Studio等。

我们这阶段课程,主要使用Sublime这款工具为例进行使用,当然其他的开发工具也是大同小异。

Sublime代码编辑器


如何下载Sublime?

直接打开微软的必应搜索,这里不得不吐下槽,国内的搜索引擎真的不敢恭维。搜索结果显示并不是很好。谷歌当然是最不错的选择。但是无奈谷歌上不去,所以可以推荐给你使用必应搜索。必应搜索的结果可以说几乎和谷歌相差不大。

必应搜索

直接打开必应搜索,输入“sublime text 3”进行搜索,你就能找到官方网址。打开进行下载即可:

Sublime的下载方式

打开Sublime的官网,选择Download,选择合适你电脑系统的版本进行安装:

下载Sublime


书写第一个Web网页

打开Sublime,默认打开:

软件默认界面

此时,会默认打开一个新文件,首先点击键盘上的Ctrl+S。进行文件保存。选择合适的路径,并输入文件名,后缀以html。

保存html

添加代码HTML的结构:

需要明确的是HTML有一个文档结构的。就好比人有头部和身体组成。html也是如此。上面就是html最简单的结构。

<html>类型标签,表示开始标签。</html>类型的表示结束标签。

两个标签之间的内容,输入整个html标签。

我们习惯性的把<xxxx>...</xxxx>的格式的代码,叫做xxxx标签。

为结构添加内容,做我们第一个Web网页:

第一个Web网页

此时,找到html文件所在路径,双击打开,运行你就会看到效果:

网站结构

经过运行结果,你就会明白title、body标签所展现的样子了。


本视频由做全栈攻城狮,原创首发,如有转载,请注明出处。

如果你有什么比较不错的编程技巧,或者你想要什么程序员编程资源,点击下方了解更多。

天我们来学习HTML基本格式。

H1 标签定义了一个文档的标题 ,虽然在浏览器里显示了预期的效果 ,但它并不是一个符合规范的 html 文档,今天我们就来定义一个标准的 html 文档。

这是一个 html 文档的基本格式 ,来深入的剖析一下

<!DOCTYPE html> 这个标签会告诉浏览器,后面书写的是HTML5规范 的语法,浏览器会按照 HTML5 的语法规范进行解析

<html lang='en'> 包裹了整个页面的所有内容,有时被称为根元素。

<head> 是所有头部元素的容器,描述了文档的各种属性和信息,比如文档的标题,文档引用的样式表和JS脚本文件,页面元信息等等,绝大多数文档头部包含的数据,都不会真正作为内容显示给浏览者。

<meta charset="utf-8"> 将文档应该使用的字符集设置为UTF-8,它包括了书面语言的大多数字符,基本上可以处理放在页面上的任何文本内容,它可以帮助你解决页面乱码的问题。

<title> 设置页面的标题,也就是出现在浏览器标签中的内容,它描述页面被加入入书签或收藏时的标题

<body> 它包含了页面展示的所有内容,比如文字,图片,视频,游戏,可播放的音乐等等


一般情况下 一个符合规范的 html 文档 都应该使用这个基本格式

回到编辑器 我们创建一个文件 名字叫 base.html 我们快速的编写好 html 基本格式, 在 <body> 标签里写一个 h1 在里面写一些内容,浏览器中打开页面正常的显示了,每个页面都写这么多东西很麻烦 我们有 vscode。

删除所有内容 在页面里只需一个感叹号 ,再按一下 tab 键 ,html 基本格式自动生成了,这时就可以直接在 body 内编写网页内容了。

通过观察基本结构发现 标签前面有的有空格 有的没有空格 这是为什么呢 实际上 当出现标签嵌套的时候 需要保持一个固定的缩进 ,一般采用两个或者四个空格 具体看个人习惯和开发团队的规范,为了方便阅读不推荐混用 。 有些标签嵌套在一起,这就是标签结构嵌套


在一个标签内再次书写一个标签 他们之间形成了这样的包裹关系 ,别包裹的叫做子标签,包裹的就是父标签。

在父子标签嵌套的时候子标签整体相对于父标签多一套缩进,更加方便阅读。