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

HTML

第02章 HTML基本标签

發布時間：2024/3/13 HTML 39 豆豆

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

HTML基本標簽

目錄標題

2.1HTML文檔頭部<head>
2.2網頁標題<title>
2.3元信息<meta>
- 2.3.1設置網頁關鍵字
- 2.3.2設置網頁說明
- 2.3.3添加作者信息
- 2.3.4規定字符編碼
- 2.3.5設置網頁的定時跳轉
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中的位置以及和其他文檔的關系等。

2.2網頁標題

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

例子1

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

2.3元信息

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

屬性值描述

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

2.3.1設置網頁關鍵字

在搜索引擎中，檢索信息都是通過**輸入關鍵字**來實現的。**設置關鍵字**是最基本也是最重要的一步，是進行網頁優化的**基礎**。關鍵字在瀏覽時是看不到的，它是針對搜索引擎的信息。當用關鍵字搜索網站時，如果網頁中包含該關鍵字，就可以在搜索結果中列出來。

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

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

2.3.2設置網頁說明

設置網頁說明也是為了便于搜索引擎的查找，它用來詳細說明網頁的內容，網頁說明不在網頁中顯示出來。

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

2.3.3添加作者信息

在meta中還可以添加網頁制作者的姓名。

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

2.3.4規定字符編碼

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

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

2.3.5設置網頁的定時跳轉

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

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

例子2-1
在進入網頁后顯示歡迎頁面，5s后自動跳轉到網頁的內容區

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

2.4HTML注釋 !-- –

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

例子2-2
在頁面中插入注釋，注釋內容并不顯示在網頁上

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

2.5HTML標題 h1~h6

（1）HTML文檔中包含有各種級別的標題，由h1~h6標簽來定義。h1-h6標簽中的字母h是headline的簡稱。作為標題，它們的重要性是有區別的，其中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
在網頁中依次使用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）在網頁中如果要把文字有條理地顯示出來，離不開段落標簽的使用。在HTML中可以通過標簽實現段落的效果。p是HTML文檔中最常見的標簽，用來標記一個段落的開始。
（2）語法：
p 段落標簽 /p
（3）說明：
p標簽顯示在瀏覽器中時，會自動在生成的元素前后創建一些空白，瀏覽器會自動添加這些空白。

例子2-4
在網頁中創建一個段落，在瀏覽器中顯示出來。

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

2.7換行 br

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

例子2-5
在標簽的內部使用換行符實現換行效果

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

2.8水平線 hr

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

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

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

2.9文本格式化

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

標簽描述

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

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

例子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中，一些字符是預留的，比如說小于號“<”和大于號“>”在網頁中被識別為HTML標簽。想要正確地顯示預留字符，就需要使用該字符對應的字符實體。

2.10.1不間斷的空格

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

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

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

2.10.2插入特殊符號

常見字符實體

顯示結果描述實體名稱

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

2.11練習題

1.填空題

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

2.簡答題

請寫出HTML文檔的基本結構。

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

3.編程題
請完成如圖所示的網頁。

<!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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

标签
html

上一篇： 51nod 1535 深海探险【思维+并
下一篇：摊牌了，做为前端，我经常在用的15个国外