HTML 【實用教程】（2024最新版）

核心思想 —— 語義化

【面試題】如何理解 HTML 語義化 ?

僅通過標簽便能判斷內容的類型，特別是區分標題、段落、圖片和表格

  • 增加代碼可讀性，讓人更容易讀懂
  • 對SEO更加友好，讓搜索引擎更容易讀懂

html 文件的基本結構

html 文件的文件后綴為 .html，如 index.html

vscode 中輸入英文 ! 可快捷輸入

<!-- HTML5的文檔類型聲明【必要】 -->
<!doctype html>
<!-- 整個頁面，語言為英文【必要】 -->
<html lang="en"><!-- 頁面的頭部【必要】 --><head><!-- 頁面的元信息-- 文檔的字符編碼為 UTF-8 --><meta charset="UTF-8" /><!-- 頁面的元信息-- 設備上顯示頁面的區域 viewport 的配置 -- width 為 device-width ，即采用設備寬度；intial-scale 為 1 ，即按原比例顯示（無縮放）--><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 頁面的標題【必要】 --><title>Document</title><!-- 頁面中的樣式 --><style>html,body {height: 100%;}</style></head><!-- 頁面的身體【必要】 --><body><!-- 頁面的內容 --><div></div><!-- 頁面的腳本 ——  JS 代碼 --><script></script></body>
</html>

【面試題】為什么<style></style> 標簽要寫在<head></head> 中  ?

瀏覽器解析 HTML 文檔是自上而下的，將 <style></style> 標簽要寫在<head></head> 中就能先加載樣式，再加載元素。

若將 <style></style> 標簽寫在<body></body> 下方，則是先加載元素，再加載樣式，導致用戶會看到沒有樣式的頁面結構。

【面試題】為什么<script></script> 標簽要寫在 <body></body> 內的底部  ?

瀏覽器解析 HTML 文檔是自上而下的， <style></style> 若未放在<body></body> 內的底部，則會先加載并解析 JS ，再渲染元素，導致頁面渲染的時間延長，倘若 JS 中涉及 DOM 操作，還會阻塞頁面的渲染。

html 標簽的分類

根據標簽的默認的 display 樣式值分為兩類

【面試題】HTML有哪些內聯元素和塊狀元素 ?

內聯元素

寬度由內容決定

  • display :inline 不能設置寬高
img，span ,  a ,  b 等
  • display :inline-block 可以設置寬高
input， button 等

塊狀元素

寬度由容器決定（寬度會撐滿整個容器），可以設置寬高

  • display: block
div，h1-h6，p，ul, ol ，form , hr 等
  • display: table
table
  • display: list-item
li

HTML5 新增的標簽

【面試題】HTML5 新增了哪些標簽 ? (回答幾個常用的即可)

結構性標簽

<header>: 定義文檔或節的頭部。
<nav>: 定義導航鏈接。
<section>: 定義文檔中的獨立節。
<article>: 定義文檔、頁面、應用或網站中獨立的內容區域。
<aside>: 定義頁面的側邊欄內容。
<footer>: 定義文檔或節的頁腳。
<main>: 定義文檔的主體內容。

多媒體標簽

<video>: 定義視頻或電影。
<audio>: 定義音頻內容。
<source>: 為<video>和<audio>元素定義媒體資源。
<track>: 為<video>和<audio>元素定義文本軌道。
<embed>: 定義嵌入的內容，比如插件。
<canvas>: 用于在網頁上繪制圖形。

表單標簽

<datalist>: 定義選項列表，與<input>元素配合使用，以提供“自動完成”功能。
<output>: 定義不同類型的輸出，比如腳本的輸出。

其他標簽

<time>: 定義日期或時間。
<mark>: 定義高亮顯示的文本。
<progress>: 定義任何類型的任務的進度。
<meter>: 定義已知范圍或分數值內的標量測量。
<details>: 定義用戶可見的或者隱藏的額外的細節。
<summary>: 定義<details>元素的可見標題。
<figure>: 規定獨立的流內容（圖像、圖表、照片、代碼等等）。
<figcaption>: 定義<figure>元素的標題（caption）。

HTML 常用標簽實戰要點

link 外鏈資源

限 head 標簽內使用，可定義文檔與外部資源之間的關系，如外鏈 css 樣式，外鏈頁面標題前的小圖標等。

