整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
