TML全局屬性是所有HTML元素共有的屬性。它們可以應(yīng)用于所有元素，盡管它們可能對某些元素沒有影響。

HTML屬性

HTML元素可以設(shè)置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標(biāo)簽

屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。

屬性和屬性值對大小寫不敏感。不過，萬維網(wǎng)聯(lián)盟在其HTML4推薦標(biāo)準(zhǔn)中推薦小寫的屬性/屬性值。而新版本的(X)HTML要求使用小寫屬性。

大多數(shù)HTML元素支持的屬性：

class：為html元素定義一個或多個類名（classname）(類名從樣式文件引入)

id：定義元素的唯一id

style：規(guī)定元素的行內(nèi)樣式（inlinestyle）

title：描述了元素的額外信息(作為工具條使用)

HTML超鏈接及其屬性

HTML使用標(biāo)簽<a>來設(shè)置超文本鏈接。超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧ＤJ(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線。

訪問過的鏈接顯示為紫色并帶有下劃線。

點擊鏈接時，鏈接顯示為紅色并帶有下劃線。

如果為這些超鏈接設(shè)置了CSS樣式，展示樣式會根據(jù)CSS的設(shè)定而顯示。

在標(biāo)簽<a>中使用了href屬性來描述鏈接的地址。

實例

<a href="https://www.kaikeba.com/">訪問開課吧</a>1復(fù)制代碼類型：[html]

上面這行代碼顯示為：訪問開課吧

點擊這個超鏈接會把用戶帶到開課吧的首頁。

使用target屬性，你可以定義被鏈接的文檔在何處顯示。

實例

<ahref="https://www.kaikeba.com/"target="_blank">訪問開課吧</a>  

target="_blank":在新窗口中打開被鏈接文檔。  

target="_self":	默認(rèn)，在相同的框架中打開被鏈接文檔。  

target="_parent":在父框架集中打開被鏈接文檔。  

target="_top":	在整個窗口中打開被鏈接文檔。  

target=framename:在指定的框架中打開被鏈接文檔。  1234567891011復(fù)制代碼類型：[html]

HTML圖像標(biāo)簽及其屬性

在HTML中，圖像由<img>標(biāo)簽定義。<img>是空標(biāo)簽，意思是說，它只包含屬性，并且沒有閉合標(biāo)簽。

要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。

定義圖像的語法是：

<imgsrc="url"alt="some_text">  1復(fù)制代碼類型：[html]

URL指存儲圖像的位置。

alt屬性用來為圖像定義一串預(yù)備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習(xí)慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。

height（高度）與width（寬度）屬性用于設(shè)置圖像的高度與寬度。屬性值默認(rèn)單位為像素。

<imgsrc="logo.jpg"alt="kaikeba"width="300"height="120">  1復(fù)制代碼類型：[html]

提示:指定圖像的高度和寬度是一個很好的習(xí)慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。如果沒有指定圖片的大小，加載頁面時有可能會破壞HTML頁面的整體布局。

開課吧廣場-人才學(xué)習(xí)交流平臺

家好，我是皮湯。最近業(yè)務(wù)調(diào)整，組內(nèi)開啟了前端工程化方面的基建，我主要負(fù)責(zé) CSS 技術(shù)選型這一塊，針對目前業(yè)界主流的幾套方案進(jìn)行了比較完善的調(diào)研與比較，分享給大家。

目前整個 CSS 工具鏈、工程化領(lǐng)域的主要方案如下：

而我們技術(shù)選型的標(biāo)準(zhǔn)如下：

- 開發(fā)速度快

- 開發(fā)體驗友好

- 調(diào)試體驗友好

- 可維護(hù)性友好

- 擴(kuò)展性友好

- 可協(xié)作性友好

- 體積小

- 有最佳實踐指導(dǎo)

目前主要需要對比的三套方案：

- Less/Sass + PostCSS 的純 CSS c側(cè)方案

- styled-components / emotion 的純 CSS-in-JS 側(cè)方案

- TailwindCSS 的以寫輔助類為主的 HTML 側(cè)方案

## 純 CSS 側(cè)方案

### 介紹與優(yōu)點

> 維護(hù)狀態(tài)：一般

> Star 數(shù)：16.7K

> 支持框架：無框架限制

> 項目地址：https://github.com/less/less.js

Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業(yè)級項目中使用很廣，如 ant-design 等

它們的主要作用如下：

- 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫判斷等

- 引入了模塊化的概念，可以在一個 less 文件中導(dǎo)入另外一個 less 文件進(jìn)行使用

- 兼容標(biāo)準(zhǔn)，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等

這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對應(yīng)的 loader 如 sass-loader，然后就可以在 React/Vue 項目中建 `.scss` 文件，寫 sass 語法，并導(dǎo)入到 React 組件中生效。

比如我寫一個組件在響應(yīng)式各個斷點下的展示情況的 sass 代碼：

```

.component {

width: 300px;

@media (min-width: 768px) {

width: 600px;

@media (min-resolution: 192dpi) {

background-image: url(/img/retina2x.png);

}

}

@media (min-width: 1280px) {

width: 800px;

}

}

```

或?qū)胍恍┯糜跇?biāo)準(zhǔn)化瀏覽器差異的代碼：

