前端-html和css基礎知識

程式設計碼農發表於2021-10-19
前端HTMLCSS

HTML（網頁）

Web領域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網，俗稱全球資訊網（www）。

W3C

W3C（World Wide Web Consortium）叫全球資訊網聯盟，是國際最著名的標準化組織，制定了web標準。

WEB標準

一個網頁包含了html元素 Css JavaScript，Html元素決定了網頁結構，Css進行了修飾美化，JavaScript控制了互動行為和動態效果。

web標準包含了下面三個方面：

  • 結構標準（HTML）：用於對網頁元素進行整理和分類。
  • 表現標準（CSS）：用於設定網頁元素的版式、顏色、大小等外觀樣式。
  • 行為標準（JavaScript）：用於定義網頁的互動和行為。

HTML定義

Html不是一種程式語言，而是描述性的標記語言，主要作用是定義內容的結構。

2014年10月全球資訊網聯盟（W3C）完成了HTML5標準制定，是目前最新的HTM版本。

HTML5的出世，標誌著web進入一個富客戶端（具有很強的互動性和體驗的客戶端程式）時代，像APP網頁，小程式都是HTML5的應用場景。

Html5新特性：

  • 用於繪畫的 canvas 元素。
  • 用於媒介回放的 video 和 audio 元素。
  • 對本地離線儲存的更好的支援。
  • 新的特殊內容元素，比如 article、footer、header、nav、section。
  • 新的表單控制元件，比如 calendar、date、time、email、url、search。

頁面基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <meta name="Author" content="">
    <meta name="Keywords" content="關鍵詞" />
    <meta name="Description" content="頁面描述" />
    <title>頁面標題</title>
</head>
<body>

</body>
</html>

關於viewport

viewport使用者網頁的可視區域，一個針對移動網頁優化的頁面 viewport meta 標籤如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的畫素）。
  • height：和 width 相對應，指定高度。
  • initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。
  • maximum-scale：允許使用者縮放到的最大比例。
  • minimum-scale：允許使用者縮放到的最小比例。
  • user-scalable：使用者是否可以手動縮放。

常見元素

head區域元素：meta title style link script base。

body區域元素：

  • div、section、article、aside、header、footer
  • p
  • span、em、strong
  • table、thead、tbody、tr、td
  • ul、ol、dl、dt、dd
  • a
  • form、input、select、textarea、button

元素分類

塊級元素：每個元素都是獨佔一行

  • address – 地址
  • blockquote – 塊引用
  • center – 舉中對齊塊
  • dir – 目錄列表
  • div – 常用塊級容易，也是css layout的主要標籤
  • dl – 定義列表
  • fieldset – form控制組
  • form – 互動表單
  • h1-h6 – 標題
  • hr – 水平分隔線
  • isindex – input prompt
  • menu – 選單列表
  • noframes – frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容）
  • noscript – ）可選指令碼內容（對於不支援script的瀏覽器顯示此內容）
  • ol – 排序表單
  • p – 段落
  • pre – 格式化文字
  • table – 表格
  • ul – 非排序列表

行內元素：元素在同一行水平排列

  • a – 錨點
  • abbr – 縮寫
  • acronym – 首字
  • b – 粗體
  • big – 大字型
  • br – 換行
  • em – 強調
  • font – 字型設定(不推薦)
  • i – 斜體
  • img – 圖片
  • input – 輸入框
  • label – 表格標籤
  • s – 中劃線(不推薦)
  • select – 專案選擇
  • small – 小字型文字
  • span – 常用內聯容器，定義文字內區塊
  • strike – 中劃線
  • strong – 粗體強調
  • sub – 下標
  • sup – 上標
  • textarea – 多行文字輸入框
  • tt – 電傳文字
  • u – 下劃線
  • var – 定義變數

inline-block：元素可以排列在同一行顯示，並且可以設定一些塊元素屬性

通過Css：display:inline-block 改變元素。

元素預設樣式

很多元素都自帶了預設樣式，不同瀏覽器下預設樣式表現不一致，為了統一或者滿足一些需求我們需求將所有預設樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的預設樣式進行了統一，

https://github.com/necolas/no...

CSS（層疊樣式表）

Css的單位

html中的單位是畫素px

絕對單位

  • in：英寸，1in = 2.54cm = 96px
  • pc：皮卡，1皮卡 = 1/16英寸
  • pt：點，1點 = 1/72英寸
  • px：畫素，1點 = 1/96英寸

