HTML

李中平發表於2023-02-08
HTML

  • html 塊標籤：

    • < div > 標籤 塊元素，表示一塊內容，沒有具體的語義
    • 標籤 行內元素，表示一行中的一小段內容，沒有具體的意義

  • 含樣式和語義的標籤：

    • 標籤 行內元素，表示語氣中強調詞，使用後字型會傾斜
    • 標籤 行內元素，表示專業詞彙
    • 標籤 行內元素，表示文件中的關鍵字或者產品名
    • 標籤 行內元素，表示非常重要的內容

  • 語義化的標籤

  • 語義化的標籤，就是在佈局的時候多使用有語義的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄，比如：h1 標籤是表示標題，p 標籤是表示段落，ul、li 標籤是表示列表，a 標籤表示連結，dl、dt、dd 表示定義列表等，語義化的標籤不多

  • html 影像標籤：

    • HTML標籤，在網頁上插入一張圖片，它是獨立使用的標籤，他的常用屬性有：
    • src 屬性 定義圖片的引用地址
    • alt 屬性 定義圖片載入失敗時顯示的文字，搜尋引擎會使用這個文字收錄圖片，盲人讀屏軟體會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。
    • 用法：< img src="圖片路徑 + 圖片名及字尾" alt="產品圖片" />

  • html 連結標籤：

  • 標籤可以再網頁上定義一個連結地址，常用屬性有：

  • href 屬性-->定義跳轉的連結

  • title 屬性-->定義滑鼠懸停時彈出的提示文字框

  • target 屬性-->定義連結視窗開啟的位置

    • target="_self"預設值，新頁面替換原來的頁面，在原來位置開啟
    • target="_blank"新頁面會在新開的一個瀏覽器視窗開啟
    • html <a href="#"></a> <!-- # 表示連結到頁面頂部 --> <a href="http://www.baidu.com" title="跳轉的百度網站">百度官網</a> <a href="./demo01.html" target="_blank">測試頁面</a>

  • 列表標籤

  • 有序列表

    • 快速生成多個有序列表
    • ol>li*3 生成 3 個有序列表

  • 無序列表

    • 快速生成多個無序列表
    • ul>li*3 生成 3 個無序列表

  • 定義列表

    • 快速生成多個定義列表
    • dl>(dt+dd)* 個數 生成指定個數的定義列表

  • html 表格

    • < table >標籤：宣告一個表格，它的常用屬性如下：
    • width 屬性 定義表格的寬
    • height 屬性 定義表格的高
    • border 屬性 定義表格的邊框，設定值是數值
      • border-radius 為元素新增圓角邊框
    • cellpadding 屬性 定義單元格內容與邊框的距離，設定值是數值
    • cellspacing 屬性 定義單元格與單元格之間的距離，設定值是數值
    • align 屬性 設定整體表格相對於瀏覽器視窗的水平對齊方式，設定值有：left | center | right
    • < tr >標籤：定義表格中的一行
    • < td >和< th >標籤：定義一行中的一個單元格，td 代表普通單元格，th 代表表頭單元格，他們的常用屬性如下
    • align 設定單元格中內容的水平對齊方式，設定值有：left | center | right
    • valign 設定單元格中內容的垂直對齊方式 top | middle |bottom
    • colspan 設定單元格水平合併，設定值是數值
    • rowspan 設定單元格垂直合併，設定值是數值

  • html 表單

    • 表單用於蒐集不同型別的使用者輸入，表單由不同的型別標籤組成，相關標籤及屬性用法如下：

1. < form >標籤 定義整體的表單區域

* action 屬性 定義表單資料提交地址
* method 屬性 定義表單提交的方式，一般有"get"和"post"方式

2. < label >標籤 為表單元素定義文字標註

* for 屬性 點選文字標註也可啟用如填寫表單框內容，需配合 input 標籤中的 id 屬性一起使用

* 用法

html
<label fro="user">使用者名稱: </label>
<input type="text" name="username" value="username" id="user" />

3. < input >標籤 定義通用的表單元素

* type 屬性
* type="text" 定義單行文字輸入框
* type="password" 定義密碼輸入框
* type="radio" 定義單選框
* type="checkbox" 定義核取方塊
* type="file" 定義上傳檔案
* type="submit" 定義提交按鈕
* type="reset" 定義重置按鈕
* type="image" 定義圖片作為提交按鈕，用 src 屬性定義圖片地址
* type="hidden" 定義一個隱藏的表單域，用來儲存值
* value 屬性 定義表單元素的值
* name 屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名

