HTML 基礎(chǔ)知識(shí)

1. HTML 是什么？

HTML 是 HyperText Markup Language （超文本標(biāo)記語(yǔ)言）的簡(jiǎn)稱，是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。

HTML 用于定義網(wǎng)頁(yè)的結(jié)構(gòu)，通過(guò)使用標(biāo)簽和屬性來(lái)展示文字、圖片、視頻、音頻等媒體內(nèi)容，讓網(wǎng)頁(yè)呈現(xiàn)出良好的閱讀和交互體驗(yàn)。

2. HTML 的起源和發(fā)展

HTML 最早由蒂姆·伯納斯-李（Tim Berners-Lee）于1989年在瑞士的歐洲核子研究中心（CERN）創(chuàng)建，并于1991年首次公開發(fā)布。

HTML 隨著 Web 技術(shù)的快速發(fā)展，經(jīng)過(guò)多次規(guī)范更新和更新版本，如 HTML 2.0 、HTML 3.2、HTML 4.01 和 XHTML 1.0、HTML5 等等，成為現(xiàn)代 Web 開發(fā)的重要基礎(chǔ)。

3. HTML 的作用和應(yīng)用場(chǎng)景

HTML 是創(chuàng)建網(wǎng)頁(yè)的基礎(chǔ)，它定義了網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，讓網(wǎng)頁(yè)具有良好的閱讀體驗(yàn)和用戶交互功能。

HTML 的應(yīng)用場(chǎng)景十分廣泛，比如個(gè)人或企業(yè)網(wǎng)站、博客、電子商務(wù)平臺(tái)、在線教育、娛樂(lè)等等。通過(guò) HTML 的結(jié)構(gòu)和內(nèi)容，可以方便的搭建各種不同類型的網(wǎng)站。

4. HTML 的語(yǔ)法結(jié)構(gòu)

HTML 的語(yǔ)法結(jié)構(gòu)是由標(biāo)簽、屬性和值組成的。

·標(biāo)簽：用于定義 HTML 的元素，通常包括開始標(biāo)簽和結(jié)束標(biāo)簽，以及元素的內(nèi)容。例如<p>這是一個(gè)段落</p>。·屬性：用于設(shè)置元素的屬性，比如class、id、style、src等。·值：用于設(shè)置屬性的值，比如<img src="image.jpg">中的image.jpg就是屬性的值。

HTML 元素及標(biāo)簽

1. HTML 元素的概念

HTML 元素是由開始標(biāo)簽、結(jié)束標(biāo)簽和內(nèi)容組成的，它們被用于創(chuàng)建HTML文檔的各種部分。

HTML 元素的結(jié)構(gòu)通常是這樣的：

<StartTag>Content</EndTag>

其中，StartTag 表示開始標(biāo)簽，Content 表示元素的內(nèi)容，EndTag 表示結(jié)束標(biāo)簽。

2. HTML 標(biāo)簽的作用和分類

HTML 標(biāo)簽是用于定義 HTML 元素的關(guān)鍵字，它們告訴瀏覽器如何顯示內(nèi)容。

HTML 標(biāo)簽可以分為三類：行內(nèi)元素、塊級(jí)元素和行內(nèi)塊元素。

·行內(nèi)元素：默認(rèn)不會(huì)換行，只會(huì)占據(jù)所需的寬度空間。例如<a>、<span>、<em>等標(biāo)簽。·塊級(jí)元素：獨(dú)占一行，可以設(shè)置寬度、高度、邊距和內(nèi)邊距等樣式。例如<div>、<p>、<ul>等標(biāo)簽。·行內(nèi)塊元素：同時(shí)具有行內(nèi)元素和塊級(jí)元素的特性，可以設(shè)置寬度、高度、邊框等樣式，但不會(huì)獨(dú)占一行。例如<img>、<input>、<button>等標(biāo)簽。

3. 常用HTML元素介紹

文本相關(guān)元素

·<h1>、<h2>、<h3>、<h4>、<h5>、<h6>：定義標(biāo)題。·<p>：定義段落。·<a>：定義超鏈接。·<strong>、<em>：定義加粗和斜體文本。·<ul>、<ol>、<li>：定義列表。

圖片和視頻元素

·<img>：定義圖片。·<video>：定義視頻，可以設(shè)置播放器的寬度和高度等樣式。

HTML常用屬性

1. HTML屬性的概念

HTML 屬性是用于設(shè)置元素的特性或行為的，可以控制元素的外觀、布局和功能。

