HTML元素

空元素

不是所有元素都擁有開始標簽、內容和結束標簽。一些元素只有一個標簽，通常用來在此元素所在位置插入/嵌入一些東西。這些元素被稱為空元素例如：元素 `` 是用來在頁面插入一張指定的圖片。

布爾屬性

有時會看到沒有值的屬性，這也是完全可以接受的。這些屬性被稱為布爾屬性。布爾屬性只能有一個值，這個值一般與屬性名稱相同。例如，考慮 disabled屬性，你可以將其分配給表單輸入元素。用它來禁用表單輸入元素，這樣用戶就不能輸入了。被禁用的元素通常有一個灰色的外觀。

<!-- 使用 disabled 屬性來防止終端用戶輸入文本到輸入框中 -->

<input type="text" disabled />

<!-- 下面這個輸入框不包含 disabled 屬性，所以用戶可以向其中輸入 -->

<input type="text" />

實體引用：在 HTML 中包含特殊字符

原義字符	等價字符引用
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

defer的使用

<script>元素也應當放在文檔的頭部，并包含 src 屬性來指向需要加載的 JavaScript 文件路徑，同時最好加上 defer 以告訴瀏覽器在解析完成 HTML 后再加載 JavaScript。這樣可以確保在加載腳本之前瀏覽器已經解析了所有的 HTML 內容。這樣你就不會因為 JavaScript 試圖訪問頁面上不存在的 HTML 元素而產生錯誤。實際上有很多方法來處理在你的頁面上加載 JavaScript，但對于現代瀏覽器來說，這是最可靠的方法。

sanbox 屬性

一個允許包含在其里的代碼以適當的方式執行或者用于測試，但不能對其他代碼庫（意外或惡意）造成任何損害的容器稱為沙盒。

配置 CSP 指令

CSP 代表 內容安全策略，它提供一組 HTTP 標頭（由 web 服務器發送時與元數據一起發送的元數據），旨在提高 HTML 文檔的安全性。

Web矢量圖

• 位圖使用像素網格來定義 — 一個位圖文件精確得包含了每個像素的位置和它的色彩信息。流行的位圖格式包括 Bitmap (.bmp), PNG (.png), JPEG (.jpg), and GIF (.gif.)

• 矢量圖使用算法來定義 — 一個矢量圖文件包含了圖形和路徑的定義，電腦可以根據這些定義計算出當它們在屏幕上渲染時應該呈現的樣子。 SVG 格式可以讓我們創造用于 Web 的精彩的矢量圖形。

SVG 是用于描述矢量圖像的XML語言。它基本上是像 HTML 一樣的標記，只是你有許多不同的元素來定義要顯示在圖像中的形狀，以及要應用于這些形狀的效果。SVG 用于標記圖形，而不是內容。

你還可以在文本編輯器中打開 SVG 文件，復制 SVG 代碼，并將其粘貼到 HTML 文檔中 - 這有時稱為將SVG 內聯或內聯 SVG。

<svg width="300" height="200">

    <rect width="100%" height="100%" fill="green" />

</svg>

響應式圖片

使用兩個新的屬性——srcset 和 sizes——來提供更多額外的資源圖像和提示，幫助瀏覽器選擇合適的一個資源

<img

  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"

  sizes="(max-width: 600px) 480px,

         800px"

  src="elva-fairy-800w.jpg"

  alt="Elva dressed as a fairy" />

圖片的固有寬度（以像素為單位）（480w）

這里，如果支持瀏覽器以 480px 的視口來加載頁面，那么 (max-width: 600px) 的媒體條件為真，因此 480px 的槽會被選擇，繼而將加載 elva-fairy-480w.jpg，因為它的固有寬度（480w）最接近于槽寬度。800px 的照片大小為 128KB 而 480px 版本僅有 63KB 大小——節省了 65KB?，F在想象一下，如果這是一個有很多圖片的頁面，使用這種技術會節省移動端用戶的大量帶寬。

分辨率切換，相同尺寸，不同分辨率

<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"

     src="elva-fairy-640w.jpg"

     alt="Elva dressed as a fairy" />

在這種情況下，就不用到 sizes 屬性——瀏覽器計算出正在顯示的顯示器的分辨率，然后顯示 srcset 引用的最適合的圖片。因此，如果訪問頁面的設備具有標準/低分辨率顯示，用一個設備像素表示一個 CSS 像素，那么會加載 elva-fairy-320w.jpg（1x 是默認值，所以你不需要寫出來）。如果設備有高分辨率，用兩個或更多的設備像素表示一個 CSS 像素，會加載 elva-fairy-640w.jpg。640px 的圖像大小為 93KB，320px 的圖像的大小僅僅有 39KB。

