HTML基礎知識-day02

csdn_DaShuiNiu發表於2020-12-09
HTML

從這篇文章開始我會盡量的把每個新的知識點都程式碼中用註釋進行解釋，當然有一些特別難或者需要注意的地方我也會在文章中進行說明的。

首先是form 表單！！！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- form 表單 form 元素是塊級元素，其前後會產生折行 。表單是用來做什麼的？？？ 當然是用來提交資料的！ -->
  <!-- form 的action 屬性是表示跳轉到哪裡的，method 屬性是請求方式 -->
  <form action="/reg" method="GET">
    <!-- input 標籤是顧名思義，輸入標籤，它有很多型別，通過type 屬性來設定，例如文字text,按鈕Button等 ,value 屬性一般都是我們輸入的值，
    我們可以通過這個標籤的value 屬性拿到我們輸入的內容，也可以通過程式碼給value 賦值直接顯示在input中
    需要注意的是input 標籤不是塊級元素！！！
    -->
    <!-- 每個屬性幾乎都有id name class 這三個屬性，id是唯一的，class 和 name是可以重複的，
    name 屬性用於對提交到伺服器後的表單資料進行標識
    -->

    <!-- input 的type屬性為text 時，表示這個是文字輸入框 -->
    <input type="text" name="userName" id="" value="大水牛">
    <!-- input 的type屬性為password 時，表示這個是密碼輸入框，特點是輸入的內容不可見-->
    <input type="password" name="pwd" id="">
    <!-- input 的submit 型別按鈕的作用是用來表單的會把表單中的所有資料都提交出去 -->
    <input type="submit" value="submit註冊">
    <!-- input 的type屬性為button 時，表示這個是按鈕，需要繫結特殊的事件才可以觸發，這部分內容後面會講  -->
    <input type="button" value="button註冊">
    <!-- input 的type屬性為radio 時，表示這個是單選框，單選框的name屬性起到了分組的作用，單選框嘛，只能選擇一個
    ，所以相同name的單選框最後只提交那個被選中的單選框的值  -->
    <br>
    <!-- strong 內容字型加粗 -->
    <strong>選擇性別：</strong>
    <br>
    <input type="radio" name="gender" id="" value="男">男
    <input type="radio" name="gender" id="" value="女">女
    <!-- input 的type屬性為checkbox 時，表示這個是核取方塊 ,核取方塊的name屬性也起到了分組的作用,
    但是提交表單會把所有被選中的核取方塊在一起提交，例如like=吃&like=喝，後臺服務端會把這個資料轉換成陣列的 -->
    <br>
    <!-- em 內容字型傾斜 -->
    <em>選擇愛好：</em>
    <br>
    <input type="checkbox" name="like" id="" value="吃">吃
    <input type="checkbox" name="like" id="" value="喝">喝
    <input type="checkbox" name="like" id="" value="玩">玩
  </form>
</body>

</html>

當我們點選註冊後瀏覽器會跳轉網頁並且攜帶我們提交的引數 

我來解釋一下這個地址代表什麼,/reg 是我們在form 標籤中填寫的action 地址，/reg?後面的都是我們提交的GET資料，用&符號進行連線 每個資料基本都是 name = value 。 

這裡我來簡單的介紹一下div 盒模型，以後我們會經常和這個標籤打交道的，先見個面混個臉熟。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- div 盒模型標籤，div本身沒有什麼語義的，其實就是一個分組框或容器，可以放任何東西，很多前端網頁都是一個div 一個div 組合起來的
  我們可以通過css 樣式來設定div 讓這個盒模型容器變得不一樣 div 是塊級元素
  -->
  <div class="header">
    <div class="banner"></div>
    <div class="nav"></div>
    <div class="search"></div>
  </div>
</body>

</html>

 

接下來我們就開始進入css 的學習部分了，css 又叫做層疊樣式表，主要目的就是為了讓網頁更好看一些，能夠美化網頁，上程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- css 層疊樣式表 -->
  <!-- 可以通過style 來設定 也可以引入其他的css 樣式檔案 ，通過link 標籤來引入 -->
  <!-- <link rel="stylesheet" href="main.css"> -->
  <style>
    /* 這裡要介紹一個新的東西 “選擇器”，選擇器有很多種下面我們會一個一個學習，通過不同的選擇器，
    匹配不同的條件和元素來對匹配成功的元素設定樣式，其格式為 選擇器{ key:value; key:value; ......} key 代表樣式的屬性，
    value代表樣式的值，比如width:100px; 就是設定寬度為100px。{} 內是個樣式列表，可以設定多個樣式，每個樣式尾部使用;號結束。
    */

    /* 標籤選擇器 又叫 元素選擇器  匹配所有的h1標籤（你寫h2就匹配所有的h2標籤）*/
    h1 {
      /* 設定文字顏色樣式為紅色,也可以把red寫成#FF0000 十六進位制 或者rgb格式的 */
      color: red;
      /* 設定字型大小 60畫素 ，px 是畫素的意思，我們電腦和手機螢幕的解析度就是由一個一個畫素點組成的 */
      font-size: 60px;
    }

    /* 分組選擇器 言簡意賅，無需過多解釋，就是用逗號分隔多個 選擇器 並且同時設定相同的樣式表 */
    h2,
    h3,
    h4,
    h5 {
      color: red;
    }

    /* class選擇器 又叫類選擇器 ，可以看到匹配的是對應下面元素中class 屬性的值的元素 */
    .red {
      color: red;
    }

    .greed {
      color: green;
    }

    /* 可以看到我通過相同的類選擇器 設定了相同的樣式屬性為不同的值，那麼結果會是取最下面的，因為執行優先順序的原因會覆蓋
    只有同級的條件才會適用這個優先順序的選擇！！！
     */
    .test {
      color: blue;
    }

    .test {
      color: yellow;
    }

    .f24 {
      font-size: 24px;
    }

    /* 結合元素選擇器  我來說一下意思就能看懂，匹配div標籤中class屬性為orange的元素 ,可以是class屬性，也可以是id 屬性.
    class 前面是.符號，而且id前面是# ，比如一個div的id=“divTest” 那麼使用id匹配就需要寫成#divTest而不是.divTest。
    既然有class選擇器那麼就有id選擇器，方式和class選擇器一樣，就不多舉例了。
    */
    div.orange {
      color: orange;
    }
  </style>
