歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >

HTML標簽通常是成對出現的(雙邊標記),比如 <div> 和 </div>,也有單獨呈現的標簽(單邊標記),如:<br />、<hr />和<img src=“images/1.jpg” />等。

屬性與標記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。

使用Emmet插件快速生成html的骨架

在Sublime Text中安裝Emmet插件。

新建html文件,輸入html:xt,按Tab鍵后(或者按Ctrl+E),自動生成的代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> 

新建html,輸入html:5后,按 Tab鍵后,自動生成的代碼如下:

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

1、文檔聲明頭

任何一個標準的HTML頁面,第一行一定是一個以

<!DOCTYPE …… 

開頭的語句。
這一行,就是文檔聲明頭,DocType Declaration,簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。

HTML4.01有哪些規范呢?

首先我們先確定一件事兒,我們現在學習的是HTML4.01這個版本,這個版本是IE6開始兼容的。HTML5是IE9開開始兼容的。但是IE6、7、8這些瀏覽器還不能過早的淘汰,所以這幾年網頁還是應該用HTML4.01來制作。如今,手機、移動端的網頁,就可以使用HTML5了,因為其兼容性更高。

說個題外話,html1 至 html3 是美國軍方以及高等研究所用的,并未對外公開。

HTML4.01里面有兩大種規范,每大種規范里面又各有3種小規范。所以一共6種規范(見下面):

HTML4.01里面規定了普通和XHTML兩大種規范。

HTML覺得自己有一些規定不嚴謹,比如,標簽是否可以用大寫字母呢?<H1></H1>

所以,HTML就覺得,把一些規范嚴格的標準,又制定了一個XHTML1.0。在XHTML中的字母X,表示“嚴格的”。

總結一下,HTML4.01一共有6種DTD,說白了,HTML第一行語句一共有6種:

簡單介紹HTML基礎結構詳解

下面對上圖中的三種小規范進行解釋:

  • strict:表示“嚴格的”,這種模式里面的要求更為嚴格。這種嚴格體現在哪里?有一些標簽不能使用。
    比如,u標簽,就是給一個本文加下劃線,但是這和HTML的本質有沖突,因為HTML只能負責語義,不能負責樣式,而u這個下劃線是樣式。所以,在strict中是不能使用u標簽的。
    那怎么給文本增加下劃線呢?今后的css將使用css屬性來解決。
    那么,XHTML1.0更為嚴格,因為這個體系本身規定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。

  • Transitional:表示“普通的”,這種模式就是沒有一些別的規范。

  • Frameset:表示“框架”,在框架的頁面使用。

在sublime輸入的html:xt,x表示XHTML,t表示transitional。
HTML5中極大的簡化了DTD,也就是說HTML5中就沒有XHTML了(W3C自己打臉了):

<!DOCTYPE html> 

2、頭標簽

頭標簽都放在頭部分之間。包括:<title>、<base>、<meta>、<link>

  • <title>:指定整個網頁的標題,在瀏覽器最上方顯示。
  • <base>:為頁面上的所有鏈接規標題欄顯示的內容定默認地址或默認目標。
  • <meta>:提供有關頁面的基本信息
  • <body>:用于定義HTML文檔所要顯示的內容,也稱為主體標簽。我們所寫的代碼必須放在此標簽內。
  • <link>:定義文檔與外部資源的關系。

我們打開EditPlus軟件,新建一個html文件,自動生成的代碼如下:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> </head> <body> </body> </html> 

上面的<meta>標簽都不用記,但是另外還有一個<meta>標簽是需要記住的:

<meta http-equiv="refresh" content="3;http://www.baidu.com"> 

上面這個標簽的意思是說,3秒之后,自動跳轉到百度頁面。

我們接下來對各個頭標簽進行介紹。

(1)字符集 charset

我們發現,在頭標簽中,有下面這種標簽:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 

字符集用meta標簽中的charset定義,meta表示“元”。“元”配置,就是表示基本的配置項目。

charset就是charactor set(即“字符集”),這里采用的是。這個meta不用背,用sublime生成就行。

瀏覽器就是通過meta來看網頁是什么字符集的。比如你保存的時候,meta寫的和聲明的不匹配,那么瀏覽器就是亂碼。

(2)定義“關鍵詞”

舉例如下:

<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" /> 

這些關鍵詞,就是告訴搜索引擎,這個網頁是干嘛的,能夠提高搜索命中率。讓別人能夠找到你,搜索到你。

(3)定義“頁面描述”

meta除了可以設置字符集,還可以設置關鍵字和頁面描述。

我們把含有meta標簽的這一行代碼抽象一下:

<meta name=" " content=" "> 

name即“名字”,content即“內容”。

只要設置Description頁面描述,那么百度搜索結果,就能夠顯示這些語句,這個技術叫做SEO(search engine optimization,搜索引擎優化)。

設置頁面描述的舉例:

<meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" /> 

效果如下:

簡單介紹HTML基礎結構詳解

(4)title標簽

<title>網頁的標題</title> 

title也是有助于SEO搜索引擎優化的。

html的完整骨架:

綜上所述,html的比較完整的骨架是這樣:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Keywords" content="牛逼,很牛逼,特別牛逼" /> <meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" /> <title>Document</title> </head> <body> </body> </html> 

面試題:

  • 問:網頁的head標簽里面,表示的是頁面的配置,有什么配置?
  • 答:字符集、關鍵詞、頁面描述、頁面標題。(今后我們還能看見一些其他的配置:IE適配、視口、iPhone小圖標等等)

3、<body>標簽的屬性

其屬性有:

  • bgcolor:設置整個網頁的背景顏色。
  • background:設置整個網頁的背景圖片。
  • text:設置網頁中的文本顏色。
  • leftmargin:網頁的左邊距。IE瀏覽器默認是8個像素。
  • topmargin:網頁的上邊距。
  • rightmargin:網頁的右邊距。
  • bottommargin:網頁的下邊距。

<body>標簽另外還有一些屬性,這里用個例子來解釋:

簡單介紹HTML基礎結構詳解

上方代碼中,當我們對點我點我這幾個字使用超鏈時,link屬性表示默認顯示的顏色、alink屬性表示鼠標點擊但是還沒有松開時的顏色、vlink屬性表示點擊完成之后顯示的顏色。效果如下:

簡單介紹HTML基礎結構詳解

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com/html/h60385.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.rs2pl.com DIVCSS5版權所有。

久久天天躁狠狠躁夜夜躁2020