整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
TML 代码约定
很多 Web 开发人员对 HTML 的代码规范知之甚少。
在2000年至2010年，许多Web开发人员从 HTML 转换到 XHTML。
使用 XHTML 开发人员逐渐养成了比较好的 HTML 编写规范。
而针对于 HTML5 ，我们应该形成比较好的代码规范，以下提供了几种规范的建议。
使用正确的文档类型
文档类型声明位于HTML文档的第一行：
<!DOCTYPE html>
如果你想跟其他标签一样使用小写，可以使用以下代码：
<!doctype html>
使用小写元素名
HTML5 元素名可以使用大写和小写字母。
推荐使用小写字母：
混合了大小写的风格是非常糟糕的。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。
不推荐:
<SECTION>
<p>这是一个段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>这是一个段落。</p>
</SECTION>
推荐:
<section>
<p>这是一个段落。</p>
</section>
关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。
不推荐:
<section>
<p>这是一个段落。
<p>这是一个段落。
</section>
推荐:
<section>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</section>
关闭空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要关闭：
我们可以这么写：
<meta charset="utf-8">
也可以这么写：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜线 (/) 是必须的。
如果你期望 XML 软件使用你的页面，使用这种风格是非常好的。
使用小写属性名
HTML5 属性名允许使用大写和小写字母。
我们推荐使用小写字母属性名:
同时使用大小写是非常不好的习惯。
开发人员通常使用小写 (类似 XHTML)。
小写风格看起来更加清爽。
小写字母容易编写。
不推荐：
<div CLASS="menu">
推荐：
<div class="menu">
属性值
HTML5 属性值可以不用引号。
属性值我们推荐使用引号:
如果属性值含有空格需要使用引号。
混合风格不推荐的，建议统一风格。
属性值使用引号易于阅读。
以下实例属性值包含空格，没有使用引号，所以不能起作用:
<table class=table striped>
以下使用了双引号，是正确的：
<table class="table striped">
图片属性
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等号
等号前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我们推荐少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代码过长
使用 HTML 编辑器，左右滚动代码是不方便的。
每行代码尽量少于 80 个字符。
空行和缩进
不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
不必要的空行和缩进:
<body>
<h1>菜鸟教程</h1>
<h2>HTML</h2>
<p>
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想,
菜鸟教程，学的不仅是技术，更是梦想。
</p>
</body>
推荐:
<body>
<h1>菜鸟教程</h1>
<h2></h2>
<p>菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。
菜鸟教程，学的不仅是技术，更是梦想。</p>
</body>
表格实例:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
列表实例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。
以下 HTML5 文档是正确的:
实例:
<!DOCTYPE html>
<head>
<title>页面标题</title>
</head>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
尝试一下 »
不推荐省略 <html> 和 <body> 标签。
<html> 元素是文档的根元素，用于描述页面的语言：
<!DOCTYPE html>
<html lang="zh">
声明语言是为了方便屏幕阅读器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。
省略 <body> 在旧版浏览器 (IE9)会发生错误。
省略 <head>?
在标准 HTML5 中， <head>标签是可以省略的。
默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。
实例
<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
尝试一下 »
| 现在省略 head 标签还不推荐使用。 |
元数据
HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:
<title>菜鸟教程</title>
标题和语言可以让搜索引擎很快了解你页面的主题:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鸟教程</title>
</head>
HTML 注释
注释可以写在 <!-- 和 --> 中:
<!-- 这是注释 -->
比较长的评论可以在 <!-- 和 --> 中分行写：
<!--
这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->
长评论第一个字符缩进两个空格，更易于阅读。
样式表
样式表使用简洁的语法格式 ( type 属性不是必须的):
<link rel="stylesheet" href="styles.css">
短的规则可以写成一行:
p.into {font-family: Verdana; font-size: 16em;}
长的规则可以写成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
将左花括号与选择器放在同一行。
左花括号与选择器间添加以空格。
使用两个空格来缩进。
冒号与属性值之间添加已空格。
逗号和符号之后使用一个空格。
每个属性与值结尾都要使用符号。
只有属性值包含空格时才使用引号。
右花括号放在新的一行。
每行最多 80 个字符。
| 在逗号和分号后添加空格是常用的一个规则。 |
在 HTML 中载入 JavaScript
使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):
<script src="myscript.js">
使用 JavaScript 访问 HTML 元素
一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。
以下两个 JavaScript 语句会输出不同结果:
实例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 尽量使用相同的命名规则。
访问 JavaScript 代码规范。
使用小写文件名
大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
你必须保持统一的风格，我们建议统一使用小写的文件名。
文件扩展名
HTML 文件后缀可以是 .html (或r .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。
.htm 和 .html 的区别
.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。
区别在于：
.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。
在 Unix 系统中后缀没有特别限制，一般用 .html。
技术上区别
如果一个 URL 没有指定文件名 (如 http://www.runoob.com/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和 default.htm。
如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。
但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件吗。
不管怎样，HTML 完整的后缀是 ".html"。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
辛万苦写了篇技术分享，贴了一堆代码，兴高采烈地发到了自己的博客网站上。结果却发现代码全是白底黑字，字体还难看得很，你瞬间就没了兴致。能不能让网页也能像 IDE 那样，做带语法高亮的炫酷显示呢？来看一看 Highlight.js 吧，看这个语法高亮库如何点亮你的代码。
Highlight.js
Highlight.js，是在 Github 上由 highlight.js 组织开源的前端代码语法高亮库，代码仓库在 https://github.com/highlightjs/highlight.js，目前版本为 10.1.0。其不依赖于任何框架，自带对于大量编程语言和标记语言的语法高亮规则，和主流的高亮色彩方案，且可以自由扩展。其支持自动语言检测，使用极为方便，是在网页上进行语法高亮的不二之选。
highlight.js语法高亮库
Highlight.js 的 CSS 文件的选择决定高亮配色方案，默认为 Default，另外还有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等经典的主流配色方案。
而 JS 文件的选择决定可以支持的语言。主要的 highlight.min.js 包含了一些主流的语言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的语言，则要另外引用该语言对应JS文件。
Highlight.js 在浏览器中可以简单的引用 CDN 来使用：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/highlight.min.js"></script>Highlight.js 使用十分简单，在引用了 CSS 和 JS 后，执行
hljs.initHighlightingOnLoad();Highlight.js就会自动查找网页中以标签 pre 和 code 所包裹的代码
<pre><code>...</code></pre>并自动检测代码语言，进行高亮渲染。我们也可以为 code 标签添加语言名称的 class，来显式地标明代码语言。我们可以看一个使用示例，注意实际代码中尖括号等 HTML 转义字符需要进行转义处理：
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/styles/monokai-sublime.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.0/highlight.min.js"></script>
</head>
<body>
<pre><code class="cpp">#include <iostream>
int main(int argc, char *argv[]) {
/* An annoying "Hello World" example */
for (auto i = 0; i < 0xFFFF; i++)
cout << "Hello, World!" << endl;
char c = '\n';
unordered_map <string, vector<string> > m;
m["key"] = "\\\\"; // this is an error
return -2e3 + 12l;
}
</code></pre>
<script>
hljs.initHighlightingOnLoad();
</script>
</body>
</html>该网页对于 C++ 语言片段使用了 Monokai Sublime 主题进行了语法高亮渲染：
使用Highlight.js渲染C++代码
可以看到，包括关键字、注释和字面值等都有了不同颜色的渲染，输出十分美观。以下则是使 Dracula 主题对 Javascript 代码渲染的例子：
使用Highlight.js渲染Javascript代码
我们也可以不使用 pre 和 code 标签来包裹代码，改为使用自定义的容器，使用时需要注意换行和等宽字体的问题。
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});在渲染大量代码时，为避免浏览器卡死，可以使用 Web Worker 来在后台进行渲染：
// index.html
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js'); // 新建Worker
worker.onmessage = (event) => { code.innerHTML = event.data; } // 接受渲染后的HTML
worker.postMessage(code.textContent); // 传递代码
});// worker.js
onmessage = (event) => {
importScripts('<path>/highlight.min.js');
const result = self.hljs.highlightAuto(event.data); // 高亮渲染
postMessage(result.value); // 返回HTML
};Highlight.js 使得在前端页面进行语法高亮变得十分方便，为在网页显示的代码增添了颜色和生机。
Highlight.js 文档详尽，设计简洁，为编写新的语言支持和配色方案提供了很大支持，定制化能力和可扩展性极强。Highlight.js 的代码包含了对于各种语言的语法解析，和不同配色方案的设计，对于对编程语言和语法高亮领域感兴趣的开发者是一座珍贵的宝库。
日，站长在线（olzz.com）的首页右侧边栏里面，有一个是【mip验证】的工具入口，其实我在其他网站也放了这个入口，但是不同的是，以前的页面入口是直接链接到百度mip官方的页面检测地址的，而今天，我这个网站的页面地址改成自己的网站地址，为：https://www.olzz.com/mip/
使用这样做的方法显著的好处就是，可以把网站的流量放在自己的网站里面，知道使用这个工具的人有多少，一样的使用效果，却给自己带来更多的浏览量，何乐不为呢？
网页代码
接下来，站长在线的站长就开始，对代码进行尝试添加了：
1、确立MIP标准。因为站长在线的主站是mip技术的，所以我想在这个新建的内页也使用mip技术，所以首先制作一个index.html的静态的MIP单页面，然后把mip技术的标准页面的空白文件制作出来，代码我就是不一一解释怎么来了，直接上代码了：
<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>网页标题</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="当前mip页面地址">
<meta name="Author" Content="作者">
<meta name="Keywords" Content="关键词">
<meta name="Description" Content="页面描述">
</head>
<body>
正文内容
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>空白文件制作好了，就开始填充内容，最后本页面里面，还要添加cnzz统计和百度统计。
1、添加百度mip检测的页面调用代码，并且让他居中显示：
<div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>2、添加cnzz统计、百度统计的代码。
<mip-stats-cnzz token="1278700007"></mip-stats-cnzz><!--cnzz统计ID-->
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu><!--百度统计ID-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->3、合并所有代码，完整的代码如下：
<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP页面检测，查看是否符合百度mip页面标准</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="https://www.olzz.com/mip/">
<meta name="Author" Content="杨泽业">
<meta name="Keywords" Content="mip,mip检测,MIP页面检测">
<meta name="Description" Content="这是由站长在线站长杨泽业手工开发的mip页面检测网页，通过本页面的检测，可以让你知道你的网站，是否符合mip页面的技术标准">
</head>
<body>
<div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>
<mip-stats-cnzz token="1278700007"></mip-stats-cnzz>
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu>
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>总结：通过本内容的学习，可以让你知道，怎么在自己的网站里面调用第三方网站的页面内容，新手朋友们自己亲自实践一下，举一反三，让自己的建站水平稳步提升。
欢迎关注站长快递头条号，一起学习建站知识，一起成长！
*请认真填写需求信息，我们会在24小时内与您取得联系。