```

@import "normalize.css";

// component 相關(guān)的其他代碼

```

### 不足

這類方案的一個主要問題就是，只是對 CSS 本身進(jìn)行了增強(qiáng)，但是在幫助開發(fā)者如何寫更好的 CSS、更高效、可維護(hù)的 CSS 方面并沒有提供任何建議。

- 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進(jìn)行組合去描述 HTML 的樣式

- 你依然可能會寫很多冗余的 Less/Sass 代碼，然后造成項目的負(fù)擔(dān)，在可維護(hù)性方面也有巨大問題

### 優(yōu)化

- 可以引入 CSS 設(shè)計規(guī)范：BEM 規(guī)范，來輔助用戶在整個網(wǎng)頁的 HTML 骨架以及對應(yīng)的類上進(jìn)行設(shè)計

- 可以引入 CSS Modules，將 CSS 文件進(jìn)行 “作用域” 限制，確保在之后維護(hù)時，修改一個內(nèi)容不會引起全局中其他樣式的效果

#### BEM 規(guī)范

B （Block）、E（Element）、M（Modifier），具體就是通過塊、元素、行為來定義所有的可視化功能。

拿設(shè)計一個 Button 為例：

```

/* Block */

.btn {}

/* 依賴于 Block 的 Element */

.btn__price {}

/* 修改 Block 風(fēng)格的 Modifier */

.btn--orange {}

.btn--big {}

```

遵循上述規(guī)范的一個真實的 Button：

```

<a class="btn btn--big btn--orange" href="#">

<span class="btn__price"></span>

<span class="btn__text">BIG BUTTON</span>

</a>

```

可以獲得如下的效果：

#### CSS Modules

CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。

一個例子如下：

```

import React from 'react';

import style from './App.css';

export default () => {

return (

<h1 className={style.title}>

Hello World

</h1>

);

};

```

```

.title {

composes: className;

color: red;

}

```

上述經(jīng)過編譯會變成如下 hash 字符串：

```

<h1 class="_3zyde4l1yATCOkgn-DBWEL">

Hello World

</h1>

```

```

._3zyde4l1yATCOkgn-DBWEL {

color: red;

}

```

CSS Modules 可以與普通 CSS、Less、Sass 等結(jié)合使用。

## 純 JS 側(cè)方案

### 介紹與優(yōu)點

> 維護(hù)狀態(tài)：一般

> Star 數(shù)：35.2K

> 支持框架：React ，通過社區(qū)支持 Vue 等框架

> 項目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數(shù)，在 JS 里面寫 CSS 代碼，這帶來了兩個認(rèn)知的改變：

- 不是在根據(jù) HTML，然后去寫 CSS，而是站在組件設(shè)計的角度，為組件寫 CSS，然后應(yīng)用組件的組合思想搭建大應(yīng)用

- 自動提供類似 CSS Modules 的體驗，不用擔(dān)心樣式的全局污染問題

同時帶來了很多 JS 側(cè)才有的各種功能特性，可以讓開發(fā)者用開發(fā) JS 的方式開發(fā) CSS，如編輯器自動補(bǔ)全、Lint、編譯壓縮等。

比如我寫一個按鈕：

```

const Button = styled.button`

/* Adapt the colors based on primary prop */

background: ${props => props.primary ? "palevioletred" : "white"};

color: ${props => props.primary ? "white" : "palevioletred"};

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

`;

render(

<div>

<Button>Normal</Button>

<Button primary>Primary</Button>

</div>

);

```

可以獲得如下效果：

還可以擴(kuò)展樣式：

```

// The Button from the last section without the interpolations

const Button = styled.button`

color: palevioletred;

font-size: 1em;

margin: 1em;

padding: 0.25em 1em;

border: 2px solid palevioletred;

border-radius: 3px;

`;

// A new component based on Button, but with some override styles

const TomatoButton = styled(Button)`

color: tomato;

border-color: tomato;