為什么我們不用 CSS 或 JavaScript 來實現？

當瀏覽器開始加載一個頁面，它會在主解析器開始加載和解析頁面的 CSS 和 JavaScript 之前先下載（預加載）任意的圖片。這種有用的機制總體上會減少頁面加載時間，但是它對響應式圖片沒有幫助，所以需要類似 srcset 的實現方法。因為你不能先加載好 `` 元素后，再用 JavaScript 檢測可視窗口的寬度，如果覺得大小不合適，再動態地加載小的圖片替換已經加載好的圖片，這樣的話，原始的圖像已經被加載了，然后你又加載了小的圖像，這反而更不“響應”了。

應用樣式

HTML 有一種方法可以定義整列數據的樣式信息：就是 和 元素。

<table>

  <colgroup>

    <col>

    <col style="background-color: yellow">

  </colgroup>

  <tr>

    <th>Data 1</th>

    <th>Data 2</th>

  </tr>

  <tr>

    <td>Calcutta</td>

    <td>Orange</td>

  </tr>

  <tr>

    <td>Robots</td>

    <td>Jazz</td>

  </tr>

</table>

我們使用了兩個 <col> 來定義“列的樣式”，每一個 <col> 都會指定每列的樣式，對于第一列，我們沒有采取任何樣式，但是我們仍然需要添加一個空的 <col> 元素，如果不這樣做，那么我們的樣式就會應用到第一列上，這和我們預想的不一樣。

CSS構建

calc() 函數

<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>

.outer {

  border: 5px solid black;

}

.box {

padding: 10px;

width: calc(90% - 30px);

background-color: rebeccapurple;

color: white;

}

一個函數由函數名和一些括號組成，其中放置了該函數的允許值。在上面的 calc() 示例中，我要求此框的寬度為包含塊寬度的 90%，減去 30 像素。這不是我可以提前計算的東西，只是在 CSS 中輸入值，因為我不知道 90% 會是什么。與所有值一樣，MDN 上的相關頁面將有使用示例，這樣您就可以看到函數是如何工作的。

transform 函數

.box {

  margin: 30px;

  width: 100px;

  height: 100px;

  background-color: rebeccapurple;

  transform: rotate(0.8turn)

}

CSS transform 屬性允許你旋轉，縮放，傾斜或平移給定元素。這是通過修改 CSS 視覺格式化模型的坐標空間來實現的。

只能轉換由盒模型定位的元素。根據經驗，如果元素具有display: block，則由盒模型定位元素。

CSS工作流程

1、瀏覽器載入 HTML 文件。

2、將 HTML 文件轉化成一個 DOM。

3、瀏覽器會拉取該 HTML 相關的大部分資源。

4、瀏覽器拉取到 CSS 之后會進行解析。

5、瀏覽器基于它找到的不同的選擇器，將不同的規則（基于選擇器的規則，如元素選擇器、類選擇器、id 選擇器等）應用在對應的 DOM 的節點中，并添加節點依賴的樣式這個中間步驟稱為渲染樹）。

6、上述的規則應用于渲染樹之后，渲染樹會依照應該出現的結構進行布局。

7、網頁展示在屏幕上（這一步被稱為著色）。

字符串匹配選擇器

選擇器	示例	描述
[attr^=value]	li[class^="box-"]	匹配帶有一個名為attr的屬性的元素，其值開頭為value子字符串。
[attr$=value]	li[class$="-box"]	匹配帶有一個名為attr的屬性的元素，其值結尾為value子字符串
[attr*=value]	li[class*="box"]	匹配帶有一個名為attr的屬性的元素，其值的字符串中的任何地方，至少出現了一次value子字符串。

大小寫敏感

如果你想在大小寫不敏感的情況下，匹配屬性值的話，你可以在閉合括號之前，使用i值。這個標記告訴瀏覽器，要以大小寫不敏感的方式匹配 ASCII 字符。沒有了這個標記的話，值會按照文檔語言對大小寫的處理方式，進行匹配——HTML 中是大小寫敏感的。

li[class^="a"] {

    background-color: yellow;

}

li[class^="a" i] {

    color: red;

}

偽類，偽元素

偽類是選擇器的一種，它用于選擇處于特定狀態的元素，比如當它們是這一類型的第一個元素時，或者是當鼠標指針懸浮在元素上面的時候。它們表現得會像是你向你的文檔的某個部分應用了一個類一樣，幫你在你的標記文本中減少多余的類，讓你的代碼更靈活、更易于維護。

偽類就是開頭為冒號的關鍵字:。

