HTML5 程式碼規範LOGIN

HTML5 程式碼規範

使用正確的文件類型

文件類型宣告位於HTML文件的第一行:

<!DOCTYPE html>

如果你想跟其他標籤一樣使用小寫,可以使用以下程式碼:

<!doctype html>


#使用小寫元素名稱

HTML5 元素名稱可以使用大寫和小寫字母。

推薦使用小寫字母:

混合了大小寫的風格是非常糟糕的。

開發人員通常使用小寫 (類似 XHTML)。

小寫風格看起來更清爽。

小寫字母容易寫。

<section> 
  <p>這是一個段落。 </p>
</section>


#關閉所有HTML 元素

在HTML5 中, 你不一定要關閉所有元素(例如<p> 元素),但我們建議每個元素都要加上關閉標籤。

<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">


#屬性值

HTML5 屬性值可以不用引號。

屬性值我們建議使用引號:

如果屬性值含有空格需要使用引號。

混合風格不推薦的,建議統一風格。

屬性值使用引號易於閱讀。

<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>php中文網</h1>
<h2></h2>
<p>php中文網,學的不只是技術,更是夢想。
php中文網,學的不只是技術,更是夢想。
php中文網,學的不只是技術,更是夢想。
php中文網,學的不只是技術,更是夢想。 </p>
</body>

表格實例:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>#lt   <th>Description</th>#1; ;tr>
    <td>A</td>
    <td>Description of A</td>
  <>#lttd;/td>
 ;B</td>
    <td>Description of B</td>
  </tr>
</table>

列表範例:

#列表列表範例#<ol>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
  <li>Tokyo</li>

>/#<


##省略<html> 和<body>?

在標準HTML5 中, < html> 和<body> 標籤是可以省略的。

以下 HTML5 文件是正確的:

<!DOCTYPE html>

<head>

 <title>頁名</title>
</head>
<h1>這是一個標題</h1>
<p>這是一個段落。 </p>

不建議省略 <html> 和 <body> 標籤。



#省略<head>?

在標準HTML5 中, <head>標籤是可以省略的。

預設情況下,瀏覽器會將 <body> 之前的內容加入到一個預設的 <head> 元素上。

省略 head 標籤還不建議使用。



##HTML5 中<title> 元素是必須的,標題名描述了頁面的主題:

<title>php中文網</title>

標題和語言可以讓搜尋引擎很快了解你頁面的主題:

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <# ;title>php中文網</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 盡量使用相同的命名規則。


使用小寫檔名

大多 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.php.cn/css/), 伺服器會傳回預設的檔案名稱。通常預設檔名為 index.html, index.htm, default.html, 和 default.htm。

如果伺服器只配置了 "index.html" 作為預設文件,你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是,通常伺服器可以設定多個預設文件,你可以根據需要設定預設文件嗎。

不管怎樣,HTML 完整的字尾是 ".html"。



#
<!DOCTYPE html> <!-- HTML5 doctype 标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现--> <html lang="zh-CN"> <!-- 语言属性 有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等 --> <head> <!-- 字符编码 通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式 --> <meta charset="UTF-8"> <!-- IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。 除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Page title</title> <!-- External CSS 根据 HTML5 规范,在引入 CSS 文件时一般不需要指定 type 属性,因为 text/css 是它的默认值 --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript 根据 HTML5 规范,在引入 JavaScript 文件时一般不需要指定 type 属性,因为 text/javascript 是它的默认值 --> <script src="code-guide.js"></script> </head> <body> <!-- 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。 class id, name data-* src, for, type, href title, alt aria-*, role class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位 --> <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <br><br> <input class="form-control" type="text"> <br><br> <img src="..." alt="..."> <br><br> <!-- 布尔(boolean)型属性 不用赋值 元素的布尔型属性如果有值,就是 true,如果没有值,就是 false --> <select> <option value="1" selected>1</option> </select> <br><br> <!-- JavaScript 放在 body 底部加载可增快页面渲染速度 --> <script src="code-guide.js"></script> </body> </html>
章節課件