2.1標(biāo)題標(biāo)簽
? ? ? ? ?HTML標(biāo)題標(biāo)簽用于定義文檔中的標(biāo)題和子標(biāo)題。HTML提供了六個級別的標(biāo)題，分別是<h1>到<h6>，其中<h1>表示最高級別的標(biāo)題，<h6>表示最低級別的標(biāo)題。這些標(biāo)簽通常用于創(chuàng)建內(nèi)容結(jié)構(gòu)，幫助搜索引擎和讀者理解文檔的重要性和層次結(jié)構(gòu)。
下面是標(biāo)題標(biāo)簽的示例：
<h1>一級標(biāo)題</h1>
<h2>二級標(biāo)題</h2>
<h3>三級標(biāo)題</h3>
<h4>四級標(biāo)題</h4>
<h5>五級標(biāo)題</h5>
<h6>六級標(biāo)題</h6>
在HTML文檔中，標(biāo)題標(biāo)簽通常按照以下規(guī)則使用：
-
<h1>標(biāo)簽通常用于頁面主標(biāo)題，即頁面內(nèi)容的主題。 -
<h2>到<h6>標(biāo)簽用于子標(biāo)題和更小的節(jié)標(biāo)題，它們可以嵌套使用，以創(chuàng)建文檔的結(jié)構(gòu)和層次。
標(biāo)題標(biāo)簽不僅在視覺上呈現(xiàn)大小不同的文本，而且在SEO（搜索引擎優(yōu)化）中也扮演著重要角色。搜索引擎使用標(biāo)題標(biāo)簽來確定頁面內(nèi)容的主題和結(jié)構(gòu)，因此它們對于提高頁面在搜索結(jié)果中的排名非常重要。
在使用標(biāo)題標(biāo)簽時，應(yīng)該遵循以下最佳實踐：
- 只使用一個
<h1>標(biāo)簽作為頁面的主標(biāo)題。 - 按照邏輯層次結(jié)構(gòu)使用
<h2>到<h6>標(biāo)簽。 - 避免跳過標(biāo)題級別，以保持內(nèi)容的邏輯流動。
- 不要僅為了文本的大小或加粗而使用標(biāo)題標(biāo)簽，應(yīng)該基于內(nèi)容的結(jié)構(gòu)使用它們。
正確使用標(biāo)題標(biāo)簽可以提高網(wǎng)頁的可訪問性和用戶體驗，同時也有助于搜索引擎更好地理解和索引你的網(wǎng)頁內(nèi)容。
2.2段落標(biāo)簽
? ? ? ? HTML段落標(biāo)簽，即<p>標(biāo)簽，用于定義文檔中的段落。它是HTML文檔中最常見的文本容器元素之一。瀏覽器會在段落之間自動添加一些空白，以便于讀者閱讀。
以下是段落標(biāo)簽的基本用法：
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
在HTML文檔中，每個段落都應(yīng)該使用<p>標(biāo)簽來定義。當(dāng)你開始一個新的段落時，你應(yīng)該關(guān)閉前一個段落標(biāo)簽并開始一個新的<p>標(biāo)簽。
段落標(biāo)簽的一些特點包括：
- 瀏覽器會在段落之間添加垂直空白，通常比文本行高要大，以便于區(qū)分不同的段落。
- 段落的內(nèi)容會從新的一行開始，并且左右兩邊會有一定的邊距。
- 段落內(nèi)的文本會自動換行，如果文本過長，會自動調(diào)整到下一行。
- 段落可以包含文本、鏈接、圖片、列表等其他HTML元素。
在使用<p>標(biāo)簽時，應(yīng)該遵循以下最佳實踐：
- 不要使用
<p>標(biāo)簽僅僅為了添加空白或進(jìn)行格式化，它應(yīng)該用于定義文本的段落。 - 避免在
<p>標(biāo)簽內(nèi)部使用空段落（只有空白或不可見的字符），這可能會導(dǎo)致不必要的垂直空白。 - 確保每個段落都有明確的主題和內(nèi)容，這有助于提高文檔的可讀性。
正確使用段落標(biāo)簽可以幫助創(chuàng)建結(jié)構(gòu)清晰、易于閱讀的網(wǎng)頁內(nèi)容。
2.3換行標(biāo)簽
? ? ? ? 在HTML中，換行標(biāo)簽用于在不創(chuàng)建新段落的情況下強(qiáng)制文本換行。這可以通過使用<br>標(biāo)簽來實現(xiàn)。<br>是一個空標(biāo)簽，意味著它不需要閉合標(biāo)簽。
下面是換行標(biāo)簽的基本用法：
<p>這是一段文本。<br>這里強(qiáng)制換行。</p>
在這個例子中，<br>標(biāo)簽告訴瀏覽器在"這是一段文本"和"這里強(qiáng)制換行"之間插入一個換行符，但它們?nèi)匀粚儆谕粋€段落。
<br>標(biāo)簽應(yīng)該謹(jǐn)慎使用，因為它會創(chuàng)建一個硬換行，這可能會在不同大小的屏幕或設(shè)備上導(dǎo)致不一致的布局。通常，最好使用CSS樣式來控制文本的布局和換行，而不是依賴于<br>標(biāo)簽。例如，可以使用CSS的white-space屬性來控制文本中的空白和換行。
然而，在某些情況下，例如詩歌、地址或簡歷中的簡短列表，使用<br>標(biāo)簽可能是合適的，因為它可以保持文本的簡短和簡潔，同時確保信息以期望的方式呈現(xiàn)。
在使用<br>標(biāo)簽時，應(yīng)該遵循以下最佳實踐：
- 不要過度使用
<br>標(biāo)簽，這可能會導(dǎo)致頁面布局混亂。 - 考慮使用CSS來控制文本的換行和布局，以實現(xiàn)更好的響應(yīng)式設(shè)計。
- 在需要手動控制文本換行的地方使用
<br>標(biāo)簽，例如在詩歌或地址中。
正確使用換行標(biāo)簽可以幫助你在網(wǎng)頁中創(chuàng)建更精確的文本布局。
2.4列表標(biāo)簽
? ? ? ? HTML 提供了多種列表標(biāo)簽，用于在網(wǎng)頁中創(chuàng)建不同類型的列表。主要有三種類型的列表：無序列表、有序列表和定義列表。
-
無序列表（Unordered Lists）：用于創(chuàng)建沒有特定順序的列表。無序列表使用
<ul>標(biāo)簽定義，列表項使用<li>標(biāo)簽。瀏覽器通常會在每個列表項前顯示一個圓點。<ul> <li>蘋果</li> <li>香蕉</li> <li>橙子</li> </ul> -
有序列表（Ordered Lists）：用于創(chuàng)建有特定順序的列表。有序列表使用
<ol>標(biāo)簽定義，列表項同樣使用<li>標(biāo)簽。瀏覽器通常會在每個列表項前顯示一個數(shù)字或字母。<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol> -
定義列表（Description Lists）：用于創(chuàng)建術(shù)語及其定義的列表。定義列表使用
<dl>標(biāo)簽定義，術(shù)語使用<dt>標(biāo)簽，定義使用<dd>標(biāo)簽。<dl> <dt>HTML</dt> <dd>超文本標(biāo)記語言，用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。</dd> <dt>CSS</dt> <dd>層疊樣式表，用于描述網(wǎng)頁的視覺效果和布局。</dd> </dl>列表可以嵌套，即在一個列表項中包含另一個列表。例如，一個無序列表中可以包含一個有序列表，反之亦然。
<ul>
<li>水果
<ul>
<li>蘋果</li>
<li>香蕉</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>菠菜</li>
<li>胡蘿卜</li>
</ul>
</li>
</ul>
2.5超鏈接標(biāo)簽
? ? ? ? 在HTML中，超鏈接是通過<a>標(biāo)簽創(chuàng)建的，它允許用戶點擊跳轉(zhuǎn)到其他網(wǎng)頁、文件、位置或任何其他資源。<a>標(biāo)簽是錨點（anchor）的縮寫，它可以是外部鏈接、內(nèi)部鏈接、錨點鏈接或下載鏈接等。
以下是超鏈接標(biāo)簽的基本用法：
<a href="目標(biāo)網(wǎng)址或路徑">鏈接文本</a>
例如，創(chuàng)建一個指向外部網(wǎng)站的鏈接：
<a >訪問 Example 網(wǎng)站</a>
或者，創(chuàng)建一個指向同一網(wǎng)站內(nèi)部頁面的鏈接：
<a href="about.html">關(guān)于我們</a>
超鏈接的一些重要屬性包括：
-
href：指定鏈接的目標(biāo)URL或路徑。 -
target：指定鏈接如何打開（例如，_blank在新窗口中打開鏈接）。 -
title：提供鏈接的額外信息，通常以工具提示的形式顯示。 -
rel：指定鏈接與當(dāng)前文檔的關(guān)系（例如，nofollow告訴搜索引擎不要跟蹤鏈接）。
除了鏈接到其他網(wǎng)頁，<a>標(biāo)簽還可以用于創(chuàng)建錨點，允許用戶跳轉(zhuǎn)到同一頁面的不同部分。這需要為鏈接指定一個#加上錨點名稱，并在頁面的相應(yīng)位置使用id屬性創(chuàng)建一個錨點。
例如，創(chuàng)建一個錨點鏈接：
<a href="#section1">跳轉(zhuǎn)到第一部分</a>
...
<h2 id="section1">第一部分</h2>
在這個例子中，點擊“跳轉(zhuǎn)到第一部分”的鏈接會將用戶帶到頁面中id為section1的元素位置。
超鏈接是網(wǎng)頁的核心功能之一，它們使得萬維網(wǎng)成為互聯(lián)的網(wǎng)絡(luò)。正確使用超鏈接可以提高用戶體驗，幫助用戶導(dǎo)航和探索網(wǎng)站內(nèi)容。
2.6多媒體標(biāo)簽
? ? ? ? HTML 提供了多種標(biāo)簽用于嵌入多媒體內(nèi)容，如圖片、音頻和視頻。這些標(biāo)簽允許你在網(wǎng)頁中輕松地添加和展示各種媒體元素。
1.圖片標(biāo)簽（Image）：<img>標(biāo)簽用于嵌入圖片。它是一個空標(biāo)簽，意味著它不需要閉合標(biāo)簽。<img>標(biāo)簽的主要屬性是src，用于指定圖片文件的URL路徑，以及alt，用于提供圖片的替代文本，這在圖片無法顯示時非常有用。
<img src="image.jpg" alt="描述圖片內(nèi)容" width="300" height="200">
2.音頻標(biāo)簽（Audio）：<audio>標(biāo)簽用于嵌入音頻內(nèi)容。它可以包含多個<source>子標(biāo)簽，以便提供不同格式的音頻文件，以確保兼容性。<audio>標(biāo)簽支持多種音頻格式，如MP3、WAV和Ogg。
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的瀏覽器不支持音頻元素。
</audio>
3.視頻標(biāo)簽（Video）：<video>標(biāo)簽用于嵌入視頻內(nèi)容。與<audio>標(biāo)簽類似，<video>標(biāo)簽也可以包含多個<source>子標(biāo)簽，以支持不同的視頻格式。常見的視頻格式包括MP4、WebM和Ogg。<video>標(biāo)簽還提供了播放控件，如播放、暫停和音量控制。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持視頻元素。
</video>
2.7表格標(biāo)簽（重點）
在HTML中，表格是通過一系列相關(guān)的標(biāo)簽來創(chuàng)建的，用于展示數(shù)據(jù)和信息。以下是創(chuàng)建表格的基本標(biāo)簽：
-
表格標(biāo)簽（Table）：
<table>標(biāo)簽用于定義一個表格。它是表格的容器，所有的表格內(nèi)容都應(yīng)該放在這個標(biāo)簽內(nèi)。 -
表格行標(biāo)簽（Table Row）：
<tr>標(biāo)簽用于定義表格中的一行。每一行可以包含一個或多個單元格。 -
表格單元格標(biāo)簽（Table Data）：
<td>標(biāo)簽用于定義表格中的一個單元格。它通常位于<tr>標(biāo)簽內(nèi)，每個單元格可以包含文本、圖片或其他HTML元素。 -
表格頭部單元格標(biāo)簽（Table Header）：
<th>標(biāo)簽用于定義表格的表頭單元格。它通常用于表格的第一行，用于表示列標(biāo)題。<th>單元格通常呈現(xiàn)為居中和加粗的文本。 -
表格標(biāo)題標(biāo)簽（Table Caption）：
<caption>標(biāo)簽用于定義表格的標(biāo)題。它應(yīng)該放在<table>標(biāo)簽內(nèi)，緊跟在<table>標(biāo)簽之后。
下面是一個簡單的表格示例：
<table>
<caption>產(chǎn)品列表</caption>
<tr>
<th>產(chǎn)品名稱</th>
<th>價格</th>
<th>庫存</th>
</tr>
<tr>
<td>蘋果</td>
<td>$1.00</td>
<td>100</td>
</tr>
<tr>
<td>香蕉</td>
<td>$0.50</td>
<td>200</td>
</tr>
<tr>
<td>橙子</td>
<td>$0.75</td>
<td>150</td>
</tr>
</table>
在HTML5中，還可以使用<thead>、<tbody>和<tfoot>標(biāo)簽來分別定義表格的表頭、主體和表腳部分。這些標(biāo)簽有助于更好地組織表格結(jié)構(gòu)，尤其是在大型表格或需要分頁顯示的表格中。
<table>
<thead>
<tr>
<th>產(chǎn)品名稱</th>
<th>價格</th>
<th>庫存</th>
</tr>
</thead>
<tbody>
<tr>
<td>蘋果</td>
<td>$1.00</td>
<td>100</td>
</tr>
<tr>
<td>香蕉</td>
<td>$0.50</td>
<td>200</td>
</tr>
<tr>
<td>橙子</td>
<td>$0.75</td>
<td>150</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">總庫存：450</td>
</tr>
</tfoot>
</table>
2.8表單標(biāo)簽（重點）
在HTML中，表單用于收集用戶輸入的數(shù)據(jù)，如用戶信息、選擇、文件上傳等。表單標(biāo)簽定義了表單的 structure 和不同類型的輸入字段。以下是一些常用的表單標(biāo)簽：
1.表單標(biāo)簽（Form）：<form>標(biāo)簽用于定義一個表單。它是一個容器標(biāo)簽，所有的表單元素都應(yīng)該放在這個標(biāo)簽內(nèi)。<form>標(biāo)簽有兩個重要的屬性：action和method。action屬性指定了表單數(shù)據(jù)提交到的URL，而method屬性定義了數(shù)據(jù)提交的方式（通常是GET或POST）。
<form action="submit.php" method="post">
<!-- 表單元素 -->
</form>
2.輸入標(biāo)簽（Input）：<input>標(biāo)簽是最常用的表單元素，用于創(chuàng)建各種類型的輸入字段，如文本框、密碼框、單選按鈕、復(fù)選框、隱藏字段等。type屬性用于指定輸入字段的類型。
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="密碼">
<input type="submit" value="提交">
3.文本域（Textarea）：<textarea>標(biāo)簽用于創(chuàng)建一個多行文本輸入字段，允許用戶輸入更多文本。
<textarea name="message" rows="4" cols="50">請輸入您的留言</textarea>
4.選擇標(biāo)簽（Select）：<select>標(biāo)簽用于創(chuàng)建一個下拉列表，允許用戶從預(yù)定義的選項中選擇一個或多個值。
<select name="cars">
<option value="volvo">沃爾沃</option>
<option value="saab">薩博</option>
<option value="mercedes">奔馳</option>
<option value="audi">奧迪</option>
</select>
5.單選按鈕（Radio Button）：<input type="radio">標(biāo)簽用于創(chuàng)建單選按鈕，允許用戶從多個選項中選擇一個。
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
6.復(fù)選框（Checkbox）：<input type="checkbox">標(biāo)簽用于創(chuàng)建復(fù)選框，允許用戶從多個選項中選擇多個。
<input type="checkbox" name="vehicle" value="Bike"> 自行車
<input type="checkbox" name="vehicle" value="Car"> 汽車
7.按鈕（Button）：<button>標(biāo)簽用于創(chuàng)建一個按鈕，可以與JavaScript一起使用來執(zhí)行客戶端腳本。
<button type="button" onclick="alert('點擊了按鈕')">點擊我</button>
8.標(biāo)簽（Label）：<label>標(biāo)簽用于關(guān)聯(lián)表單元素與文本標(biāo)簽，提高表單的可訪問性。
<label for="username">用戶名：</label>
<input type="text" id="username" name="username">
9.字段集（Fieldset）：<fieldset>標(biāo)簽用于將表單內(nèi)的相關(guān)元素分組，通常與<legend>標(biāo)簽一起使用來提供分組標(biāo)題。
<fieldset>
<legend>個人資料</legend>
<!-- 個人資料相關(guān)的表單元素 -->
</fieldset>
2.9布局相關(guān)標(biāo)簽
? ? ? ?在HTML中，布局相關(guān)標(biāo)簽用于創(chuàng)建網(wǎng)頁的布局結(jié)構(gòu)，包括導(dǎo)航欄、側(cè)邊欄、內(nèi)容區(qū)域、頁腳等。這些標(biāo)簽可以幫助你組織網(wǎng)頁的內(nèi)容，使其更具結(jié)構(gòu)和可讀性。以下是一些常用的布局相關(guān)標(biāo)簽：
1.<header>：<header>標(biāo)簽用于定義頁面的頭部區(qū)域，通常包含標(biāo)題、導(dǎo)航鏈接、搜索框等。
<header>
<h1>網(wǎng)站標(biāo)題</h1>
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關(guān)于我們</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>
</nav>
</header>
2.<nav>：<nav>標(biāo)簽用于定義頁面上的導(dǎo)航鏈接部分，通常包含一個或多個導(dǎo)航欄。
<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#about">關(guān)于我們</a></li>
<li><a href="#contact">聯(lián)系我們</a></li>
</ul>
</nav>
3.<section>：<section>標(biāo)簽用于定義頁面中的一個區(qū)域，它可以包含多個段落、標(biāo)題、圖片等。
<section>
<h2>文章標(biāo)題</h2>
<p>這是文章內(nèi)容。</p>
</section>
4.<article>：<article>標(biāo)簽用于定義頁面中的獨立內(nèi)容，例如博客文章、論壇帖子等。
<article>
<h2>博客標(biāo)題</h2>
<p>這是博客內(nèi)容。</p>
</article>
5.<aside>：<aside>標(biāo)簽用于定義頁面中的側(cè)邊欄或相關(guān)內(nèi)容區(qū)域，通常包含廣告、側(cè)邊欄導(dǎo)航等。
<aside>
<h3>側(cè)邊欄標(biāo)題</h3>
<p>這是側(cè)邊欄內(nèi)容。</p>
</aside>
6.<footer>：<footer>標(biāo)簽用于定義頁面的頁腳區(qū)域，通常包含版權(quán)信息、聯(lián)系信息、鏈接到其他頁面的鏈接等。文章來源：http://www.zghlxwxcb.cn/news/detail-853270.html
<footer>
<p>© 2023 版權(quán)所有。</p>
</footer>
7.<div>：<div>標(biāo)簽是一個通用容器標(biāo)簽，用于定義頁面中的一個區(qū)域。它通常用于布局和樣式。文章來源地址http://www.zghlxwxcb.cn/news/detail-853270.html
<div class="container">
<!-- 容器內(nèi)的內(nèi)容 -->
</div>
到了這里，關(guān)于HTML&CSS(二）---HTML常見標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)16（HTML5、CSS3、JavaScript ）表格課后練習(xí)網(wǎng)頁標(biāo)題：域標(biāo)簽的使用網(wǎng)頁標(biāo)題：美家裝飾聯(lián)系我們網(wǎng)頁標(biāo)題：登錄界面網(wǎng)頁標(biāo)題問卷調(diào)查——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/01/820808-1.png)
