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
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類