相對單位

  • em：font-size中相對於父元素的字型大小，在元素屬性中使用是相對於自身字型大小
  • rem：根元素的字型大小，在元素屬性中使用是相對於根元素字型大小
  • 1h：元素的line-height
  • vw：視窗寬度的1%
  • vh：視窗高度的1%
  • vmin：視窗較小尺寸的1%
  • vmax：檢視大尺寸的1%

字型屬性

屬性：字型、行高、顏色、大小、背景、邊框、滾動、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;         /*字型大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;     /*字型型別：顯示PingFang SC，沒有就顯示預設*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;    /*粗體或寫（400｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號都是偶數，這樣保證它們的差一定偶數除2得到整數，如下圖所示：

line-height

文字垂直居中

對於單行文字可以設定行高 = 盒子高度。

對於多行元素的垂直對齊，我們可以使用vertical-align: middle屬性，不過vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全域性值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文字屬性

  • letter-spacing: 0.5em ; 單個字母之間的間距。
  • word-spacing: 1em; 單詞之間的間距。
  • text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
  • color:red; 字型顏色。
  • text-align: center; 文字對齊方式，屬性值可以是：left、right、center、justify。
  • text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
  • text-indent:10px; 文字首行縮排。
  • text-shadow:2px 2px #ff0000; 文字陰影效果。
  • white-space: normal; 設定元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內容溢位處理

  • visible：預設值，多餘的內容會全部顯示出來。
  • hidden：超過元素的內容隱藏。
  • auto：內容超出顯示滾動條。
  • scroll：Windows總是顯示滾動條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

  • background-color:#fff; 設定背景顏色。
  • background-image:url(img.png); 設定影像為背景。
  • background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
  • background-position:center top; 設定背景圖片在容器的位置，top，bottom，left，right，center。
  • background-attachment:scroll; 設定背景圖片隨滾動條移動，scroll（跟隨滾動），fixed（固定）。
  • background-origin:border-box; css3，border-box（背景相對於邊框框定位），padding-box（背景相對於填充框定位），content-box（背景相對於內容框定位）。
  • background-clip:border-box; css3，背景裁切。

  • background-size:cover; css3，調整尺寸，

    • contain（在不裁剪或拉伸影像的情況下，在其容器內儘可能大地縮放影像），
    • cover（儘可能大地縮放影像以填充容器，必要時拉伸影像。），
    • auto（在相應的方向上縮放背景影像，以保持其固有比例。）。

優先順序

理解優先順序很重要，有助於我們排查一些問題。瀏覽器將優先順序分為兩部分：HTML的行內樣式和選擇器的樣式。

行內樣式

行內樣式是直接作用在元素，它的優先順序高於選擇器樣式，使用！important可以提高樣式表的優先順序。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優先順序規則如下：

  • 如果選擇器的ID數量最多的勝出。
  • 如果ID數量一致，那麼擁有最多類的選擇器勝出。
  • 如果以上兩次比較都一致，那麼擁有最多標籤名的選擇器勝出。

優先順序

我們通過下圖這種標記方式，就可以判斷出選擇器的優先順序。

優先順序

兩條經驗法則

  1. 儘量不要使用ID選擇器，因為它會大幅提升優先順序。當需要覆蓋這個選擇器時，通常找不到另一個有意義的ID，於是就需要複製原來的選擇器加上另一個類來讓它區別於想要覆蓋的選擇器。
  2. 不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的宣告，就需要再加上一個！important，而且依然要處理優先順序的問題。

基礎選擇器

  • 型別或標籤選擇器，匹配目標元素的標籤名，如 ：p，input[type=text]，優先順序（0，0，1）。
  • 類選擇器，匹配class屬性中有指定類名的元素，如：.box，優先順序（0，1，0）。
  • ID選擇器，匹配擁有指定ID屬性的元素，如：#id， 優先順序（1，0，0）。
  • 通用選擇器（*），匹配所有元素 ，優先順序（0，0，0）。

組合選擇器

由多個基礎選擇器組合成的複雜選擇器。

  • 後代組合器（單個空格（ ）表示），比如 .nav li，表示li是一個擁有nav類的元素的後代。
  • 子組合器（>），匹配的元素是直接後代，.parent > .child。
  • 相鄰兄弟組合器（+），匹配的元素緊跟在後面其它元素後面，div + p。
  • 通用兄弟組合器（~），匹配所有跟隨在指定元素之後的兄弟元素，它不會選中目標元素之前的兄弟元素，li.active ~ li。

複合選擇器

多個基礎選擇器連起來（中間沒有空格）組成一個複合選擇器（如：ul.nav）。複合選擇器選中的元素將匹配其全部基礎選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用於選中某種特定狀態的元素，優先順序（0，1，0）。

  • :first-child——匹配的元素是其父元素的第一個子元素。
  • :last-child——匹配的元素是其父元素的最後一個子元素。
  • :only-child——匹配的元素是其父元素的唯一一個子元素（沒有兄弟元素）。
  • :nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b裡面的a和b是整數，該公式指定要選中哪個元素。要了解一個公式的工作原理，請從0開始代入n的所有整數值。公式的計算結果指定了目標元素的位置。下表給出了一些例子。

:nth-child(an+b)

  • :nth-last-child(an+b)——類似於：nth-child()，但不是從第一個元素往後數，而是從最後一個元素往前數。括號內的公式與：nth-child()裡的公式的規則相同。
  • :first-of-type——類似於：first-child，但不是根據在全部子元素中的位置查詢元素，而是根據擁有相同標籤名的子元素中的數字順序查詢第一個元素。
  • :last-of-type——匹配每種型別的最後一個子元素。
  • :only-of-type——該選擇器匹配的元素是滿足該型別的唯一一個子元素。
  • :nth-of-type(an+b)——根據目標元素在特定型別下的數字順序以及特定公式選擇元素，類似於：nth-child。
  • :nth-last-of-type(an+b)——根據元素型別以及特定公式選擇元素，從其中最後一個元素往前算，類似於：nth-last-child。
  • :not(<selector>)——匹配的元素不匹配括號內的選擇器。括號內的選擇器必須是基礎選擇器，它只能指定元素本身，無法用於排除祖先元素，同時不允許包含另一個排除選擇器。
  • :focus——匹配通過滑鼠點選、觸控螢幕或者按Tab鍵導航而獲得焦點的元素。
  • :hover——匹配滑鼠指標正懸停在其上方的元素。
  • :root——匹配文件根元素。對HTML來說，這是html元素，但是CSS還可以應用到XML或者類似於XML的文件上，比如SVG。在這些情況下，該選擇器的選擇範圍更廣。還有一些表單域相關的偽類選擇器。
  • :disabled——匹配已禁用的元素，包括input、select以及button元素。
  • :enabled——匹配已啟用的元素，即那些能夠被啟用或者接受焦點的元素。
  • :checked——匹配已經針對選定的核取方塊、單選按鈕或選擇框選項。
  • :invalid——根據輸入型別中的定義，匹配有非法輸入值的元素。例如，當<inputtype="email">的值不是一個合法的郵箱地址時，該元素會被匹配。
更多參考：https://developer.mozilla.org...

偽元素選擇器

偽元素選擇器可以向HTML標記中未定義的地方插入內容，優先順序（0，0，1）。

  • ::before——建立一個偽元素，使其成為匹配元素的第一個子元素。該元素預設是行內元素，可用於插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::before。
  • ::after——建立一個偽元素，使其成為匹配元素的最後一個子元素。該元素預設是行內元素，可用於插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現，如：.nav::after。
  • ::first-letter——用於指定匹配元素的第一個文字字元的樣式，如：h1::first-letter。
  • ::first-line——用於指定匹配元素的第一行文字的樣式。
  • ::selection——用於指定使用者使用滑鼠高亮選擇的任意文字的樣式。通常用於改變選中文字的background-color。只有少數屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用於根據HTML屬性進行匹配元素，優先順序（0，1，0）。

  • [attr]——匹配的元素擁有指定屬性attr，無論屬性值是什麼，如：input[disabled]。
  • [attr="value"]——匹配的元素擁有指定屬性attr，且屬性值等於指定的字串值，如：input[type="radio"]。
  • [attr^="value"] ——“開頭”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值的開頭是指定的字串值，例如：a[href^="https"]。
  • [attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值包含指定的字串值，如：[class＊="sprite-"]。
  • [attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素擁有指定屬性attr，且屬性值是一個空格分隔的值列表，列表中的某個值等於指定的字串值，如：a[rel="author"]。
  • [attr|="value"]——匹配的元素擁有指定屬性attr，且屬性值要麼等於指定的字串值，要麼以該字串開頭且緊跟著一個連字元（-）。

小結

本文要點回顧，歡迎留言交流。

  • Web中的一些基本概念介紹。
  • Html頁面結構，元素分類。
  • Css優先順序。
  • Css選擇器，（基礎選擇器，組合選擇器，複合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

相關文章