HTML 屬性通常被包含在標(biāo)簽的開始標(biāo)簽中，其結(jié)構(gòu)如下：

<tagname attr="value">Content</tagname>

其中，attr 表示屬性名稱，value 表示屬性的值。

2. HTML常用屬性介紹

HTML 常用屬性有很多，這里只列舉幾個(gè)常用的屬性和說(shuō)明：

·class：為元素定義一個(gè)或多個(gè)類名，可以讓CSS選擇器找到該元素。·id：為元素定義唯一的標(biāo)識(shí)符。·style：定義元素的樣式。·src：定義圖像的URL地址。·href：定義超鏈接的URL地址。

3. HTML全局屬性介紹

HTML 全局屬性是適用于所有 HTML 元素的屬性，幾乎可以應(yīng)用于任何元素上。

HTML 全局屬性包括：

·class：同上。·style：同上。·id：同上。·title：定義元素的附加信息，也可以作為工具提示的文本。·tabindex：定義元素在文檔中的順序。·hidden：定義元素是否被隱藏。

HTML表格

1. HTML表格的概念和作用

HTML 表格是由行和列組成的矩形網(wǎng)格，用于展示數(shù)據(jù)和信息。

HTML 表格的作用是展示有結(jié)構(gòu)化形式的數(shù)據(jù)，為讀者提供良好的閱讀體驗(yàn)。

2. HTML表格創(chuàng)建及基本結(jié)構(gòu)

HTML 表格的創(chuàng)建和基本結(jié)構(gòu)可以通過(guò)以下標(biāo)簽實(shí)現(xiàn)：

·<table>：定義表格。·<tr>：定義表格中的行。·<td>：定義行中的單元格。·<th>：定義表格的表頭單元格。

例如，下面是一個(gè)簡(jiǎn)單的 HTML 表格：

<table>  <tr>    <th>日期</th>    <th>用戶名</th>    <th>內(nèi)容</th>  </tr>  <tr>    <td>2022-01-01</td>    <td>Lucas</td>    <td>這是一篇文章</td>  </tr></table>

3. HTML表格屬性介紹

HTML 表格也有一些常用的屬性，包括：

·border：定義表格邊框的寬度。·cellpadding：定義單元格內(nèi)容與單元格邊框之間的空白區(qū)域。·cellspacing：定義單元格與單元格之間的間距。·colspan：定義單元格跨越的列數(shù)。·rowspan：定義單元格跨越的行數(shù)。

HTML表單

1. HTML表單的概念和作用

HTML 表單是用于收集用戶輸入數(shù)據(jù)的一組元素，可以包含輸入框、選擇列表、按鈕等。

HTML 表單的作用是讓用戶能夠提交數(shù)據(jù)給服務(wù)器，實(shí)現(xiàn)用戶與服務(wù)器之間的交互。

2. HTML表單元素介紹

HTML 表單元素包括一系列輸入框、選擇列表、按鈕等，這里列舉幾個(gè)常用的元素：

·<input>：定義一個(gè)輸入框。·<textarea>：定義一個(gè)文本輸入框。·<select>：定義一個(gè)下拉列表。·<button>：定義一個(gè)按鈕。·<label>：定義一個(gè)標(biāo)簽，為表單元素添加說(shuō)明文本。

3. HTML表單屬性介紹

HTML 表單也有一些常用的屬性，包括：

·action：定義表單提交數(shù)據(jù)的URL地址。·method：定義表單提交數(shù)據(jù)的HTTP方法，可以是GET、POST等。·name：定義表單的名稱。·enctype：定義表單提交數(shù)據(jù)的編碼方式，如application/x-www-form-urlencoded、multipart/form-data等。

HTML多媒體

1. HTML圖片相關(guān)標(biāo)簽和屬性

HTML 用于展示圖片，可以通過(guò)<img>標(biāo)簽來(lái)實(shí)現(xiàn)。

<img>標(biāo)簽也有一些常用的屬性，比如：

·src：定義圖片的URL地址。·alt：定義圖片的替代文本。·title：定義圖片的工具提示文本。·width：定義圖片的寬度。·height：定義圖片的高度。

例如：

<img src="image.jpg" alt="這是一張圖片" title="圖片" width="200" height="150">

2. HTML音頻相關(guān)標(biāo)簽和屬性

HTML 同樣支持音頻的播放，可以通過(guò)<audio>標(biāo)簽來(lái)實(shí)現(xiàn)。

<audio>標(biāo)簽也有一些常用的屬性，比如：

