一、 HTML5介紹
- HTML5是什么？
HTML5是超文本標(biāo)記語言（HTML）的第五個(gè)主要版本，用于描述網(wǎng)頁(yè)結(jié)構(gòu)和呈現(xiàn)內(nèi)容。它是到目前為止最新且最強(qiáng)大的HTML版本。
- HTML5語法約定
1.標(biāo)簽是HTML語法中的基本單位，由尖括號(hào) ?<>? 包圍，每個(gè)標(biāo)簽通常有一個(gè)起始標(biāo)簽（opening tag）和一個(gè)結(jié)束標(biāo)簽（closing tag），二者以斜杠 ?/? 分隔?。
2.HTML文檔必須以 ?? 聲明開始，這指明文檔類型為HTML5。
3.布局和結(jié)構(gòu)應(yīng)使用適當(dāng)?shù)臉?biāo)簽，如 ??標(biāo)簽用于定義HTML文檔的根元素，??標(biāo)簽用于包含網(wǎng)頁(yè)頭部信息，而 ?? 標(biāo)簽則用于包含頁(yè)面主體內(nèi)容。
4.除特殊情況外，標(biāo)簽通常以嵌套的方式使用，以說明標(biāo)簽之間的層次結(jié)構(gòu)。
- HTML5基礎(chǔ)結(jié)構(gòu)
<!DOCTYPE html>文檔類型（Document Type Declaration，簡(jiǎn)稱DTD）： DTD是位于HTML文檔頂部的聲明，用于指定HTML的版本和DTD規(guī)范。它向?yàn)g覽器和驗(yàn)證工具表明文檔所使用的標(biāo)記語言，并幫助瀏覽器正確解析和渲染網(wǎng)頁(yè)。
<html>標(biāo)簽：<html>標(biāo)簽是HTML文檔的根元素，它將整個(gè)文檔內(nèi)容包含在內(nèi)。它是所有其他HTML元素的父元素。通常情況下，一個(gè)HTML文檔應(yīng)該以<html>標(biāo)簽開始并以</html>標(biāo)簽結(jié)束。
<head>標(biāo)簽：<head>標(biāo)簽是HTML文檔的頭部部分，用于包含一些元數(shù)據(jù)和其他重要配置信息，不會(huì)在頁(yè)面中直接顯示給用戶。一些常見的<head>標(biāo)簽內(nèi)容包括：
<meta charset="UTF-8">：設(shè)置字符編碼為UTF-8，確保頁(yè)面正常顯示漢字和特殊字符。<title>：定義網(wǎng)頁(yè)的標(biāo)題，顯示在瀏覽器的標(biāo)題欄或標(biāo)簽頁(yè)上。- 鏈接外部CSS和JavaScript文件：可以使用
<link>標(biāo)簽來引入外部樣式表（CSS文件），以及使用<script>標(biāo)簽引入外部的JavaScript文件。- 其他元信息，如
<meta name="description" content="網(wǎng)頁(yè)描述">和<meta name="keywords" content="關(guān)鍵詞1, 關(guān)鍵詞2">等用于搜索引擎優(yōu)化（SEO）的信息。
<body>標(biāo)簽：<body>標(biāo)簽是HTML文檔的主體內(nèi)容區(qū)域，它包含了實(shí)際顯示給用戶的所有內(nèi)容，如文本、圖片、鏈接、音頻、視頻等。在<body>標(biāo)簽內(nèi)編寫網(wǎng)頁(yè)的可見內(nèi)容，這些內(nèi)容將會(huì)在瀏覽器中呈現(xiàn)給用戶。
注釋：使用<!-- -->可以添加注釋，注釋不會(huì)顯示在頁(yè)面上，而是用于描述HTML代碼。
- HTML5基礎(chǔ)標(biāo)簽
<h1>到<h6>：用于創(chuàng)建標(biāo)題，h1是最高級(jí)標(biāo)題，依次類推。
<p>：用于創(chuàng)建段落。
<a>：創(chuàng)建鏈接，可以使用href屬性指定鏈接的URL地址。
<img>：用于插入圖像，在src屬性中指定圖像的URL地址。
<ul>和<li>：分別用于定義無序列表和列表項(xiàng)。
<ol>和<li>：分別用于定義有序列表和列表項(xiàng)。
<div>：用于創(chuàng)建塊級(jí)容器，用于組織和樣式化頁(yè)面結(jié)構(gòu)。
<span>：用于創(chuàng)建行內(nèi)容器，用于設(shè)置樣式和包裝文本片段。
<form>：用于創(chuàng)建表單，收集用戶輸入的數(shù)據(jù)。
<input>：用于在表單中創(chuàng)建輸入字段，可以包括文本輸入框、單選按鈕、復(fù)選框等。
<button>：創(chuàng)建按鈕，用于觸發(fā)特定的操作。
<table>、<tr>、<td>：分別用于定義表格、表格行和表格單元格。
<video>：用于在頁(yè)面上播放視頻，通過src屬性指定視頻的URL。
<audio>：用于在頁(yè)面上播放音頻，通過src屬性指定音頻的URL。
二、 列表標(biāo)簽
<ul>,<ol>, 和<dl>是HTML中用于創(chuàng)建列表的三種不同類型的標(biāo)簽。它們?cè)诓煌膱?chǎng)合下使用：
-
<ul>(unordered list - 無序列表)：- 使用無特定順序的項(xiàng)目列表時(shí)，像一組相關(guān)的項(xiàng)目、選項(xiàng)或簡(jiǎn)單的列表等。
- 常見的應(yīng)用場(chǎng)景包括導(dǎo)航菜單、任務(wù)列表和項(xiàng)目清單。
示例：
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
-
<ol>(ordered list - 有序列表)：- 使用有特定順序的項(xiàng)目列表、需要按順序編號(hào)/計(jì)數(shù)的元素或順序排列的信息等。
- 常見的應(yīng)用場(chǎng)景包括步驟指南、教程說明、排行榜等。
示例：
<ol>
<li>步驟1</li>
<li>步驟2</li>
<li>步驟3</li>
</ol>
-
<dl>(description list - 描述列表)：- 使用于一組描述術(shù)語和其對(duì)應(yīng)的定義/描述之間的關(guān)系，表示術(shù)語及其解釋或說明等。
- 常見的應(yīng)用場(chǎng)景包括詞匯表、定義術(shù)語的頁(yè)面、技術(shù)文檔中的參數(shù)描述等。
示例：
<dl>
<dt>術(shù)語1：</dt>
<dd>描述1</dd>
<dt>術(shù)語2：</dt>
<dd>描述2</dd>
</dl>
<ul>和<li>標(biāo)簽嵌套使用的規(guī)則：
-
<li>只能作為<ul>或<ol>標(biāo)簽的直接子元素：<li>標(biāo)簽只能作為無序列表(<ul>)或有序列表(<ol>)的直接子元素出現(xiàn)。不能將<li>標(biāo)簽放在其他元素（如段落<p>）內(nèi)部作為子元素。
示例：
<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
</ul>
<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
</ol>
- 可嵌套列表項(xiàng)：
<li>標(biāo)簽允許嵌套另一個(gè)列表結(jié)構(gòu)，無論是有序列表(<ol>)還是無序列表(<ul>)，即在<li>內(nèi)部再次使用<ul>或<ol>。
示例：
<ul>
<li>列表項(xiàng)1</li>
<li>
列表項(xiàng)2
<ul>
<li>嵌套列表項(xiàng)1</li>
<li>嵌套列表項(xiàng)2</li>
</ul>
</li>
</ul>
- ul和ol的常見屬性有：
-
type：指定有序列表(<ol>)的計(jì)數(shù)器樣式，在無序列表(<ul>)上沒有用。常用的值有：-
"1"：阿拉伯?dāng)?shù)字（默認(rèn)值）。 -
"a"：小寫英文字母。 -
"A"：大寫英文字母。 -
"i"：小寫羅馬數(shù)字。 -
"I"：大寫羅馬數(shù)字。
-
示例：
<ol type="A">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ol>
-
start：指定有序列表(<ol>)起始項(xiàng)的值，可設(shè)置一個(gè)開始的整數(shù)值。默認(rèn)情況下，從"1"開始。適用于重新開始編號(hào)的列表情況。
示例：
<ol start="3">
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ol>
-
reversed：為有序列表(<ol>)啟用反向計(jì)數(shù)，即列表按降序進(jìn)行計(jì)數(shù)。默認(rèn)情況下，值為"false"。
示例：
<ol reversed>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ol>
三、 多媒體標(biāo)簽
-
如何正確地在網(wǎng)頁(yè)中插入圖片，它有哪些常見屬性？
要在網(wǎng)頁(yè)中插入圖片，使用<img>標(biāo)簽。
<img src="imageURL" alt="description">
-
src屬性：用于指定圖片的URL地址。它可以引用外部圖片資源（絕對(duì)或相對(duì)URL）或者內(nèi)嵌的Base64編碼數(shù)據(jù)。 -
alt屬性（可選）：用于提供圖片的替代文本。當(dāng)圖片無法加載時(shí)，或?yàn)榱俗屍聊婚喿x器用戶了解圖像的內(nèi)容時(shí)，替代文本會(huì)顯示出來。
示例：
<img src="https://example.com/image.jpg" alt="Beautiful scenery">
與圖像相關(guān)的屬性：
width和height屬性：用于指定圖像的顯示寬度和高度?？梢允褂霉潭ǖ南袼刂担部梢允褂冒俜直鹊葐挝?。
title屬性：提供一個(gè)鼠標(biāo)懸停在圖像上時(shí)顯示的標(biāo)題文本。當(dāng)鼠標(biāo)懸停在圖片上時(shí)，瀏覽器通常會(huì)顯示一個(gè)工具提示框來展示該標(biāo)題信息。
loading屬性：指定圖像載入的行為。有值"lazy"時(shí)，圖像將以延遲加載的方式載入，可以提高頁(yè)面加載性能。有值"eager"時(shí)，圖像會(huì)立即開始載入。
decoding屬性：指定瀏覽器解碼圖像的行為。有值"async"時(shí)，圖像將以異步方式解碼，可以加快頁(yè)面加載速度。
sizes屬性：用于指定圖像在不同屏幕尺寸和布局上顯示時(shí)該采用的大小。它通常與斷點(diǎn)容器（<picture>）一起使用。
- 如何在網(wǎng)頁(yè)上插入音頻和視頻？
在網(wǎng)頁(yè)上插入音頻和視頻，使用<audio>和<video>標(biāo)簽
- 插入音頻：
<audio src="audio.mp3" controls></audio>
src屬性指定音頻文件的URL地址，它可以是一個(gè)相對(duì)或絕對(duì)的URL。controls屬性用于顯示音頻控制器，這樣用戶就可以播放、暫停、調(diào)整音量等。
- 插入視頻：
<video src="video.mp4" controls width="640" height="480"></video>
src屬性指定視頻文件的URL地址，可以使用相對(duì)或絕對(duì)的URL。controls屬性用于顯示視頻控制器。width和height屬性可設(shè)置視頻的顯示寬度和高度（以像素為單位）。
如果想要支持不同瀏覽器之間的多種媒體格式，可以使用<source>標(biāo)簽在<audio>或<video>元素內(nèi)指定多種媒體源示例：
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<!-- 可以添加更多媒體源 -->
</video>
- 相對(duì)路徑和絕對(duì)路徑是什么意思？
在Web開發(fā)中，相對(duì)路徑和絕對(duì)路徑是用來引用文件或資源的兩種不同方式。
相對(duì)路徑：相對(duì)路徑是一個(gè)相對(duì)于當(dāng)前文檔所在位置的路徑。它描述了目標(biāo)資源到當(dāng)前文檔的相對(duì)位置關(guān)系。相對(duì)路徑可以使用以下方式來表示：
../：父級(jí)目錄。./或省略：當(dāng)前目錄。- 文件名：目標(biāo)文件所在的相對(duì)路徑。
示例：
<img src="../images/example.jpg">：引用當(dāng)前文檔上一級(jí)目錄下的images文件夾中的example.jpg圖像。<link href="./styles.css" rel="stylesheet">：引用與當(dāng)前文檔相同目錄下的styles.css樣式表文件。
- 絕對(duì)路徑：絕對(duì)路徑是指完整的文件或資源引用路徑，從根目錄（通常是網(wǎng)站主目錄）開始的定位方式。沒有相對(duì)路徑的變動(dòng)，始終從相同的起點(diǎn)出發(fā)。
絕對(duì)路徑一般包含完整的URL，如
https://example.com/images/example.jpg或服務(wù)器本地的物理路徑（如/var/www/html/images/example.jpg）等。選擇相對(duì)路徑還是絕對(duì)路徑取決于具體情況和需求：
相對(duì)路徑適合用于文件內(nèi)部資源引用，尤其是在訪問使用相對(duì)路徑的網(wǎng)站時(shí)，無論是調(diào)試、開發(fā)還是遷移部署，都能保持正確的引用關(guān)系。
絕對(duì)路徑通常用于引用其他域名或不同服務(wù)器上的資源，但在遷移部署時(shí)可能需要更新路徑。
四、語義化標(biāo)簽
HTML5引入了一些語義化標(biāo)簽，用于更清晰地描述網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容的含義，提高頁(yè)面的可讀性、可訪問性以及搜索引擎優(yōu)化。
<header>：定義文檔或節(jié)的頁(yè)眉。常用于放置標(biāo)題、導(dǎo)航欄和引導(dǎo)元素。
<nav>：定義頁(yè)面的導(dǎo)航部分，通常包含鏈接、菜單或?qū)Ш焦δ堋?/p>
<main>：定義文檔或節(jié)的主要內(nèi)容，一個(gè)頁(yè)面只能擁有一個(gè)<main>標(biāo)簽。它用于標(biāo)識(shí)網(wǎng)頁(yè)的首要內(nèi)容區(qū)域。
<article>：定義獨(dú)立的、完整的文章或單獨(dú)的內(nèi)容塊。常用于博客帖子、新聞文章和獨(dú)立內(nèi)容的組織。
<section>：定義文檔的獨(dú)立部分或特定的內(nèi)容區(qū)塊。它可以是一組相關(guān)的內(nèi)容的容器。
<aside>：定義頁(yè)面的附屬內(nèi)容區(qū)域，通常放置在主要內(nèi)容之旁邊，用作補(bǔ)充說明或其他次要信息。
<footer>：定義文檔或節(jié)的頁(yè)腳。通常用于存放版權(quán)信息、聯(lián)系方式或相關(guān)鏈接等。
<figure>：定義自包含的獨(dú)立媒體元素，通常用于包裝圖片、插圖、圖表或類似對(duì)象。
<figcaption>：定義與<figure>元素相關(guān)聯(lián)的標(biāo)題或說明。
<time>：定義日期或時(shí)間。常用于表示發(fā)布日期、事件時(shí)間等具有時(shí)間語義的內(nèi)容。
五、 表單標(biāo)簽
HTML5引入了一些新的表單標(biāo)簽，以及增強(qiáng)了現(xiàn)有標(biāo)簽的功能。以下是HTML5中常見的表單標(biāo)簽：
<input>：用于創(chuàng)建多種輸入字段。
type屬性的新值：
date：指定輸入為日期。url：指定輸入為URL地址。tel：指定輸入為電話號(hào)碼。number：指定輸入為數(shù)值。search：指定輸入為搜索。color：指定輸入為顏色選擇器。range：指定輸入為范圍選擇器。file：用于上傳文件等。
<textarea>：用于創(chuàng)建多行文本輸入字段，允許用戶輸入多行文本。
<select>：創(chuàng)建下拉選擇列表。
<option>：在<select>標(biāo)簽內(nèi)使用，定義下拉選擇列表的選項(xiàng)。
<datalist>：定義預(yù)定義選項(xiàng)列表，與輸入字段聯(lián)動(dòng)。
<option>：在<datalist>標(biāo)簽內(nèi)使用，定義預(yù)定義選項(xiàng)。
<output>：用于顯示計(jì)算或腳本輸出的結(jié)果。
for屬性：關(guān)聯(lián)到與之相關(guān)的表單字段。
<progress>：表示任務(wù)的完成進(jìn)度。
value屬性：表示已完成的進(jìn)度值。max屬性：表示總進(jìn)度的最大值。
<meter>：表示某種標(biāo)準(zhǔn)度量的值。
value屬性：表示度量值。min屬性：表示最小值。max屬性：表示最大值。還有一些新增的表單屬性用于增強(qiáng)和完善表單的功能，例如：
required：表單字段為必填字段。placeholder：作為輸入字段的提示文本。autocomplete：?jiǎn)⒂没蚪帽韱巫侄蔚淖詣?dòng)填充功能。
六、表格標(biāo)簽
HTML5提供了一些新的表格標(biāo)簽，以增強(qiáng)和語義化網(wǎng)頁(yè)中表格的結(jié)構(gòu)。以下是HTML5中常見的表格標(biāo)簽：
<table>：用于創(chuàng)建表格。
- 可以包含多個(gè)
<tr>元素來表示行。- 可以在行內(nèi)包含
<th>(表頭單元格)或<td>(數(shù)據(jù)單元格) 元素。
<thead>：用于定義表格的標(biāo)頭部分。
- 包含一個(gè)或多個(gè)
<tr>元素。
<tbody>：用于定義表格的主體部分。
- 包含一個(gè)或多個(gè)
<tr>元素。
<tfoot>：用于定義表格的頁(yè)腳部分。
- 包含一個(gè)或多個(gè)
<tr>元素。
<th>：用于定義表格的表頭單元格。
- 通常出現(xiàn)在
<thead>或<tfoot>區(qū)域中。- 用于標(biāo)識(shí)一個(gè)列或多列的標(biāo)題。
<td>：用于定義表格的數(shù)據(jù)單元格。
- 出現(xiàn)在
<tr>中。- 包含實(shí)際數(shù)據(jù)或其他內(nèi)容。
示例代碼如下所示：文章來源：http://www.zghlxwxcb.cn/news/detail-533880.html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>職業(yè)</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三</td>
<td>25</td>
<td>工程師</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>設(shè)計(jì)師</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">總?cè)藬?shù)：2</td>
</tr>
</tfoot>
</table>
上述示例展示了一個(gè)簡(jiǎn)單的表格結(jié)構(gòu)，其中包含了表頭、數(shù)據(jù)行以及頁(yè)腳。注意<colspan> 屬性 ，這個(gè)屬性用于定義單元格橫跨的列數(shù)。文章來源地址http://www.zghlxwxcb.cn/news/detail-533880.html
到了這里，關(guān)于HTML5基礎(chǔ)語法與標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
