1 HTML初識
HTML標簽就是用來表達網頁上的文字、圖片、鏈接、音視頻等等的······
1.1 HTML標簽分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <HTML>、<head>、<body>都是HTML標簽。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素
1)雙標簽
<標簽名> 內容 </標簽名>
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
比如 <body>我是文字 </body>
2)單標簽
<標簽名 />
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。
比如 <br />
1.2 HTML標簽關系
1)嵌套關系
<head> <title> </title> </head>
2)並列關系
<head></head> <body></body>
請問下列哪個標簽是錯誤的？
A <head></head><body></body>
B <strong><div></div></strong>
C <head><title></head></title>
D <body><div></div></body>
建議： 如果兩個標簽之間的關系是嵌套關系，子元素最好縮進一個tab鍵的身位。如果是並列關系，最好上下對齊。
在頁面中輸入 以下2種單詞中的一種
1. html: 5
2. !
在sublime里面然后按下tab鍵盤即可生成HTML骨架
<!DOCTYPE html>
這句話就是告訴我們使用哪個html版本？ 我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。
1.4 字符集
<meta charset="UTF-8">
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。
gb2312 簡單中文 包括6763個漢字
BIG5 繁體中文 港澳台等用
GBK包含全部中文字符 是GB2312的擴展，加入對繁體字的支持，兼容GB2312
UTF-8則包含全世界所有國家需要用到的字符
記住一點，以后我們統統使用 UTF-8 字符集, 這樣就避免出現字符集不統一而引起亂碼的情況了。
1.5 HTML標簽的語義化
所謂標簽語義化，就是指標簽的含義。
為什么要有語義化標簽?
-
方便代碼的閱讀和維護
-
同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容
-
使用語義化標簽會具有更好地搜索引擎優化
核心：合適的地方給一個最為合理的標簽。
語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，並且有良好的可讀性。
不管是誰都能看懂這塊內容是什么。
遵循的原則：先確定語義的HTML ，再選合適的CSS。
2 HTML標簽
HTML標簽有很多，這里我們學習最為常用的，后面有些較少用的，我們可以查下手冊就可以了。
2.1排版標簽
排版標簽主要和css搭配使用，顯示網頁結構的標簽，是網頁布局最常用的標簽。
1)標題標簽 (熟記)
單詞縮寫： head 頭部. 標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
標題標簽語義： 作為標題使用，並且依據重要性遞減
其基本語法格式如下：n為1~6
<hn> 標題文本 </hn>
注意： h1 標簽因為重要，盡量少用，不要動不動就向你扔了一個h1。 一般h1 都是給logo使用。
2)段落標簽( 熟記)
單詞縮寫： paragraph 段落
在網頁中要把文字有條理地顯示出來，離不開段落標簽，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標簽就是
<p> 文本內容 </p>
是HTML文檔中最常見的標簽，默認情況下，文本在一個段落中會根據瀏覽器窗口的大小自動換行。
3)水平線標簽(認識)
單詞縮寫： horizontal 橫線
在網頁中常常看到一些水平線將段落與段落之間隔開，使得文檔結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標簽來完成，<hr />就是創建橫跨網頁水平線的標簽。其基本語法格式如下：
<hr />是單標簽
在網頁中顯示默認樣式的水平線。
例題： 新聞頁面
4)換行標簽(熟記)
單詞縮寫： break 打斷 ,換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強制換行顯示，就需要使用換行標簽
<br />
這時如果還像在word中直接敲回車鍵換行就不起作用了。
5)div span標簽(重點)
div span 是沒有語義的 是我們網頁布局主要的2個盒子
div 就是 division 的縮寫 分割， 分區的意思 其實有很多div 來組合網頁。
span, 跨度，跨距；范圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>
2.2 文本格式化標簽(熟記)
b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈
2.3
屬性就是特性 比如 手機的顏色 手機的尺寸 ，總結就是手機的。。
使用HTML制作網頁時，如果想讓HTML標簽提供更多的信息，可以使用HTML標簽的屬性加以設置。其基本語法格式如下：
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標簽名>
在上面的語法中，
1.標簽可以擁有多個屬性，必須寫在開始標簽中，位於標簽名后面。
2.屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開。
3.任何標簽的屬性都有默認值，省略該屬性則取默認值。
采取 鍵值對 的格式 key="value" 的格式
比如:
<hr width="400" />
屬性 是 寬度
值 是 400
建議： 盡量不使用 樣式屬性。
2.4 圖像標簽img (重點)
單詞縮寫： image 圖像
HTML網頁中任何元素的實現都要依靠HTML標簽，要想在網頁中顯示圖像就需要使用圖像標簽，接下來將詳細介紹圖像標簽<img />以及和他相關的屬性。其基本語法格式如下：
該語法中src屬性用於指定圖像文件的路徑和文件名，他是img標簽的必需屬性。
<img src="圖像URL" />
2.5 鏈接標簽(重點)
單詞縮寫： anchor 的縮寫 。基本解釋 錨, 鐵錨 的
在HTML中創建超鏈接非常簡單，只需用標簽環繞需要被鏈接的對象即可，其基本語法格式如下：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
href：用於指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。 Hypertext Reference的縮寫。意思是超文本引用
target：用於指定鏈接頁面的打開方式，其取值有self和blank兩種，其中self為默認值，blank為在新窗口中打開方式。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內部鏈接 直接鏈接內部頁面名稱即可 比如 < a href="index.html"> 首頁 </a >
3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
4.不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
1)錨點定位 （難點）
通過創建錨點鏈接，用戶能夠快速定位到目標內容。 創建錨點鏈接分為兩步：
1.使用“a href=”#id名>“鏈接文本"</a>創建鏈接文本。
2.使用相應的id名標注跳轉目標的位置。
2)base 標簽
base 可以設置整體鏈接的打開狀態
base 寫到 <head> </head> 之間
2.7 注釋標簽
在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便於閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。其基本語法格式如下：
<!-- 注釋語句 -->
注釋內容不會顯示在瀏覽器窗口中，但是作為HTML文檔內容的一部分，也會被下載到用戶的計算機上，查看源代碼時就可以看到。
注釋重要性：
