第02章 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=“詩詞”,前后有<>。
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ū)
2.4HTML注釋 !-- –
(1)HTML注釋是在HTML代碼中插入的描述性文本,用來解釋該代碼或提示其他信息。HTML注釋只出現(xiàn)在代碼中,在瀏覽器的頁面中并不顯示。
(2)語法:!–注釋的內(nèi)容–
例子2-2
在頁面中插入注釋,注釋內(nèi)容并不顯示在網(wǎng)頁上
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標題標簽,在瀏覽器中顯示出來。
2.6HTML段落 p
(1)在網(wǎng)頁中如果要把文字有條理地顯示出來,離不開段落標簽的使用。在HTML中可以通過標簽實現(xiàn)段落的效果。p是HTML文檔中最常見的標簽,用來標記一個段落的開始。
(2)語法:
p 段落標簽 /p
(3)說明:
p標簽顯示在瀏覽器中時,會自動在生成的元素前后創(chuàng)建一些空白,瀏覽器會自動添加這些空白。
例子2-4
在網(wǎng)頁中創(chuàng)建一個段落,在瀏覽器中顯示出來。
2.7換行 br
(1)換行標簽 br的作用是在不另起一段的情況下將當前文本強制換行。
(2)語法:
br
(3)說明:
一個br標簽代表一個換行,連續(xù)的多個標簽可以實現(xiàn)多次換行。
例子2-5
在標簽的內(nèi)部使用換行符實現(xiàn)換行效果
2.8水平線 hr
(1)在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開,這些水平線可以通過插入圖像實現(xiàn),也可以更簡單地通過標簽來完成。
(2)hr標簽可以在HTML頁面中創(chuàng)建一條水平線,在視角上將文檔分隔成各個部分。
(3)語法:
hr
例子2-6
在古詩的題目下方通過hr標簽插入一條水平線,使題目和內(nèi)容區(qū)分開來,在瀏覽器中顯示。
2.9文本格式化
(1)HTML中包含許多定義文本格式的標簽,比如粗體和斜體字。格式化文本的效果現(xiàn)在已經(jīng)被CSS樣式所取代,只要簡單了解即可。
| b | 定義粗體文本 |
| big | 定義大號字 |
| em | 定義著重文字 |
| i | 定義斜體字 |
| small | 定義小號字 |
| strong | 定義加重語氣 |
| sub | 定義下標字 |
| sup | 定義上標字 |
| ins | 定義插入字 |
| del | 定義刪除字 |
說明:
部分標簽已經(jīng)被淘汰了,不贊成使用。
例子2-7
文本格式化標簽在瀏覽器中的顯示效果。
2.10HTML字符實體
在HTML中,一些字符是預留的,比如說小于號“<”和大于號“>”在網(wǎng)頁中被識別為HTML標簽。想要正確地顯示預留字符,就需要使用該字符對應(yīng)的字符實體。
2.10.1不間斷的空格
不管在HTML文檔中輸入多少空格,瀏覽器只會顯示一個空格。當網(wǎng)頁需要連續(xù)空格的時候,需要在文檔中連續(xù)地插入空格對應(yīng)的字符實體。
語法:
 
說明:
在網(wǎng)頁中可以有多個空格,  代表一個半角空格,多個空格則可以多次使用這一符號。
例子2-8
在《靜夜思》的最后一句前面插入4個 ,在瀏覽器中顯示。
2.10.2插入特殊符號
常見字符實體
| 空格 |   | |
| < | 小于號 | < |
| > | 大于號 | > |
| & | 和號 | & |
| “ | 引號 | " |
| ‘ | 單引號 | &apos |
| * | 乘號 | × |
| / | 除號 | ÷ |
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)的字符實體** **。
2.簡答題
請寫出HTML文檔的基本結(jié)構(gòu)。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body></body> </html>3.編程題
請完成如圖所示的網(wǎng)頁。
總結(jié)
以上是生活随笔為你收集整理的第02章 HTML基本标签的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 51nod 1535 深海探险【思维+并
- 下一篇: 3分钟掌握7个XD基础操作