當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

第02章 HTML基本标签

發(fā)布時間：2024/3/13 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了第02章 HTML基本标签小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML基本標簽

目錄標題

2.1HTML文檔頭部<head>
2.2網(wǎng)頁標題<title>
2.3元信息<meta>
- 2.3.1設(shè)置網(wǎng)頁關(guān)鍵字
- 2.3.2設(shè)置網(wǎng)頁說明
- 2.3.3添加作者信息
- 2.3.4規(guī)定字符編碼
- 2.3.5設(shè)置網(wǎng)頁的定時跳轉(zhuǎn)
2.4HTML注釋 !-- --
2.5HTML標題 h1~h6
2.6HTML段落 p
2.7換行 br
2.8水平線 hr
2.9文本格式化
2.10HTML字符實體
- 2.10.1不間斷的空格
- 2.10.2插入特殊符號
2.11練習題

2.1HTML文檔頭部

head標簽：用于定義文檔的頭部，它是所有頭部標簽的容器。可以引用腳本，指示瀏覽器在哪里找到樣式表，提供元信息等。
文檔的頭部：描述了文檔的各種屬性和信息，包括文檔的標題，在Web中的位置以及和其他文檔的關(guān)系等。

2.2網(wǎng)頁標題

title標簽:用于顯示文檔的名字，通常出現(xiàn)在瀏覽器窗口的標題欄或狀態(tài)欄中。title標簽是head標簽中唯一要求包含的東西。

例子1

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>詩詞網(wǎng)站</title></head><body></body> <html>

2.3元信息

meta標簽:提供的信息不顯示在網(wǎng)頁中，一般用來定義網(wǎng)頁信息的說明，關(guān)鍵字，刷新頻率等。在HTML中，meta標簽不需要設(shè)置結(jié)束標簽，在一個尖括號內(nèi)就是一個meta內(nèi)容。在一個HTML網(wǎng)頁中可以有多個meta標簽。

屬性值描述

content	some_text	定義與http-equiv或name屬性相關(guān)的元信息
charset	character_set	HTML5新屬性：定義文檔的字符編碼
http-equiv	content-type expires refresh set-cookie	把content屬性關(guān)聯(lián)到HTTP頭部
name	author description keywords generator revised others	把content屬性關(guān)聯(lián)到一個名稱
scheme	some_text	（HTML5不支持）定義用于翻譯content屬性值的格式

2.3.1設(shè)置網(wǎng)頁關(guān)鍵字

在搜索引擎中，檢索信息都是通過**輸入關(guān)鍵字**來實現(xiàn)的。**設(shè)置關(guān)鍵字**是最基本也是最重要的一步，是進行網(wǎng)頁優(yōu)化的**基礎(chǔ)**。關(guān)鍵字在瀏覽時是看不到的，它是針對搜索引擎的信息。當用關(guān)鍵字搜索網(wǎng)站時，如果網(wǎng)頁中包含該關(guān)鍵字，就可以在搜索結(jié)果中列出來。

（1）語法：meta name=“keywords” content=“輸入具體的關(guān)鍵字” 前后有<>.
（2）說明：在該語法中，name為屬性名稱，這里是keywords，也就是設(shè)置網(wǎng)頁的關(guān)鍵字屬性，而在content中則定義具體的關(guān)鍵字。
當網(wǎng)站的網(wǎng)頁關(guān)鍵字為"詩詞"時，代碼如下：
meta name=“keyword” content=“詩詞”,前后有<>。

選擇關(guān)鍵字的技巧與原則（1）要選擇與網(wǎng)站或網(wǎng)頁主題相關(guān)的文字作為關(guān)鍵字。（2）選擇具體的詞語，避免使用過于行業(yè)或籠統(tǒng)的詞語。（3）揣摩用戶會用什么作為搜索詞，把這些詞放在網(wǎng)頁上或直接作為關(guān)鍵字。（4）關(guān)鍵字可以不止一個，最好根據(jù)不同的網(wǎng)頁，設(shè)置不同的關(guān)鍵字組合，這樣網(wǎng)頁被搜索到的概率將大大增大。