偽元素以類似方式表現，不過表現得是像你往標記文本中加入全新的 HTML 元素一樣，而不是向現有的元素上應用類。偽元素開頭為雙冒號::。

例如，如果你想選中一段的第一行，你可以把它用一個<span>元素包起來，然后使用元素選擇器；不過，如果包起來的單詞/字符數目長于或者短于父元素的寬度，這樣做會失敗。由于我們一般不會知道一行能放下多少單詞/字符——因為屏幕寬度或者字體大小改變的時候這也會變——通過改變 HTML 的方式來可預測地這么做是不可能的。

::first-line偽元素選擇器會值得信賴地做到這件事——即使單詞/字符的數目改變，它也只會選中第一行。

::after和::before

這一組特別的偽元素，它們和content屬性一同使用，使用 CSS 將內容插入到你的文檔中中。

::before和::after偽元素與content屬性的共同使用，在 CSS 中被叫做“生成內容”，而且你會見到這種技術被用于完成各種任務。

關系選擇器

后代選擇器

后代選擇器——典型用單個空格（" "）字符——組合兩個選擇器，比如，第二個選擇器匹配的元素被選擇，如果他們有一個祖先（父親，父親的父親，父親的父親的父親，等等）元素匹配第一個選擇器。選擇器利用后代組合符被稱作后代選擇器。

.box p {

    color: red;

}

子代關系選擇器

子代關系選擇器是個大于號（>），只會在選擇器選中直接子元素的時候匹配。繼承關系上更遠的后代則不會匹配。例如，只選中作為<article>的直接子元素的<p>元素：

article > p

鄰接兄弟

鄰接兄弟選擇器（+）用來選中恰好處于另一個在繼承關系上同級的元素旁邊的物件。例如，選中所有緊隨<p>元素之后的<img>元素：

p + img

通用兄弟

如果你想選中一個元素的兄弟元素，即使它們不直接相鄰，你還是可以使用通用兄弟關系選擇器（~）。要選中所有的<p>元素后任何地方的<img>元素，我們會這樣做：

p ~ img

控制繼承

inherit

設置該屬性會使子元素屬性和父元素相同。實際上，就是“開啟繼承”。

initial

將應用于選定元素的屬性值設置為該屬性的初始值。

revert (en-US)

將應用于選定元素的屬性值重置為瀏覽器的默認樣式，而不是應用于該屬性的默認值。在許多情況下，此值的作用類似于 unset。

revert-layer (en-US)

將應用于選定元素的屬性值重置為在上一個層疊層中建立的值。

unset

將屬性重置為自然值，也就是如果屬性是自然繼承那么就是 inherit，否則和 initial 一樣

all

CSS 的簡寫屬性 all 可以用于同時將這些繼承值中的一個應用于（幾乎）所有屬性。它的值可以是其中任意一個（inherit、initial、unset 或 revert）。這是一種撤銷對樣式所做更改的簡便方法，以便回到之前已知的起點。

！important

一個特殊的 CSS 可以用來覆蓋所有優先級計算。

CSS盒模型

替代（IE）盒模型

默認瀏覽器會使用標準模型。如果需要使用替代模型，您可以通過為其設置 box-sizing: border-box 來實現。這樣就可以告訴瀏覽器使用 border-box 來定義區域，從而設定您想要的大小。

.box {

  box-sizing: border-box;

}

外邊距折疊

理解外邊距的一個關鍵是外邊距折疊的概念。如果你有兩個外邊距相接的元素，這些外邊距將合并為一個外邊距，即最大的單個外邊距的大小。

內邊距

內邊距位于邊框和內容區域之間。與外邊距不同，您不能有負數量的內邊距，所以值必須是 0 或正的值。應用于元素的任何背景都將顯示在內邊距后面，內邊距通常用于將內容推離邊框。

display：inline-block

display 有一個特殊的值，它在內聯和塊之間提供了一個中間狀態。這對于以下情況非常有用：您不希望一個項切換到新行，但希望它可以設定寬度和高度，并避免上面看到的重疊。

overflow屬性

overflow屬性是你控制一個元素溢出的方式，它告訴瀏覽器你想怎樣處理溢出。overflow的默認值為visible，這就是我們的內容溢出的時候，我們在默認情況下看到它們的原因。

如果你想在內容溢出的時候把它裁剪掉，你可以在你的盒子上設置overflow: hidden。這就會像它表面上所顯示的那樣作用——隱藏掉溢出。

如果你用了overflow: scroll，那么你的瀏覽器總會顯示滾動條，即使沒有足夠多引起溢出的內容。你可能會需要這樣的樣式，它避免了滾動條在內容變化的時候出現和消失。

