重學前端基礎： HTML語義：div和span不是夠

重學前端基礎： HTML語義：div和span不是夠用了嗎？

天這篇是我們正式開篇的第一篇文章，我想和你聊聊 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:

Switzerland
Norway
United Kingdom
United States

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> 蘋果。

例如：

.文本類屬性

① 字體類型

語法：font-family:字體1,字體2,字體3...;

body{font-family: "宋體,楷書"; }

設置多個字體時，瀏覽器會優先識別字體1，找不到則識別字體2，都無法識別時，顯示瀏覽器默認字體。

② 字體大小

語法：font-size:數值+單位;

p{font-size: 12px}

字體大小單位有px、em、rem、pt；瀏覽器默認大小為16px；字體大小一般設置為偶數值；谷歌瀏覽器識別最小字體為12px。

③ 字體加粗

p{font-weight: normal}

屬性值：normal常規、bold加粗、bolder更粗、100-900數值

數值100-900字體加粗程度不同，其中100-500為常規字體，600-900為加粗字體。

④字體顏色

p{color:  顏色值;}

顏色值寫法有三種：直接寫顏色單詞，如red；十六進制寫法，如color:#000；rgb寫法，color:rgb(0,0,0);

⑤字體傾斜

font-style: normal;
font-style: italic;   傾斜

⑥復合寫法

font:字體大小/行高字體類型;

font: 12px/24px "宋體"

⑦行高

語法: line-height:數值+單位;

數值不能為負值

⑧水平對齊方式

語法：text-align:left; 左對齊

text-align:center 居中

text-align:right 右對齊

text-align:justify 兩端對齊，只對英文起作用

⑨文本修飾

text-decoration:none; 去掉文本修飾，可去掉超鏈接(對a標簽使用)的下劃線

text-decoration:underline; 下劃線

text-decoration:overline; 上劃線

text-decoration:line-through; 刪除線

文本縮進

text-indent:數值+單位;

數值為正向后縮進，負值向前縮進

強制在一行顯示

white-space:nowrap;

長單詞換行

word-warp:break-word;

2.背景類屬性

背景顏色

語法：background-color:顏色值;

屬性值同字體顏色屬性值相同用法

背景圖片

語法：background-image:url(圖片路徑);

背景圖位置

語法：background-position:left；

水平方向：left、center、right

垂直方向：top、center、bottom

屬性值為數值時，水平方向向右為正，向左為負，垂直方向向下為正，向上為負。水平和垂直方向都居中時可寫background-position:center;

背景圖固定

background-attachment:scroll;

屬性值：scroll 默認值；fixed 固定

當容器出現滾動條時，背景圖固定不滾動，可設置為fixed。

背景平鋪

語法：background-repeat:repeat;

屬性值：repeat平鋪；no-repeat；repeat-x橫向平鋪；repeat-y縱向平鋪。

背景綜合寫法

background:背景圖背景平鋪背景位置

background:url(13211.jpg) no-repeat right bottom;

3.列表屬性

語法：list-style-type:disc;

屬性值：disc實心圓；circle空心圓；square實心方塊；decimal數字；none去除列表符號。

4.偽類選擇器

語法：選擇符:hover{屬性:屬性值;}

 p:hover{color:red;}

超鏈接a標簽的四個狀態：

a) a:link 超鏈接的初始狀態，鏈接沒有被訪問過時的狀態

b) a:visited 鏈接訪問過后的狀態

c) a:hover 鼠標懸停在超鏈接上的狀態（鼠標滑過）

d) a:active 超鏈接被激活時的狀態（鼠標按下）

素的顯示與隱藏

display -- block;(轉換為塊元素&& 顯示) none(隱藏 && 不保留原來的位置) -- 重要！

visibility -- visible(顯示) hidden (隱藏 && 保留原來的位置 )

復習：
overflow:hidden; 1.之前解決父子關系垂直嵌套的合并塌陷問題。2.清除浮動

overflow -- hidden 內容超出的部分隱藏(重點的) scroll(強制出現滾動條樣式) auto(根據內容多少來判斷是否出現滾動條 )

精靈技術

目的：為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度

實現原理：只請求一張圖 --只是展示不同位置的小圖。

案例使用：

background-image 背景圖片

background-repeat 是否平鋪

