整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
今日小知識】：div和span的作用及用法，希望可以幫到正在學(xué)習(xí)HTML的你噢~~~
一般用于配合css完成網(wǎng)頁基本布局。<div>標(biāo)簽可定義文檔中的分區(qū)或節(jié) 。可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來標(biāo)記 ，那么該標(biāo)簽的作用會變得更加有效。class用于元素組（類似的元素，或者可以理解為某一類元素），而id用于標(biāo)識單獨的唯一的元素。class可以在頁面里面重復(fù)使用，id由于在頁面里面只能出現(xiàn)一次，所以不能重復(fù)使用，所以盡量用class來寫，這樣能在頁面里面重復(fù)引用你寫的css，減小工作量和代碼量。
一般用于配合css修改網(wǎng)頁中的一些局部信息。它其實就是用來組合文檔中的行內(nèi)元素，也就是將內(nèi)容放在span標(biāo)簽之中。span沒有固定的格式表現(xiàn)，如果需要，可以添加屬性來表現(xiàn)形式
1.div標(biāo)簽會獨占一行，span標(biāo)簽不會。
2.div是一個容器級別的標(biāo)簽，span是一個文本級別的標(biāo)簽。
3.div基本上與span相似，或者說具有span所有的功能，此外還具有span不及的特色。div是一個塊，也就是所謂的"容器"，它具有自己獨立的段落，獨立的標(biāo)題，獨立的表格。
4.div是一個塊級元素，可以包含段落、標(biāo)題、表格，乃至諸如章節(jié)、摘要和備注等。而span是行內(nèi)元素，span的前后是不會換行的，它沒有結(jié)構(gòu)的意義，純粹是應(yīng)用樣式，當(dāng)其他行內(nèi)元素都不合適時，可以使用span。
容器級別標(biāo)簽可以嵌套所有標(biāo)簽，文本級別標(biāo)簽只可以嵌套文字/超鏈接/圖片。
div h ul ol dl li dt dd …
span p buis strong em ins del….
希望以上內(nèi)容可以幫助到在學(xué)習(xí)HTML的你們噢~~~如有補充可以私聊我噢~~~我們一起學(xué)習(xí)~~~
略文字…
white-space: nowrap; // 一行顯示 overflow: hidden; // 不允許滾動 text-overflow: ellipsis; // 省略符號...
截圖
超出滑動
white-space: nowrap; // 一行顯示 overflow-x: scroll;// 允許x軸方向滾動
截圖
書寫格式保留、溢出white-space：pre
截圖
書寫格式保留、不溢出white-space：pre-wrap
截圖
書寫格式保留、不溢出、空白符合并成一個white-space：pre-line
截圖
總結(jié)
1、一般使用在移動前端，文字太多展示不下需要滑動或者省略
w3school中對white-space的解釋：https://www.w3school.com.cn/cssref/pr_text_white-space.asp
天這篇是我們正式開篇的第一篇文章，我想和你聊聊 HTML。
我猜屏幕那一邊的你估計會說：“HTML 我很熟悉了，每天寫，這不是初級程序員才學(xué)的內(nèi)容
么，這我還能不會嗎？”
其實在我看來，HTML 并不簡單，它是典型的“入門容易，精通困難”的一部分知識。深刻理
解 HTML 是成為優(yōu)秀的前端工程師重要的一步。
我們在上一篇文章中講到了，HTML 的標(biāo)簽可以分為很多種，比如 head 里面的元信息類標(biāo)
簽，又比如 img、video、audio 之類的替換型媒體標(biāo)簽。我今天要講的標(biāo)簽是：語義類標(biāo)簽。
語義類標(biāo)簽是什么，使用它有什么好處？
語義類標(biāo)簽也是大家工作中經(jīng)常會用到的一類標(biāo)簽，它們的特點是視覺表現(xiàn)上互相都差不多，
主要的區(qū)別在于它們表示了不同的語義，比如大家會經(jīng)常見到的 section、nav、p，這些都是
語義類的標(biāo)簽。
語義是我們說話表達的意思，多數(shù)的語義實際上都是由文字來承載的。語義類標(biāo)簽則是純文字
的補充，比如標(biāo)題、自然段、章節(jié)、列表，這些內(nèi)容都是純文字無法表達的，我們需要依靠語
義標(biāo)簽代為表達。
在講語義之前，我們來說說為什么要用語義。
現(xiàn)在我們很多的前端工程師寫起代碼來，多數(shù)都不用復(fù)雜的語義標(biāo)簽， 只靠 div 和 span 就能
走天下了。
這樣做行不行呢？毫無疑問答案是行。那這樣做好不好呢？按照正確的套路，我應(yīng)該說不好，
但是在很多情況下，答案其實是好。
這是因為在現(xiàn)代互聯(lián)網(wǎng)產(chǎn)品里，HTML 用于描述“軟件界面”多過于“富文本”，而軟件界面
里的東西，實際上幾乎是沒有語義的。比如說，我們做了一個購物車功能，我們一定要給每個
購物車里的商品套上 ul 嗎？比如說，加入購物車這個按鈕，我們一定要用 Button 嗎？
實際上我覺得沒必要，因為這個場景里面，跟文本中的列表，以及表單中的 Button，其實已
經(jīng)相差很遠了，所以，我支持在任何“軟件界面”的場景中，直接使用 div 和 span。
不過，在很多工作場景里，語義類標(biāo)簽也有它們自己無可替代的優(yōu)點。正確地使用語義標(biāo)簽可
以帶來很多好處。語義類標(biāo)簽對開發(fā)者更為友好，使用語義類標(biāo)簽增強了可讀性，即便是在沒
有 CSS 的時候，開發(fā)者也能夠清晰地看出網(wǎng)頁的結(jié)構(gòu)，也更為便于團隊的開發(fā)和維護。除了
對人類友好之外，語義類標(biāo)簽也十分適宜機器閱讀。它的文字表現(xiàn)力豐富，更適合搜索
引擎檢索（SEO），也可以讓搜索引擎爬蟲更好地獲取到更多有效信息，有效提升網(wǎng)頁的搜
索量，并且語義類還可以支持讀屏軟件，根據(jù)文章可以自動生成目錄等等。不過，不恰當(dāng)?shù)厥?/p>
用語義標(biāo)簽，反而會造成負面作用。這里我們舉一個常見的誤區(qū)作為例子。我們都知道 ul 是
無序列表，ol 是有序列表，所以很多接觸過語義這個概念，半懂不懂的前端工程師，特別喜歡
給所有并列關(guān)系的元素都套上 ul。實際上， ul 是長成下面的這種樣子的 (以下來自 HTML 標(biāo)準(zhǔn))。
I have lived in the following countries:
ul 多數(shù)出現(xiàn)正在行文中間，它的上文多數(shù)在提示：要列舉某些項。但是，如果所有并列關(guān)系都
用 ul，會造成大量冗余標(biāo)簽。錯誤地使用語義標(biāo)簽，會給機器閱讀造成混淆、增加嵌套，給
CSS 編寫加重負擔(dān)。所以，對于語義標(biāo)簽，我的態(tài)度是：“用對”比“不用”好，“不
用”比“用錯”好。當(dāng)然了，我覺得有理想的前端工程師還是應(yīng)該去追求“用對”它們。
與 JavaScript 這樣嚴格的編程語言相比，HTML 中語義標(biāo)簽的使用更接近我們平常說話用的
自然語言。我們說話并沒有唯一的標(biāo)準(zhǔn)措辭，語義標(biāo)簽的使用也是一樣。下面，我挑選了幾種
（我認為）比較重要的語義標(biāo)簽使用場景，來為你介紹一下。
作為自然語言延伸的語義類標(biāo)簽其實語義問題不僅僅屬于理科，它還是個文科問題。所以我們
這里講語義標(biāo)簽的使用的第一個場景，也是最自然的使用場景，就是：作為自然語言和
純文本的補充，用來表達一定的結(jié)構(gòu)或者消除歧義。
我們先來看看“表達一定的結(jié)構(gòu)”這個場景。在日語中，有一個語法現(xiàn)象叫做：ルビ，它的讀
音是 ruby（著名的 ruby 語言就是據(jù)此命名的），它中文的意思大約類似于注音或者意思的注
解，它的形式可以看下圖：圖中的例子選自動畫片《某科學(xué)的超電磁炮》第二季第一話。圖中
把 teleport 放在空間移動上方的用法，就是日文中 ruby 的用法。“空間移動”是動畫中白井
黑子的技能，這里動畫字幕上寫的是“空間移動”，動畫里的臺詞則用了英文發(fā)
音“Teleport”，這里就形成了一個使用
ruby 的場景。ruby 的這個形式，在中國的網(wǎng)友中間最近被玩出了新花樣，比如表情包。
有時候微信聊天，不能用 ruby 這樣的東西真的是好急啊，只好用括號代替，效果真是差了不
少。在 HTML5 中，就引入了這個表示 ruby 的標(biāo)簽，它由 ruby、rt、rp 三個標(biāo)簽來實現(xiàn)。
所以說，這些情況里存在的語義，其實原本就存在了，只是我們用純文字是沒法表達的，
HTML作為一種“超文本”語言，支持這些文字表達就是必要的了。還有一種情況是，HTML
的有些標(biāo)簽實際上就是必要的，甚至必要的程度可以達到：如果沒有這個標(biāo)簽，文字會產(chǎn)生歧
義的程度。
這里我們可以介紹一下 em 標(biāo)簽。
我們看看這句話，
1. 今天我吃了一個蘋果.
再比如：
昨天我吃了一個香蕉。
今天我吃了一個蘋果。
看上去它很清楚，但是實際上，這句話放到不同上下文中，可能表達完全不
同的意思。
昨天我吃了兩個蘋果。
今天我吃了一個蘋果。
試著讀一讀，這兩段里面的“今天我吃了一個蘋果”，你是不是發(fā)現(xiàn)讀音不自覺地發(fā)生了變化？
實際上，不僅僅是讀音，這里的意思也發(fā)生了變化。前一段中，表示我今天吃的是蘋果，而不是別的什么東西，后一段中，則表示我今天只吃了一個蘋果，沒有多吃。
當(dāng)沒有上下文時，如何消除歧義呢？這就要用到我們的 em 標(biāo)簽了。em 表示重音：
通過 em 標(biāo)簽，我們可以消除這樣的歧義。
一些文章常常會拿 em 和 strong 做對比，實際上，我們只要理解了 em 的真正意思，它和
strong 可謂天差地別，并沒有任何混淆的可能。
作為標(biāo)題摘要的語義類標(biāo)簽
介紹完自然語言的語義場景后，我想介紹的另一個語義重要使用場景，就是文章的結(jié)構(gòu)。中國古
代小說就形成了“章 - 回”的概念，西方的戲劇也有幕的區(qū)分，所以人類的自然語言作品也是如出一轍。
HTML 也應(yīng)該支持這樣的需求。HTML 語義標(biāo)簽中，有不少是用于支持這樣的結(jié)構(gòu)的標(biāo)簽。
語義化的 HTML 能夠支持自動生成目錄結(jié)構(gòu)，HTML 標(biāo)準(zhǔn)中還專門規(guī)定了生成目錄結(jié)構(gòu)的算
法，即使我們并不打算深入實踐語義，也應(yīng)該盡量在大的層面上保證這些元素的語義化使用。
首先我們需要形成一個概念，一篇文檔會有一個樹形的目錄結(jié)構(gòu)，它由各個級別的標(biāo)題組成。這
個樹形結(jié)構(gòu)可能不會跟 HTML 元素的嵌套關(guān)系一致。
這段 HTML 幾乎是平鋪的元素，但是它的標(biāo)題結(jié)構(gòu)是：
HTML 語義
弱語義
今天我吃了一個 <em> 蘋果 </em>。
今天我吃了 <em> 一個 </em> 蘋果。
例如：
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
