常見的瀏覽器及其內核
- Google瀏覽器：Chromium/Blink,之前用的webkit
- IE瀏覽器：Trident—“兼容模式”
- Edge瀏覽器：EdgeHTML
- 火狐瀏覽器：Gecko—代碼公開
- Safari瀏覽器：webkit
- Opera瀏覽器：Presto—“前任內核”，目前使用Blink內核
Web標準
好處：
- 讓Web的發展前景更廣闊
- 內容能被更廣泛的設備訪問
- 更容易被搜索引擎搜索
- 降低網站流量費用
- 使網站更易於維護
- 提高頁面瀏覽速度
構成：
結構標準：結構用於對網頁元素進行整理和分類，主要包括XML和XHTML兩個 部分
樣式標準：表現用於設置網頁元素的版式、顏色、大小等外觀樣式，主要指的 是CSS
行爲標準：行爲指的是網頁模型的定義及交互的編寫，主要包括DOM和CMAScript兩個部分
理想狀態我們的源碼：.html .css .js
開發工具
- Dreamweave
- Sublime
- WebStorm
- HBuilder
- Visual Studio Code
HTML初識
超文本標記語言，主要通過HTML標籤對網頁中的文本、圖片、聲音等內容進行描述。
HTML 標籤
HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。
- HTML 標籤是由尖括號包圍的關鍵詞
- HTML 標籤通常是成對出現的
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱爲開放標籤和閉合標籤
語法骨架
<html> 根標籤
<head> 頭標籤
<title></title> 標題標籤
</head>
<body> 主題標籤
</body>
</html>1234567- html標籤：作用：所有html中標籤的一個根節點
- head標籤：作用：用於存放：title,metal,base,style,script,link 注意在head標籤中必須設置title標籤
- title標籤 ：作用：讓頁面擁有一個屬於自己的標題
- body標籤：作用：頁面的主體部分，用於存放所有的html標籤：p,h,a,b,u,i,s,em,dei,ins,strong,img
字符集
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312
- gb2312：簡體中文
- BIG5：繁體中文
- GBK：包含全部中文字符，兼容GB2312
- UTF-8：包含全世界所有國家需要用到的字符
HTML標籤
排版標籤
標題標籤（熟記）
標題（Heading）是通過<h1>-<h6>等標籤進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。
段落標籤（熟記）
段落是通過 <p>標籤定義的。
水平線標籤（認識）
<hr />標籤在 HTML 頁面中創建水平線。hr 元素可用於分隔內容。
換行標籤（熟記）
如果希望在不產生一個新段落的情況下進行換行（新行），可以使用 <br />標籤。<br />元素是一個空的 HTML 元素。由於關閉標籤沒有任何意義，因此它沒有結束標籤。
也許發現<br> 與<br />很相似。在 XHTML、XML 以及未來的 HTML 版本中，不允許使用沒有結束標籤（閉合標籤）的 HTML 元素。
即使 <br>在所有瀏覽器中的顯示都沒有問題，使用<br /> 也是更長遠的保障。
div span標籤（重點）
div和span是沒有語義的，是我們網頁佈局主要的兩個盒子
<div> 可定義文檔中的分區或節（division/section）。
<div> 標籤可以把文檔分割爲獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。如果用 id 或 class 來標記<div>，那麼該標籤的作用會變得更加有效。
<div>是一個塊級元素。這意味着它的內容自動地開始一個新行。實際上，換行是 <div>固有的唯一格式表現。可以通過<div>的 class 或 id 應用額外的樣式。不必爲每一個<div>都加上類或 id，雖然這樣做也有一定的好處。
可以對同一個<div> 元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解爲某一類元素），而 id 用於標識單獨的唯一的元素。<span>標籤被用來組合文檔中的行內元素。如果不對 span 應用樣式，那麼 span 元素中的文本與其他文本不會任何視覺上的差異。儘管如此，上例中的 span 元素仍然爲 p 元素增加了額外的結構。可以爲 span 應用 id 或 class 屬性，這樣既可以增加適當的語義，又便於對 span 應用樣式。可以對同一個<span>元素應用 class 或 id 屬性，但是更常見的情況是隻應用其中一種。這兩者的主要差異是，class 用於元素組（類似的元素，或者可以理解爲某一類元素），而 id 用於標識單獨的唯一的元素。
文本格式化標籤（熟記）
標籤屬性
HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現，比如：name=”value”。
屬性總是在 HTML 元素的開始標籤中規定。
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" ...> 內容 </標籤名>1- 標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後
- 屬性之間不分先後順序，標籤名和屬性、屬性與屬性之間均以空格分開
- 任何標籤的屬性都有默認值，省略該屬性則取默認值
圖像標籤Img（重點）
在 HTML 中，圖像由 <img> 標籤定義。<img>ooooooo是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。
要在頁面上顯示圖像，你需要使用源屬性（src）。src 指 “source”。源屬性的值是圖像的 URL 地址。
定義圖像的語法是：
<img src="圖像URL" />1<img />標記屬性：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| scr | URL | 圖像的路徑 |
| alt | 文本 | 圖像不能顯示時的替換文本 |
| title | 文本 | 鼠標懸停時顯示的內容 |
| width | 像素 | 設置圖像的寬度 |
| height | 像素 | 設置圖像的高度 |
| border | 數字 | 設置圖像邊框的寬度 |
鏈接標籤（重點）
HTML 使用超級鏈接與網絡上的另一個文檔相連。
幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。
當把鼠標指針移動到網頁中的某個鏈接上時，箭頭會變爲一隻小手。
我們通過使用<a> 標籤在 HTML 中創建鏈接。
有兩種使用<a>標籤的方式：
- 通過使用 href 屬性 - 創建指向另一個文檔的鏈接
- 通過使用 name 屬性 - 創建文檔內的書籤
基本語法：
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>1href 屬性規定鏈接指向的頁面的 URL。
target屬性規定在何處打開鏈接文檔。
錨點定位（難點）
通過創建錨點鏈接，用戶能夠快速定位到目標內容
創建錨點需要兩步：
- 使用”a href=”#id名”連接文本/a”創建鏈接文本
- 使用相應的Id名標註跳轉目標的位置
base標籤
base標籤可以設置整體鏈接的打開狀態，寫在<head></head>之間
特殊字符標籤（理解）
| 特殊字符 | 描述 | 字符的代碼 |
|---|---|---|
| 空格符 | |
|
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| ¥ | 人民幣 | ¥ |
| © | 版權 | © |
| ® | 註冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方2 | ² |
| ³ | 立方3 | ³ |
註釋標籤
在html中還有一種特殊的標籤——註釋標籤。如果需要在html文檔中添加一些便於閱讀和理解但又不需要顯示在頁面的註釋文字，就需要使用註釋標籤，基本語法格式如下：
<!-- 註釋語句 -->1路徑
HTML有2種路徑的寫法：相對路徑\ 和絕對路徑\。
HTML相對路徑(Relative Path)
同一個目錄的文件引用
如果源文件和引用文件在同一個目錄裏，直接寫引用文件名即可。
我們現在建一個源文件index.html，在index.html裏要引用login.html文件作爲超鏈接。
假設index.html路徑是：C:\Users\lenovo\Desktop\index.html
假設login.html路徑是：C:\Users\lenovo\Desktop\login.html
在index.html加入login.html超鏈接的代碼應該這樣寫：
<a href = "login.html">login.html</a> 1表示上級目錄
../表示源文件所在目錄的上一級目錄，../../表示源文件所在目錄的上上級目錄，以此類推。
假設index.html路徑是：C:\Users\lenovo\Desktop\index.html
假設login.html路徑是：C:\Users\lenovo\login.html
在index.html加入login.html超鏈接的代碼應該這樣寫：
<a href = "../login.html">login.html</a> 1假設index.html路徑是：C:\Users\lenovo\Desktop\index.html
假設login.html路徑是：C:\Users\login.html
在index.html加入login.html超鏈接的代碼應該這樣寫：
<a href = "../../login.html">loginx.html</a> 1假設index.html路徑是：C:\Users\lenovo\Desktop\index.html
假設login.html路徑是：C:\Users\lenovo\Desktop\Dreamweave\login.html
在index.html加入login.html超鏈接的代碼應該這樣寫：
<a href = "../Dreamweave/login.html">loginx.html</a> 1表示下級目錄
引用下級目錄的文件，直接寫下級目錄文件的路徑即可。
假設index.html路徑是：C:\Users\lenovo\Desktop\index.html
假設login.html路徑是：C:\Users\lenovo\Desktop\html\login.html
在index.html加入login.html超鏈接的代碼應該這樣寫：
<a href = "html/login.html">login.html</a> 1假設index.html路徑是：C:\Users\lenovo\Desktop\index.html
假設login.html路徑是：C:\Users\lenovo\Desktop\html\student\login.html
在index.html加入login.html超鏈接的代碼應該這樣寫：
<a href = "html/student/login.html">login.html</a> 1HTML絕對路徑(Absolute Path)
HTML絕對路徑(absolute path)指帶域名的文件的完整路徑。
假設你註冊了域名www.php.cn 並申請了虛擬主機，你的虛擬主機提供商會給你一個目錄，比如www，這個www就是你網站的根目錄。
假設你在www根目錄下放了一個文件index.html，這個文件的絕對路徑就是： http:// www .php. cn/index .html 。
假設你在www根目錄下建了一個目錄叫html_student，然後在該目錄下放了一個文件index.html，這個文件的絕對路徑就是http ://www . php. cn/html_student/index.html。
列表標籤
HTML 支持有序、無序和自定義列表
無序列表 ul （重點）
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表始於<ul>標籤。每個列表項始於<li>。
瀏覽器顯示如下：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>1234- Coffee
- Milk
注意：ul標籤只能放li標籤
li標籤中可以存放所有標籤
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
有序列表 ol （瞭解）
同樣，有序列表也是一列項目，列表項目使用數字進行標記。
有序列表始於<ol> 標籤。每個列表項始於<li>標籤。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>1234瀏覽器顯示如下：
- Coffee
- Milk
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
自定義列表 （理解）
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以<dl>標籤開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>123456瀏覽器顯示如下：
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。