---
學(xué)習(xí)目標(biāo):
? - 了解常用瀏覽器
? - 掌握WEB標(biāo)準(zhǔn)
? - 理解標(biāo)簽語義化
? - 掌握常用的排版標(biāo)簽
? - 掌握常用的文本格式化圖像鏈接等標(biāo)簽
? - 掌握三種列表標(biāo)簽
? - 掌握表格標(biāo)簽
? - 掌握表格標(biāo)簽
? - 掌握表單標(biāo)簽
typora-copy-images-to: media
---
# 自我介紹
傳智講師? 劉曉強(qiáng)? ? 江湖人稱? 強(qiáng)哥?
但是不是
<img src="media/qq.jpg" />
也不是：
<img src="media/lk.jpg" />
其實(shí)這是我：
<img src="media/gt.jpg" />
前端基礎(chǔ)? html +css? ? 基礎(chǔ)班? ? ? ? html 2 +css? 7天? ? 9 天 傳統(tǒng)布局? ? +? 3天 html 5 +css3 基礎(chǔ)
就業(yè)班? js? ? 移動web? ? ? php + 項(xiàng)目? 15? ? ? node? ? ? vue? ? 框架? 微信 ...? 大前端? ?
# HTML 第一天目標(biāo)
能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片葛虐、各種標(biāo)簽和鏈接）
# 開發(fā)工具
我們主要用的 開發(fā)工具有? chrome? 资厉、? sublime 、? photoshop
## 瀏覽器（顯示）
```
瀏覽器是網(wǎng)頁顯示涯呻、運(yùn)行的平臺，常用的瀏覽器有IE沃测、火狐（Firefox）遂铡、谷歌（Chrome）器仗、Safari和Opera等。我們平時稱為五大瀏覽器漱抓。
```
<img src="media/b.png" />
### 查看瀏覽器占有的市場份額（知曉）
查看網(wǎng)站： <a href="http://#baidu.com/data/browser" target="_blank">http://#baidu.com/data/browser</a>
<img src="media/count.png" />
這些工具你認(rèn)識幾個表锻？
## sublime（書寫）
<img src="media/s.png" />
? 普通青年? ? Dreamweaver
? 文藝青年? ? sublime
? 高手和傻子? 用記事本
? 其實(shí)。乞娄。浩嫌。。
? <img src="media/node.png" />
## Photoshop(協(xié)助)
PS 工具是我們使用頻率比較高的軟件之一补胚， 我們學(xué)習(xí)PS目的不是為了設(shè)計海報做電商和UI的，而是要求：
1. **熟練的切圖**
2. 能和網(wǎng)站美工美眉有共同話題追迟。溶其。。敦间。瓶逃。
# 認(rèn)識網(wǎng)頁
```
網(wǎng)頁主要由文字、圖像和超鏈接等元素構(gòu)成廓块。當(dāng)然厢绝，除了這些元素，網(wǎng)頁中還可以包含音頻、視頻以及Flash等。
```
<img src="media/mi.png"alt="">
```
思考：? 網(wǎng)頁是如何形成的呢?
```
<img src="media/web.png" />
# 常見瀏覽器內(nèi)核介紹
```
瀏覽器是網(wǎng)頁運(yùn)行的平臺箱蝠，常用的瀏覽器有IE趟卸、火狐（Firefox）、谷歌（Chrome）滥壕、Safari和Opera等。我們平時稱為五大瀏覽器。
```
<img src="media/b.png" />
## 瀏覽器內(nèi)核（理解）? ? ? ? ? ?
```
瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎娄周。
渲染引擎 它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML沪停、圖像等等）煤辨、整理訊息（例如加入 CSS 等），以及計算網(wǎng)頁的顯示方式木张，然后會輸出至顯示器或打印機(jī)众辨。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同舷礼。
JS 引擎 則是解析 Javascript 語言泻轰，執(zhí)行 javascript語言來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確且轨，后來 JS 引擎越來越獨(dú)立浮声，內(nèi)核就傾向于只指渲染引擎虚婿。有一個網(wǎng)頁標(biāo)準(zhǔn)計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內(nèi)核的種類很多泳挥，如加上沒什么人使用的非商業(yè)的免費(fèi)內(nèi)核然痊，可能會有10多種，但是常見的瀏覽器內(nèi)核可以分這四種：Trident屉符、Gecko剧浸、Blink、Webkit矗钟。
```
（1）Trident(IE內(nèi)核)
國內(nèi)很多的雙核瀏覽器的其中一核便是 Trident唆香，美其名曰 "兼容模式"。
代表： IE吨艇、傲游躬它、世界之窗瀏覽器、Avant东涡、騰訊TT冯吓、獵豹安全瀏覽器、360極速瀏覽器疮跑、百度瀏覽器等组贺。
Window10 發(fā)布后，IE 將其內(nèi)置瀏覽器命名為 Edge祖娘，Edge 最顯著的特點(diǎn)就是新內(nèi)核 EdgeHTML失尖。
（2）Gecko(firefox)
Gecko(Firefox 內(nèi)核)： Mozilla FireFox(火狐瀏覽器) 采用該內(nèi)核，Gecko 的特點(diǎn)是代碼完全公開渐苏，因此雹仿，其可開發(fā)程度很高，全世界的程序員都可以為其編寫代碼整以，增加功能胧辽。 可惜這幾年已經(jīng)沒落了， 比如 打開速度慢公黑、升級頻繁邑商、豬一樣的隊(duì)友flash、神一樣的對手chrome凡蚜。
（3） webkit(Safari)?
Safari 是蘋果公司開發(fā)的瀏覽器人断，所用瀏覽器內(nèi)核的名稱是大名鼎鼎的 WebKit。
現(xiàn)在很多人錯誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）朝蜘，蘋果感覺像被別人搶了媳婦恶迈，都哭暈再廁所里面了。
代表瀏覽器：傲游瀏覽器3谱醇、 Apple Safari (Win/Mac/iPhone/iPad)暇仲、Symbian手機(jī)瀏覽器步做、Android 默認(rèn)瀏覽器，
（4） Chromium/Blink(chrome)
? 在 Chromium 項(xiàng)目中研發(fā) Blink 渲染引擎（即瀏覽器核心）奈附，內(nèi)置于 Chrome 瀏覽器之中全度。Blink 其實(shí)是 WebKit 的分支。
?? ? 大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核斥滤。二次開發(fā)
（5） Presto(Opera)
? Presto（已經(jīng)廢棄） 是挪威產(chǎn)瀏覽器 opera 的 "前任" 內(nèi)核将鸵，為何說是 "前任"，因?yàn)樽钚碌?opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了佑颇。?
```
了解一點(diǎn)：
```
移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核顶掉。
Android手機(jī)而言，使用率最高的就是Webkit內(nèi)核挑胸，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核痒筒，基本上也是屬于webkit二次開發(fā)。
iOS以及WP7平臺上嗜暴，由于系統(tǒng)原因，系統(tǒng)大部分自帶瀏覽器內(nèi)核议蟆，一般是Safari或者IE內(nèi)核Trident的
# Web標(biāo)準(zhǔn)（重點(diǎn)）
通過以上瀏覽器的內(nèi)核不同闷沥，我們知道他們工作原理、解析肯定不同咐容，顯示就會有差別舆逃。
```
問：? 哪個語言再全國基本都可以聽得懂？
```
<img src="media/bz.png" />
## Web 標(biāo)準(zhǔn)的好處
*1*戳粒、讓W(xué)eb的發(fā)展前景更廣闊
*2*路狮、內(nèi)容能被更廣泛的設(shè)備訪問
*3*、更容易被搜尋引擎搜索
*4*蔚约、降低網(wǎng)站流量費(fèi)用
*5*奄妨、使網(wǎng)站更易于維護(hù)
*6*、提高頁面瀏覽速度
##? Web 標(biāo)準(zhǔn)構(gòu)成
Web標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)苹祟，而是由W3C和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合砸抛。
主要包括結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）三個方面树枫。
~~~
結(jié)構(gòu)標(biāo)準(zhǔn)：結(jié)構(gòu)用于對網(wǎng)頁元素進(jìn)行整理和分類直焙，咱們主要學(xué)的是HTML。 最重要
表現(xiàn)標(biāo)準(zhǔn)：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式砂轻、顏色奔誓、大小等外觀樣式，主要指的是CSS搔涝。
行為標(biāo)準(zhǔn)：行為是指網(wǎng)頁模型的定義及交互的編寫厨喂，咱們主要學(xué)的是 Javascript
~~~
理想狀態(tài)我們的源碼： .HTML? ? .css? .js
直觀感受：
<img src="media/gx.png" />
總結(jié)WEB標(biāo)準(zhǔn)：
結(jié)構(gòu)標(biāo)準(zhǔn)：? <img src="media/hb1.png" />? 決定你是否有個好天然身體
表現(xiàn)標(biāo)準(zhǔn)：? <img src="media/hb2.png" />? 決定你是否打扮的美麗外觀
行為標(biāo)準(zhǔn)：? <img src="media/hb3.jpg"? width="420"? />? 決定你是否有吸引人的行為
## 課堂一練：
**1.關(guān)于WEB標(biāo)準(zhǔn)下列說法正確的是: **
A html決定頁面的行為和措，css決定頁面的樣式，js決定頁面的結(jié)構(gòu)
B html決定頁面的樣式杯聚，css決定頁面的結(jié)構(gòu)臼婆，js決定頁面的行為
C html決定頁面的結(jié)構(gòu)，css決定頁面的樣式幌绍，js決定頁面的行為
D 以上都不正確
2 **web 標(biāo)準(zhǔn)里邊規(guī)定三層分離不包括哪部分**
A．HTML
B．CSS
C．JavaScript
D．PHP
3.**關(guān)于WEB標(biāo)準(zhǔn)下列說法正確的是**
A．html相當(dāng)于人的動作行為颁褂，CSS相當(dāng)于人的穿著打扮，javascript相當(dāng)于人的骨架結(jié)構(gòu)傀广；
B．html相當(dāng)于人的骨架結(jié)構(gòu)颁独，CSS相當(dāng)于人的穿著打扮，javascript相當(dāng)于人的動作行為伪冰；
C．html相當(dāng)于人的穿著打扮誓酒，CSS相當(dāng)于人的骨架結(jié)構(gòu)，javascript相當(dāng)于人的動作行為贮聂；
D．html相當(dāng)于人的骨架結(jié)構(gòu)靠柑，CSS相當(dāng)于人的動作行為，javascript相當(dāng)于人的穿著打扮吓懈；
# HTML 初識
一般先學(xué)習(xí)HTML+CSS歼冰， 這里我們先定一個小目標(biāo)，先學(xué)HTML,后學(xué)習(xí)CSS耻警。
HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標(biāo)簽語言”隔嫡。是用來描述網(wǎng)頁的一種語言。
所謂超文本甘穿，因?yàn)樗梢约尤雸D片腮恩、聲音、動畫温兼、多媒體等內(nèi)容秸滴，不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件募判，與世界各地主機(jī)的文件連接缸榛。
```html
<h1> 我是一個大標(biāo)題 </h1>
```
? 注意：? 體會 文本? ? 標(biāo)簽? ? 語言? 幾個詞語
- HTML 指的是超文本標(biāo)記語言 (**H**yper **T**ext **M**arkup **L**anguage)
- HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)
- 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
總結(jié)： HTML 作用就是用標(biāo)記標(biāo)簽來描述網(wǎng)頁兰伤，把網(wǎng)頁內(nèi)容在瀏覽器中展示出來内颗。
用文字來描述網(wǎng)頁標(biāo)簽
## HTML骨架格式
日常生活的書信，我們要遵循共同的約定敦腔。
<img src="media/mess.png" alt="">
同理：HTML 有自己的語言語法骨架格式：
```html
<HTML>?
? ? <head>? ?
? ? ? ? <title></title>
? ? </head>
? ? <body>
? ? </body>
</HTML>
```
課堂練習(xí)1：? ? 書寫我們的第一個HTML 頁面均澳！
1. 新建一個demo 的 TXT 文件。
2. 里面寫入剛才的HTML 骨架。月薪過萬 你我之間? 黑馬洗練? 一飛沖天
3. 把后綴名改為 .HTML找前。
4. 右擊--谷歌瀏覽器打開糟袁。
~~~
1 HTML標(biāo)簽：
作用所有HTML中標(biāo)簽的一個根節(jié)點(diǎn)。 最大的標(biāo)簽? 根標(biāo)簽
2 head標(biāo)簽： 文檔的頭部
文檔的頭部描述了文檔的各種屬性和信息躺盛，包括文檔的標(biāo)題项戴、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者槽惫。
注意在head標(biāo)簽中我們必須要設(shè)置的標(biāo)簽是title
3.title標(biāo)簽： 文檔的標(biāo)題
作用：讓頁面擁有一個屬于自己的標(biāo)題周叮。
4.body標(biāo)簽：文檔的主體? 以后我們的頁面內(nèi)容 基本都是放到body里面的
body 元素包含文檔的所有內(nèi)容（比如文本、超鏈接界斜、圖像仿耽、表格和列表等等。）
~~~
為了便于記憶各薇，我們請出剛才要辭職回家養(yǎng)豬的二師兄來幫忙项贺， 我稱之為? 豬八戒記憶法
<img src="media/pig.png" />
## HTML標(biāo)簽分類
? 在HTML頁面中，帶有“< >”符號的元素被稱為HTML標(biāo)簽峭判，如上面提到的 <HTML>开缎、<head>、<body>都是HTML骨架結(jié)構(gòu)標(biāo)簽林螃。所謂標(biāo)簽就是放在“< >” 標(biāo)簽符中表示某個功能的編碼命令奕删，也稱為HTML標(biāo)簽或 HTML元素
1.雙標(biāo)簽
~~~html
<標(biāo)簽名> 內(nèi)容 </標(biāo)簽名>
~~~
該語法中“<標(biāo)簽名>”表示該標(biāo)簽的作用開始，一般稱為“開始標(biāo)簽（start tag）”治宣，“</標(biāo)簽名>” 表示該標(biāo)簽的作用結(jié)束急侥，一般稱為“結(jié)束標(biāo)簽（end tag）”砌滞。和開始標(biāo)簽相比侮邀，結(jié)束標(biāo)簽只是在前面加了一個關(guān)閉符“/”。
> ~~~html
> 比如 <body>我是文字? </body>
> ~~~
2.單標(biāo)簽
~~~html
<標(biāo)簽名 />
~~~
? 單標(biāo)簽也稱空標(biāo)簽贝润，是指用一個標(biāo)簽符號即可完整地描述某個功能的標(biāo)簽绊茧。
> ~~~html
> 比如? <br />
> ~~~
## HTML標(biāo)簽關(guān)系
標(biāo)簽的相互關(guān)系就分為兩種：
1.嵌套關(guān)系
```html
<head>? <title> </title>? </head>
```
<img src="media/father.jpg">
2.并列關(guān)系
```html
<head></head>
<body></body>
```
<img src="media/xiong.jpg">
倡議： 如果兩個標(biāo)簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進(jìn)一個tab鍵的身位打掘。如果是并列關(guān)系华畏，最好上下對齊。
## 課堂一練
```
請問下列哪個標(biāo)簽是錯誤的尊蚁？
```
```
A? <head></head><body></body>
```
```
B? <strong><div></div></strong>
```
```
C? <head><title></head></title>
```
```
D? <body><div></div></body>
```
? <a href="key.HTML" target="_blank">sublime 一些常用快捷鍵? 點(diǎn)我查看 </a>
~~~
再頁面中輸入 以下2個單詞
1.? html: 5?
2.? !
? 在sublime里面然后按下tab鍵盤即可生成HTML骨架
~~~
# 文檔類型<!DOCTYPE>
~~~html
<!DOCTYPE html>
~~~
同學(xué)你用啥手機(jī)亡笑？你咋回答？?
這句話就是告訴我們使用哪個html版本横朋？? 我們使用的是 html 5 的版本仑乌。? html有很多版本，那我們應(yīng)該告訴用戶和瀏覽器我們使用的版本號。
<!DOCTYPE> 標(biāo)簽位于文檔的最前面晰甚，用于向?yàn)g覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范衙传，必需在開頭處使用<!DOCTYPE>標(biāo)簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進(jìn)行解析厕九。
注意：? 一些老網(wǎng)站可能用的還是老版本的文檔類型比如 XHTML之類的蓖捶，但是我們學(xué)的是HTML5,而且HTML5的文檔類型兼容很好(向下兼容的原則)，所以大家放心的使用HTML5的文檔類型就好了扁远。
# 字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集編碼方式俊鱼，常用的字符集編碼方式還有g(shù)bk和gb2312。
gb2312 簡單中文? 包括6763個漢字
BIG5? 繁體中文 港澳臺等用
GBK包含全部中文字符? ? 是GB2312的擴(kuò)展穿香，加入對繁體字的支持亭引，兼容GB2312
UTF-8則包含全世界所有國家需要用到的字符
```
記住一點(diǎn)，以后我們統(tǒng)統(tǒng)使用UTF-8 字符集, 這樣就避免出現(xiàn)字符集不統(tǒng)一而引起亂碼的情況了皮获。
```
# HTML標(biāo)簽的語義化
白話： 所謂標(biāo)簽語義化焙蚓，就是指標(biāo)簽的含義。
## 為什么要有語義化標(biāo)簽
1. 方便代碼的閱讀和維護(hù)
2. 同時讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析洒宝，從而更好分析其中的內(nèi)容
3. 使用語義化標(biāo)簽會具有更好地搜索引擎優(yōu)化
核心：合適的地方給一個最為合理的標(biāo)簽购公。
語義是否良好： 當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁結(jié)構(gòu)依然組織有序雁歌，并且有良好的可讀性宏浩。
白話，一眼看去靠瞎，就知道那個是重點(diǎn)比庄，結(jié)構(gòu)是什么，知道每塊的內(nèi)容是干啥的乏盐。
遵循的原則：先確定語義的HTML 佳窑，再選合適的CSS。
# HTML常用標(biāo)簽
首先 HTML和CSS是兩種完全不同的語言父能，我們學(xué)的是結(jié)構(gòu)神凑，就只寫HTML標(biāo)簽，認(rèn)識標(biāo)簽就可以了何吝。 不會再給結(jié)構(gòu)標(biāo)簽指定樣式了溉委。
HTML標(biāo)簽有很多，這里我們學(xué)習(xí)最為常用的爱榕，后面有些較少用的瓣喊，我們可以查下手冊就可以了。
## 排版標(biāo)簽
排版標(biāo)簽主要和css搭配使用黔酥，顯示網(wǎng)頁結(jié)構(gòu)的標(biāo)簽藻三，是網(wǎng)頁布局最常用的標(biāo)簽八匠。
### 標(biāo)題標(biāo)簽 (熟記)
單詞縮寫：? head? 頭部. 標(biāo)題? ? title? 文檔標(biāo)題
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽趴酣，HTML提供了6個等級的標(biāo)題梨树，即
<h1>、<h2>岖寞、<h3>抡四、<h4>、<h5>和<h6>
~~~
標(biāo)題標(biāo)簽語義：? 作為標(biāo)題使用仗谆，并且依據(jù)重要性遞減
~~~
其基本語法格式如下：
```html
<hn>? 標(biāo)題文本? </hn>
```
> 注意：? h1 標(biāo)簽因?yàn)橹匾秆玻M量少用，不要動不動就向你扔了一個h1隶垮。 一般h1 都是給logo使用藻雪，或者頁面中最重要標(biāo)題信息。
? <img src="media/dog.gif" />
```
? ? 傳智播客學(xué)前端狸吞，
前端學(xué)院四十班勉耀。
新班強(qiáng)哥講臺站，
又帶新顏技術(shù)鉆蹋偏。
標(biāo)題一共六級選便斥，
具體效果刷新見。
? ? ? ? ------強(qiáng)哥
```
### 段落標(biāo)簽( 熟記)
單詞縮寫：? paragraph? 段落? [?p?r?gr?f]? ? 無須記這個單詞
在網(wǎng)頁中要把文字有條理地顯示出來威始，離不開段落標(biāo)簽枢纠，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落黎棠，而段落的標(biāo)簽就是
~~~html
<p>? 文本內(nèi)容? </p>
~~~
是HTML文檔中最常見的標(biāo)簽晋渺，默認(rèn)情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行脓斩。
### 水平線標(biāo)簽(認(rèn)識)
單詞縮寫：? horizontal? 橫線? ? [?h?r??zɑntl]? ? 同上
在網(wǎng)頁中常衬疚鳎看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰俭厚，層次分明户魏。這些水平線可以通過插入圖片實(shí)現(xiàn)驶臊，也可以簡單地通過標(biāo)簽來完成挪挤，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)簽。其基本語法格式如下：
```html
<hr />是單標(biāo)簽
```
在網(wǎng)頁中顯示默認(rèn)樣式的水平線关翎。
課堂練習(xí)2：? ? 新聞頁面
<img src="media/sh.png" />
### 換行標(biāo)簽(熟記)
單詞縮寫：? break? 打斷 ,換行
在HTML中扛门，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端纵寝，然后自動換行论寨。如果希望某段文本強(qiáng)制換行顯示星立，就需要使用換行標(biāo)簽
```html
<br />
```
這時如果還像在word中直接敲回車鍵換行就不起作用了。
## 課堂一練
關(guān)于標(biāo)簽下列說法正確的是
(A) P1是段落標(biāo)簽
(B) H1 是標(biāo)題標(biāo)簽
(C) Hr是換行標(biāo)簽
(D) Br 是一條直線
2 關(guān)于標(biāo)簽下列說法不正確的是
(A) H標(biāo)簽有6個等級分別是<h1> <h2> <h3> <h4> <h5>和<h6>
(B) h1到h6 文字從小到大
(C) p標(biāo)簽一行只能放一個
(D) P是段落標(biāo)簽會給文字加上段落的語義
### div span標(biāo)簽(重點(diǎn))
div? span? ? 是沒有語義的? ? 是我們網(wǎng)頁布局主要的2個盒子? ? css+div
div 就是? division? 的縮寫? 分割葬凳， 分區(qū)的意思? 其實(shí)有很多div 來組合網(wǎng)頁绰垂。
span, 跨度，跨距火焰；范圍? ?
語法格式：
~~~html
<div> 這是頭部 </div>? ? <span>今日價格</span>
~~~
## 文本格式化標(biāo)簽(熟記)
在網(wǎng)頁中劲装，有時需要為文字設(shè)置粗體、斜體或下劃線效果昌简，這時就需要用到HTML中的文本格式化標(biāo)簽占业，使文字以特殊的方式顯示。
<img src="media/tab.png" />
? b? i? s? u? 只有使用 沒有 強(qiáng)調(diào)的意思? ? ? strong? em? del? ins? 語義更強(qiáng)烈
## 標(biāo)簽屬性
<img src="media/ttt.jpg" width="300"? />
屬性就是特性 比如 手機(jī)的顏色 手機(jī)的尺寸 纯赎，總結(jié)就是手機(jī)的谦疾。。
手機(jī)的顏色是黑色? 手機(jī)的尺寸是 8寸
水平線的長度是 200?
圖片的寬度 是? 300? ? 鍵? 值對
使用HTML制作網(wǎng)頁時犬金，如果想讓HTML標(biāo)簽提供更多的信息念恍，可以使用HTML標(biāo)簽的屬性加以設(shè)置。其基本語法格式如下：
```html
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名>
```
在上面的語法中晚顷，
1.標(biāo)簽可以擁有多個屬性樊诺，必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面音同。
2.屬性之間不分先后順序词爬，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開权均。
3.任何標(biāo)簽的屬性都有默認(rèn)值顿膨，省略該屬性則取默認(rèn)值。
采取? 鍵值對 的格式? key="value"? 的格式?
比如:?
```html
<hr width="400" />
```
屬性? 是 寬度?
值? ? 是 400
提倡：? 盡量不使用 樣式屬性叽赊。? <img src="media/sm.jpg" />
## 圖像標(biāo)簽img (重點(diǎn))
單詞縮寫：? image? 圖像
HTML網(wǎng)頁中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)簽恋沃，要想在網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)簽，接下來將詳細(xì)介紹圖像標(biāo)簽<img />以及和他相關(guān)的屬性必指。其基本語法格式如下：
該語法中src屬性用于指定圖像文件的路徑和文件名囊咏，他是img標(biāo)簽的必需屬性。
```html
<img src="圖像URL" />
```
<img src="media/img.png" />
**當(dāng)網(wǎng)頁顯示圖片時,鼠標(biāo)滑上圖片顯示文字描述是以下哪個屬性******
(A) 設(shè)置alt屬性
(B) 設(shè)置title屬性
(C) 設(shè)置href 屬性
(D) 設(shè)置src 屬性
**2? 在HTML中塔橡，使用<img>標(biāo)簽插入圖像梅割，下列選項(xiàng)關(guān)于<img>的src屬性說法正確的是 **
(A) 用來設(shè)置圖片的格式
(B) 用來設(shè)置圖片的所在位置
(C) 用來設(shè)置鼠標(biāo)指向圖片時顯示的文字
(D) 用來設(shè)置圖片是否能正確顯示
## 鏈接標(biāo)簽(重點(diǎn))
單詞縮寫：? anchor 的縮寫? [???k?(r)] 「鸺遥基本解釋 錨, 鐵錨 的
在HTML中創(chuàng)建超鏈接非常簡單户辞，只需用標(biāo)簽環(huán)繞需要被鏈接的對象即可，其基本語法格式如下：
```html
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
```
href：用于指定鏈接目標(biāo)的url地址癞谒，當(dāng)為標(biāo)簽應(yīng)用href屬性時底燎，它就具有了超鏈接的功能刃榨。? Hypertext Reference的縮寫。意思是超文本引用
target：用于指定鏈接頁面的打開方式双仍，其取值有_self和_blank兩種枢希，其中_self為默認(rèn)值，_blank為在新窗口中打開方式朱沃。
注意：
1.外部鏈接 需要添加 http:// www.baidu.com
2.內(nèi)部鏈接 直接鏈接內(nèi)部頁面名稱即可 比如 < a href="index.html"> 首頁 </a >
3.如果當(dāng)時沒有確定鏈接目標(biāo)時晴玖，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接为流。
4.不僅可以創(chuàng)建文本超鏈接呕屎，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像敬察、表格秀睛、音頻、視頻等都可以添加超鏈接莲祸。
### 錨點(diǎn)定位 （難點(diǎn)）
通過創(chuàng)建錨點(diǎn)鏈接蹂安，用戶能夠快速定位到目標(biāo)內(nèi)容。
創(chuàng)建錨點(diǎn)鏈接分為兩步：
~~~html
1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點(diǎn)擊的）
? <a href="#two">?
2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置锐帜。
? <h3 id="two">第2集</h3>
~~~
### base 標(biāo)簽? 基本的
base 可以設(shè)置整體鏈接的打開狀態(tài)?
base 寫到? <head>? </head>? 之間
把所有的連接 都默認(rèn)添加 target="_blank"
<img src="media/base.png" />
## 課堂一練
1在HTML中田盈，關(guān)于a標(biāo)簽說法不正確的是（）
(A) a標(biāo)簽可以通過href屬性跳轉(zhuǎn)到另外一個頁面
(B) a標(biāo)簽可以通過targer屬性設(shè)置在是否在新窗口中打開
(C) a標(biāo)簽只能在當(dāng)前頁面設(shè)置錨點(diǎn)鏈接，讓用戶能夠快速定位到目標(biāo)內(nèi)
(D) a標(biāo)簽可以通過href="#"設(shè)置一個空鏈接
2如果想跳轉(zhuǎn)到當(dāng)前頁面里名為show的錨點(diǎn)缴阎，下列寫法是正確的
A? < a href=".show">跳轉(zhuǎn)</a>
B < a href="#show">跳轉(zhuǎn)</a>
C < a href=" show">跳轉(zhuǎn)</a>
D < a src=" #show">跳轉(zhuǎn)</a>
3如果想跳轉(zhuǎn)到同目錄下的名為success.html文件里名為show的錨點(diǎn)允瞧，下列寫法是正確的
(A) < a href="success.html#show">跳轉(zhuǎn)</a>
(B)? < a href="#show">跳轉(zhuǎn)</a>
(C)? < a href="success#show">跳轉(zhuǎn)</a>
(D) < a src="success.html#show">跳轉(zhuǎn)</a>
##? 特殊字符標(biāo)簽 （理解）
<img src="media/zifu.png" />
## 注釋標(biāo)簽
在HTML中還有一種特殊的標(biāo)簽——注釋標(biāo)簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字蛮拔，就需要使用注釋標(biāo)簽述暂。其基本語法格式如下：
?? ? ? ?
```html
? ? <!-- 注釋語句 -->? ctrl + /? ? ? 或者 ctrl +shift + /
```
注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分建炫，也會被下載到用戶的計算機(jī)上畦韭，查看源代碼時就可以看到。
注釋重要性：
<img src="media/zs.png" />
# 路徑(重點(diǎn)肛跌、難點(diǎn))
<img src="media/dt.png" width="400" />
<img src="media/lj.png" />
實(shí)際工作中艺配，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像衍慎，就需要采用“路徑”的方式來指定圖像文件的位置转唉。
根目錄? 當(dāng)前目錄
路徑可以分為： 相對路徑和絕對路徑
## 相對路徑
以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑西饵。因此酝掩，當(dāng)保存于不同目錄的網(wǎng)頁引用同一個文件時鳞芙，所使用的路徑將不相同眷柔，故稱之為相對路徑期虾。
1. 圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />驯嘱。
2. 圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名镶苞，之間用“/”隔開，如<img src="img/img01/logo.gif" />鞠评。
3. 圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” 茂蚓，如果是上兩級，則需要使用 “../ ../”剃幌，以此類推聋涨，如<img src="../logo.gif" />。
## 絕對路徑
絕對路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑负乡。之所以稱為絕對牍白，意指當(dāng)所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的
“D:\web\img\logo.gif”抖棘，或完整的網(wǎng)絡(luò)地址茂腥，例如“http://www.itcast.cn/images/logo.gif”。
## 課堂一練
1.**在下面結(jié)構(gòu)中切省，哪種寫法可以在index頁面中有輸出img.gif**
(A) <img src=”../image/img.gif” />
(B) <img src=”image/img.gif” />
(C) <img src=”image../img.gif” />
(D) <img src=”img.gif/image” />
**2在下面結(jié)構(gòu)中最岗，哪種寫法可以在index頁面中有輸出1.jpg**
(A) <img src=”../1/2/1.jpg” />
(B) <img src=”/1/2/1.jpg” />
(C) <img src=”1/2/1.jpg” />
(D) <img src=”1.jpg” />
3在下面結(jié)構(gòu)中哪種寫法可以在index頁面中有輸出img.gif
(A) <img src=”demo/image/img.gif” />
(B) <img src=”image/img.gif” />
(C) <img src=”image../img.gif” />
(D) <img src=”img.gif/image/demo” />
# 總結(jié)
? 每一天都有一個主題 我們HTML第一天的主題就是 <認(rèn)識標(biāo)簽>
學(xué)HTML 之前 覺得 很神秘?
<img src="media/z.png" />
等你學(xué)完之后忽然發(fā)現(xiàn)
<img src="media/rh.jpg" width="615" />
總結(jié)今天的思路貫穿線：
<img src="media/a.png" width="1000" />
# 列表標(biāo)簽
什么是列表？
<img src="media/list.png" />
把…制成表,以表顯示
容器里面裝載著文字或圖表的一種形式朝捆，叫列表般渡。
列表最大的特點(diǎn)就是? 整齊 、整潔芙盘、 有序
## 無序列表 ul （重點(diǎn)）
無序列表的各個列表項(xiàng)之間沒有順序級別之分诊杆，是并列的。其基本語法格式如下：
```html
<ul>
? <li>列表項(xiàng)1</li>
? <li>列表項(xiàng)2</li>
? <li>列表項(xiàng)3</li>
? ......
</ul>
```
比如下面這些何陆，新聞是沒有順序的晨汹，不用排隊(duì)，先到先得贷盲，后發(fā)布先顯示淘这。
<img src="media/ul.png" />
腳下留心：
```
1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標(biāo)簽中輸入其他標(biāo)簽或者文字的做法是不被允許的巩剖。
2. <li>與</li>之間相當(dāng)于一個容器铝穷，可以容納所有元素。
3. 無序列表會帶有自己樣式屬性佳魔，放下那個樣式曙聂，一會讓CSS來！
```
## 有序列表 ol （了解）
<img src="media/gold.png" />
有序列表即為有排列順序的列表鞠鲜，其各個列表項(xiàng)按照一定的順序排列定義宁脊，有序列表的基本語法格式如下：
```html
<ol>
? <li>列表項(xiàng)1</li>
? <li>列表項(xiàng)2</li>
? <li>列表項(xiàng)3</li>
? ......
</ol>
```
? 所有特性基本與ul 一致断国。?
? 但是實(shí)際工作中， 較少用 ol img src="media/1.jpg" />
## 自定義列表（理解）
定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述榆苞，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號稳衬。其基本語法如下：
```html
<dl>
? <dt>名詞1</dt>
? <dd>名詞1解釋1</dd>
? <dd>名詞1解釋2</dd>
? ...
? <dt>名詞2</dt>
? <dd>名詞2解釋1</dd>
? <dd>名詞2解釋2</dd>
? ...
</dl>
```
<img src="media/2.jpg" />
用的還可以：
<img src="media/mix.png" />
# 表格 table(會使用)
存在即是合理的。? 表格的現(xiàn)在還是較為常用的一種標(biāo)簽坐漏，但不是用來布局薄疚，常見處理、顯示表格式數(shù)據(jù)赊琳。
<img src="media/table.png" />
ps:? 這些地方用表格街夭，你會覺得生活還是那么美好。躏筏。莱坎。。忍不住想說? PPAP i hava a pen?
## 創(chuàng)建表格
在HTML網(wǎng)頁中寸士，要想創(chuàng)建表格檐什，就需要使用表格相關(guān)的標(biāo)簽。創(chuàng)建表格的基本語法格式如下：
```html
<table>
? <tr>
? ? <td>單元格內(nèi)的文字</td>
? ? ...
? </tr>
? ...
</table>
```
在上面的語法中包含三對HTML標(biāo)簽弱卡，分別為 <table></table>乃正、<tr></tr>、<td></td>婶博，他們是創(chuàng)建表格的基本標(biāo)簽瓮具，缺一不可，下面對他們進(jìn)行具體地解釋
~~~
1.table用于定義一個表格凡人。
2.tr 用于定義表格中的一行名党，必須嵌套在 table標(biāo)簽中，在 table中包含幾對 tr挠轴，就有幾行表格传睹。
3.td /td：用于定義表格中的單元格，必須嵌套在<tr></tr>標(biāo)簽中岸晦，一對 <tr> </tr>中包含幾對<td></td>欧啤，就表示該行中有多少列（或多少個單元格）。
~~~
注意：
```
1. <tr></tr>中只能嵌套<td></td>
```
```
2. <td></td>標(biāo)簽启上，他就像一個容器邢隧，可以容納所有的元素
```
## 表格屬性
<img src="media/tt.png" />
## 表頭標(biāo)簽
表頭一般位于表格的第一行或第一列，其文本加粗居中冈在，如下圖所示倒慧，即為設(shè)置了表頭的表格。設(shè)置表頭非常簡單，只需用表頭標(biāo)簽<th></th>替代相應(yīng)的單元格標(biāo)簽<td></td>即可纫谅。
<img src="media/th.png" />
## 表格結(jié)構(gòu)（了解）
```
在使用表格進(jìn)行布局時炫贤，可以將表格劃分為頭部、主體和頁腳（頁腳因?yàn)橛屑嫒菪詥栴}系宜，我們不在贅述）照激，具體 如下所示：
<thead></thead>：用于定義表格的頭部发魄。
必須位于<table></table> 標(biāo)簽中盹牧，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息励幼。
<tbody></tbody>：用于定義表格的主體苹粟。
位于<table></table>標(biāo)簽中有滑，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。
```
<img src="media/thead.png" />
## 表格標(biāo)題
**表格的標(biāo)題： caption**
**定義和用法**
caption 元素定義表格標(biāo)題毛好。
```html
<table>
? <caption>我是表格標(biāo)題</caption>
</table>
```
caption 標(biāo)簽必須緊隨 table 標(biāo)簽之后苛秕。您只能對每個表格定義一個標(biāo)題肌访。通常這個標(biāo)題會被居中于表格之上。
## 合并單元格(難點(diǎn))
跨行合并：rowspan? ? 跨列合并：colspan
合并單元格的思想：
?? ? 將多個內(nèi)容合并的時候艇劫，就會有多余的東西店煞，把它刪除。? ? 例如 把 3個 td 合并成一個顷蟀， 那就多余了2個，需要刪除蚌父。
?? ? 公式：? 刪除的個數(shù)? =? 合并的個數(shù)? - 1?
? 合并的順序 先上? 先左
## 總結(jié)表格
1. 表格提供了HTML 中定義表格式數(shù)據(jù)的方法苟弛。
2. 表格中由行中的單元格組成阁将。
3. 表格中沒有列元素，列的個數(shù)取決于行的單元格個數(shù)窘哈。
4. 表格不要糾結(jié)于外觀亭敢，那是CSS 的作用帅刀。
? ?
? **表格的學(xué)習(xí)要求：? 能手寫表格結(jié)構(gòu)，并且能合并單元格骇窍。**
# 表單標(biāo)簽(掌握)
現(xiàn)實(shí)中的表單锥余，類似我們?nèi)ャy行辦理信用卡填寫的單子驱犹。 如下圖
<img src="media/car.jpg"? width="500" />
目的是為了收集用戶信息雄驹。
在我們網(wǎng)頁中， 我們也需要跟用戶進(jìn)行交互吁脱，收集用戶資料兼贡，此時也需要表單娃胆。
在HTML中里烦，一個完整的表單通常由表單控件（也稱為表單元素）毅哗、提示信息和表單域3個部分構(gòu)成。
<img src="media/bd.png" />
? 表單控件：
?? ? ? 包含了具體的表單功能項(xiàng)漂洋，如單行文本輸入框刽漂、密碼輸入框、復(fù)選框样悟、提交按鈕窟她、重置按鈕等眯娱。
? 提示信息：
?? ? ? ? 一個表單中通常還需要包含一些說明性的文字徙缴，提示用戶進(jìn)行填寫和操作于样。
? 表單域：?
?? ? ? 他相當(dāng)于一個容器潘靖，用來容納所有的表單控件和提示信息卦溢，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址单寂，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域蘸劈，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器威沫。
## input 控件(重點(diǎn))
在上面的語法中棒掠，<input />標(biāo)簽為單標(biāo)簽屁商，type屬性為其最基本的屬性，其取值有多種精盅，用于指定不同的控件類型谜酒。除了type屬性之外僻族，<input />標(biāo)簽還可以定義很多其他的屬性述么，其常用屬性如下表所示度秘。
<img src="media/input.png" />
##? label標(biāo)簽(理解)
label 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)簽）。
作用：? 用于綁定一個表單元素, 當(dāng)點(diǎn)擊label標(biāo)簽的時候, 被綁定的表單元素就會獲得輸入焦點(diǎn)
如何綁定元素呢唆貌？
for 屬性規(guī)定 label 與哪個表單元素綁定锨咙。
```html
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
```
## textarea控件(文本域)
如果需要輸入大量的信息酪刀，就需要用到<textarea></textarea>標(biāo)簽钮孵。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框油猫，其基本語法格式如下：
```html
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
? 文本內(nèi)容
</textarea>
```
<img src="media/textarea.png" />
## 下拉菜單
使用select控件定義下拉菜單的基本語法格式如下
```html
<select>
? <option>選項(xiàng)1</option>
? <option>選項(xiàng)2</option>
? <option>選項(xiàng)3</option>
? ...
</select>
```
注意：
1. <select></select>中至少應(yīng)包含一對<option></option>情妖。
2. 在option 中定義selected =" selected "時毡证，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)料睛。
## 表單域
在HTML中摇邦，form標(biāo)簽被用于定義表單域施籍，即創(chuàng)建一個表單丑慎，以實(shí)現(xiàn)用戶信息的收集和傳遞瓤摧，form中的所有內(nèi)容都會被提交給服務(wù)器照弥。創(chuàng)建表單的基本語法格式如下：
```html
<form action="url地址" method="提交方式" name="表單名稱">
? 各種表單控件
</form>
```
常用屬性：
1. Action
? 在表單收集到信息后这揣，需要將信息傳遞給服務(wù)器進(jìn)行處理曾沈，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址塞俱。
2. method
? 用于設(shè)置表單數(shù)據(jù)的提交方式吏垮，其取值為get或post膳汪。
3. name
? 用于指定表單的名稱遗嗽，以區(qū)分同一個頁面中的多個表單痹换。
注意：? 每個表單都應(yīng)該有自己表單域。
# 查文檔
經(jīng)常查閱文檔是一個非常好的學(xué)習(xí)習(xí)慣匙姜。
W3C :? http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/