4. < textarea >標籤 定義多行文字輸入框

5. < sleect >標籤 定義下拉表單元素

* < option >標籤 定義下拉表單元素中的選項

  • css 樣式

    • css 頁面引用方法：

1. 外聯式：透過 link 標籤，連結到外部樣式表到頁面中

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css樣式 </title>
<link rel="stylesheet" type="text/css" href="[css的檔案路徑]" />
</head>
</html>

2. 嵌入式：透過 style 標籤，在網頁上建立嵌入的樣式表

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入式樣式</title>
<style type="text/css">
h1{font-size: 22px;background-color: red;}
div{font-size: 18px;color:orange;}
</style>
</head>
<body>
<h1>頁面標題</h1>
<div>這是一個div標籤</div>
</body>
</html>

3. 行內樣式的方式

html
<a href="http://www.itcast.cn" style="font-size:18px;color=red">傳智播客</a>

  • css 常用的應用文字的 css 樣式

    • color 設定文字的顏色，如：color：red；
    • font-size 設定文字的大小，如：font-size：12px；
    • font-family 設定文字的字型，如：font-family：‘宋體’；
    • font-style 設定字型是否傾斜，如：font-style："normal"; 設定不傾斜, font-style:"italic"；設定文字傾斜
    • font-weight 設定文字是否加粗， 如：font-weight：bold；設定加粗， font-weight：normal；設定不加粗
    • line-height 設定文字的行高，設定行高相當於在每行文字的上下同時加間距，如：line-height：24px；
    • font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫：font：是否加粗 字號/行高 字型；如：font：normal 12px/36px "微軟雅黑"
    • text-decoration 設定文字的下劃線，如：text-decoration：none；將下劃線去掉
    • text-indent 設定文字首行縮排，如：text-indent：24px，設定文字首行縮排 24px
    • text-align 設定文字水平對齊方式，如 text-align：center；設定文字水平居中對齊

  • opacity 設定元素的不透明度

    • cursor 定義了滑鼠指標放在一個元素邊界範圍內時所用的游標形狀
    • pointer 游標呈現為指示連結的指標（一隻手）

  • css 顏色表示法：

    • css 顏色值主要有三種表示方法：
    • 顏色名錶示，如：red 紅色， gold 金色
    • rgb 表示， 如：rgb(255，0，0) 表示紅色
    • 16 進位制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00

  • css 選擇器

"CSS"列表示在CSS版本的屬性定義（CSS1，CSS2，或對CSS3）。