2.3.2設(shè)置網(wǎng)頁說明

設(shè)置網(wǎng)頁說明也是為了便于搜索引擎的查找，它用來詳細說明網(wǎng)頁的內(nèi)容，網(wǎng)頁說明不在網(wǎng)頁中顯示出來。

（1）語法：
meta name=“description” content=“設(shè)置網(wǎng)頁說明”，前后有<>.
（2）說明：
在該語法中，name為屬性名稱，這里設(shè)置為description,也就是將元信息屬性設(shè)置為網(wǎng)頁說明，在content中定義具體的描述語言。
當網(wǎng)站的網(wǎng)頁說明為"這是一個內(nèi)容為詩詞的網(wǎng)頁"時，代碼如下:
meta name=“description” content=“這是一個內(nèi)容為詩詞的網(wǎng)頁”,前后有<>.

2.3.3添加作者信息

在meta中還可以添加網(wǎng)頁制作者的姓名。

（1）語法 ：
meta name=“author” content=“作者的姓名”,前后有<>.
（2）說明：在該語法中，name為屬性名稱，這里設(shè)置為author，也就是設(shè)置作者信息，在content中定義具體的信息.
當網(wǎng)站的作者是李白時，代碼如下:
meta name=“author” content=“李白”,前后有<>.

2.3.4規(guī)定字符編碼

charset屬性規(guī)定HTML文檔的字符編碼，它是HTML5中的新屬性，且替換了meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”,前后有<>.

（1）語法：
meta charset=“HTML文檔的字符編碼”，前后有<>.
（2）說明：
從理論上講，可以使用任何字符編碼，但并不是所有的瀏覽器都能理解它們。使用的字符編碼越廣泛，瀏覽器理解它的可能性就越大。當網(wǎng)站的編碼方式為"UTF-8"時，其可以支持多種語言，代碼如下：
meta charset=“UTF-8”,前后有<>.

2.3.5設(shè)置網(wǎng)頁的定時跳轉(zhuǎn)

（1）使用meta標簽可以使網(wǎng)頁在經(jīng)過一定時間后自動刷新，這可以通過將http-equiv屬性值設(shè)置為refresh來實現(xiàn)。content屬性值可以設(shè)置為更新時間。
（2）在瀏覽網(wǎng)頁時經(jīng)常會看到一些歡迎信息的頁面，在經(jīng)過一段時間后，這些頁面會自動轉(zhuǎn)到其他頁面，這就是網(wǎng)頁的跳轉(zhuǎn)。

（3）語法：
meta http-equiv=“refresh” content=“跳轉(zhuǎn)的時間；ur1=跳轉(zhuǎn)到的地址”，前后有<>.
（4）說明：
在該語法中，refresh表示網(wǎng)頁的刷新，在content中設(shè)置刷新的時間和刷新后的鏈接地址，時間和鏈接地址之間用分號相隔。默認情況下，跳轉(zhuǎn)時間以秒（s）為單位。

例子2-1
在進入網(wǎng)頁后顯示歡迎頁面，5s后自動跳轉(zhuǎn)到網(wǎng)頁的內(nèi)容區(qū)

<!DOCTYPE html> <html><head><meta charset="UTF-8"><meta http-equiv="refresh" content="5;ur1=target/index.html"><title>網(wǎng)頁的定時跳轉(zhuǎn)</title></head><body><h1>歡迎來到這個頁面，5s后將自動跳轉(zhuǎn)到其他頁面</h1></body> </html>

2.4HTML注釋 !-- –

（1）HTML注釋是在HTML代碼中插入的描述性文本，用來解釋該代碼或提示其他信息。HTML注釋只出現(xiàn)在代碼中，在瀏覽器的頁面中并不顯示。
（2）語法：!–注釋的內(nèi)容–

例子2-2
在頁面中插入注釋，注釋內(nèi)容并不顯示在網(wǎng)頁上

