整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
子1：（文本內(nèi)容中的連續(xù)空格）
<p>這段文本中，輸入連續(xù)的空格 大概輸入了十個。</p>顯示效果：“格”和“大” 之間的是個空格顯示出來只是一個空格。
這段文本中，輸入連續(xù)的空格 大概輸入了十個。例子2：（代碼之間的連續(xù)空格）
<span>span是一個行內(nèi)標(biāo)簽</span> <span>和前面的span元素之間隔了很多個空格</span>顯示效果:兩個span元素之間連續(xù)的空格，顯示出來即"簽"與“和”之間的空格，只有一個空格。
span是一個行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多個空格上面兩個例子證明：HTML代碼中連續(xù)的空格在顯示時會顯示為一個空格，其余的多余的空格會被移除或者說被忽略。
段落文本其實也是HTML代碼的一部分，只不過它在p標(biāo)簽內(nèi)部，而例子2的空格是在兩個span標(biāo)簽之間。
理解了空格，現(xiàn)在看看空行，同理
例子3：（文本內(nèi)容中的空行）
<p>這段文本中，輸入連續(xù)的空行
大概輸入了五行。</p>顯示效果：如我們所見，文本代碼中的五行空行，顯示出來也只是一個空格。
這段文本中，輸入連續(xù)的空行 大概輸入了五行。例子4：（元素之間/標(biāo)簽之間的空行），只要把例子2中的空格換成空行就可以了，顯示效果和例子2的一樣，多行空行都只會顯示為一個空格。
<span>span是一個行內(nèi)標(biāo)簽</span>
<span>和前面的span元素之間隔了很多空行</span>span是一個行內(nèi)標(biāo)簽 和前面的span元素之間隔了很多空行得證：HTML 代碼中的所有連續(xù)的空格或空行（換行）都會被顯示為一個空格。
既然如此，如果我們希望擴大兩個字符之間的間距，讓代碼中的連續(xù)空格或空行顯示出來的結(jié)果也是連續(xù)的空格或空行，那該怎么辦？其實很簡單。
方法一：我們可以用預(yù)格式化標(biāo)簽<pre>，無論是空格或空行都適用。
<pre>
這是
預(yù)格式文本。
它保留了 空格
和換行。
</pre>顯示效果
這是
預(yù)格式文本。
它保留了 空格
和換行。方法二：我們可以用空格實體符 代替空格，用換行標(biāo)簽<br/>代替空行。雖然這種方法可以得到我們想要的顯示效果，但是對搜索引擎不是最友好的方式，因為 和<br/>在HTML中都是沒有語義的。所以建議盡量少用。另外需要注意的是， 必須小寫，而且最后面的分號是不能省略的。
方法三：（適合空格）使用全角空格
全角空格被解釋為漢字，所以不會被被解釋為HTML分隔符，可以按照實際的空格數(shù)顯示。
問題：怎么使用全角輸入法？
以搜狗輸入法為例，我們通常使用的是半角輸入，其狀態(tài)欄中有個月亮的標(biāo)志，就說明正在使用的是半角輸入，如果是太陽的標(biāo)志，就說明使用的是全角輸入。全角/半角的切換可以通過點擊標(biāo)志，也可以通過快捷鍵 Shift+Space（空格符）切換。
半角輸入（月亮）
全角輸入（太陽）
方法四：使用CSS樣式中字間隔屬性控制，CSS中的word-spacing 屬性可以改變字（單詞）之間的標(biāo)準(zhǔn)間隔。我們知道英文中兩個單詞之間是通過空格隔開的，所以我們視覺上可以這樣認(rèn)為，word-spacing改變了（拉長或縮短）單詞之間那個空格的寬度。
方法五：使用CSS樣式中的white-space 屬性，這個屬性聲明如何處理元素內(nèi)的空白符。
值 | 描述 |
normal | 默認(rèn)。空白會被瀏覽器忽略。 |
pre | 空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。 |
nowrap | 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 |
pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行。 |
pre-line | 合并空白符序列，但是保留換行符。 |
white-space:normal;就是正常，和不設(shè)置一樣，連續(xù)空格和空行都只會顯示一個空格。
white-space:nowrap;不換行是什么意思呢？正常情況下，當(dāng)我們的文本超出了文本域，文本就會自動折行，這個設(shè)置就是說不自動折行了，而是碰到換行標(biāo)簽<br />才換
white-space:pre;和方法一相同，將文本原樣輸出顯示。當(dāng)文本超出文本域時，不換行，會產(chǎn)生滾動條。
white-space:pre-wrap;保留空格和空行，但當(dāng)文本超出文本域時，會自動換行。
white-space:pre-line;連續(xù)的空格會顯示為一個空格，但保留連續(xù)的空行。
今天我們一起來了解下HTML，
首先HTmL包含三層結(jié)構(gòu)，分別是結(jié)構(gòu)層，表現(xiàn)層，行為層。
結(jié)構(gòu)層：html => 網(wǎng)頁上有什么，比如說文字啊、按鈕啊、圖片啊等等。
表現(xiàn)層：css => 顯示成什么樣子，比如說文字的大小啊，位置啊，顏色啊等等。
行為層：JavaScript => 具體怎么操作，比如說點擊按鈕讓圖片放大縮小等等。
===============================
在了解了html的三層結(jié)構(gòu)之后，我們來學(xué)習(xí)如何寫html。html不是編程語言，它是一套標(biāo)簽。最簡單的html文本是下圖1這個樣子。我們可以在電腦桌面上新建一個記事本文件，然后把后綴名改一下（.txt=>.html），把這段標(biāo)簽代碼粘貼到html文件里，這樣一個空白的網(wǎng)頁就做成了。如果需要在網(wǎng)頁上添加內(nèi)容，我們只需要在第10行的位置添加各種各樣的標(biāo)簽即可。比如我在圖二添加了一個按鈕標(biāo)簽和一段文字標(biāo)簽，雙擊html文件，頁面上就從左到右，從上到下顯示對應(yīng)的內(nèi)容。是不是很簡單。我們?nèi)粘g覽的網(wǎng)頁都是這樣一個標(biāo)簽一個標(biāo)簽畫上去的。
我給大家總結(jié)了一張圖，基本上覆蓋了工作中常用的知識點。同時分享幾個小技巧。
1.最簡單的網(wǎng)頁寫成什么樣子，也就是html模板不需要記憶，下圖也說了，去百度下載一個VSCode軟件（類似于記事本，是現(xiàn)在主流的前端代碼編輯器），用它打開我們的html文件，輸入英文嘆號回車就自動生成了，學(xué)編程不要死記硬背。
2.控件的標(biāo)簽不需要記憶，直接百度html XXX標(biāo)簽，例如：百度搜“html按鈕標(biāo)簽”，他就會告訴我們是<button>，用的時間長了自然就記住了。是不是省力。
3.標(biāo)簽的屬性很重要，可以不去記他的寫法，因為寫可以百度，重要的是你需要記住標(biāo)簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因為工作中，有的時候會遇到這樣一種情況，明明設(shè)置一個屬性可以完成的功能，我們不知道，花費了大力氣用css和js去實現(xiàn)，結(jié)果還存在著特定場合的bug，讓人很無奈。
4.對于html還有兩個標(biāo)簽<canvas>和<svg>，他們是用來繪圖的，做特殊效果的。我們可以先跳過，等框架啥的都學(xué)完了，有興趣，學(xué)習(xí)一下。
5.給大家推薦一個小白學(xué)習(xí)html的網(wǎng)站，w3cschool，圖里不明白的可以去上邊學(xué)學(xué)練練。
6.如果覺得一個人學(xué)習(xí)前端有難度，我建了一個小白前端學(xué)習(xí)交流群，可以私聊我，大家在群里多多交流，我會經(jīng)常給大家答疑，組織大家練習(xí)，一起做小項目。有方向，少走彎路。
今主流的技術(shù)中，可以分為前端和后端兩個門類。
前端：簡單的理解就是和用戶打交道
后端：主要用于組織數(shù)據(jù)
而前端就Web開發(fā)方向來說， 分為三門語言， HTML、CSS、JavaScript
語言 | 作用 |
HTML | 描述頁面的結(jié)構(gòu)，類似于動物的骨架 |
CSS | 渲染技術(shù)，使得頁面更好看，也可以一定程度的讓頁面動起來 |
JavaScript | 實現(xiàn)和后端的交互， 數(shù)據(jù)驗證、收發(fā)等功能 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
上面面的一段代碼既表示一段HTML的結(jié)構(gòu)， 它表示生成了一個空白的HTML網(wǎng)頁
組成HTML的元素稱為標(biāo)簽，標(biāo)簽的結(jié)構(gòu)分為兩種
下面這段HTML代碼包含的標(biāo)簽解釋如下
<!DOCTYPE html> 是一種HTML5的規(guī)范寫法，在HTML發(fā)展過程中還有以下的幾種聲明方式
<!DOCTYPE html> html5規(guī)范， html的第一行必須為此值
<!--html4 嚴(yán)格版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"<http://www.w3.org/TR/html4/strict.dtd>">
<!--html4 過渡版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"<http://www.w3.org/TR/html4/loose.dtd>">
<!--html4 框架版-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"<http://www.w3.org/TR/html4/frameset.dtd>">
關(guān)于html4的聲明類型，可以參考:
<https://www.w3.org/TR/html4/sgml/dtd.html>
<!--lang屬性表示使用英文，如果是中文，可以改成zh, 非嚴(yán)格屬性也可以不寫-->
<html lang="en">
</html>
<!--規(guī)定字符集使用UTF-8, UTF-8 涵蓋全球所有的國際和民族的文字和大量圖像, UTF-8 規(guī)定一個字符占3個字節(jié)-->
<meta charset="UTF-8">
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
