HTML教程（看完這篇就夠了）

TML教程

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

您可以使用 HTML 來(lái)建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來(lái)解析。

在本教程中，您將學(xué)習(xí)如何使用 HTML 來(lái)創(chuàng)建站點(diǎn)。

HTML 很容易學(xué)習(xí)！相信您能很快學(xué)會(huì)它！

本教程包含了數(shù)百個(gè) HTML 實(shí)例。

使用本站的編輯器，您可以輕松實(shí)現(xiàn)在線修改 HTML，并查看實(shí)例運(yùn)行結(jié)果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個(gè)標(biāo)題</h1>
        <p>我的第一個(gè)段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡(jiǎn)介

實(shí)例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標(biāo)題</h1>
<p>這是我的段落</p>
</body>
</html>

實(shí)例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁(yè)面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset=“utf-8”> 定義網(wǎng)頁(yè)編碼格式為 utf-8。
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見(jiàn)的頁(yè)面內(nèi)容
<h1> 元素定義一個(gè)大標(biāo)題
<p> 元素定義一個(gè)段落

什么是HTML？

HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML 指的是超文本標(biāo)記語(yǔ)言: HyperText Markup Language
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁(yè)面
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML

標(biāo)簽

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>

HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>

標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽

開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>

html元素

“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴(yán)格來(lái)講, 一個(gè) HTML 元素包含了開(kāi)始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:

HTML 元素:

<p>這是一個(gè)段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁(yè)顯示。

瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來(lái)決定如何展現(xiàn)HTML頁(yè)面的內(nèi)容給用戶

html網(wǎng)頁(yè)結(jié)構(gòu)

<html>
    <head>
        <title>頁(yè)面標(biāo)題</title>
    </head>
    <body>
        <h1>這是一個(gè)標(biāo)題</h1>
        <p>這是一個(gè)段落。</p>
        <p>這是另外一個(gè)段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。

網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。

doctype 聲明是不區(qū)分大小寫(xiě)的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會(huì)出現(xiàn)中文亂碼的情況，這時(shí)候我們就需要在頭部將字符聲明為 UTF-8。

avaScript 的 Rest 和 Spread 操作符自 ES6 引入以來(lái)，大大改變了開(kāi)發(fā)者處理數(shù)組和對(duì)象的方式。這些操作符提供了更簡(jiǎn)潔、更易讀的語(yǔ)法，使代碼更易于理解和維護(hù)。本文將介紹如何有效地使用 Rest 和 Spread 操作符，并通過(guò)示例進(jìn)行說(shuō)明。

Rest 和 Spread 操作符簡(jiǎn)介

Rest 操作符（...）允許你將多個(gè)元素收集到一個(gè)數(shù)組或?qū)ο笾?，通常用于函?shù)參數(shù)中，將參數(shù)列表轉(zhuǎn)換為數(shù)組。而 Spread 操作符（...）則用于將數(shù)組或?qū)ο笳归_(kāi)為單個(gè)元素，這在復(fù)制、合并或傳遞數(shù)組和對(duì)象時(shí)特別有用。

理解并掌握這些操作符可以大大提升你的 JavaScript 編碼水平，使代碼更加簡(jiǎn)潔和富有表現(xiàn)力。

Rest 操作符的應(yīng)用

函數(shù)參數(shù)處理

Rest 操作符在函數(shù)定義中非常有用，可以處理不定數(shù)量的參數(shù)：

function multiply(...numbers) {
  return numbers.reduce((product, number) => product * number, 1);
}
console.log(multiply(2, 3, 4)); // 輸出: 24

在這個(gè)例子中，multiply 函數(shù)接受任意數(shù)量的參數(shù)并進(jìn)行相乘。Rest 操作符將所有參數(shù)收集到 numbers 數(shù)組中，使得可以輕松應(yīng)用 reduce 等數(shù)組方法。

數(shù)組解構(gòu)

Rest 操作符還可以在數(shù)組解構(gòu)中使用，將剩余元素收集到一個(gè)新數(shù)組中：

const [head, ...tail] = ['a', 'b', 'c', 'd'];
console.log(head);  // 輸出: 'a'
console.log(tail);  // 輸出: ['b', 'c', 'd']

在這個(gè)例子中，數(shù)組的第一個(gè)元素被賦值給 head，其余元素則被收集到 tail 數(shù)組中。

Spread 操作符的應(yīng)用

數(shù)組合并

使用 Spread 操作符，數(shù)組合并變得非常簡(jiǎn)單：

const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const food = [...fruits, ...vegetables];
console.log(food); // 輸出: ['apple', 'banana', 'carrot', 'potato']

在這個(gè)例子中，Spread 操作符將 fruits 和 vegetables 展開(kāi)為單個(gè)元素并合并到 food 數(shù)組中。