`;

render(

<div>

<Button>Normal Button</Button>

<TomatoButton>Tomato Button</TomatoButton>

</div>

);

```

可以獲得如下效果：

### 不足

雖然這類方案提供了在 JS 中寫 CSS，充分利用 JS 的插值、組合等特性，然后應(yīng)用 React 組件等組合思想，將組件與 CSS 進(jìn)行細(xì)粒度綁定，讓 CSS 跟隨著組件一同進(jìn)行組件化開發(fā)，同時提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復(fù)用 JS 社區(qū)的最佳實踐等。

但是它仍然有一些不足：

- 仍然是是對 CSS 增強(qiáng)，提供非常大的靈活性，開發(fā)者仍然需要考慮如何去組織自己的 CSS

- 沒有給出一套 “有觀點” 的最佳實踐做法

- 在上層也缺乏基于 styled-components 進(jìn)行復(fù)用的物料庫可進(jìn)行參考設(shè)計和使用，導(dǎo)致在初始化使用時開發(fā)速度較低

- 在 JS 中寫 CSS，勢必帶來一些本屬于 JS 的限制，如 TS 下，需要對 Styled 的組件進(jìn)行類型注釋

- 官方維護(hù)的內(nèi)容只兼容 React 框架，Vue 和其他框架都由社區(qū)提供支持

整體來說不太符合團(tuán)隊協(xié)作使用，需要人為總結(jié)最佳實踐和規(guī)范等。

### 優(yōu)化

- 尋求一套寫 CSS 的最佳實踐和團(tuán)隊協(xié)作規(guī)范

- 能夠擁有大量的物料庫或輔助類等，提高開發(fā)效率，快速完成應(yīng)用開發(fā)

## 偏向 HTML 側(cè)方案

### 介紹與優(yōu)點

> 維護(hù)狀態(tài)：積極

> Star 數(shù)：48.9K

> 支持框架：React、Vue、Svelte 等主流框架

> 項目地址：https://github.com/tailwindlabs/tailwindcss

典型的是 TailwindCSS，一個輔助類優(yōu)先的 CSS 框架，提供如 `flex` 、`pt-4` 、`text-center` 、`rotate-90` 這樣實用的類名，然后基于這些底層的輔助類向上組合構(gòu)建任何網(wǎng)站，而且只需要專注于為 HTML 設(shè)置類名即可。

一個比較形象的例子可以參考如下代碼：

```

<button class="btn btn--secondary">Decline</button>

<button class="btn btn--primary">Accept</button>

```

上述代碼應(yīng)用 BEM 風(fēng)格的類名設(shè)計，然后設(shè)計兩個按鈕，而這兩個類名類似主流組件庫里面的 Button 的不同狀態(tài)的設(shè)計，而這兩個類又是由更加基礎(chǔ)的 TailwindCSS 輔助類組成：

```

.btn {

@apply text-base font-medium rounded-lg p-3;

}

.btn--primary {

@apply bg-rose-500 text-white;

}

.btn--secondary {

@apply bg-gray-100 text-black;

}

```

上面的輔助類包含以下幾類：

- 設(shè)置文本相關(guān)： `text-base` 、`font-medium` 、`text-white` 、`text-black`

- 設(shè)置背景相關(guān)的：`bg-rose-500` 、`bg-gray-100`

- 設(shè)置間距相關(guān)的：`p-3`

- 設(shè)置邊角相關(guān)的：`rounded-lg`

通過 Tailwind 提供的 `@apply` 方法來對這些輔助類進(jìn)行組合構(gòu)建更上層的樣式類。

上述的最終效果展示如下：

可以看到 TailwindCSS 將我們開發(fā)網(wǎng)站的過程抽象成為使用 Figma 等設(shè)計軟件設(shè)計界面的過程，同時提供了一套用于設(shè)計的規(guī)范，相當(dāng)于內(nèi)置最佳實踐，如顏色、陰影、字體相關(guān)的內(nèi)容，一個很形象的圖片可以說明這一點：

TailwindCSS 為我們規(guī)劃了一個元素可以設(shè)置的屬性，并且為每個屬性給定了一組可以設(shè)置的值，這些屬性+屬性值組合成一個有機(jī)的設(shè)計系統(tǒng)，非常便于團(tuán)隊協(xié)作與共識，讓我們開發(fā)網(wǎng)站就像做設(shè)計一樣簡單、快速，但是整體風(fēng)格又能保持一致。

TailwindCSS 同時也能與主流組件庫如 React、Vue、Svelte 結(jié)合，融入基于組件的 CSS 設(shè)計思想，但又只需要修改 HTML 上的類名，如我們設(shè)計一個食譜組件：

