整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
TML 代碼約定
很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。
在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。
使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫(xiě)規(guī)范。
而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。
使用正確的文檔類型
文檔類型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：
<!doctype html>
使用小寫(xiě)元素名
HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。
推薦使用小寫(xiě)字母：
混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
開(kāi)發(fā)人員通常使用小寫(xiě) (類似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。
不推薦:
<SECTION>
<p>這是一個(gè)段落。</p>
</SECTION>
非常糟糕:
<Section>
<p>這是一個(gè)段落。</p>
</SECTION>
推薦:
<section>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉所有 HTML 元素
在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。
不推薦:
<section>
<p>這是一個(gè)段落。
<p>這是一個(gè)段落。
</section>
推薦:
<section>
<p>這是一個(gè)段落。</p>
<p>這是一個(gè)段落。</p>
</section>
關(guān)閉空的 HTML 元素
在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：
我們可以這么寫(xiě)：
<meta charset="utf-8">
也可以這么寫(xiě)：
<meta charset="utf-8" />
在 XHTML 和 XML 中斜線 (/) 是必須的。
如果你期望 XML 軟件使用你的頁(yè)面，使用這種風(fēng)格是非常好的。
使用小寫(xiě)屬性名
HTML5 屬性名允許使用大寫(xiě)和小寫(xiě)字母。
我們推薦使用小寫(xiě)字母屬性名:
同時(shí)使用大小寫(xiě)是非常不好的習(xí)慣。
開(kāi)發(fā)人員通常使用小寫(xiě) (類似 XHTML)。
小寫(xiě)風(fēng)格看起來(lái)更加清爽。
小寫(xiě)字母容易編寫(xiě)。
不推薦：
<div CLASS="menu">
推薦：
<div class="menu">
屬性值
HTML5 屬性值可以不用引號(hào)。
屬性值我們推薦使用引號(hào):
如果屬性值含有空格需要使用引號(hào)。
混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。
屬性值使用引號(hào)易于閱讀。
以下實(shí)例屬性值包含空格，沒(méi)有使用引號(hào)，所以不能起作用:
<table class=table striped>
以下使用了雙引號(hào)，是正確的：
<table class="table striped">
圖片屬性
圖片通常使用 alt 屬性。 在圖片不能顯示時(shí)，它能替代圖片顯示。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
空格和等號(hào)
等號(hào)前后可以使用空格。
<link rel = "stylesheet" href = "styles.css">
但我們推薦少用空格:
<link rel="stylesheet" href="styles.css">
避免一行代碼過(guò)長(zhǎng)
使用 HTML 編輯器，左右滾動(dòng)代碼是不方便的。
每行代碼盡量少于 80 個(gè)字符。
空行和縮進(jìn)
不要無(wú)緣無(wú)故添加空行。
為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀。
縮進(jìn)使用兩個(gè)空格，不建議使用 TAB。
比較短的代碼間不要使用不必要的空行和縮進(jìn)。
不必要的空行和縮進(jìn):
<body>
<h1>菜鳥(niǎo)教程</h1>
<h2>HTML</h2>
<p>
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想,
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
</p>
</body>
推薦:
<body>
<h1>菜鳥(niǎo)教程</h1>
<h2></h2>
<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。
菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>
</body>
表格實(shí)例:
<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>
列表實(shí)例:
<ol>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ol>
省略 <html> 和 <body>?
在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。
以下 HTML5 文檔是正確的:
實(shí)例:
<!DOCTYPE html>
<head>
<title>頁(yè)面標(biāo)題</title>
</head>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
嘗試一下 ?
不推薦省略 <html> 和 <body> 標(biāo)簽。
<html> 元素是文檔的根元素，用于描述頁(yè)面的語(yǔ)言：
<!DOCTYPE html>
<html lang="zh">
聲明語(yǔ)言是為了方便屏幕閱讀器及搜索引擎。
省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。
省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。
省略 <head>?
在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。
默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。
實(shí)例
<!DOCTYPE html>
<html>
<title>頁(yè)面標(biāo)題</title>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落。</p>
</body>
</html>
嘗試一下 ?
| 現(xiàn)在省略 head 標(biāo)簽還不推薦使用。 |
元數(shù)據(jù)
HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題:
<title>菜鳥(niǎo)教程</title>
標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>菜鳥(niǎo)教程</title>
</head>
HTML 注釋
注釋可以寫(xiě)在 <!-- 和 --> 中:
<!-- 這是注釋 -->
比較長(zhǎng)的評(píng)論可以在 <!-- 和 --> 中分行寫(xiě)：
<!--
這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。
這是 一個(gè)較長(zhǎng)評(píng)論 這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。
-->
長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。
樣式表
樣式表使用簡(jiǎn)潔的語(yǔ)法格式 ( type 屬性不是必須的):
<link rel="stylesheet" href="styles.css">
短的規(guī)則可以寫(xiě)成一行:
p.into {font-family: Verdana; font-size: 16em;}
長(zhǎng)的規(guī)則可以寫(xiě)成多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
將左花括號(hào)與選擇器放在同一行。
左花括號(hào)與選擇器間添加以空格。
使用兩個(gè)空格來(lái)縮進(jìn)。
冒號(hào)與屬性值之間添加已空格。
逗號(hào)和符號(hào)之后使用一個(gè)空格。
每個(gè)屬性與值結(jié)尾都要使用符號(hào)。
只有屬性值包含空格時(shí)才使用引號(hào)。
右花括號(hào)放在新的一行。
每行最多 80 個(gè)字符。
| 在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。 |
在 HTML 中載入 JavaScript
使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):
<script src="myscript.js">
使用 JavaScript 訪問(wèn) HTML 元素
一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。
以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:
實(shí)例
var obj = getElementById("Demo")
var obj = getElementById("demo")
HTML 中 JavaScript 盡量使用相同的命名規(guī)則。
訪問(wèn) JavaScript 代碼規(guī)范。
使用小寫(xiě)文件名
大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫(xiě)敏感： london.jpg 不能通過(guò) London.jpg 訪問(wèn)。
其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn)。
你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫(xiě)的文件名。
文件擴(kuò)展名
HTML 文件后綴可以是 .html (或r .htm)。
CSS 文件后綴是 .css 。
JavaScript 文件后綴是 .js 。
.htm 和 .html 的區(qū)別
.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。
區(qū)別在于：
.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。
在 Unix 系統(tǒng)中后綴沒(méi)有特別限制，一般用 .html。
技術(shù)上區(qū)別
如果一個(gè) URL 沒(méi)有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。
如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。
但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。
不管怎樣，HTML 完整的后綴是 ".html"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
辛萬(wàn)苦寫(xiě)了篇技術(shù)分享，貼了一堆代碼，興高采烈地發(fā)到了自己的博客網(wǎng)站上。結(jié)果卻發(fā)現(xiàn)代碼全是白底黑字，字體還難看得很，你瞬間就沒(méi)了興致。能不能讓網(wǎng)頁(yè)也能像 IDE 那樣，做帶語(yǔ)法高亮的炫酷顯示呢？來(lái)看一看 Highlight.js 吧，看這個(gè)語(yǔ)法高亮庫(kù)如何點(diǎn)亮你的代碼。
Highlight.js
Highlight.js，是在 Github 上由 highlight.js 組織開(kāi)源的前端代碼語(yǔ)法高亮庫(kù)，代碼倉(cāng)庫(kù)在 https://github.com/highlightjs/highlight.js，目前版本為 10.1.0。其不依賴于任何框架，自帶對(duì)于大量編程語(yǔ)言和標(biāo)記語(yǔ)言的語(yǔ)法高亮規(guī)則，和主流的高亮色彩方案，且可以自由擴(kuò)展。其支持自動(dòng)語(yǔ)言檢測(cè)，使用極為方便，是在網(wǎng)頁(yè)上進(jìn)行語(yǔ)法高亮的不二之選。
highlight.js語(yǔ)法高亮庫(kù)
Highlight.js 的 CSS 文件的選擇決定高亮配色方案，默認(rèn)為 Default，另外還有如 Monokai Sublime、Ocean、Solarized Dark、Tomorrow 等經(jīng)典的主流配色方案。
而 JS 文件的選擇決定可以支持的語(yǔ)言。主要的 highlight.min.js 包含了一些主流的語(yǔ)言，包括 C++、XML、Markdown、Java 等。如果需要一些其他的語(yǔ)言，則要另外引用該語(yǔ)言對(duì)應(yīng)JS文件。
Highlight.js 在瀏覽器中可以簡(jiǎn)單的引用 CDN 來(lái)使用：
<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 使用十分簡(jiǎn)單，在引用了 CSS 和 JS 后，執(zhí)行
hljs.initHighlightingOnLoad();Highlight.js就會(huì)自動(dòng)查找網(wǎng)頁(yè)中以標(biāo)簽 pre 和 code 所包裹的代碼
<pre><code>...</code></pre>并自動(dòng)檢測(cè)代碼語(yǔ)言，進(jìn)行高亮渲染。我們也可以為 code 標(biāo)簽添加語(yǔ)言名稱的 class，來(lái)顯式地標(biāo)明代碼語(yǔ)言。我們可以看一個(gè)使用示例，注意實(shí)際代碼中尖括號(hào)等 HTML 轉(zhuǎn)義字符需要進(jìn)行轉(zhuǎn)義處理：
<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>該網(wǎng)頁(yè)對(duì)于 C++ 語(yǔ)言片段使用了 Monokai Sublime 主題進(jìn)行了語(yǔ)法高亮渲染：
使用Highlight.js渲染C++代碼
可以看到，包括關(guān)鍵字、注釋和字面值等都有了不同顏色的渲染，輸出十分美觀。以下則是使 Dracula 主題對(duì) Javascript 代碼渲染的例子：
使用Highlight.js渲染Javascript代碼
我們也可以不使用 pre 和 code 標(biāo)簽來(lái)包裹代碼，改為使用自定義的容器，使用時(shí)需要注意換行和等寬字體的問(wèn)題。
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});在渲染大量代碼時(shí)，為避免瀏覽器卡死，可以使用 Web Worker 來(lái)在后臺(tái)進(jìn)行渲染：
// 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 使得在前端頁(yè)面進(jìn)行語(yǔ)法高亮變得十分方便，為在網(wǎng)頁(yè)顯示的代碼增添了顏色和生機(jī)。
Highlight.js 文檔詳盡，設(shè)計(jì)簡(jiǎn)潔，為編寫(xiě)新的語(yǔ)言支持和配色方案提供了很大支持，定制化能力和可擴(kuò)展性極強(qiáng)。Highlight.js 的代碼包含了對(duì)于各種語(yǔ)言的語(yǔ)法解析，和不同配色方案的設(shè)計(jì)，對(duì)于對(duì)編程語(yǔ)言和語(yǔ)法高亮領(lǐng)域感興趣的開(kāi)發(fā)者是一座珍貴的寶庫(kù)。
日，站長(zhǎng)在線（olzz.com）的首頁(yè)右側(cè)邊欄里面，有一個(gè)是【mip驗(yàn)證】的工具入口，其實(shí)我在其他網(wǎng)站也放了這個(gè)入口，但是不同的是，以前的頁(yè)面入口是直接鏈接到百度mip官方的頁(yè)面檢測(cè)地址的，而今天，我這個(gè)網(wǎng)站的頁(yè)面地址改成自己的網(wǎng)站地址，為：https://www.olzz.com/mip/
使用這樣做的方法顯著的好處就是，可以把網(wǎng)站的流量放在自己的網(wǎng)站里面，知道使用這個(gè)工具的人有多少，一樣的使用效果，卻給自己帶來(lái)更多的瀏覽量，何樂(lè)不為呢？
網(wǎng)頁(yè)代碼
接下來(lái)，站長(zhǎng)在線的站長(zhǎng)就開(kāi)始，對(duì)代碼進(jìn)行嘗試添加了：
1、確立MIP標(biāo)準(zhǔn)。因?yàn)檎鹃L(zhǎng)在線的主站是mip技術(shù)的，所以我想在這個(gè)新建的內(nèi)頁(yè)也使用mip技術(shù)，所以首先制作一個(gè)index.html的靜態(tài)的MIP單頁(yè)面，然后把mip技術(shù)的標(biāo)準(zhǔn)頁(yè)面的空白文件制作出來(lái)，代碼我就是不一一解釋怎么來(lái)了，直接上代碼了：
<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>網(wǎng)頁(yè)標(biāo)題</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="當(dāng)前mip頁(yè)面地址">
<meta name="Author" Content="作者">
<meta name="Keywords" Content="關(guān)鍵詞">
<meta name="Description" Content="頁(yè)面描述">
</head>
<body>
正文內(nèi)容
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>空白文件制作好了，就開(kāi)始填充內(nèi)容，最后本頁(yè)面里面，還要添加cnzz統(tǒng)計(jì)和百度統(tǒng)計(jì)。
1、添加百度mip檢測(cè)的頁(yè)面調(diào)用代碼，并且讓他居中顯示：
<div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>2、添加cnzz統(tǒng)計(jì)、百度統(tǒng)計(jì)的代碼。
<mip-stats-cnzz token="1278700007"></mip-stats-cnzz><!--cnzz統(tǒng)計(jì)ID-->
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu><!--百度統(tǒng)計(jì)ID-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz統(tǒng)計(jì)-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度統(tǒng)計(jì)-->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頁(yè)面檢測(cè)，查看是否符合百度mip頁(yè)面標(biāo)準(zhǔn)</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="楊澤業(yè)">
<meta name="Keywords" Content="mip,mip檢測(cè),MIP頁(yè)面檢測(cè)">
<meta name="Description" Content="這是由站長(zhǎng)在線站長(zhǎng)楊澤業(yè)手工開(kāi)發(fā)的mip頁(yè)面檢測(cè)網(wǎng)頁(yè)，通過(guò)本頁(yè)面的檢測(cè)，可以讓你知道你的網(wǎng)站，是否符合mip頁(yè)面的技術(shù)標(biāo)準(zhǔn)">
</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統(tǒng)計(jì)-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度統(tǒng)計(jì)-->
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>總結(jié)：通過(guò)本內(nèi)容的學(xué)習(xí)，可以讓你知道，怎么在自己的網(wǎng)站里面調(diào)用第三方網(wǎng)站的頁(yè)面內(nèi)容，新手朋友們自己親自實(shí)踐一下，舉一反三，讓自己的建站水平穩(wěn)步提升。
歡迎關(guān)注站長(zhǎng)快遞頭條號(hào)，一起學(xué)習(xí)建站知識(shí)，一起成長(zhǎng)！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