選擇器 示例  示例說明    CSS
.class    .intro  選擇所有class="intro"的元素  1
#id   #firstname  選擇所有id="firstname"的元素 1
* *   選擇所有元素  2
element   p   選擇所有<p>元素   1
element,element   div,p   選擇所有<div>元素和<p>元素 1
element element   div p   選擇<div>元素內的所有<p>元素  1
element>element   div>p   選擇所有父級是 <div> 元素的 <p> 元素    2
element+element   div+p   選擇所有緊跟在 <div> 元素之後的第一個 <p> 元素 2
[attribute]   [target]    選擇所有帶有target屬性元素    2
[attribute=value] [target=-blank] 選擇所有使用target="-blank"的元素  2
[attribute~=value]    [title~=flower] 選擇標題屬性包含單詞"flower"的所有元素   2
[attribute|=language] [lang|=en]  選擇 lang 屬性等於 en，或者以 en- 為開頭的所有元素    2
:link a:link  選擇所有未訪問連結 1
:visited  a:visited   選擇所有訪問過的連結  1
:active   a:active    選擇活動連結  1
:hover    a:hover 選擇滑鼠在連結上面時  1
:focus    input:focus 選擇具有焦點的輸入元素   2
:first-letter p:first-letter  選擇每一個<p>元素的第一個字母  1
:first-line   p:first-line    選擇每一個<p>元素的第一行    1
:first-child  p:first-child   指定只有當<p>元素是其父級的第一個子級的樣式。  2
:before   p:before    在每個<p>元素之前插入內容    2
:after    p:after 在每個<p>元素之後插入內容    2
:lang(language)   p:lang(it)  選擇一個lang屬性的起始值="it"的所有<p>元素   2
element1~element2 p~ul    選擇p元素之後的每一個ul元素 3
[attribute^=value]    a[src^="https"] 選擇每一個src屬性的值以"https"開頭的元素 3
[attribute$=value]    a[src$=".pdf"]  選擇每一個src屬性的值以".pdf"結尾的元素  3
[attribute*=value]    a[src*="runoob"]    選擇每一個src屬性的值包含子字串"runoob"的元素   3
:first-of-type    p:first-of-type 選擇每個p元素是其父級的第一個p元素  3
:last-of-type p:last-of-type  選擇每個p元素是其父級的最後一個p元素   3
:only-of-type p:only-of-type  選擇每個p元素是其父級的唯一p元素 3
:only-child   p:only-child    選擇每個p元素是其父級的唯一子元素   3
:nth-child(n) p:nth-child(2)  選擇每個p元素是其父級的第二個子元素    3
:nth-last-child(n)    p:nth-last-child(2) 選擇每個p元素的是其父級的第二個子元素，從最後一個子項計數   3
:nth-of-type(n)   p:nth-of-type(2)    選擇每個p元素是其父級的第二個p元素  3
:nth-last-of-type(n)  p:nth-last-of-type(2)   選擇每個p元素的是其父級的第二個p元素，從最後一個子項計數 3
:last-child   p:last-child    選擇每個p元素是其父級的最後一個子級。 3
:root :root   選擇文件的根元素    3
:empty    p:empty 選擇每個沒有任何子級的p元素（包括文字節點）    3
:target   #news:target    選擇當前活動的#news元素（包含該錨名稱的點選的URL） 3
:enabled  input:enabled   選擇每一個已啟用的輸入元素 3
:disabled input:disabled  選擇每一個停用的輸入元素    3
:checked  input:checked   選擇每個選中的輸入元素   3
:not(selector)    :not(p) 選擇每個並非p元素的元素  3
::selection   ::selection 匹配元素中被使用者選中或處於高亮狀態的部分    3
:out-of-range :out-of-range   匹配值在指定區間之外的input元素    3
:in-range :in-range   匹配值在指定區間之內的input元素    3
:read-write   :read-write 用於匹配可讀及可寫的元素    3
:read-only    :read-only  用於匹配設定 "readonly"（只讀） 屬性的元素   3
:optional :optional   用於匹配可選的輸入元素   3
:required :required   用於匹配設定了 "required" 屬性的元素    3
:valid    :valid  用於匹配輸入值為合法的元素 3
:invalid  :invalid    用於匹配輸入值為非法的元素 3
  1. 標籤選擇器
  • 標籤選擇器，此種選擇器影響範圍大，建議儘量應用在層級選擇器中

舉例

*{margin:0;padding:0}
div{color:red;}

<div>......</div>   <!--對應以上兩種樣式-->
<div class="box">......</div>   <!--對應以上兩種樣式-->
  1. id 選擇器

  • 透過 id 名來選擇元素，元素的 id 名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id 名一般給程式使用，所以不推薦使用 id 作為選擇器，舉例如下：

    #box{color:red;}

<div id="box">......</div>   <!--對應以上一條樣式，其他元素不允許應用此樣式-->
  1. 類選擇器

  • 透過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是 css 中應用最多的一種選擇器

    .red{color:red;}
.big{font-size:20px;}
.mt10{margin-top:10px;}

<div class="red">......</div>
<div class="red mt10 big">......</div>
<div class="red">......</div>
  1. 層級選擇器

  • 主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以透過層級，防止命名衝突，舉例：

    .box span{color:red;}
.box .red{color:red;}
.red{color:red;}

<div class="box">
    <span>......</span>
    <a href="#" class="blue">超連結111</a>
</div>

<h3 class="red">
    ......
</h3>
  1. 組選擇器

  • 多個選擇器，如果有同樣的樣式設定，可以使用組選擇器，舉例：

    • margin-top 塌陷

  • 在兩個盒子巢狀時候，內部的盒子設定的 margin-top 會加到外邊的盒子上，導致內部的盒子 margin-top 設定失敗，解決方法如下程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con{
            width:300px;
            height:300px;
            background-color:gold;
            /* 第一種解決塌陷的方法 */
            /* border:1px solid; */

            /* 第二種解決塌陷的方法 */
            /* overflow:hidden; */
        }

        .box{
            width:200px;
            height:100px;
            background-color:green;
            margin-top:100px;
            margin-left:50px;
        }

        /* 第三種解決塌的方法 */
            /* 使用偽元素類方法解決塌陷： */
        .clearfix:before{
            content:"";
            display:table;
        }

    </style>
