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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類