background-position 背景定位

小小注意點：

1.精靈技術主要針對背景圖片，插入的img不需要這個技術

2.需要測量每個小背景圖片的大小和位置

3.給盒子指定小的背景圖片時，背景定位基本都是負值

字體圖標

優勢：瀏覽器支持性比較好，靈活性大；體積小，加載速度快，節省帶寬流量；減輕服務器壓力。

注意：字體圖標是字體不是圖片

使用字體圖標

1.把包包里面的font文件夾復制出來一份，放在我們項目根目錄。

2.在html文件標簽里面添加結構

3.在html文件樣式style里面聲明字體：告訴代碼和別人使用我們自己自定義的字體（一定注意路徑問題）

4.給盒子設置字體即可

追加字體圖標

原來的不能刪除，繼續使用，此時我們需要這樣做

把壓縮包里面的selection.json 從新上傳，然后，選中自己想要新的圖標，從新下載壓縮包，替換原來文件夾即可。

重新導入selection.json 生成新的字體包--》追加選擇字體 --》點擊下載 --》把之前項目中fonts刪除--》替換成新的字體包里面的fonts文件夾

css三角形

本質：還是利用了盒子的邊框

做法：

1.寬高為零

2.四個邊都要的，只保留我們需要的邊框顏色，其他的顏色透明即可。

3.為了照顧兼容問題，設置：line-height:0; font-size:0;

三角形案例：
    .demo {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        
        i {
            position: absolute;
            top: 35px;
            left: 200px;
            width: 0;
            height: 0;
            border: 15px solid transparent;
            border-left-color: hotpink;
        }

  <div class="demo">
        <i></i>
    </div>

用戶的界面樣式

 <ul>
        <li style="cursor:default;">我是默認的小白鼠標樣式</li>
        <li style="cursor:pointer;">我是鼠標小手樣式</li>
        <li style="cursor:move;">我是鼠標移動樣式</li>
        <li style="cursor:text;">我是鼠標文本樣式</li>
        <li style="cursor:not-allowed;">我是鼠標禁止樣式</li>
    </ul>
?
cursor:pointer;  -- 記住！
cursor:move;  --記住！
cursor:not-allowed;  --記住！

輪廓線

outline: 0/ none; ----- 去掉輪廓線

防止文本域拖拽

resize:none;

vertical-align 垂直對齊方式

如果讓單行文本垂直居中 -- 使用line-height，如果處理圖片和文本的垂直對齊方式，line-height=高不可以實現！
注意：只針對行內元素和行內塊起作用。
通常用于 -- 圖片和文本對齊問題和去除圖片底部空白縫隙問題。
去除圖片底部空白讓圖片白不要和基線對齊 --- vertical-align:top middle bottom轉換為塊元素 -- display:block;

    div {
            border: 2px solid red;
        }
        
        img {
            /* 這個屬性加給圖片本身，千萬不要加給圖片的父級盒子 */
            vertical-align: middle;
        }
?
  <div>
        <img src="images/ldh.jpg" alt="">
    </div>

單行文字溢出省略號顯示（背過!）

1.必須強制一行顯示 white-space:nowrap;

2.超出部分隱藏 overflow:hidden;

3.文字省略號代替超出的文本 text-overflow:ellipsis;

多行文本省略號顯示

    overflow: hidden;
            /*文字省略號代替*/
            text-overflow: ellipsis;
            /* 彈性伸縮盒子模型顯示 */
            display: -webkit-box;
            /* 限制在一個塊元素顯示的文本的行數 */
            -webkit-line-clamp: 3;
            /* 設置或檢索伸縮盒對象的子元素的排列方式 */
            -webkit-box-orient: vertical;

margin負值運用(練習！)

前置知識點：

relative -- 相對定位占位置

absolute --- 絕對定位不占位置

float ---- 浮動不占位置

文字環繞效果

浮動 -- 壓不住下面標流的圖片和文字。

行內塊可以單獨設置寬高一排顯示

text-align:center --- 給父親元素添加，可以讓子盒子(行內塊/行內元素)水平居中。

京東三角形巧妙運用

在線咨詢

上一篇：5款閱讀類APP，找回看書的樂趣
下一篇：讓Python代碼和邁克杰克遜一起跳舞

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商