</head>
<body>
    <div class="con clearfix">
        <div class="box"></div>
    </div>
</body>
</html>

  • margin 和 padding

    • margin
    • 在 border 外側新增空白
    • padding
    • 在 border 內部新增空白

  • css 元素溢位

    • 當子元素的尺寸超過父元素的尺寸時，需要設定父元素顯示溢位的子元素的方式，設定的方法是透過 overflow 屬性來設定
    • overflow 的設定項：
    • visible 預設值，內容不會被修剪，會呈現在元素框之外
    • hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動，清除 margin-top 塌陷的功能
    • scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便檢視其餘的內容
    • auto 如果內容被修剪，則瀏覽器會顯示捲軸以便檢視其餘的內容
    • inherit 規定應該從父元素繼承 overflow 屬性的值

  • 塊元素、內聯元素、內聯塊元素

    • 元素就是標籤，佈局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，瞭解這三種元素的特性，才能熟練的進行頁面佈局
    • 塊元素
    • 塊元素，也可以稱為行元素，佈局中常用的標籤如：div、p、ul、li、h1-h6、dl、dt、dd 等等都是塊元素，它在佈局中的行為：
      • 支援全部的樣式
      • 如果沒有設定寬度，預設的寬度為父級寬度 100%
      • 盒子佔據一行，即使設定了寬度
    • 內聯元素
    • 內聯元素，也可以稱為行內元素，佈局中常用的標籤如：a、span、em、b、strong、i 等等都是內聯元素，它們在佈局中的行為：
      • 支援部分樣式（不支援寬、高，margin 上下、padding 上下）
      • 寬度由內容決定
      • 盒子並在一行
      • 程式碼換行，盒子之間會產生間距
      • 子元素是內聯元素，父元素可以用 text-align 屬性設定子元素水平對齊方式
    • 解決內聯元素間隙的方法

1. 去掉內聯元素之間的換行
2. 將內聯元素的父級設定 font-size 為 0，內聯元素自身再設定 font-size

  • 內聯塊元素

  • 內聯塊元素，也叫行內塊元素，是新增的元素型別，現有元素沒有歸於此類別的，img 和 input 元素的行為類似這種元素，但是也歸類於內聯元素，我們可以用 display 屬性將塊元素或者內聯元素轉化成這種元素，它們在佈局中表現的行為：

    • 支援全部樣式
    • 如果沒有設定亮度，寬度由內容決定
    • 盒子並在一行
    • 程式碼換行，盒子會產生間距
    • 子元素是內聯塊元素，父元素可以用 text-align 屬性設定子元素水平對齊方式

    這三種元素，可以透過 display屬性來相互轉化，不過實際開發中，塊元素用得比較多，所以我們經常把內聯元素轉化為塊元素，少量轉化為 內聯塊，而要使用內聯元素時，直接使用內聯元素，而不用塊元素轉化了

  • display屬性

  • display 屬性是用來設定元素的型別及隱藏的，常用的屬性有：

    • none 元素隱藏且不佔位置
    • block 元素以塊元素顯示
    • *inline * 元素以內聯元素顯示
    • inline-block 元素以內聯塊元素顯示
    • 浮動佈局
    • 浮動特性
  1. 浮動元素有左浮動 (float left) 和右浮動 (float right) 兩種
  2. 浮動的元素會向左或向右浮動，碰到父元素邊界，其他元素才停下來
  3. 相鄰浮動的塊元素可以並在一起，超出父級寬度就換行
  4. 浮動讓行內元素自動轉化為行內塊元素 (此時不會有行內塊元素間隙問題)
  5. 浮動元素後面沒有浮動的元素會佔據浮動元素的設定，沒有浮動的元素內的文字會避開浮動的元素，形成文字繞圖的效果
  6. 父元素如果沒有設定尺寸 (一般是高度不設定)，父元素內整體浮動的元素無法撐開父元素，父元素需要清除浮動
  7. 浮動元素之間沒有垂直 margin 的合併

  • 清除浮動

    • 父級上增加屬性 overflow:hidden
    • 在最後一個子元素的後面加一個空的 div，給他樣式屬性 clear:both（不推薦）
    • 使用成熟的清除浮動的樣式類，clearfix
    .clearfix:after,.clearfix:before{content:"",display:table;}
.clearfix:after{clear:both}
.clearfix{zoom:1}

    清除浮動的使用方法：

    .con2{... overflow:hidden}
或者
<div class="con2 clearfix"></div>

相關文章