HTML5語法總結

silly_fox發表於2024-03-20
HTML

目錄
  • 一.HTML基本框架
  • 二.標題標籤
  • 三.段落標籤
  • 四.換行與水平線標籤
  • 五.文字格式化標籤(加粗、傾斜、下劃線、刪除線)
  • 六.影像標籤
    • 擴充套件：相對路徑,絕對路徑與線上網址
  • 七.超連結標籤
  • 八.音訊標籤
  • 九.影片標籤
  • 十.列表標籤
  • 十一.表格標籤
    • 擴充套件：表格結構標籤
    • 合併單元格
  • 十二.表單標籤
    • 1.input標籤
      • input佔位文字屬性(提示資訊)
      • 單選框radio屬性
      • 表單如何上傳多個檔案？
      • 多選框checkbox屬性
    • 2.下拉選單
    • 3.文字域
    • 4.label標籤
    • 4.按鈕
  • 十三.佈局標籤（div和span）
  • 十四.字元實體（空格，大於小於符號）

使用環境

  • VS Code編譯器
  • 瀏覽器(谷歌或Microsoft Edge)

註釋

  • 註釋標籤： < !-- .. -- >
  • VsCode註釋快捷鍵： Ctrl + /

一.HTML基本框架

如何快速生成VS Code基本框架：在VS Code中輸入'!'並回車生成一個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>
</head>
<body>
    
</body>
</html>
  • html:整個網頁
  • head:網頁頭部，存放給瀏覽器看的程式碼，例如CSS
  • body:網頁主體，存放給使用者看的程式碼，例如圖片、文字等
  • title:網頁標題

二.標題標籤

  • 標籤名： h1~h6（雙標籤）
  • 顯示特點：文字加粗，且標籤數字越大，標題的文字大小越小；一個標題標籤獨佔一行；
  • 注意：h1標籤在一個網頁中只能用一次，而h2~h6標籤沒有使用次數的限制

程式碼示例

    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>

結果展示：

三.段落標籤

標籤名：p（雙標籤）
顯示特點：獨佔一行；段落之間存在間隙

程式碼示例

    <p>我我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我</p>
    <p>你你你你你你你你你</p>
    <p>她她她她她她她她她她她她她她她她她她她</p>

執行結果：

四.換行與水平線標籤

  • 換行：br（單標籤）
  • 水平線：hr （單標籤）

程式碼示例

<body>
    <h1>這裡展示換行與水平線標籤</h1>
    <hr>
    第一行內容
    <br>
    第二行內容
    <br>
    第三行內容
</body>

執行結果：

五.文字格式化標籤(加粗、傾斜、下劃線、刪除線)

  • 加粗：strong或b
  • 傾斜：em或i
  • 下劃線：ins或u
  • 刪除線：del或s

程式碼示例

<body>
    <h1>這裡展示文字格式化標籤</h1>
    <strong>加粗標籤</strong>
    <b>加粗標籤</b>
    <br>
    <em>傾斜標籤</em>
    <i>傾斜標籤</i>
    <br>
    <ins>下劃線標籤</ins>
    <u>下劃線標籤</u>
    <br>
    <del>刪除線標籤</del>
    <s>刪除線標籤</s>
</body>

結果展示：

六.影像標籤

  • 作用：在網頁中插入圖片
  • 語法：< img src = "圖片的URL" >

src用於指定影像的位置和名稱，是img的必須屬性

程式碼示例

<body>
    <h1>這裡展示圖片的標籤</h1>
    <br>
    <img src="./map.jpg" alt="">    <!--這裡用的是相對路徑-->
</body>

執行結果：

常用屬性

擴充套件：相對路徑,絕對路徑與線上網址

  • 相對路徑：從當前檔案位置出發查詢目標檔案
  • 絕對路徑：從磁碟機代號出發查詢目標檔案
  • 線上網址：路徑為網址的形式
相對路徑：./map.jpg
絕對路徑：C:\imges\map.jpg
線上網址：src="https://www.baidu.com/images/logo.png"

七.超連結標籤

  • 作用：跳轉到其他頁面
  • 標籤名：a(雙標籤)
  • 必須屬性：href-跳轉地址

開發時，如果不知道超連結的跳轉地址，則href屬性值寫#，表示空連結，點選不會跳轉

預設是點選連結在當前頁面開啟網址，如果想新建頁面開啟網址，則需要新增屬性 target="_blank"

程式碼示例

<body>
    <h1>這裡展示超連結跳轉標籤</h1>
    <a href="https://www.baidu.com">點選我跳轉到百度</a>
</body>

八.音訊標籤

  • 標籤名：audio(雙標籤)