你可以用overflow屬性指定 x 軸和 y 軸方向的滾動，同時使用兩個值進行傳遞。如果指定了兩個關鍵字，第一個對overflow-x生效而第二個對overflow-y生效。否則，overflow-x和overflow-y將會被設置成同樣的值。例如，overflow: scroll hidden會把overflow-x設置成scroll，而overflow-y則為hidden。

如果你只是想讓滾動條在有比盒子所能裝下更多的內容的時候才顯示，那么使用overflow: auto。此時由瀏覽器決定是否顯示滾動條。桌面瀏覽器一般僅僅會在有足以引起溢出的內容的時候這么做。

值和單位

單位	相對于
em	在 font-size 中使用是相對于父元素的字體大小，在其他屬性中使用是相對于自身的字體大小，如 width
ex	字符“x”的高度
ch	數字“0”的寬度
rem	根元素的字體大小
lh	元素的 line-height
vw	視窗寬度的 1%
vh	視窗高度的 1%
vmin	視窗較小尺寸的 1%
vmax	視圖大尺寸的 1%

顏色

在顏色上設置 alpha 通道與使用我們前面看到的opacity屬性有一個關鍵區別。當你使用不透明度時，你讓元素和它里面的所有東西都不透明，而使用 RGBA 顏色只讓你指定的顏色不透明。

調整圖像大小

使用 object-fit 時，替換元素可以以多種方式被調整到合乎盒子的大小。

.cover {

  object-fit: cover;

}

.contain {

  object-fit: contain;

}

form元素

常規設置

font-family: inherit在一些瀏覽器中，表單元素默認不會繼承字體樣式，因此如果你想要確保你的表單填入區域使用 body 中或者一個父元素中定義的字體，你需要向你的 CSS 中加入這條規則。

button,

input,

select,

textarea {

  font-family: inherit;

  font-size: 100%;

  box-sizing: border-box;

  padding: 0; margin: 0;

}

textarea {

  overflow: auto;

}

flex模型

• 主軸（main axis）是沿著 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end。

• 交叉軸（cross axis）是垂直于 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。

• 設置了 display: flex 的父元素的被稱之為 ****flex 容器（flex container）

• 在 flex 容器中表現為彈性的盒子的元素被稱之為 flex 項（flex item）

// 橫向，允許換行

flex-direction: row;

flex-wrap: wrap

flex排序

button:first-child {

  order: 1;

}

• 所有 flex 項默認的 order 值是 0。
• order 值大的 flex 項比 order 值小的在顯示順序中更靠后。
• 相同 order 值的 flex 項按源順序顯示。所以假如你有四個元素，其 order 值分別是 2，1，1 和 0，那么它們的顯示順序就分別是第四，第二，第三，和第一。
• 第三個元素顯示在第二個后面是因為它們的 order 值一樣，且第三個元素在源順序中排在第二個后面。
• 也可以給 order 設置負值使它們比值為 0 的元素排得更前面。

flex的動態尺寸

article {

  flex: 1 200px;

}

1是一個無單位的比例值，表示每個 flex 項沿主軸的可用空間大小。本例中，我們設置此元素的 flex 值為 1，這表示每個元素占用空間都是相等的，占用的空間是在設置 padding 和 margin 之后剩余的空間。因為它是一個比例，這意味著將每個 flex 項的設置為 400000 的效果和 1 的時候是完全一樣的。

200px表示“每個 flex 項將首先給出 200px 的可用空間，然后，剩余的可用空間將根據分配的比例共享”。

grid模型

.container {

  display: grid;

  grid-template-columns: 200px 200px 200px;

}

.container {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

}

也可以用 fr 這個單位來靈活地定義網格的行與列的大小。這個單位代表網格容器中可用空間的一份.

fr單位分配的是可用空間而非所有空間，所以如果某一格包含的內容變多了，那么整個可用空間就會減少，可用空間是不包括那些已經確定被占用的空間的。

float浮動

可以在浮動元素上應用 margin，將文字推開，但不能在文字上應用 margin 將浮動元素推走。這是因為浮動的元素脫離了正常文檔流，緊隨其后的元素排布在它的“后方”。

.cleared {

  clear: left;

}

一個浮動元素會被移出正常文檔流，且其他元素會顯示在它的下方。如果我們不想讓剩余元素也受到浮動元素的影響，我們需要 停止 它；這是通過添加 clear屬性實現的。

clear 屬性接受下列值：

• left：停止任何活動的左浮動
• right：停止任何活動的右浮動
• both：停止任何活動的左右浮動

總結

以上是生活随笔為你收集整理的HTML5和CSS3基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。