數(shù)組復(fù)制

創(chuàng)建數(shù)組副本同樣很方便：

const numbers = [1, 2, 3];
const numbersCopy = [...numbers];
console.log(numbersCopy); // 輸出: [1, 2, 3]

這樣創(chuàng)建了一個(gè)包含與 numbers 數(shù)組相同元素的新數(shù)組 numbersCopy，修改 numbersCopy 不會(huì)影響 numbers。

對(duì)象合并

Spread 操作符還可以用于對(duì)象的合并：

const person = { name: 'Alice', age: 25 };
const job = { title: 'developer', company: 'Tech Co.' };
const employee = { ...person, ...job };
console.log(employee); // 輸出: { name: 'Alice', age: 25, title: 'developer', company: 'Tech Co.' }

在這個(gè)例子中，person 和 job 被合并到 employee 對(duì)象中，形成一個(gè)新的對(duì)象。

高級(jí)技巧

對(duì)象解構(gòu)中的 Rest 操作符

Rest 操作符可以在對(duì)象解構(gòu)中使用，收集剩余的屬性：

const { title, ...details } = { title: 'Book', author: 'John Doe', year: 2021 };
console.log(title);    // 輸出: 'Book'
console.log(details);  // 輸出: { author: 'John Doe', year: 2021 }

這個(gè)例子展示了如何提取特定屬性（title），同時(shí)將剩余屬性收集到 details 對(duì)象中。

Spread 操作符用于函數(shù)參數(shù)

在調(diào)用接受多個(gè)參數(shù)的函數(shù)時(shí)，Spread 操作符可以簡(jiǎn)化傳遞數(shù)組元素作為參數(shù)：

function concatenate(str1, str2, str3) {
  return str1 + str2 + str3;
}
const words = ['Hello', ' ', 'World!'];
console.log(concatenate(...words)); // 輸出: 'Hello World!'

通過(guò)展開(kāi) words 數(shù)組，每個(gè)元素作為獨(dú)立參數(shù)傳遞給 concatenate 函數(shù)。

結(jié)論

JavaScript 中的 Rest 和 Spread 操作符是強(qiáng)大的工具，可以極大地增強(qiáng)代碼的靈活性和可讀性。不論是處理數(shù)組、對(duì)象還是函數(shù)參數(shù)，這些操作符都能提供優(yōu)雅的解決方案。通過(guò)掌握這些操作符，你可以編寫(xiě)更簡(jiǎn)潔、高效的代碼，提升整體開(kāi)發(fā)體驗(yàn)。

理解并有效使用 Rest 和 Spread 操作符，不僅可以簡(jiǎn)化當(dāng)前項(xiàng)目，還能為未來(lái)的挑戰(zhàn)做好準(zhǔn)備，使你的 JavaScript 代碼更易維護(hù)和表達(dá)。

web開(kāi)發(fā)中我們一般都會(huì)不可避免的使用js。我們可以將js代碼直接放在頁(yè)面中即通過(guò)內(nèi)部使用js。但是為了給頁(yè)面良好的"瘦身"我們一般都會(huì)將js代碼放在外部，然后通過(guò)src引用。這個(gè)時(shí)候我們就需要注意一個(gè)問(wèn)題：編碼問(wèn)題。如果web頁(yè)面也js采用不同編碼，這個(gè)時(shí)候就會(huì)出現(xiàn)亂碼。(內(nèi)部使用js不需要注意編碼問(wèn)題，因?yàn)樗麄儾捎玫氖峭环N編碼)

對(duì)于大多數(shù)的web頁(yè)面，我們一般都是使用如下兩種編碼：UTF-8、GB2312。所以我們只需要同意頁(yè)面和js編碼就可以解決亂碼問(wèn)題：

對(duì)于GBK頁(yè)面引用編碼為UTF-8編碼的JavaScript文件如果出現(xiàn)亂碼問(wèn)題，可以使用下面的代碼來(lái)解決

復(fù)制代碼代碼如下:

＜script type=”text/javascript” src=”test.js” charset=”utf-8″></script>

同樣在UTF-8頁(yè)面中引入編碼為GBK的JavaScript文件亂碼問(wèn)題了，可以使用如下方式：

復(fù)制代碼代碼如下:

＜script type=”text/javascript” src=”test.js” charset=”gb2312″></script>

此方法是對(duì)于在js文件中出現(xiàn)漢字中文，以及其他容易造成在GBK與UTF-8編碼錯(cuò)誤字符的時(shí)候使用，對(duì)于純英文的就不需要了。如果為了保險(xiǎn)，加上也可以....

在線咨詢

上一篇：jQuery 移除或禁用html元素的點(diǎn)擊事件方法匯總
下一篇：你應(yīng)該要知道的，前端開(kāi)發(fā)過(guò)程中的HTML規(guī)范

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。