溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“HTML基礎結構實例分析”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML基礎結構實例分析”吧!
HTML標簽通常是成對出現的（雙邊標記），比如 <div> 和 </div>，也有單獨呈現的標簽（單邊標記），如：<br />、<hr />和<img src=“images/1.jpg” />等。
屬性與標記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。
在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>
任何一個標準的HTML頁面，第一行一定是一個以
<!DOCTYPE ……
開頭的語句。
這一行，就是文檔聲明頭，DocType Declaration，簡稱DTD。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范。
首先我們先確定一件事兒，我們現在學習的是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種：
下面對上圖中的三種小規范進行解釋：
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>
頭標簽都放在頭部分之間。包括：<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秒之后，自動跳轉到百度頁面。
我們接下來對各個頭標簽進行介紹。
我們發現，在頭標簽中，有下面這種標簽：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
字符集用meta標簽中的charset定義，meta表示“元”。“元”配置，就是表示基本的配置項目。
charset就是charactor set（即“字符集”），這里采用的是。這個meta不用背，用sublime生成就行。
瀏覽器就是通過meta來看網頁是什么字符集的。比如你保存的時候，meta寫的和聲明的不匹配，那么瀏覽器就是亂碼。
舉例如下：
<meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />
這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率。讓別人能夠找到你，搜索到你。
meta除了可以設置字符集，還可以設置關鍵字和頁面描述。
我們把含有meta標簽的這一行代碼抽象一下：
<meta name=" " content=" ">
name即“名字”，content即“內容”。
只要設置Description頁面描述，那么百度搜索結果，就能夠顯示這些語句，這個技術叫做SEO（search engine optimization，搜索引擎優化）。
設置頁面描述的舉例：
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
效果如下：
<title>網頁的標題</title>
title也是有助于SEO搜索引擎優化的。
綜上所述，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小圖標等等）
其屬性有：
bgcolor：設置整個網頁的背景顏色。
background：設置整個網頁的背景圖片。
text：設置網頁中的文本顏色。
leftmargin：網頁的左邊距。IE瀏覽器默認是8個像素。
topmargin：網頁的上邊距。
rightmargin：網頁的右邊距。
bottommargin：網頁的下邊距。
<body>標簽另外還有一些屬性，這里用個例子來解釋：
上方代碼中，當我們對點我點我這幾個字使用超鏈時，link屬性表示默認顯示的顏色、alink屬性表示鼠標點擊但是還沒有松開時的顏色、vlink屬性表示點擊完成之后顯示的顏色。效果如下：
到此，相信大家對“HTML基礎結構實例分析”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