<!-- 外鏈--樣式 -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- 外鏈--頁面標題前的小圖標 -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

a 超鏈接

  • 超鏈接 a 標簽的四大功能（頁面跳轉、頁內滾動【錨點】、頁面刷新、文件下載）
    https://blog.csdn.net/weixin_41192489/article/details/140217094

  • 給段落添加超鏈接
    用 p 包裹 a，而不是 a 包裹 p

    <p><a href="">段落</a></p>

普通文本專用標簽

br 段落內換行

僅適用于 p 標簽內部的換行，段落間的換行或調整元素間的間距請使用樣式 padding、margin 等樣式。

<p>廣東省<br/>廣州市<br/>黃埔大道西601號</p>

在這里插入圖片描述

span 行內文本

用于包裹行內的部分文本來添加特殊的樣式。

<p><span style="color: red">要點：</span> 不能長時間睡覺。</p>

在這里插入圖片描述

sup 上標

<p>m<sup>2</sup></p>

在這里插入圖片描述

sub 下標

<p>m<sub>2</sub></p>

在這里插入圖片描述

pre 預定義文本

塊狀元素 display: block

可保留所有空白字符(空格、換行符)，原封不動的輸出結果，常用于展示計算機的源代碼。

<pre>
你好：我昨天給你打了個電話。
</pre>

在這里插入圖片描述

code 代碼

內聯元素 display: inline

用于表示計算機源代碼或者其他機器可以閱讀的文本內容，為保留代碼的縮進格式，通常和 pre 標簽一起使用。

code 標簽內的文本將用等寬、類似電傳打字機樣式的字體（Courier）顯示出來。

<pre><code>let a = 1;</code>
</pre>

在這里插入圖片描述

列表相關標簽

ul 無序列表

  • type 屬性可修改序號類型
    • disc 實心原點【默認】
    • square 實心方點
    • circle 空心圓
<ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul>

在這里插入圖片描述

ol 有序列表

  • type 屬性 —— 序號類型，如1( 阿拉伯數字【默認】) 、a、A、i、I
  • start 屬性 —— 計數起點
<ol><li>咖啡</li><li>茶</li><li>牛奶</li>
</ol>

在這里插入圖片描述

<ol type="a">   <li>嘿嘿</li><li>嘿嘿</li><li>呵呵</li>
</ol>

在這里插入圖片描述

<ol type="1" start="4"> <li>哈哈</li><li>哈哈</li><li>哈哈</li>
</ol>

在這里插入圖片描述

列表嵌套

li 是一個容器級標簽，里面什么都能放，包括 ul。

<ul><li><b>北京市</b><ul><li>海淀區</li><li>朝陽區</li><li>東城區</li></ul></li><li><b>廣州市</b><ul><li>天河區</li><li>越秀區</li></ul></li>
</ul>

在這里插入圖片描述

table 表格

https://blog.csdn.net/weixin_41192489/article/details/140217983

i 圖標

i 標簽原用于表示斜體文字，默認有字體傾斜的效果，但現在斜體統一通過css實現。 因 i 為圖標 icon 的首字母，現習慣用 i 標簽來展示圖標，所以需添加樣式 font-style:normal 取消默認的傾斜。

<i style="font-style:normal">&#9742</i>

在這里插入圖片描述

img 圖片

display :inline 內聯元素

支持的圖片格式：jpg(jpeg)、gif、png、bmp，其他格式不支持，如psd、ai

 <img src="./ecLogo.jpg" alt="EC編程俱樂部的logo" />

  • src【必要】：圖片的地址

  • alt【重要】：當圖片無法顯示時，代替圖片顯示的內容，搜索引擎會抓取此屬性。alt 源自單詞 alternate “替代”，代表替換資源。（有的瀏覽器不支持）

  • 要想圖片保持寬高比，通常只設置 width 和 height 中的一個

  • 響應式圖片
    https://blog.csdn.net/weixin_41192489/article/details/126038175

  • 圖片懶加載（手寫）
    https://blog.csdn.net/weixin_41192489/article/details/126263221

audio 音頻

display :inline 內聯元素
在這里插入圖片描述

<audio controls><source src="./test.mp3" type="audio/mp3" />您的瀏覽器不支持 audio 標簽。
</audio>
  • src【必要】：音頻的地址
  • controls 展示音樂播放器
  • autoplay 自動播放
  • loop 循環播放
  • preload 預加載（設置 autoplay 時，此屬性將失效）