常用屬性

屬性 作用 說明
src(必須屬性) 音訊URL 支援格式：MP3,Ogg,Wav
controls 顯示音訊控制皮膚
loop 迴圈播放
autoplay 自動播放 通常禁用

程式碼示例

<audio src="./music.mp3" controls loop autoplay></audio>

執行結果

九.影片標籤

  • 標籤名：video(雙標籤)

常用屬性

屬性 作用 說明
src(必須屬性) 影片URL 支援格式：MP4,WebM,Ogg
controls 顯示影片控制皮膚
loop 迴圈播放
muted 靜音播放
autoplay 自動播放

程式碼示例

<video src="./music.mp4" controls loop autoplay></video>

十.列表標籤

  • 列表的分類：無序列表，有序列表，定義列表
  • 無序列表標籤：ul巢狀li,ul是無序列表，li是列表條目。ul標籤裡面只能包含li標籤，li標籤裡面可以包裹任何內容
  • 有序列表標籤：ol巢狀li,ol是有序列表，li是列表條目。ol標籤裡面只能包含li標籤，li標籤裡面可以包裹任何內容
  • 定義列表標籤：dl巢狀dt和dd,dl是定義列表，dt是定義列表的標題，dd是定義列表的描述。dl裡面只能包含dt和dd,dt和dd可以包含任何內容

程式碼示例

<body>
    <h2>展示無序列表</h2>
    <ul>
        <li>第一項</li>
        <li>第二項</li>
        <li>第三項</li>
    </ul>

    <h2>展示有序列表</h2>
    <ul>
        <ol>第一項</ol>
        <ol>第二項</ol>
        <ol>第三項</ol>
    </ul>

    <h2>展示定義列表</h2>
    <dl>
        <dt>列表標題</dt>
        <dd>第一項</dd>
        <dd>第二項</dd>
        <dd>第三項</dd>

        <dt>第二標題</dt>
        <dd>第一項</dd>
        <dd>第二項</dd>
        <dd>第三項</dd>
    </dl>
</body>

執行結果：

十一.表格標籤

語法：table巢狀tr,tr巢狀td/th

標籤名 說明
table 表格
tr 行
th 表頭單元格
td 內容單元格

表格預設沒有邊框線，加屬性border新增邊框線

程式碼示例

<body>
    <h2>展示表格（不加邊框線）</h2>

    <table>
        <tr>
            <th>姓名</th>
            <th>語文</th>
            <th>數學</th>
            <th>總分</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
    </table>

    <h2>展示表格（加邊框線）</h2>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>語文</th>
            <th>數學</th>
            <th>總分</th>
        </tr>
        <tr>
            <td>張三</td>
            <td>99</td>
            <td>100</td>
            <td>199</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>98</td>
            <td>100</td>
            <td>198</td>
        </tr>
    </table>   
</body>

執行結果：

擴充套件：表格結構標籤

作用：用表格結構標籤把內容劃分割槽域，便於程式碼開發，展示給使用者看的部分不變

標籤名 含義
thead 表格頭部
tbody 表格主體
tfoot 表格底部

程式碼展示

<body>

    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>語文</th>
                <th>數學</th>
                <th>總分</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>張三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>總結</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>

    </table>
  
</body>

使用者看到的表格結果不變

合併單元格

將多個單元格合併成一個單元格，以合併同類資訊。
可以跨行合併，也可以跨列合併

  • 跨行合併，保留最上單元格，新增屬性rowspan
  • 跨列合併，保留最左單元格，新增屬性colspan
  • ** rowspan和colspan的屬性值是數值，為合併單元格的個數**

程式碼示例

<body>

    <h2>展示跨行合併單元格</h2>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>語文</th>
                <th>數學</th>
                <th>總分</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>張三</td>
                <td>99</td>
                <td rowspan="2">100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <!-- <td>100</td> -->
                <td>198</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>總結</td>
                <td>全市第一</td>
                <td>全市第一</td>
                <td>全市第一</td>
            </tr>
        </tfoot>

    </table>

    <h2>展示跨列合併單元格</h2>
    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>語文</th>
                <th>數學</th>
                <th>總分</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>張三</td>
                <td>99</td>
                <td>100</td>
                <td>199</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>98</td>
                <td>100</td>
                <td>198</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td>總結</td>
                <td colspan="3">全市第一</td>
                <!-- <td>全市第一</td>
                <td>全市第一</td> -->
            </tr>
        </tfoot>

    </table>
  
</body>

執行結果：

十二.表單標籤

1.input標籤

input標籤的type屬性值總結

