HTML5語法總結

来源:https://www.cnblogs.com/sillyfox/p/18076951
-Advertisement-
Play Games

目錄一.HTML基本框架二.標題標簽三.段落標簽四.換行與水平線標簽五.文本格式化標簽(加粗、傾斜、下劃線、刪除線)六.圖像標簽擴展：相對路徑,絕對路徑與線上網址七.超鏈接標簽八.音頻標簽九.視頻標簽十.列表標簽十一.表格標簽擴展：表格結構標簽合併單元格十二.表單標簽1.input標簽input占位 ...


目錄

使用環境

  • 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;


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • GaussDB(分散式)實例故障處理
    本文分享自華為雲社區《GaussDB(分散式)實例故障處理》，作者：subverter。 一、說明 GaussDB Kernel實例出現故障時，可以按照本節的辦法進行實例快速修複。 1、執行gs_om -t status --detail查看集群狀態，cluster_state為Normal，bal ...
  • 華為雲資料庫創新發展論壇，打造行業更優資料庫底座！
    近日，以“行業更優數據底座，華為雲資料庫創新發展論壇”為主題的資料庫分論壇，通過對雲原生資料庫的發展與展望、技術實踐分享與研討，共同探索行業數字化轉型最優解。 ...
  • Android 逆向(四) - adb常用逆向命令
    Android 逆向(四) - adb常用逆向命令 本篇文章繼續記錄下adb 的一些常用逆向命令. 1: adb shell ps 該命令可以查看進程信息. 用法: adb shell ps |grep [pname] zh@zh:~/workSpace$ adb shell ps USER PID ...
  • linux 入門（四）
    linux 入門（四） 1: 文件夾下所有文件的大小和詳細信息 du -h --max-depth=1 | sort -hr du命令可以查看文件夾（文件）占用的磁碟大小 ls命令可以查看文件的詳細信息，包括文件大小。 該命令可以按照文件夾（文件）大小的降序排列，並以易讀的方式顯示文件夾（文件）大小 ...
  • uni-app攻略：如何對接馳騰印表機
    一.引言 在當前的移動開發生態中，跨平臺框架如uni-app因其高效、靈活的特點受到了開發者們的青睞。同時，隨著物聯網技術的飛速發展，智能列印設備已成為許多業務場景中不可或缺的一環。今天，我們就來探討如何使用uni-app輕鬆對接馳騰品牌的智能印表機，實現無線列印功能。無論您是初學者還是有經驗的開發 ...
  • 如何實現條件組合組件
    我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霜序 本文首發於：https://juejin.cn/post/7299384698882539574 在大數據業務中，時常會出現且或關係邏輯的拼接，有需要做 ...
  • 深度解讀UUID：結構、原理以及生成機制
    專註探討UUID的核心原理及其生成機制，並詳細介紹不同版本UUID（如版本1的時間戳+節點ID、版本4的隨機數生成等）背後的數學原理和技術細節。 ...
  • 寫入和讀取剪切板內容
    寫入剪切板 使用 clipboard.js 第三方插件： clipboard.js 安裝clipboard.js yarn yarn add clipboard npm npm install clipboard --save 使用示例（vue） <template> <div> <span v-c ...
一周排行
    -Advertisement-
    Play Games
  • C#TMS系統學習（BaseCity頁面）
    C#TMS系統代碼-基礎頁面BaseCity學習 本人純新手，剛進公司跟領導報道，我說我是java全棧，他問我會不會C#，我說大學學過，他說這個TMS系統就給你來管了。外包已經把代碼給我了，這幾天先把增刪改查的代碼背一下，說不定後面就要趕鴨子上架了 Service頁面 //using => impo ...
  • C# - 委托與事件
    委托與事件 委托 委托的定義 委托是C#中的一種類型，用於存儲對方法的引用。它允許將方法作為參數傳遞給其他方法，實現回調、事件處理和動態調用等功能。通俗來講，就是委托包含方法的記憶體地址，方法匹配與委托相同的簽名，因此通過使用正確的參數類型來調用方法。 委托的特性 引用方法：委托允許存儲對方法的引用， ...
  • 解析 ABP vNext 依賴註入實現【屬性註入】的原理
    前言 這幾天閑來沒事看看ABP vNext的文檔和源碼，關於關於依賴註入(屬性註入)這塊兒產生了興趣。 我們都知道。Volo.ABP 依賴註入容器使用了第三方組件Autofac實現的。有三種註入方式，構造函數註入和方法註入和屬性註入。 ABP的屬性註入原則參考如下： 這時候我就開始疑惑了，因為我知道 ...
  • C#TMS系統學習（ShippingNotice頁面）
    C#TMS系統代碼-業務頁面ShippingNotice學習 學一個業務頁面，ok，領導開完會就被裁掉了，很突然啊，他收拾東西的時候我還以為他要旅游提前請假了，還在尋思為什麼回家連自己買的幾箱飲料都要叫跑腿帶走，怕被偷嗎？還好我在他開會之前拿了兩瓶芬達 感覺感覺前面的BaseCity差不太多，這邊的 ...
  • C#動態查詢：巧用Expression組合多條件表達式
    概述：在C#中，通過`Expression`類、`AndAlso`和`OrElse`方法可組合兩個`Expression<Func<T, bool>>`，實現多條件動態查詢。通過創建表達式樹，可輕鬆構建複雜的查詢條件。 在C#中，可以使用AndAlso和OrElse方法組合兩個Expression< ...
  • 在Biwen.QuickApi中整合一個極簡的發佈訂閱(事件匯流排)
    閑來無聊在我的Biwen.QuickApi中實現一下極簡的事件匯流排,其實代碼還是蠻簡單的,對於初學者可能有些幫助 就貼出來,有什麼不足的地方也歡迎板磚交流~ 首先定義一個事件約定的空介面 public interface IEvent{} 然後定義事件訂閱者介面 public interface I ...
  • WPF 穩定的全屏化視窗方法
    1. 案例 成某三甲醫預約系統， 該項目在2024年初進行上線測試，在正常運行了兩天後，業務系統報錯：The connection pool has been exhausted, either raise MaxPoolSize (currently 800) or Timeout (curren ...
  • 在 WPF 中集成 ASP.NET Core 和 WebView2 用於集成 SPA 應用
    背景 我們有些工具在 Web 版中已經有了很好的實踐，而在 WPF 中重新開發也是一種費時費力的操作，那麼直接集成則是最省事省力的方法了。 思路解釋 為什麼要使用 WPF？莫問為什麼，老 C# 開發的堅持，另外因為 Windows 上已經裝了 Webview2/edge 整體打包比 electron ...
  • C#事件
    EDP是一套集組織架構，許可權框架【功能許可權，操作許可權，數據訪問許可權，WebApi許可權】，自動化日誌，動態Interface，WebApi管理等基礎功能於一體的，基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 發佈到 Win7+
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
所有分類