2. 河豚號(hào) > 生活百科 >

html加空格的方法（html文字間加空格）

河豚俠 ? 生活百科 ? 2022-05-26 12:48:47 ?

HTML 代碼約定

很多 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ī)范的建議。

使用正確的文檔類(lèi)型

文檔類(lèi)型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：

<!doctype html>

HTML(5) 代碼規(guī)范

使用小寫(xiě)元素名

HTML5 元素名可以使用大寫(xiě)和小寫(xiě)字母。

推薦使用小寫(xiě)字母：

  • 混合了大小寫(xiě)的風(fēng)格是非常糟糕的。
  • 開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 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 中斜線(xiàn) (/) 是必須的。

如果你期望 XML 軟件使用你的頁(yè)面，使用這種風(fēng)格是非常好的。

使用小寫(xiě)屬性名

HTML5 屬性名允許使用大寫(xiě)和小寫(xiě)字母。

我們推薦使用小寫(xiě)字母屬性名:

  • 同時(shí)使用大小寫(xiě)是非常不好的習(xí)慣。
  • 開(kāi)發(fā)人員通常使用小寫(xiě) (類(lèi)似 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”>

HTML(5) 代碼規(guī)范

圖片屬性

圖片通常使用 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>

嘗試一下 »

HTML(5) 代碼規(guī)范 現(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è)字符。
HTML(5) 代碼規(guī)范 在逗號(hào)和分號(hào)后添加空格是常用的一個(gè)規(guī)則。

在 HTML 中載入 JavaScript

使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):

<script src=”myscript.js”>

使用 JavaScript 訪(fǎng)問(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(5) 代碼規(guī)范

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪(fǎng)問(wèn) JavaScript 代碼規(guī)范。

使用小寫(xiě)文件名

大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫(xiě)敏感： london.jpg 不能通過(guò) London.jpg 訪(fǎng)問(wèn)。

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫(xiě)不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪(fǎng)問(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”。

 

 
 
 

本文由網(wǎng)上采集發(fā)布，不代表我們立場(chǎng)，轉(zhuǎn)載聯(lián)系作者并注明出處：http://m.webhosting0.com/shbk/39089.html

相關(guān)推薦

聯(lián)系我們

在線(xiàn)咨詢(xún)：點(diǎn)擊這里給我發(fā)消息

微信號(hào)：15705946153

工作日：9:30-18:30，節(jié)假日休息