<!DOCTYPE> <html><head><meta http-equiv="refresh" content="10;ur1=page1.html1"><title>網(wǎng)頁的定時跳躍</title></head><body><h1>歡迎來到這個頁面，10s后將自動跳轉(zhuǎn)到其他頁面</h1></body> </html>

2.5HTML標題 h1~h6

（1）HTML文檔中包含有各種級別的標題，由h1~h6標簽來定義。h1-h6標簽中的字母h是headline的簡稱。作為標題，它們的重要性是有區(qū)別的，其中h1標題的重要性最高，h6的最低。
（2）語法：h1 1級標題 /h1
h2 2級標題 /h2
h3 3級標題 /h3
h4 4級標題 /h4
h5 5級標題 /h5
h6 6級標題 /h6
（3）說明：
在該語法中，有6個級別的標題，h1是一級標題，使用最大的字號表示，h6是6級標題，使用最小的字號表示。

例子2-3
在網(wǎng)頁中依次使用h1~h6標題標簽，在瀏覽器中顯示出來。

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><title>標題</title></head><body><h1>1級標題</h1><h2>2級標題</h2><h3>3級標題</h3><h4>4級標題</h4><h5>5級標題</h5><h6>6級標題</h6></body> </html>

2.6HTML段落 p

（1）在網(wǎng)頁中如果要把文字有條理地顯示出來，離不開段落標簽的使用。在HTML中可以通過標簽實現(xiàn)段落的效果。p是HTML文檔中最常見的標簽，用來標記一個段落的開始。
（2）語法：
p 段落標簽 /p
（3）說明：
p標簽顯示在瀏覽器中時，會自動在生成的元素前后創(chuàng)建一些空白，瀏覽器會自動添加這些空白。

例子2-4
在網(wǎng)頁中創(chuàng)建一個段落，在瀏覽器中顯示出來。

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><title>標簽</title></head><body><p>建筑藝術(shù)是一種立體藝術(shù)形式，是通過建筑群體組織，建筑物的形體，平面布置，立面形式，內(nèi)外空間組織，結(jié)構(gòu)造型（即建筑的構(gòu)圖，比例，尺度，色彩，質(zhì)感和空間感）以及建筑的裝飾，繪畫，雕刻，花紋，庭園，家具陳設(shè)等多方面的考慮和處理所形成的一種綜合性藝術(shù)。</p><p>建筑是技術(shù)和藝術(shù)相結(jié)合的產(chǎn)物。意大利現(xiàn)代著名建筑師奈維認為，建筑是一個技術(shù)與藝術(shù)的綜合體。美國現(xiàn)代著名建筑師賴特認為，建筑是用結(jié)構(gòu)來表達思想的科學性的藝術(shù)。優(yōu)秀的建筑不僅要建筑師去設(shè)計，還要由能工巧匠將它建筑出來。</p></body> </html>

2.7換行 br

（1）換行標簽 br的作用是在不另起一段的情況下將當前文本強制換行。
（2）語法：
br
（3）說明：
一個br標簽代表一個換行，連續(xù)的多個標簽可以實現(xiàn)多次換行。

例子2-5
在標簽的內(nèi)部使用換行符實現(xiàn)換行效果

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><title>靜夜思</title></head><body><h2>靜夜思</h2><p>李白</p><p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。</p></body> </html>

2.8水平線 hr

（1）在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開，這些水平線可以通過插入圖像實現(xiàn)，也可以更簡單地通過標簽來完成。
（2）hr標簽可以在HTML頁面中創(chuàng)建一條水平線，在視角上將文檔分隔成各個部分。
（3）語法：
hr

例子2-6
在古詩的題目下方通過hr標簽插入一條水平線，使題目和內(nèi)容區(qū)分開來，在瀏覽器中顯示。

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><title>靜夜思</title></head><body><h2>靜夜思</h2><hr><p>李白</p><p>窗前明月光，<br>疑是地上霜。<br>舉頭望明月，</br>低頭思故鄉(xiāng)。</p></body> </html>

