HTML 基礎(chǔ)知識

1. HTML 是什么？

HTML 是 HyperText Markup Language （超文本標記語言）的簡稱，是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。

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

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

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

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

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

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

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

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

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

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

HTML 元素及標簽

1. HTML 元素的概念

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

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

<StartTag>Content</EndTag>

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

2. HTML 標簽的作用和分類

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

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

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

3. 常用HTML元素介紹

文本相關(guān)元素

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

圖片和視頻元素

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

HTML常用屬性

1. HTML屬性的概念

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

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

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

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

2. HTML常用屬性介紹

HTML 常用屬性有很多，這里只列舉幾個常用的屬性和說明：

·class：為元素定義一個或多個類名，可以讓CSS選擇器找到該元素。·id：為元素定義唯一的標識符。·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ù)，為讀者提供良好的閱讀體驗。

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

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

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

例如，下面是一個簡單的 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ù)器，實現(xiàn)用戶與服務(wù)器之間的交互。

2. HTML表單元素介紹

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

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

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)標簽和屬性

HTML 用于展示圖片，可以通過<img>標簽來實現(xiàn)。

<img>標簽也有一些常用的屬性，比如：

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

例如：

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

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

HTML 同樣支持音頻的播放，可以通過<audio>標簽來實現(xiàn)。

<audio>標簽也有一些常用的屬性，比如：

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

例如：

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

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

HTML 同樣支持視頻的播放，可以通過<video>標簽來實現(xiàn)。

<video>標簽也有一些常用的屬性，比如：

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

例如：

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

HTML語義化

1. HTML語義化的概念和作用

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

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

2. HTML語義化標簽介紹

HTML 中有很多語義化的標簽，這里列舉幾個常用的標簽：

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

3. 如何正確使用HTML語義化

正確使用 HTML 語義化的方法包括：

·使用恰當?shù)恼Z義化標簽，描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，如<header>、<nav>、<main>等。·避免過度使用div來進行布局和樣式控制，應(yīng)該通過 CSS 來進行樣式控制。·避免使用無意義的元素或?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ù)不同的需求選擇不同的標簽，不要只使用一種標簽來描述不同的內(nèi)容。

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

1. HTML5新增元素和屬性

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

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

2. HTML5 Web存儲

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

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

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

3. HTML5動畫和多媒體

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

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

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