HTML是一種用來描述網(wǎng)頁的標(biāo)記語言,它可以讓我們用一些特定的標(biāo)簽來定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。HTML的全稱是超文本標(biāo)記語言(HyperText Markup Language),它是由萬維網(wǎng)聯(lián)盟(W3C)制定的一種標(biāo)準(zhǔn)。
要用HTML完成網(wǎng)頁制作,我們需要了解以下幾個方面:
- HTML的基本結(jié)構(gòu)和語法
- HTML的常用標(biāo)簽和屬性
- HTML的文檔類型聲明和字符編碼
- HTML的樣式和布局
- HTML的鏈接和圖片
- HTML的表格和表單
- HTML的元數(shù)據(jù)和腳本
下面我們就來逐一介紹這些方面。
HTML的基本結(jié)構(gòu)和語法
一個HTML文檔通常由以下幾個部分組成:
:這是一個文檔類型聲明,它告訴瀏覽器這個文檔是用哪種版本的HTML編寫的。例如,
表示這是一個HTML5文檔。
:這是一個根元素,它包含了整個文檔的內(nèi)容。它有一個
lang
屬性,用來指定文檔的語言。例如,表示這是一個中文文檔。
:這是一個頭部元素,它包含了一些關(guān)于文檔的信息,比如標(biāo)題、樣式、元數(shù)據(jù)等。它不能包含可見的內(nèi)容,只能包含一些特殊的標(biāo)簽。
:這是一個標(biāo)題元素,它定義了文檔在瀏覽器標(biāo)簽欄上顯示的標(biāo)題。它必須放在元素里面,并且只能有一個。
:這是一個主體元素,它包含了文檔的可見內(nèi)容,比如文字、圖片、鏈接等。它必須放在
元素里面,并且只能有一個。
一個HTML文檔的基本結(jié)構(gòu)如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>我的第一個網(wǎng)頁</title>
</head>
<body>
<h1>歡迎來到我的網(wǎng)站</h1>
<p>這是我的第一個網(wǎng)頁,我正在學(xué)習(xí)HTML。</p>
</body>
</html>
HTML的語法規(guī)則如下:
- HTML由一系列的標(biāo)簽(tag)組成,每個標(biāo)簽都有一個開始標(biāo)簽(start tag)和一個結(jié)束標(biāo)簽(end tag),中間是標(biāo)簽的內(nèi)容。例如,
。這是一個段落
- 有些標(biāo)簽是自閉合的(self-closing),也就是說它們不需要結(jié)束標(biāo)簽,只需要在開始標(biāo)簽后面加上一個斜杠(/)。例如,
表示換行,表示圖片。
- 每個標(biāo)簽都可以有一些屬性(attribute),用來提供更多的信息或功能。屬性由屬性名和屬性值組成,屬性值必須用引號括起來。屬性之間用空格分隔。例如,
表示一個圖片標(biāo)簽,它有四個屬性:src指定圖片的地址,alt指定圖片的替代文字,width指定圖片的寬度,height指定圖片的高度。
- 標(biāo)簽之間可以嵌套(nest),也就是說一個標(biāo)簽可以包含另一個或多個標(biāo)簽。嵌套的規(guī)則是先開后閉,后開先閉,也就是說內(nèi)層的標(biāo)簽必須在外層的標(biāo)簽之間。例如,
表示一個段落標(biāo)簽,它包含了一個粗體標(biāo)簽。這是一個粗體的段落
- 標(biāo)簽之間可以并列(sibling),也就是說一個標(biāo)簽可以和另一個或多個標(biāo)簽在同一層級。并列的規(guī)則是不要交叉,也就是說不能有一部分的標(biāo)簽在另一部分的標(biāo)簽之間。例如,
表示兩個標(biāo)題標(biāo)簽,它們是并列的。標(biāo)題一
標(biāo)題二
- 標(biāo)簽的名稱和屬性的名稱都不區(qū)分大小寫,但是屬性的值可能區(qū)分大小寫,取決于具體的屬性。例如,
和
是等價的,但是
可能不會顯示圖片,因為文件名區(qū)分大小寫。
- 標(biāo)簽和屬性的名稱都應(yīng)該使用英文單詞或字母,不要使用中文或其他語言。例如,
<標(biāo)題>這是一個標(biāo)題標(biāo)題>
是不合法的,應(yīng)該使用
。這是一個標(biāo)題 - 標(biāo)簽和屬性的值都應(yīng)該使用合法的字符,不要使用特殊的符號或空格。如果需要使用特殊的符號或空格,可以使用轉(zhuǎn)義字符(escape character)或?qū)嶓w引用(entity reference)。例如,
表示一個段落標(biāo)簽,它包含了一個&符號,&符號需要用這是一個&符號
&
來表示,因為它本身是一個特殊的符號。
更多優(yōu)秀前端開發(fā)課程推薦:前端開發(fā)相關(guān)課程