2.9文本格式化

（1）HTML中包含許多定義文本格式的標簽，比如粗體和斜體字。格式化文本的效果現(xiàn)在已經(jīng)被CSS樣式所取代，只要簡單了解即可。

標簽描述

b	定義粗體文本
big	定義大號字
em	定義著重文字
i	定義斜體字
small	定義小號字
strong	定義加重語氣
sub	定義下標字
sup	定義上標字
ins	定義插入字
del	定義刪除字

說明：
部分標簽已經(jīng)被淘汰了，不贊成使用。

例子2-7
文本格式化標簽在瀏覽器中的顯示效果。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Document</title></head><body><b>This text is bold</b><br><strong>This text is strong</strong><br><big>This text is big</big><br><em>This text is emphasized</em><br><i>This text is italic</i><br><small>This text is small</small><br>文本<sub>下標</sub><br>文本<sup>上標</sup></body> </html>

2.10HTML字符實體

在HTML中，一些字符是預留的，比如說小于號“<”和大于號“>”在網(wǎng)頁中被識別為HTML標簽。想要正確地顯示預留字符，就需要使用該字符對應(yīng)的字符實體。

2.10.1不間斷的空格

不管在HTML文檔中輸入多少空格，瀏覽器只會顯示一個空格。當網(wǎng)頁需要連續(xù)空格的時候，需要在文檔中連續(xù)地插入空格對應(yīng)的字符實體。
語法：
&nbsp
說明：
在網(wǎng)頁中可以有多個空格，&nbsp 代表一個半角空格，多個空格則可以多次使用這一符號。

例子2-8
在《靜夜思》的最后一句前面插入4個&nbsp，在瀏覽器中顯示。

<!DOCTYPE html> <html lang="zh"><head><meta charset="UTF-8"><title>靜夜思</title></head><body><h2>靜夜思</h2><p>窗前明月光，疑是地上霜。</p><p>舉頭望明月，    低頭思故鄉(xiāng)。</p></body></html>

2.10.2插入特殊符號

常見字符實體

顯示結(jié)果描述實體名稱

	空格	&nbsp
<	小于號	&lt
>	大于號	&gt
&	和號	&amp
“	引號	&quot
‘	單引號	&apos
*	乘號	&times
/	除號	&divide

2.11練習題

1.填空題

（1）一個完整的HTML文檔必須包含3個部分：第一部分是由**!DOCTYPE html標簽定義的文檔版本信息**，第二部分是由head標簽定義的各項聲明的文檔頭部，第三部分是由body標簽定義的文檔主體部分。
（2）使用meta標簽可以使網(wǎng)頁在經(jīng)過一定時間后自動刷新。自動刷新可以通過將http-equiv屬性值設(shè)置為refresh來實現(xiàn)。
（3）br標簽在HTML中的含義是換行，HTML文檔中用來插入水平線的標簽是hr。
（4）當網(wǎng)頁需要連續(xù)空格的時候，需要在文檔中連續(xù)地插入空格對應(yīng)的字符實體**&nbsp**。

2.簡答題

請寫出HTML文檔的基本結(jié)構(gòu)。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body> </html>

3.編程題
請完成如圖所示的網(wǎng)頁。

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>靜夜思</title></head><body><h2>孟浩然</h2><p>孟浩然（689-740年），字浩然，號孟山人，襄州襄陽（今湖北襄陽）人，唐代著名的山水田園派詩人，世稱"孟襄陽"。因他未曾入仕，又稱為"孟山人"。</p><hr><p>春曉</p><p>春眠不覺曉，</p><p>處處聞啼鳥。</p><p>夜來風雨聲，</p><p>花落知多少。</p></body> </html>

總結(jié)

以上是生活随笔為你收集整理的第02章 HTML基本标签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

标签
html

上一篇： 51nod 1535 深海探险【思维+并
下一篇： 3分钟掌握7个XD基础操作