·src：定義音頻的URL地址。·autoplay：定義音頻自動(dòng)播放。·controls：定義音頻播放器的控制按鈕。·loop：定義音頻自動(dòng)重復(fù)播放。

例如：

<audio src="song.mp3" autoplay loop controls></audio>

3. HTML視頻相關(guān)標(biāo)簽和屬性

HTML 同樣支持視頻的播放，可以通過(guò)<video>標(biāo)簽來(lái)實(shí)現(xiàn)。

<video>標(biāo)簽也有一些常用的屬性，比如：

·src：定義視頻的URL地址。·autoplay：定義視頻自動(dòng)播放。·controls：定義視頻播放器的控制按鈕。·loop：定義視頻自動(dòng)重復(fù)播放。

例如：

<video src="movie.mp4" autoplay loop controls></video>

HTML語(yǔ)義化

1. HTML語(yǔ)義化的概念和作用

HTML 語(yǔ)義化是指使用恰當(dāng)?shù)?HTML 標(biāo)記來(lái)描述 Web 頁(yè)面或文檔的內(nèi)容和結(jié)構(gòu)。

HTML 語(yǔ)義化的作用是讓網(wǎng)頁(yè)更容易被機(jī)器解析，提高網(wǎng)頁(yè)的可讀性和可維護(hù)性。

2. HTML語(yǔ)義化標(biāo)簽介紹

HTML 中有很多語(yǔ)義化的標(biāo)簽，這里列舉幾個(gè)常用的標(biāo)簽：

·<header>：定義頁(yè)面或區(qū)域的頭部。·<nav>：定義頁(yè)面導(dǎo)航部分。·<main>：定義頁(yè)面的主要內(nèi)容。·<aside>：定義頁(yè)面的側(cè)邊欄內(nèi)容。·<footer>：定義頁(yè)面或區(qū)域的尾部。

3. 如何正確使用HTML語(yǔ)義化

正確使用 HTML 語(yǔ)義化的方法包括：

·使用恰當(dāng)?shù)恼Z(yǔ)義化標(biāo)簽，描述網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容，如<header>、<nav>、<main>等。·避免過(guò)度使用div來(lái)進(jìn)行布局和樣式控制，應(yīng)該通過(guò) CSS 來(lái)進(jìn)行樣式控制。·避免使用無(wú)意義的元素或?qū)傩裕?code style="padding: 3px 5px;color: rgb(221, 17, 68);line-height: 1.75;font-family: Menlo, "Operator Mono", Consolas, Monaco, monospace;font-size: 13.5px;background: rgba(27, 31, 35, 0.05);border-radius: 4px;"><font>等。·根據(jù)不同的需求選擇不同的標(biāo)簽，不要只使用一種標(biāo)簽來(lái)描述不同的內(nèi)容。

HTML5新特性的應(yīng)用

1. HTML5新增元素和屬性

HTML5 新增了很多元素和屬性，比如：

·<article>、<section>、<header>、<footer>等語(yǔ)義化標(biāo)簽。·canvas、path、svg等用于繪圖的元素。·placeholder、autofocus、required等表單新屬性。·新增音頻和視頻的標(biāo)簽<audio>和<video>等。

2. HTML5 Web存儲(chǔ)

HTML5 新增了本地存儲(chǔ)和離線應(yīng)用的能力。

HTML5的Web Storage包括 localStorage 和 sessionStorage，前者會(huì)一直保存在本地，后者會(huì)在關(guān)閉瀏覽器時(shí)被清除。

HTML5的應(yīng)用緩存（Offline Web Applications）可以將多個(gè)文件預(yù)存到用戶的計(jì)算機(jī)中，即使在離線情況下用戶也可以訪問(wèn)和瀏覽該應(yīng)用程序。

3. HTML5動(dòng)畫和多媒體

HTML5 提供了一些新的 API，比如requestAnimationFrame()、setInterval()等，可以實(shí)現(xiàn)更靈活的動(dòng)畫效果。

HTML5 也提供了很多新的音頻和視頻 API，如play()、pause()、currentTime等，可以讓音頻和視頻的播放更加靈活。

總之，掌握 HTML 的基礎(chǔ)知識(shí)、元素和標(biāo)簽、常用屬性、表格和表單、多媒體、語(yǔ)義化等相關(guān)知識(shí)，以及 HTML5 新特性的應(yīng)用，可以幫助前端開發(fā)者更好的搭建和優(yōu)化網(wǎng)站、提高用戶體驗(yàn)。