```

// Recipes.js

import Nav from './Nav.js'

import NavItem from './NavItem.js'

import List from './List.js'

import ListItem from './ListItem.js'

export default function Recipes({ recipes }) {

return (

<div className="divide-y divide-gray-100">

<Nav>

<NavItem href="/featured" isActive>Featured</NavItem>

<NavItem href="/popular">Popular</NavItem>

<NavItem href="/recent">Recent</NavItem>

</Nav>

<List>

{recipes.map((recipe) => (

<ListItem key={recipe.id} recipe={recipe} />

))}

</List>

</div>

)

}

// Nav.js

export default function Nav({ children }) {

return (

<nav className="p-4">

<ul className="flex space-x-2">

{children}

</ul>

</nav>

)

}

// NavItem.js

export default function NavItem({ href, isActive, children }) {

return (

<li>

<a

href={href}

className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}

>

{children}

</a>

</li>

)

}

// List.js

export default function List({ children }) {

return (

<ul className="divide-y divide-gray-100">

{children}

</ul>

)

}

//ListItem.js

export default function ListItem({ recipe }) {

return (

<article className="p-4 flex space-x-4">

<img src={recipe.image} alt="" className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100" width="144" height="144" />

<div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">

<h2 className="text-lg font-semibold text-black mb-0.5">

{recipe.title}

</h2>

<dl className="flex flex-wrap text-sm font-medium whitespace-pre">

<div>

<dt className="sr-only">Time</dt>

<dd>

<abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>

</dd>

</div>

<div>

<dt className="sr-only">Difficulty</dt>

<dd> · {recipe.difficulty}</dd>

</div>

<div>

<dt className="sr-only">Servings</dt>

<dd> · {recipe.servings} servings</dd>

</div>

<div className="flex-none w-full mt-0.5 font-normal">

<dt className="inline">By</dt>{' '}

<dd className="inline text-black">{recipe.author}</dd>

</div>

<div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1">

<dt className="text-amber-500">

<span className="sr-only">Rating</span>

<svg width="16" height="20" fill="currentColor">

<path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" />

</svg>

</dt>

<dd>{recipe.rating}</dd>

</div>

</dl>

</div>

</article>

)

}

```

上述食譜的效果如下：

可以看到我們無需寫一行 CSS，而是在 HTML 里面應(yīng)用各種輔助類，結(jié)合 React 的組件化設(shè)計，既可以輕松完成一個非?，F(xiàn)代化且好看的食譜組件。

除了上面的特性，TailwindCSS 在響應(yīng)式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優(yōu)秀的支持，除此之外還有基于 TailwindCSS 構(gòu)建的物料庫 Tailwind UI ，提供各種各樣成熟、好看、可用于生產(chǎn)的物料庫：


因為需要自定的 CSS 不多，而需要自定義的 CSS 可以定義為可復(fù)用的輔助類，所以在可維護(hù)性方面也是極好的。

### 不足

- 因為要引入一個額外的運(yùn)行時，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會變大，所以速度會有影響

- 過于底層，相當(dāng)于給了用于設(shè)計的最基礎(chǔ)的指標(biāo)，但是如果我們想要快速設(shè)計網(wǎng)站，那么可能還需要一致的、更加上層的組件庫

- 相當(dāng)于引入了一套框架，具有一定的學(xué)習(xí)成本和使用成本

### 優(yōu)化

- Tailwind 2.0 支持 [JIT](https://blog.tailwindcss.com/tailwindcss-2-1 "JIT")，可以大大提升編譯速度，可以考慮引入

- 基于 TailwindCSS，設(shè)計一套符合自身風(fēng)格的上層組件庫、物料庫，便于更加快速開發(fā)

- 提前探索、學(xué)習(xí)和總結(jié)一套教程與開發(fā)最佳實踐

- 探索 styled-components 等結(jié)合 TailwindCSS 的開發(fā)方式

## 參考鏈接

- [CSS 工程化發(fā)展歷程](https://bytedance.feishu.cn/docs/doccnTRF0OZtJMgKuo3y0hIDMbc# "CSS 工程化發(fā)展歷程")

/ 感謝支持/

以上便是本次分享的全部內(nèi)容，希望對你有所幫助^_^

喜歡的話別忘了 分享、點贊、收藏 三連哦~

歡迎關(guān)注公眾號 程序員巴士，來自字節(jié)、蝦皮、招銀的三端兄弟，分享編程經(jīng)驗、技術(shù)干貨與職業(yè)規(guī)劃，助你少走彎路進(jìn)大廠。