1.HTML介紹
Html是用來(lái)描述網(wǎng)頁(yè)(html文件)的一種超文本標(biāo)記語(yǔ)言。
HTML 不是一種編程語(yǔ)言，而是一種標(biāo)記語(yǔ)言 (markup language)
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
- HTML書寫規(guī)范
(1)基本規(guī)范
雙標(biāo)簽<> </>；單標(biāo)簽</>
標(biāo)簽間有包含和并列關(guān)系
（2）html骨架標(biāo)簽
| 標(biāo)簽名 | 定義 | 說(shuō)明 |
|---|---|---|
| <html></html> | HTML標(biāo)簽 | 頁(yè)面中最大的標(biāo)簽，我們稱為跟標(biāo)簽 |
| <head></head> | 文檔頭部 | 注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title |
| <title></title> | 文檔的標(biāo)題 | 讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題 |
| <body></body> | 文檔的主題 | 元素包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容基本都是放到body里面的 |
<html></html>
3.HTML常用標(biāo)簽
（1）h1到h6標(biāo)簽 可以定義不同的字體大小。
一般來(lái)說(shuō)一個(gè)頁(yè)面只有一個(gè)h1
用來(lái)包住 這個(gè)網(wǎng)頁(yè)的名字 或者logo。
不限制數(shù)量但是一般用來(lái)包住欄目標(biāo)題。
<h1> - <h6> 標(biāo)簽可定義標(biāo)題。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
（2）p標(biāo)簽
是一個(gè)塊標(biāo)簽
不能鑲嵌塊標(biāo)簽
一般用來(lái)承載文字
（3）ol標(biāo)簽
有序列表
默認(rèn)在每一行前面 通過(guò)：marker 偽類 生成序號(hào)
有一個(gè)默認(rèn)的padding-left
（4）ul 標(biāo)簽
無(wú)須列表
每一行前面 有一個(gè)默認(rèn)的點(diǎn)
有默認(rèn)的padding
需要做樣式的初始化
刪除點(diǎn)：list-style-type:none;
（5）li標(biāo)簽
塊標(biāo)簽
必須ol或者ul搭配使用 無(wú)法單獨(dú)使用
可以承載圖文等超文本 也可以鑲嵌塊標(biāo)簽和行標(biāo)簽
由于前端的代碼規(guī)范 一般來(lái)說(shuō) 幾乎所有的菜單或者導(dǎo)航欄 都用ul+li來(lái)寫
（6）hr標(biāo)簽
標(biāo)簽內(nèi)部不承載任何東西 僅僅作為i一條下劃線
（7）br標(biāo)簽
作用就是換行
可以寫在標(biāo)簽外部也可寫在標(biāo)簽內(nèi)部
屬于功能性標(biāo)簽 既不是行標(biāo)簽也不是塊標(biāo)簽
（8）q標(biāo)簽
給標(biāo)簽內(nèi)的內(nèi)容加上引號(hào)
（9）<img>標(biāo)簽
給img在行間樣式里面 設(shè)置寬高 不用寫style
alt 屬性在圖片未加載出來(lái) 出現(xiàn)的文字屬性 就是文字提示
補(bǔ)充：路徑知識(shí)
（1）目錄文件夾和根目錄
目錄文件夾：存放網(wǎng)頁(yè)所需東西（如html文件 圖片）的文件夾
根目錄：目錄文件夾的第一頁(yè)
（2）相對(duì)路徑和絕對(duì)路徑
相對(duì)路徑：圖片相對(duì)html文件的位置
| 相對(duì)路徑分類 | 符號(hào) | 說(shuō)明 |
|---|---|---|
| 同一級(jí)目錄 | 圖像文件位于HTML文件同一級(jí) 像><img src=baidu.com/> | |
| 下一級(jí)目錄 | / | 圖像文件位于HTML文件下一級(jí) 像><img src=img/baidu.com/> |
| 上一級(jí)目錄 | ../ | 圖像文件位于HTML文件下一級(jí) 像><img src=../baidu.com/> |
圖片標(biāo)簽的其他屬性
| 屬性 | 屬性值 | 說(shuō)明 |
|---|---|---|
| src | 圖片路徑 | 必須屬性 |
| alt | 文本 | 替換文本 圖像不能顯示時(shí)的文字 |
| title | 文本 | 提示文本。鼠標(biāo)放到圖片上，顯示的文字 |
| width | 像素 | 設(shè)置圖像的寬度 |
| height | 像素 | 設(shè)置圖像的高度 |
| border | 像素設(shè)置圖像的邊框粗細(xì) |
圖像標(biāo)簽屬性注意點(diǎn)：
① 圖像標(biāo)簽可以擁有多個(gè)屬性，必須卸載標(biāo)簽名的后面。
② 屬性自己不放先后順序，標(biāo)簽名與屬性，屬性與屬性之間均以空格分開(kāi)。
③ 屬性采取鍵值對(duì)的個(gè)數(shù)，即key="value"的個(gè)數(shù)，屬性=“屬性值”。
(10)a標(biāo)簽
1.是個(gè)行標(biāo)簽
<a>標(biāo)簽用于定義超鏈接，作用是從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面
可以進(jìn)行頁(yè)面跳轉(zhuǎn)
跳轉(zhuǎn)路徑圍在 href屬性中編寫
2 移動(dòng)端撥號(hào)
在移動(dòng)設(shè)備中 可以進(jìn)行打電話
<a href="tel:1234567">撥打</a>
3 在頁(yè)面中 做秒點(diǎn)鏈接 （前提是同頁(yè)面）
<a href="#box1">box1<a/> #是id
<div id="box1"class="box1"></div>
在href中填寫目標(biāo)id
target 屬性 定義 是否在新頁(yè)面打開(kāi)
<a href="/dermol.html"target="black">demol a >
4.文檔類型的聲明
<!DOCTYPE>文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來(lái)顯示網(wǎng)頁(yè)。
<!DOCTYPE html>
這句代碼的意思是：當(dāng)前頁(yè)面采取的是HTML5版本來(lái)顯示網(wǎng)頁(yè)
<!DOCTYPE>聲明位于文檔中的最前面的位置，處于<html>標(biāo)簽之前。
<!DOCTYPE>不是一個(gè)HTML標(biāo)簽，它就是文檔類型聲明標(biāo)簽
lang="zh-CN"用來(lái)定義當(dāng)前文檔顯示的語(yǔ)言。
en英語(yǔ)
fr法語(yǔ)
japanese日語(yǔ)
charset=“utf-8” 字符集
字符集（Character set）是多個(gè)字符的集合。以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。
在<head>標(biāo)簽內(nèi)。可以通過(guò)<mete>標(biāo)簽的charset屬性來(lái)規(guī)定HTML文檔應(yīng)該使用哪種字.
5.. HTML常識(shí)
(1)HTML常用英文
target 目標(biāo)
contents 內(nèi)容
markup tag 標(biāo)記標(biāo)簽
paragraph 段落標(biāo)簽<p>
(2) 瀏覽器內(nèi)核
| 瀏覽器 | 內(nèi)核 | 備注 |
|---|---|---|
| IE | TridentIE | 獵豹安全、360極速瀏覽器、百度瀏覽器 |
| firefox | Gecko | 火狐瀏覽器內(nèi)核 |
| Safari | Webkit | 蘋果瀏覽器內(nèi)核 |
| chrome/Opera | Blink | chrome/opera瀏覽器內(nèi)核。Blink其實(shí)是Webkit的分支 |
