整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
子1：（文本內(nèi)容中的連續(xù)空格）
<p>這段文本中，輸入連續(xù)的空格 大概輸入了十個(gè)。</p>顯示效果：“格”和“大” 之間的是個(gè)空格顯示出來(lái)只是一個(gè)空格。
這段文本中，輸入連續(xù)的空格 大概輸入了十個(gè)。例子2：（代碼之間的連續(xù)空格）
<span>span是一個(gè)行內(nèi)標(biāo)簽</span> <span>和前面的span元素之間隔了很多個(gè)空格</span>顯示效果:兩個(gè)span元素之間連續(xù)的空格，顯示出來(lái)即"簽"與“和”之間的空格，只有一個(gè)空格。
span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多個(gè)空格上面兩個(gè)例子證明：HTML代碼中連續(xù)的空格在顯示時(shí)會(huì)顯示為一個(gè)空格，其余的多余的空格會(huì)被移除或者說(shuō)被忽略。
段落文本其實(shí)也是HTML代碼的一部分，只不過(guò)它在p標(biāo)簽內(nèi)部，而例子2的空格是在兩個(gè)span標(biāo)簽之間。
理解了空格，現(xiàn)在看看空行，同理
例子3：（文本內(nèi)容中的空行）
<p>這段文本中，輸入連續(xù)的空行
大概輸入了五行。</p>顯示效果：如我們所見(jiàn)，文本代碼中的五行空行，顯示出來(lái)也只是一個(gè)空格。
這段文本中，輸入連續(xù)的空行 大概輸入了五行。例子4：（元素之間/標(biāo)簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會(huì)顯示為一個(gè)空格。
<span>span是一個(gè)行內(nèi)標(biāo)簽</span>
<span>和前面的span元素之間隔了很多空行</span>span是一個(gè)行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多空行得證：HTML 代碼中的所有連續(xù)的空格或空行（換行）都會(huì)被顯示為一個(gè)空格。
既然如此，如果我們希望擴(kuò)大兩個(gè)字符之間的間距，讓代碼中的連續(xù)空格或空行顯示出來(lái)的結(jié)果也是連續(xù)的空格或空行，那該怎么辦？其實(shí)很簡(jiǎn)單。
方法一：我們可以用預(yù)格式化標(biāo)簽<pre>，無(wú)論是空格或空行都適用。
<pre>
這是
預(yù)格式文本。
它保留了 空格
和換行。
</pre>顯示效果
這是
預(yù)格式文本。
它保留了 空格
和換行。方法二：我們可以用空格實(shí)體符 代替空格，用換行標(biāo)簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對(duì)搜索引擎不是最友好的方式，因?yàn)?和<br/>在HTML中都是沒(méi)有語(yǔ)義的。所以建議盡量少用。另外需要注意的是， 必須小寫(xiě)，而且最后面的分號(hào)是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會(huì)被被解釋為HTML分隔符，可以按照實(shí)際的空格數(shù)顯示。
問(wèn)題：怎么使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態(tài)欄中有個(gè)月亮的標(biāo)志，就說(shuō)明正在使用的是半角輸入，如果是太陽(yáng)的標(biāo)志，就說(shuō)明使用的是全角輸入。全角/半角的切換可以通過(guò)點(diǎn)擊標(biāo)志，也可以通過(guò)快捷鍵 Shift+Space（空格符）切換。
半角輸入（月亮）
全角輸入（太陽(yáng)）
方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。我們知道英文中兩個(gè)單詞之間是通過(guò)空格隔開(kāi)的，所以我們視覺(jué)上可以這樣認(rèn)為，word-spacing改變了（拉長(zhǎng)或縮短）單詞之間那個(gè)空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個(gè)屬性聲明如何處理元素內(nèi)的空白符。
值 | 描述 |
normal | 默認(rèn)。空白會(huì)被瀏覽器忽略。 |
pre | 空白會(huì)被瀏覽器保留。其行為方式類(lèi)似 HTML 中的 <pre> 標(biāo)簽。 |
nowrap | 文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 |
pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行。 |
pre-line | 合并空白符序列，但是保留換行符。 |
white-space:normal;就是正常，和不設(shè)置一樣，連續(xù)空格和空行都只會(huì)顯示一個(gè)空格。
white-space:nowrap;不換行是什么意思呢？正常情況下，當(dāng)我們的文本超出了文本域，文本就會(huì)自動(dòng)折行，這個(gè)設(shè)置就是說(shuō)不自動(dòng)折行了，而是碰到換行標(biāo)簽<br />才換
white-space:pre;和方法一相同，將文本原樣輸出顯示。當(dāng)文本超出文本域時(shí)，不換行，會(huì)產(chǎn)生滾動(dòng)條。
white-space:pre-wrap;保留空格和空行，但當(dāng)文本超出文本域時(shí)，會(huì)自動(dòng)換行。
white-space:pre-line;連續(xù)的空格會(huì)顯示為一個(gè)空格，但保留連續(xù)的空行。
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ī)范的建議。
使用正確的文檔類(lèi)型
文檔類(lèi)型聲明位于HTML文檔的第一行：
<!DOCTYPE html>
如果你想跟其他標(biāo)簽一樣使用小寫(xiě)，可以使用以下代碼：
<!doctype html>
使用小寫(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">
圖片屬性
圖片通常使用 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 訪(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 中 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"。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
擊右上方紅色按鈕關(guān)注“小鄭搞碼事”，每天都能學(xué)到知識(shí)，搞懂一個(gè)問(wèn)題！
由于HTML代碼的空格通常會(huì)被瀏覽器忽略，所以我們很有必要對(duì)瀏覽器處理空格的一些規(guī)則有個(gè)詳細(xì)的認(rèn)識(shí)，這樣我們后面才能詳述它的解決辦法。
效果是這樣的：
由此可此可以知道瀏覽器的默認(rèn)處理規(guī)則一：文字的前后空格都會(huì)忽略，內(nèi)部連續(xù)空格只有自作一個(gè)。
原樣輸出可能是我們這樣寫(xiě)代碼的本意，要讓這段代碼原樣輸出的方法有兩個(gè)（使用標(biāo)簽/使用表示空格的實(shí)體代碼）：
方法一：<pre><span class="space"> 小鄭 搞碼 </span></pre>
方法二：<span class="space"> 小鄭 搞碼 </span>
關(guān)于規(guī)則部分還有一點(diǎn)，來(lái)看一段代碼：
效果是：
表示，瀏覽器對(duì)字符的處理不僅限于空格，還有制表符（\t），換行符（\r和\n）。
同樣讓這段代碼換行可能是我們寫(xiě)的本意，讓這段代碼換行的方法有兩個(gè)：
方法一：套一個(gè)pre標(biāo)簽
方法二：<span class="space">小鄭<br/>搞碼</span>
最后總結(jié)一下：
HTML語(yǔ)言的空格處理，基本上就是直接過(guò)濾。這樣的處理過(guò)于粗糙，完全忽視了原始文本內(nèi)部的空格可能是有意義的。所以CSS提供了一個(gè)屬性white-space屬性來(lái)靈活控制空格。下篇詳述。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