下方為使用 vue3 實現的簡易音樂播放器，相關屬性和方法詳見注釋

<script setup>
let bgMusic_ref = ref(null)function printInfo() {let musicInfo = {//currentTime 當前播放進度（單位秒s）currentTime: bgMusic_ref.value.currentTime,//duration 音頻總時長（單位秒s）duration: bgMusic_ref.value.duration}console.log(musicInfo)
}function play() {// 播放音頻bgMusic_ref.value.play()
}function pause() {// 暫停播放音頻bgMusic_ref.value.pause()
}// 重新播放音頻（從頭開始播放）
function rePlay() {// 先將當前播放進度重置為 0bgMusic_ref.value.currentTime = 0// 再播放音頻bgMusic_ref.value.play()
}
</script><template><audio ref="bgMusic_ref" controls autoplay><source src="./test.mp3" type="audio/mp3" />您的瀏覽器不支持 audio 標簽。</audio><button @click="play">播放</button><button @click="pause">暫停</button><button @click="rePlay">重新播放</button><button @click="printInfo">打印音頻信息</button>
</template>
  • 【實用技巧】下載音樂到本地電腦
    https://blog.csdn.net/weixin_41192489/article/details/122680809

video 視頻

display :inline 內聯元素

僅支持MP4、WebM、Ogg三種格式，不支持其他格式，如flv、mkv等

在這里插入圖片描述

  <video controls><source src="./test.mp4" type="video/mp4" /></video>

  • src【必要】：視頻的地址

  • controls 展示視頻播放器

  • autoplay 自動播放

  • loop 循環播放

  • preload 預加載（設置 autoplay 時，此屬性將失效）

  • 【實用技巧】下載視頻到本地電腦-CSDN博客
    https://blog.csdn.net/weixin_41192489/article/details/140223996

iframe 內嵌框架

display :inline 內聯元素

在頁面內嵌入網頁

<iframe src="https://www.w3school.com.cn/index.html"></iframe>
  • src【必要】：其他網頁的地址
    在這里插入圖片描述

表單相關標簽

button 按鈕

display :inline-block 內聯元素

<button onclick="alert('你好!')">點擊我！</button>

在這里插入圖片描述

HTML 渲染特殊字符

字符描述代碼
空格non-breaking spacing&nbsp;
<小于號less than&lt;
>大于號greater than&gt;
?版權&copy;
&和號&amp;

更多特殊字符，參考《html特殊字符的html，js，css寫法匯總》
https://www.cnblogs.com/starof/p/4718550.html

HTML 常用標簽實戰范例

頁面布局

  • vue3【實戰】語義化首頁布局-CSDN博客
    https://blog.csdn.net/weixin_41192489/article/details/140215515

  • CSS 【實戰】 “四合院”布局-CSDN博客
    https://blog.csdn.net/weixin_41192489/article/details/139243680

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/42276.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/42276.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/42276.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【高錄用、快檢索、過往5屆均已檢索、SPIE 出版】第六屆無線通信與智能電網國際會議（ICWCSG 2024）

【高錄用、快檢索、過往5屆均已檢索、SPIE 出版】第六屆無線通信與智能電網國際會議（ICWCSG 2024）

隨著科技的飛速發展和能源需求的日益增長&#xff0c;智能電網技術逐漸成為電力行業的重要發展方向。與此同時&#xff0c;無線通信技術在近年來也取得了顯著的進步&#xff0c;為智能電網的發展提供了強有力的支持。為了進一步推動無線通信與智能電網的結合與發展&#xff0c;…
閱讀更多...
Vue3 對于內嵌Iframe組件進行緩存

Vue3 對于內嵌Iframe組件進行緩存

1&#xff1a;應用場景 對于系統內所有內嵌iframe 的頁面均通過同一個路由/iframe, 在router.query內傳入不同src 參數&#xff0c;在同一組件內顯示iframe 內嵌頁面&#xff0c;對這些頁面分別進行緩存。主要是通過v-show 控制顯示隱藏從而達到iframe 緩存邏輯 2&#xff1a…
閱讀更多...
Github 2024-07-03 C開源項目日報 Top9

Github 2024-07-03 C開源項目日報 Top9

根據Github Trendings的統計，今日(2024-07-03統計)共有9個項目上榜。根據開發語言中項目的數量，匯總情況如下： 開發語言項目數量C項目9Java項目1Python項目1顯示和控制你的 Android 設備 創建周期：2416 天開發語言：C, Java協議類型：Apache License 2.0Star數量：105222 個…
閱讀更多...
學IT上培訓班真的有用嗎？

學IT上培訓班真的有用嗎？

在學習IT技術的過程中&#xff0c;你是否也被安利過各種五花八門的技術培訓班&#xff1f;這些培訓班都是怎樣向你宣傳的&#xff0c;你又對此抱有著怎樣的態度呢&#xff1f;在培訓班里學技術&#xff0c;真的有用嗎&#xff1f; 一、引入話題 IT行業是一個快速發展和不斷變化…
閱讀更多...
C++初學者指南-4.診斷---未定義行為檢測器

C++初學者指南-4.診斷---未定義行為檢測器

C初學者指南-4.診斷—未定義行為檢測器 未定義行為檢測器(UBSAN) 適用編譯器&#xff1a;clang,g在運行時檢測許多類型的未定義行為 解引用空指針從未對齊的指針讀取整數溢出被0除 … 在代碼中加入額外的指令:在調試構建中增加運行時約25% 示例&#xff1a;有符號整形溢出 …
閱讀更多...
Git在多人開發中的常見用例

Git在多人開發中的常見用例

前言 作為從一個 svn 轉過來的 git 前端開發&#xff0c;在經歷過git的各種便捷好處后&#xff0c;想起當時懵懂使用git的膽顫心驚&#xff1a;總是害怕用錯指令&#xff0c;又或者遇到報錯就慌的場景&#xff0c;想起當時查資料一看git指令這么多&#xff0c;看的頭暈眼花&am…
閱讀更多...
深度學習原理與Pytorch實戰

深度學習原理與Pytorch實戰

深度學習原理與Pytorch實戰 第2版 強化學習人工智能神經網絡書籍 python動手學深度學習框架書 TransformerBERT圖神經網絡&#xff1a; 技術講解 編輯推薦 1.基于PyTorch新版本&#xff0c;涵蓋深度學習基礎知識和前沿技術&#xff0c;由淺入深&#xff0c;通俗易懂&#xf…
閱讀更多...
家里老人能操作的電視直播軟件，目前能用的免費看直播的電視軟件app，適合電視和手機使用！

家里老人能操作的電視直播軟件，目前能用的免費看直播的電視軟件app，適合電視和手機使用！

2024年許多能看電視直播的軟件都不能用了&#xff0c;家里的老人也不會手機投屏&#xff0c;平時什么娛樂都沒有了&#xff0c;這真的太不方便了。 很多老人并不喜歡去買一個廣電的機頂盒&#xff0c;或者花錢拉有線電視。 現在的電視大多數都是智能電視&#xff0c;所以許多電…
閱讀更多...
Redis基本命令源碼解析-字符串命令

Redis基本命令源碼解析-字符串命令

1. set 用于將kv設置到數據庫中 2. mset 批量設置kv mset (msetnx) key1 value1 key2 value2 ... mset:msetCommand msetnx：msetnxCommand msetCommand和msetnxCommand都調用msetGenericCommand 2.1 msetGenericCommand 如果參數個數為偶數，則響應參數錯誤并返回 如果…
閱讀更多...
【項目日記（一）】夢幻筆耕-數據層實現

【項目日記（一）】夢幻筆耕-數據層實現

?博主主頁: 33的博客? ??文章專欄分類:項目日記?? &#x1f69a;我的代碼倉庫: 33的代碼倉庫&#x1f69a; &#x1faf5;&#x1faf5;&#x1faf5;關注我帶你了解更多項目內容 目錄 1.前言2.后端模塊3數據庫設計4.mapper實現4.1UserInfoMapper4.2BlogMapper 5.總結 1.…
閱讀更多...
硬件開發筆記（二十四）：貼片電容的類別、封裝介紹，AD21導入貼片電容、原理圖和封裝庫3D模型

硬件開發筆記（二十四）：貼片電容的類別、封裝介紹，AD21導入貼片電容、原理圖和封裝庫3D模型

若該文為原創文章&#xff0c;轉載請注明原文出處 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140241817 長沙紅胖子Qt&#xff08;長沙創微智科&#xff09;博文大全&#xff1a;開發技術集合&#xff08;包含Qt實用技術、樹莓派、三維、OpenCV…
閱讀更多...
存儲結構與管理磁盤

存儲結構與管理磁盤

前言&#xff1a;本博客僅作記錄學習使用&#xff0c;部分圖片出自網絡&#xff0c;如有侵犯您的權益&#xff0c;請聯系刪除 目錄 一、一切從“/”開始 二、物理設備的命名規則 三、文件系統與數據資料 四、掛載硬件設備 五、添加硬盤設備 六、添加交換分區 七、磁盤容…
閱讀更多...
如何在 PostgreSQL 中實現數據的增量備份和恢復？

如何在 PostgreSQL 中實現數據的增量備份和恢復？

文章目錄 一、增量備份的原理二、準備工作&#xff08;一&#xff09;環境配置&#xff08;二&#xff09;創建測試數據庫和表&#xff08;三&#xff09;插入初始數據 三、全量備份四、基于時間點的增量備份&#xff08;一&#xff09;開啟 WAL 歸檔&#xff08;二&#xff09…
閱讀更多...
政策公告與提醒

政策公告與提醒

自 2024 年 4 月 3 日起，您將至少有 30 天的時間來更新應用，使其符合下方所述的政策變更。 我們將推出“兒童安全標準”政策，規定社交應用和約會交友應用必須遵循特定標準，并在 Play 管理中心內以自行認證的形式證明合規后才能發布。 為了提高健康相關應用在 Google Play…
閱讀更多...
docker 重要且常用命令大全

docker 重要且常用命令大全

本文將總結一些常見的重要的docker命令&#xff0c;以作備忘。后續如果有新的比較常用重要的也會更新進來。歡迎補充。 docker服務管理 首先我們要解釋一下&#xff1a;systemctl和docker命令的不同 systemctl&#xff1a;是許多 Linux 發行版中默認的初始化系統和服務管理器。…
閱讀更多...
【ARMv8/v9 GIC 系列 5.4 -- 中斷分組與安全及優先級配置】

【ARMv8/v9 GIC 系列 5.4 -- 中斷分組與安全及優先級配置】

請閱讀【ARM GICv3/v4 實戰學習 】 文章目錄 Interrupt grouping and securityGICD_CTRL.DS 為0GICD_CTRL.DS 為 1中斷組優先級配置Common Binary Point Register中斷優先級與二進制點Common Binary Point RegisterInterrupt grouping and security ARM架構提供了兩種安全狀態…
閱讀更多...
11.常見的Bean后置處理器

11.常見的Bean后置處理器

CommonAnnotationBeanPostProcessor (Resource PostConstructor PreDestroy) AutowiredAnnotationBeanPostProcessor (Autowired Value) GenericApplicationContext是一個干凈的容器&#xff0c;它沒有添加任何的PostProcessor處理器。 調用GenericApplicationContext.refre…
閱讀更多...
賽元單片機開發工具SOC_Programming_Tool_Enhance_V1.50 分享

賽元單片機開發工具SOC_Programming_Tool_Enhance_V1.50 分享

下載地址&#xff1a; SOC_Programming_Tool_Enhance_V1.50(LIB0D30).rar: https://545c.com/f/45573183-1320016694-557ebd?p7526 (訪問密碼: 7526)
閱讀更多...
docker中實現多機redis主從集群

docker中實現多機redis主從集群

redis主從集群是每個使用redis的小伙伴都必需知道的&#xff0c;那如何在docker中快速配置呢&#xff1f;這篇來教你快速上手&#xff0c;跟著復制完全就能用&#xff01;&#xff01; 1. 前置準備 1.1 docker安裝 以防有小伙伴沒預先安裝docker&#xff0c;這里提供安裝步驟…
閱讀更多...
視頻共享融合賦能平臺LnyonCVS國標視頻監控平臺包含哪些功能

視頻共享融合賦能平臺LnyonCVS國標視頻監控平臺包含哪些功能

隨著國內視頻監控應用的迅猛發展&#xff0c;系統接入規模不斷擴大。不同平臺提供商的接入協議各不相同&#xff0c;導致終端制造商在終端維護時需要針對不同平臺的軟件版本提供不同的維護&#xff0c;資源造成了極大的浪費。 為響應國家對重特大事件通過視頻監控集中調閱來掌…
閱讀更多...
最新文章

Copyright @ 2022~2023