Html基礎（1）
一.網頁介紹
網頁主要由文字、圖片和按鈕等元素構成。當然，除了這些元素，網頁中還可以包含音訊、視訊以及Flash等。
總結：
網頁其實就是由html標籤組成的。
二.瀏覽器介紹
瀏覽器是網頁執行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
瀏覽器最重要的部分是瀏覽器的核心。瀏覽器核心是瀏覽器的核心，也稱“渲染引擎”，用來解釋網頁語法並渲染到網頁上。瀏覽器核心決定了瀏覽器該如何顯示網頁內容以及頁面的格式資訊。不同的瀏覽器核心對網頁的語法解釋也不同，因此網頁開發者需要在不同核心的瀏覽器中測試網頁的渲染效果。
四大核心分別是：Trident（也稱IE核心）、webkit、Blink、Gecko。五大瀏覽器採用的都是單核心，而隨著瀏覽器的發展現在也出現了雙核心。像360瀏覽器、QQ瀏覽器都是採用雙核心。
下面總結一下各常用瀏覽器所使用的核心：
1、IE瀏覽器核心：Trident核心，也是俗稱的IE核心；
2、Chrome瀏覽器核心：統稱為Chromium核心或Chrome核心，以前是Webkit核心，現在是Blink核心；
3、Firefox瀏覽器核心：Gecko核心，俗稱Firefox核心； 4、Safari瀏覽器核心：Webkit核心；
5、Opera瀏覽器核心：最初是自己的Presto核心，後來是Webkit，現在是Blink核心；
6、360瀏覽器、獵豹瀏覽器核心：IE+Chrome雙核心；
7、搜狗、遨遊、QQ瀏覽器核心：Trident（相容模式）+Webkit（高速模式）；
8、百度瀏覽器、世界之窗核心：IE核心；
9、2345瀏覽器核心：以前是IE核心，現在也是IE+Chrome雙核心；
三.HTML介紹
1.html簡介
html (Hyper Text Markup Language ) 中文譯為“超文字標記語言”，主要是通過html標記對網頁中的文字，圖片，聲音等內容進行描述.
HTML之所以稱為超文字標記語言，不僅是因為他通過標記描述網頁內容，同時也由於文字中包含了所謂的“超級連結”，通過超連結可以實現網頁的跳轉。從而構成了豐富多彩的Web頁面。
2. html結構
目前我們是按照html5結構去設計網頁的.
之前有： html4 , xhtml（擴充套件）
html5結構：
<!DOCTYPE html>
<html lang= XHTML1.0過渡版本：
<!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>
XHTML1.0嚴格版本(標準版本)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
HTML4.01過渡版本：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML4.01嚴格版本(標準版本)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
四.HTML標籤
HTML標籤是分等級的，HTML將所有的標籤分為兩種：容器級、文字級。
顧名思義，容器級的標籤，裡面可以放置任何東西；
文字級的標籤裡面，只能放置文字、圖片、表單元素。
標籤寫法分類：
雙標籤： 有開始和結束標籤 。例如： head body title
單標籤： 只有開始沒有結束。 例如： meta , hr,br…
html標籤
根標籤。用於告知瀏覽器其自身是一個 HTML 文件，在他們之間的是文件的頭部和主體內容。
head標籤
用於定義HTML文件的頭部資訊，也稱為頭部標記，緊跟在標記之後，主要用來封裝其他位於文件頭部的標記。
一個HTML文件只能含有一對標記，絕大多數文件頭部包含的資料都不會真正作為內容顯示在頁面中。
title標籤
<title>標題</title>
body標籤
標記用於定義HTML文件所要顯示的內容，也稱為主體標記。瀏覽器中顯示的所有文字、影象、音訊和視訊等資訊都必須位於標記內，標記中的資訊才是最終展示給使用者看的。
一個HTML文件只能含有一對標記，且標記必須在標記內，位於頭部標記之後.
meta標籤
1.設定網頁編碼
<meta charset="UTF-8">
標題標籤
標題標籤只有從h1-h6，在當前網頁中最好一號標題出現一次。
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
橫線標籤
<hr>
換行標籤
<br>
註釋標籤
<!-- 註釋語句 -->
段落標籤p
<p>段落</p>
p標籤是一個文字級標籤。從學習p的第一天開始，就要死死記住：p裡面只能放文字、圖片、表單元素。其他的一律不能放。
下面例子是錯誤的：
<p>
我是一個小段落
<h1>我是一個主標題</h1>
</p>
格式化標籤（突出顯示資訊）
文字加粗
<strong></strong> 或者 <b></b>
文字斜體
<em></em> 或者 <i></i>
文字下劃線
<ins></ins> 或者 <u></u>
設定文字顏色或者大小
<font color="red" size="5">段落</font>
刪除線標籤
<del> </del> 或者 <s></s>
div和span標籤
div在瀏覽器中，預設是不會增加任何的效果改變的，但是語義變了，div中的所有元素是一個小區域。
div標籤是一個容器級標籤，裡面什麼都能放，甚至可以放div自己
span也是表達“小區域、小跨度”的標籤，但是是一個“文字級”的標籤。
就是說，span裡面只能放置文字、圖片、表單元素。 span裡面不能放p、h、ul、dl、ol、div。
span裡面是放置小元素的，div裡面放置大東西的.
總結：
使用場景是在網頁佈局過程中使用該標籤；
該標籤屬於沒有語義的標籤。
圖片標籤img
<img src="2018-06-19_161734.png" alt="圖片">
<img src="加(1).png" alt="圖片" title="描述" width="200" height="200">
alt是英語alternate“替代”的意思，就表示不管因為什麼原因，當這個圖片無法被顯示的時候，出現的替代文字（有的瀏覽器不支援）。
title=“”：設定滑鼠懸停到圖片上的文字提示
width: 設定寬度
height:設定高度
總結：
圖片標籤也屬於多媒體標籤的一部分
多媒體標籤有自己的縮放比例關係，所以只要設定寬或者高其中一個就可以。
路徑
絕對路徑：凡是帶有磁碟目錄或者網站地址的路徑。
相對路徑：
相對路徑必須保證在同一個根目錄下；
沒有磁碟目錄或者網站地址的路徑。
1.如果當前頁面（html）和要訪問的資源（圖片），在同一個資料夾中， src=”直接設定圖片名稱即可”
2.頁面在圖片的上一級目錄中
<img src="images/baby.jpg" alt="巴黎結婚照" />
3.頁面在圖片的下一級目錄中
<img src="../3.jpg" alt="" />
<img src="../../shizi.jpg" alt="" />
超級連結:a
作用： 實現頁面跳轉
<a href="http:www.baidu.com">百度一下</a>
<a href="http:www.baidu.com" title="懸停文字">百度一下</a>
//如果不寫target=”_blank”那麼就是在相同的標籤頁開啟，如果寫了，就是在新的空白標籤頁中開啟。
//完整的超級連結
<a href="http:www.baidu.com" title="懸停文字" target="_blank">百度一下</a>
可以在 在head標籤中新增base標籤，在base標籤中設定target屬性為_blank;
<base href="_blank">
a是一個文字級的標籤,a的語義要小於p，a就是可以當做文字來處理，所以p裡面相當於放的就是純文字。
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
超連結在本頁面內部跳轉的2中方式
1.直接設定href的值為=”#”
2.頁面內的錨點:
頁面當中可以有錨點，所謂的錨點，就是一個小標記，這個小標記是使用者不可察覺的，使用者不知道這裡有一個標記。
錨點用name屬性來設定，一個a標籤如果name屬性（或者id屬性），那麼就是頁面的一個錨點。
<a name="wdzp">我的作品</a>
或者：
<a id="wdzp">我的作品</a>
<a href="#wdzp">點選我就檢視我的作品</a>
頁面錨點案例：
<body>
<a href="#gzjy">點選我就檢視工作經驗</a>
<a href="#wdzp">點選我就檢視我的作品</a>
<h1>個人簡介</h1>
<h2>基本資訊</h2>
<p>基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本資訊基本</p>
<h2><a id="gzjy">工作經驗</a></h2>
<p>工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗工作經驗</p>
<h2><a id="wdzp">我的作品</a></h2>
<p>我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品我的作品</p>
</body>
跨頁面錨點案例（2個頁面在同一資料夾下）：
<a href="11_頁面內錨點.html#gzjy">檢視小明同學的工作經驗</a>
字元實體
在 HTML 中，某些字元是預留的。
在 HTML 中不能使用小於號（<）和大於號（>），這是因為瀏覽器會誤認為它們是標籤。
如果希望正確地顯示預留字元，我們必須在 HTML 原始碼中使用字元實體（character entities）。
標籤語義化
概念：根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化）。
意義：
1:網頁結構合理
2:有利於seo:和搜尋引擎建立良好溝通，有了良好的結構和語 義你的網頁內容自然容易被搜尋引擎抓取；
3:方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）
4:便於團隊開發和維護
注意事項：
1：儘可能少的使用無語義的標籤div和span；
2：在語義不明顯時，既可以使用div或者p時，儘量用p
3：不要使用純樣式標籤，如：b、font、u等，改用css設定。
4：需要強調的文字，可以包含在strong或者em標籤中strong預設樣式是加粗（不要用b），em是斜體（不用i）；
新語義標籤
總結:
該標籤的用法與div用法一樣
該標籤有語義，div沒有語義