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