第1章 HTML基礎
1.1 HTML概述
1.1.1 什麽是HTML
HTML（Hyper Text Markup Language，超 文本 標記 語言）是純文本類型的語言，它是Internet上用於編寫網頁的主要語言，使用HTML編寫的網頁文件也是標準的純文本類型的文件。
查看網頁源代碼的方式
- F12 鍵或鼠標右鍵-"查看網頁源代碼"
1.1.2 HTML發展歷程
- 1993 年HTML首次以因特網草案形式發布
- 2.0
- 3.0（20世紀90年代見證了HTML大幅發展）
- 1999 年 4.0.1
此時，業界普遍認為HTML已經“無路可走”了，Web焦點轉移至XML和XHTML上。
- 2004年WHATWG（Web Hypertext Application Technology Working Group，Web超文本應用技術工作組）成立，創立HTML5規範並開發新功能。Web2.0時代到來！
至此，舊的靜態網站逐漸讓位於需要更多特性的動態網站和社交網站。HTML5能解決實際問題，目前已經成為了HTML新一代標準！
1.2 HTML文件基本結構
一個HTML文件由一系列的元素和標記組成。元素是HTML文件中重要組成部分，HTML5用標記來規定元素的屬性和它在文件中的位置。
1.2.1 HTML的基本結構
1. 標記
- 單獨標記
格式：<元素名稱>或<元素名稱/>推薦使用後者 如:
1 <br/> 此處為：單獨標記
- 成對標記
格式：<元素名稱>要控制的元素</元素名稱> 大多數標記都是成對出現的，由首標記和尾標記組成或者成為開始標記和結束標記（開始標簽和結束標簽）如：
1 <title>天晴天朗,IT愛好者</title> 此處為：成對標記
在HTML文件中某個元素的完整定義語法如下：
1 <元素名稱> 屬性1="值1" 屬性2="值2" 屬性N="值N"</元素名稱> HTML的完成定義語法
2. 元素
用一組HTML標簽將一段文字包含其中，這段文字與標簽組合在一起稱之為“一個元素”。
1 <title>天晴天朗,IT愛好者</title> 此處的整體，稱之為“一個元素”
3. HTML文件結構
1 <!DOCTYPE html> 2 <htmlHTML文件結構lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>此處是網頁頁簽的標題</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
- 其中，<html>與</html>分別是指“文件開始”和“文件結束”
- <head>與</head>之間的部分是HTML文件的“文件頭”——用於說明文件的標題和整個文件的一些公共屬性
- <body>與</body>之間的部分是HTML的“文件主體”
如果不加以說明，均是指嵌套在<body>與</body>這一“成對標簽”中。
1.2.2 HTML基本標記
1. 文件開始標記<html></html>
用於表示該文件是用“超文本標記語言”（HTML）編寫的。<html>和</html>成對出現，分別位於文件的“最前面”和“最後面”。
2. 文件頭部標記 <head></head>
文件頭部用來規定該文件的標題和文件的一些屬性。標題出現在Web瀏覽器窗口的標題欄中。如：“京東(JD.COM)-正品低價..”字樣，就是該文件的標題。
3. 文件標題標記<title></title>
每個HTML文件都需要一個文件名稱，網頁的名稱寫在<title>和</title>之間，嵌套在<head>和</head>之間。
1 <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！</title>
4. 元信息標記 <meta>
meta元素提供的信息是用戶不可見的，一般用來定義頁面信息的名稱、關鍵字、作者等，一個HTML頭頁面中可以有多個meta元素。
1 <meta charset="UTF-8"> 2 3 <title>京東(JD.COM)-正品低價、品質保障、配送及時、輕松購物！</title> 4 5 <meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"> 6 7 <meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東">元信息標記
5. 頁面的主體標記 <body></body>
<body>和</body>分別表示網頁“主體部分”的開始和結束。常見屬性如下：
1 text 設定頁面文字的顏色 2 bgcolor 設定頁面北京的顏色 3 background 設定頁面背景的圖像 4 bgproperties 設定頁面背景圖像為固定狀態，不隨頁面滾動 5 link 設定頁面默認的鏈接顏色 6 alink 設定鼠標正在單擊時的鏈接顏色 7 vlink 設定訪問過後的鏈接顏色 8 topmargin 設定頁面的上邊距 9 leftmargin 設定頁面的左邊距body元素的屬性
6. 頁面註釋
- 給代碼加註釋，是一種很好的編程習慣，習慣成就人生！
- 尊重自己的勞動成果，尊重他人的閱讀感受！
- 適當的註釋可以幫助用戶更好地了解網頁中各個模塊的劃分，鍛煉自己換位思考的能力！
在HTML文檔中，註釋分為3類：
- <html></html>中的註釋
- CSS層疊樣式表
- JavaScript
註釋說明 單行註釋： <!--註意哦，此處是<html></html>中的“單行註釋”哦！--> /*註意哦，此處是CSS層疊樣式表中的“單行註釋”哦！*/ //註意哦，此處是JavaScript中的“單行註釋”哦！ 多行註釋： /* 註意哦，此處是JavaScript中“多行註釋”哦！ 註意哦，此處是JavaScript中“多行註釋”哦！ 註意哦，此處是JavaScript中“多行註釋”哦！ */HTML+CSS+JavaScript註釋
錯誤註釋舉例：
1 <!--這裏可以添加註釋嗎？！--> 錯誤001 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <--指定頁面編碼格式--> 錯誤002 6 <meta charset="UTF-8"> 7 <title><!--天晴天朗的博客地址：https://home.cnblogs.com/u/tqtl911/--></title>錯誤003 8 </head> 9 <body> 10 <h1>歡迎來到我的博客！cnblogs</h1> /*給cnblogs添加一個註釋*/ 錯誤004 11 </body> 12 </html> 13 錯誤001：<!DOCTYPE html>之前不可以添加註釋的哦！ 14 錯誤002：註釋標記不完整，<---->前面缺少一個"英文感嘆號！"註意哦，是英文的哦！ 15 錯誤003：<title></title>>標簽內部不可以添加註釋的哦！ 16 錯誤004：註釋符號使用錯誤！HTML中應該使用<!--這裏是註釋哦-->，而/*這裏是註釋哦*/是CSS層疊樣式表中的註釋符號。HTML錯誤註釋舉例
1.3 編寫第一個HTML文件
1.3.1 HTML文件的編寫方法
- 手工直接編寫
- 使用可視化軟件
- 由Web服務器一方實時動態生成
1、由於HTML語言編寫的文件是標準的ASCII文本文件，可使用任何編輯器進行打開。如Windows自帶記事本工具或者使用Notepadd++等工具進行編輯。
2、Webstorm、Pycharm、Hbuilder、Sublime等IDE工具，大大提高編寫速度。
3、通過後端的網頁編程實現，如JSP、ASP、PHP，一般情況下需要數據庫配置完成。
1 <!DOCTYPE html><!--註意，這裏的上方是不可以添加註釋的哦！--> 2 <html lang="en"> 3 <head> 4 <!--指定頁面的編碼格式，統一用萬國碼，UTF—8--> 5 <meta charset="UTF-8"> 6 <!--註意哦，此處用了"我們"而不是"我"，大家一起共同成長！--> 7 <title>我們的第一個HTML文件，體驗進入"Web前端"的世界！</title> 8 </head> 9 <body text="#663399"><!--設置文字的顏色，body的屬性之一哦！--> 10 <h2 align="center">HTML5真的很簡單哦！</h2><!--添加一個標題，給自己鼓勁兒吧！--> 11 <hr width="50%"/><!--看到這裏是註釋，在此處添加一條橫線，寬度占比50%！--> 12 <p>希望我的博客能祝你學到前端的知識，一起共同努力吧！</p> 13 <p> 14 謹記：編程，讓你的人生不受限！<br/> 15 編程改變人生，代碼改變世界！<br/> 16 讓我們一起喝下這碗"純粹的"心靈雞湯吧！ 17 </p> 18 </body> 19 </html>編程，讓你的人生不受限！
“終身”學習，生活充滿詩意！
第1章 HTML基礎