一.HTML的介紹
1.HTML的概述
html全稱HyperText Mackeup Language，翻譯為超文本標記語言，它不是一種編程語言，是一種描述性的標記語言，用於描述超文本內容的顯示方式。比如字體、顏色、大小等。
- 超文本：音頻，視頻，圖片稱為超文本。
- 標記 ：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。
作用：HTML是負責描述文檔語義的語言。
注意：HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程)，HTML頁面直接由瀏覽器解析執行。
html中，除了語義，其他什么都沒有。
html是一個純本文文件（就是用txt文件改名而成），用一些標簽來描述文字的語義，這些標簽在瀏覽器里面是看不到的，所以稱為“超文本”，所以就是“超文本標記語言”了。
所以，接下來，我們肯定要學習一堆html中的標簽對兒，這些標簽對兒能夠給文本不同的語義。
比如，面試的時候問你，h1標簽有什么作用？
- 正確答案：給文本增加主標題的語義。
- 錯誤答案：給文字加粗、加黑、變大。
2、HTML的網絡術語
- 網頁 ：由各種標記組成的一個頁面就叫網頁。
- 主頁(首頁) : 一個網站的起始頁面或者導航頁面。
- 標記：
<p>稱為開始標記 ，</p>稱為結束標記，也叫標簽。每個標簽都規定好了特殊的含義。 - 元素：
<p>內容</p>稱為元素. - 屬性：給每一個標簽所做的輔助信息。
二.HTML的規范
- HTML是一個弱勢語言
- HTML不區分大小寫
- HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符，比如dos系統)
- HTML的結構：
- 聲明部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標准。是HTML5標准。
- head部分：將頁面的一些額外信息告訴服務器。不會顯示在頁面上。
- body部分：我們所寫的代碼必須放在此標簽內。
1.編寫的規范
1）所有標記元素都要正確的嵌套，不能交叉嵌套。正確寫法舉例：<h1><font></font></h1>
（2）所有的標記都必須小寫。
（3）所有的標記都必須關閉。
- 雙邊標記：
<span></span> - 單邊標記：
<br>轉成<br /><hr>轉成<hr />，還有<img src=“URL” />
（4）所有的屬性值必須加引號。<h1 id="head"></h1>
（5）所有的屬性必須有值。<input type="radio" checked="checked" />
2.HTML的基本語法特征
HTML對換行不敏感,對tab不敏感
空白折疊現象 HTML中所有的文字之間，如果有空格、換行、tab都將被折疊為一個空格顯示。
標簽要嚴格封閉
三.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...開頭的這一行，就是文檔聲明頭
2.頭標簽( head)
head標簽都放在頭部分之間。這里面包含了：<title>、<meta>、<link>，<style>
<title>：指定整個網頁的標題，在瀏覽器最上方顯示。<meta>：提供有關頁面的基本信息<link>：定義文檔與外部資源的關系。- <style>:定義內部樣式表與網頁的關系
mata標簽
元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標簽位於文檔的頭部，不包含任何內容
（1）http-equiv屬性 它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。
<!--重定向 2秒后跳轉到對應的網址，注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
（2）name屬性 主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="Description" content="網易是中國領先的互聯網技術公司，為用戶提供免費郵箱、游戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />
結果:
title標簽 主要用來告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題。
<title>路飛學城</title>
結果:
link標簽
<link rel="shortcut icon" href="http://hcdn1.luffycity.com/static/frontend/index/Luffy-study-logo.png"> <!--css的作用修飾標簽 靜態資源--> <!--<link rel="stylesheet" href="./index.css">-->
style標簽
<style type="text/css"> h2{ color: blue; } </style>
3.<body>內常用標簽
基本標簽
'''
<hn>: n的取值范圍是1~6; 從大到小. 用來表示標題.
<p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
<b> <strong>: 加粗標簽.
<strike>: 為文字加上一條中線.
<em>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角表.
<br>:換行.
<hr>:水平線
特殊字符：
< >；"；©®
'''
常用標簽練習
從上面的練習中總結：
標簽的分類一：
自閉合標簽：單標簽
閉合標簽：雙標簽
標簽的分類二：
塊級標簽：就是獨占一行，可以自行設置寬高！如：先學到的 div,p,h1-h6
內聯標簽：按內容占位，高度和廣度是由自己的內容填充的 如： a,br,img
判斷塊級標簽和內聯標簽的方法：
1.是否獨占一行（可以通過設置背景顏色去判斷）
2.是否可以單獨為元素設置高度和寬度。
<div>和<span>
<div></div> ： <div>只是一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
圖形標簽: <img>
''' src: 要顯示圖片的路徑. alt: 圖片沒有加載成功時的提示. title: 鼠標懸浮時的提示信息. width: 圖片的寬 height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.) '''
超鏈接標簽(錨標簽): <a> </a>
什么是超級鏈接？ 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序
'''
<a href="" target="_blank" >click</a>
href屬性指定目標網頁地址。該地址可以有幾種類型：
絕對 URL - 指向另一個站點（比如 href="http://www.jd.com）
相對 URL - 指當前站點中確切的路徑（href="index.htm"）
錨 URL - 指向頁面中的錨（href="#top"）
'''
列表標簽
'''
<ul>: 無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<ol>: 有序列表
<li>:列表中的每一項.
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
'''
表格標簽: <table>
表格概念
表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。
表格的基本結構：
<table>
<tr>
<th>標題</th>
<th>標題</th>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
</tr>
</table>
屬性：
'''
<tr>: 表行
<th>: 表頭
<td>:表數據
屬性:
border: 表格邊框.
cellpadding: 內邊距
cellspacing: 外邊距.
width: 像素 百分比.（最好通過css來設置長寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合並單元格）
'''