</head>

<body>
  <!-- 在標籤內部屬性也可以設定style ，這樣就不需要選擇器來進行匹配了，當然如果被某個選擇器匹配到後，
  碰巧選擇器和標籤內部都設定了相同的樣式屬性，那麼標籤內部的會優先生效。 -->
  <h1 style="color: #0097ff">花花世界</h1>
  <h2>2</h2>
  <h3>3</h3>
  <h4>4</h4>
  <h5>5</h5>
  <!-- class 屬性是可以設定多個的，用空格分隔，這是設定多個樣式的技巧 -->
  <div class="red f24">div_red</div>
  <div class="greed">div_greed</div>
  <div class="test">div_test</div>
  <div class="orange">div_orange</div>
</body>

</html>

這裡要說明一下，子標籤會繼承其父標籤的樣式，如果父標籤設定了某些樣式而子標籤沒有設定這些樣式，那麼就會繼承父標籤的樣式，如果子標籤也設定了那麼就使用自己設定的部分，沒有設定的部分還是會繼承父標籤的，所謂父標籤就是包裹它的那個標籤。子標籤就是這個標籤內部的其他標籤。

 

 

 

繼續我們的選擇器之旅。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 屬性選擇器 匹配屬性為與[]內屬性相等的元素 ,這裡的匹配是絕對匹配的，被匹配的元素屬性值必須和css樣式中的屬性！值一模一樣！！！！
    例如下面的class="f24 red" 這個屬性的元素就不會被匹配到！！同時屬性選擇器可以有多個屬性[class = "red"][id="test"]{}這樣的格式！！！
     */
    [class="red"] {
      color: red;
    }

    .f24 {
      font-size: 24px;
    }

    /* 限定選擇器-這不是一個選擇器，而且增加限定條件 在屬性選擇器前增加條件，條件可以是標籤，class,id...... */
    h2[class="red"] {
      font-size: 14px;
    }

    /* 這也是屬性選擇器的一種特殊格式，^在正規表示式中代表匹配開頭 class ^= “r” 就是匹配class 為r開頭的元素 。
    */
    [class ^="r"] {
      background-color: black;
    }

    /* $在代表以什麼結束  class $="e" 就是匹配class 為e 結束的元素 */
    [class $="e"] {
      background-color: blue;
    }

    /* *在代表包含  class *="l" 就是匹配class 中有l的元素 */
    [class *="l"] {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1 class="red">h1</h1>
  <h2 class="red">h2</h2>
  <h1 class="f24 red blue">h11</h1>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 後代選擇器 可以是之前講的任意選擇器，後代選擇器的意思也很明顯，下面的意思就是說，匹配h1 標籤內為em 標籤的元素。
    這裡要注意一下，之所以叫後代選擇器，並非只匹配一層，孫子也算後代，以此類推。
     */
    h1 em {
      color: red;
    }

    /* 子元素選擇器 基本與後代選擇器相同，但是隻匹配一層。只找自己內部的子元素 */
    p>em {
      color: green;
    }

    /* 相鄰的兄弟選擇器  自行領悟！！！建議執行看效果。 */
    p+h2 {
      color: blue;

    }
  </style>
</head>

<body>
  <h1><em>你好</em></h1>
  <p><em>弟弟</em></p>
  <h2>兄弟</h2>
</body>

</html>

學到這裡我需要了解一下權重也就是優先順序的知識了。一張圖奉上。

!important 是一個屬性，只要選擇器內部的屬性被附加了這個屬性，那麼這個屬性就會是最高階的應用！！！ 而且權重不是常規的數字演算法，位數越高權重優先順序越大，位數決定了一切！兩個相同權重優先順序的選擇器取最後一個生效（就是編寫程式碼中的位置），如果兩個相同權重的選擇器想要使用前面的，我們可以把前面的選擇器匹配規則改變為相鄰、後臺、親子等選擇器，這樣2個相同的選擇器肯定權重是大於一個同等級的選擇器的，但是再次強調，不同位數級別的選擇器無效，就好比小說中的10個練氣的人打不過一個築基的人一樣。

相關文章