type屬性值 說明 特點
text 文字框，輸入單行文字 輸入什麼就顯示什麼
password 密碼框 輸入什麼都是以點的形式顯示
radio 單選框
checkbox 多選框
file 上傳檔案

程式碼展示

    <h2>展示input標籤</h2>
    文字框 <input type="text">
    <br>
    密碼框 <input type="password">
    <br> 
    單選框 <input type="radio">
    <br>
    多選框 <input type="checkbox">
    <br>
    上傳檔案 <input type="file">

input佔位文字屬性(提示資訊)

  • 屬性 placeholder
  • 屬性值：提示資訊

程式碼展示

    <h2>展示input的佔位屬性值</h2>
    文字框 <input type="text" placeholder="這是一個文字框">
    <br>
    密碼框 <input type="password" placeholder="這是一個密碼框">

單選框radio屬性

屬性值總結

屬性名 作用 說明
name 控制元件名稱 控制元件分組，同組只能選中一個（單選功能）
checked 預設選中 屬性名和屬性值相同，簡寫為一個單詞

程式碼示例

    <h2>展示redio屬性值</h2>
    <br> 
    性別 <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女

表單如何上傳多個檔案？

預設情況下，檔案上傳表單控制元件只能上傳一個檔案，新增multiple屬性可以實現檔案多選功能

程式碼示例

    <h2>展示上傳多個檔案</h2>
    <br> 
    上傳檔案 <input type="file" multiple>

多選框checkbox屬性

  • 預設選中新增屬性：checked

程式碼示例

    <h2>展示多選框的預設選中</h2>
    <br> 
    我姓：
    <input type="checkbox"> 王
    <input type="checkbox" checked> 李
    <input type="checkbox"> 國

2.下拉選單

語法總結：select巢狀option,select是下拉選單整體，option是下拉選單的每一項

預設選擇屬性：selected

程式碼示例

    <h2>展示下拉選單</h2>
    請選擇你所在的城市
    <select>
        <option selected>北京</option>
        <option>上海</option>
        <option>廣州</option>
        <option>深圳</option>
        <option>武漢</option>
    </select>

3.文字域

  • 作用：多行輸入文字等待表單控制元件

  • 標籤：textarea, 雙標籤

程式碼示例

    <h2>展示文字域標籤</h2>
    <textarea name="" id="" cols="30" rows="10">輸入評論</textarea>

4.label標籤

  • 作用：網頁中，某個標籤的說明文字。或用label標籤繫結文字和表單控制元件的關係，增大表單控制元件的點選範圍。

  • 如何使用label標籤增大點選範圍？：①設定label標籤的for屬性值和表單控制元件的id屬性值相同 ②使用label標籤包裹文字和表單控制元件

  • 支援文字框，密碼框，上傳檔案，單選框，多選框，下拉選單，文字域等增大點選範圍

程式碼示例

    <h2>展示label標籤增大點選範圍</h2>
    性別 <input type="radio" name="gender" id="man"> <label for="man">男</label>
    <input type="radio" name="gender" checked> 女

4.按鈕

  • 標籤：button(雙標籤)

  • 表單控制元件用form標籤管理，按鈕才有對應的實際效果

如果botton標籤省略type屬性，則預設功能為提交

type屬性值總結

type屬性值 說明
submit 提交按鈕，點選後可以提交資料到後臺（預設功能）
reset 重置按鈕，點選後將表單控制元件恢復預設值
button 普通按鈕，預設沒有功能，一般配合JS使用

程式碼展示

    <h2>表單按鈕標籤</h2>
    <!-- action是傳送資料的地址，即要把資料提交到哪的位置 -->
    <form action="">
        使用者名稱：<input type="text"> <br><br>
        密碼：<input type="password"> <br><br>

        <button type="submit">提交</button>
        <button type="reset">重置</button>

    </form>

十三.佈局標籤（div和span）

  • 作用：佈局網頁（劃分網頁區域）

  • div:獨佔一行，雙標籤

  • span:不換行，雙標籤

程式碼示例

  <div>這是div標籤,獨佔一行</div>
  <span>這是不換行的span標籤</span>

十四.字元實體（空格，大於小於符號）

  • 作用：在網頁中顯示預留字元
顯示結果 描述 實體名稱
空格 & nbsp
< 小於符號 & lt
> 大於符號 & gt

程式碼示例

    <h2>展示HTML中的字元實體</h2>
    這裡是展示字元實體，&nbsp;&nbsp;打兩個空格。&nbsp;&nbsp;&nbsp;打三個空格。
    <br>
    畫一個小於符號：&lt;
    <br>
    畫一個大於符號：&gt;

相關文章