學習目標:

了解常用瀏覽器
掌握WEB標準
理解標簽語義化
掌握常用的排版標簽
掌握常用的文本格式化圖像鏈接等標簽
掌握三種列表標簽
掌握表格標簽
掌握表格標簽
掌握表單標簽

HTML 第一天目標

能夠?qū)懗龌镜捻撁妫ɡ锩姘瑘D片、各種標簽和鏈接）

開發(fā)工具

我們主要用的開發(fā)工具有 chrome 、 sublime 锈颗、 photoshop

瀏覽器（顯示）

瀏覽器是網(wǎng)頁顯示届谈、運行的平臺余指，常用的瀏覽器有IE哮奇、火狐（Firefox）西壮、谷歌（Chrome）偶垮、Safari和Opera等张咳。我們平時稱為五大瀏覽器。

b.png

這些工具你認識幾個似舵？

s.png

sublime（書寫）

普通青年 Dreamweaver

文藝青年 sublime

高手和傻子用記事本

其實脚猾。。砚哗。龙助。

node.png

Photoshop(協(xié)助)

1498465020015.png

PS 工具是我們使用頻率比較高的軟件之一，我們學習PS目的不是為了設(shè)計海報做電商和UI的蛛芥，而是要求：

熟練的切圖
能和網(wǎng)站美工美眉有共同話題提鸟。。仅淑。称勋。。

認識網(wǎng)頁

網(wǎng)頁主要由文字涯竟、圖像和超鏈接等元素構(gòu)成赡鲜。當然，除了這些元素庐船，網(wǎng)頁中還可以包含音頻银酬、視頻以及Flash等。

mi.png

思考：  網(wǎng)頁是如何形成的呢?

web.png

常見瀏覽器內(nèi)核介紹

瀏覽器是網(wǎng)頁運行的平臺筐钟，常用的瀏覽器有IE揩瞪、火狐（Firefox）、谷歌（Chrome）篓冲、Safari和Opera等李破。我們平時稱為五大瀏覽器宠哄。

b.png

瀏覽器內(nèi)核（理解）

瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
渲染引擎 它負責取得網(wǎng)頁的內(nèi)容（HTML喷屋、XML琳拨、圖像等等）瞭恰、整理訊息（例如加入 CSS 等）屯曹，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機惊畏。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同恶耽，所以渲染的效果也不相同。
JS 引擎 則是解析 Javascript 語言颜启，執(zhí)行 javascript語言來實現(xiàn)網(wǎng)頁的動態(tài)效果偷俭。

最開始渲染引擎和 JS 引擎并沒有區(qū)分的很明確，后來 JS 引擎越來越獨立缰盏，內(nèi)核就傾向于只指渲染引擎涌萤。有一個網(wǎng)頁標準計劃小組制作了一個 ACID 來測試引擎的兼容性和性能。內(nèi)核的種類很多口猜，如加上沒什么人使用的非商業(yè)的免費內(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 最顯著的特點就是新內(nèi)核 EdgeHTML镜廉。

（2）Gecko(firefox)

Gecko(Firefox 內(nèi)核)： Mozilla FireFox(火狐瀏覽器) 采用該內(nèi)核，Gecko 的特點是代碼完全公開愚战，因此娇唯，其可開發(fā)程度很高齐遵，全世界的程序員都可以為其編寫代碼，增加功能塔插。可惜這幾年已經(jīng)沒落了梗摇，比如打開速度慢、升級頻繁想许、豬一樣的隊友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手機瀏覽器崎坊、Android 默認瀏覽器，

（4） Chromium/Blink(chrome)

在 Chromium 項目中研發(fā) Blink 渲染引擎（即瀏覽器核心）壁公，內(nèi)置于 Chrome 瀏覽器之中感论。Blink 其實是 WebKit 的分支。

? 大部分國產(chǎn)瀏覽器最新版都采用Blink內(nèi)核贮尖。二次開發(fā)

（5） Presto(Opera)

Presto（已經(jīng)廢棄）是挪威產(chǎn)瀏覽器 opera 的 "前任" 內(nèi)核笛粘，為何說是 "前任"，因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌懷抱了湿硝。

了解一點：

移動端的瀏覽器內(nèi)核主要說的是系統(tǒng)內(nèi)置瀏覽器的內(nèi)核薪前。

Android手機而言，使用率最高的就是Webkit內(nèi)核关斜，大部分國產(chǎn)瀏覽器宣稱的自己的內(nèi)核示括，基本上也是屬于webkit二次開發(fā)。

iOS以及WP7平臺上痢畜，由于系統(tǒng)原因垛膝，系統(tǒng)大部分自帶瀏覽器內(nèi)核，一般是Safari或者IE內(nèi)核Trident的

Web標準（重點）

通過以上瀏覽器的內(nèi)核不同丁稀，我們知道他們工作原理吼拥、解析肯定不同，顯示就會有差別线衫。

問：  哪個語言再全國基本都可以聽得懂凿可？

bz.png

Web 標準的好處

1、讓Web的發(fā)展前景更廣闊
2授账、內(nèi)容能被更廣泛的設(shè)備訪問
3枯跑、更容易被搜尋引擎搜索
4惨驶、降低網(wǎng)站流量費用
5、使網(wǎng)站更易于維護
6敛助、提高頁面瀏覽速度

Web 標準構(gòu)成

Web標準不是某一個標準粗卜，而是由W3C和其他標準化組織制定的一系列標準的集合。

主要包括結(jié)構(gòu)（Structure）纳击、表現(xiàn)（Presentation）和行為（Behavior）三個方面续扔。

結(jié)構(gòu)標準：結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類，咱們主要學的是HTML评疗。 最重要
表現(xiàn)標準：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式测砂、顏色、大小等外觀樣式百匆，主要指的是CSS。
行為標準：行為是指網(wǎng)頁模型的定義及交互的編寫呜投，咱們主要學的是 Javascript

理想狀態(tài)我們的源碼： .HTML .css .js

直觀感受：

gx.png

總結(jié)WEB標準：

結(jié)構(gòu)標準：

hb1.png

決定你是否有個好天然身體

表現(xiàn)標準：

hb2.png

決定你是否打扮的美麗外觀

行為標準：

hb3.jpg

決定你是否有吸引人的行為

HTML 初識

一般先學習HTML+CSS加匈，這里我們先定一個小目標，先學HTML,后學習CSS仑荐。

HTML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”雕拼。是用來描述網(wǎng)頁的一種語言。

所謂超文本粘招，因為它可以加入圖片啥寇、聲音、動畫洒扎、多媒體等內(nèi)容辑甜，不僅如此，它還可以從一個文件跳轉(zhuǎn)到另一個文件袍冷，與世界各地主機的文件連接磷醋。

<h1> 我是一個大標題 </h1>

注意：體會文本標簽語言幾個詞語

HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)

總結(jié)： HTML 作用就是用標記標簽來描述網(wǎng)頁胡诗，把網(wǎng)頁內(nèi)容在瀏覽器中展示出來邓线。

用文字來描述網(wǎng)頁標簽

HTML骨架格式

日常生活的書信，我們要遵循共同的約定煌恢。

mess.png

同理：HTML 有自己的語言語法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

1 HTML標簽：

作用所有HTML中標簽的一個根節(jié)點骇陈。 最大的標簽   根標簽

2 head標簽： 文檔的頭部

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題瑰抵、在 Web 中的位置以及和其他文檔的關(guān)系等你雌。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

注意在head標簽中我們必須要設(shè)置的標簽是title

3.title標簽： 文檔的標題

作用：讓頁面擁有一個屬于自己的標題谍憔。

4.body標簽：文檔的主體  以后我們的頁面內(nèi)容 基本都是放到body里面的

body 元素包含文檔的所有內(nèi)容（比如文本匪蝙、超鏈接主籍、圖像、表格和列表等等逛球。）

為了便于記憶千元，我們請出剛才要辭職回家養(yǎng)豬的二師兄來幫忙，我稱之為豬八戒記憶法

pig.png

HTML標簽分類

在HTML頁面中颤绕，帶有“< >”符號的元素被稱為HTML標簽幸海，如上面提到的 <HTML>、<head>奥务、<body>都是HTML骨架結(jié)構(gòu)標簽物独。所謂標簽就是放在“< >” 標簽符中表示某個功能的編碼命令，也稱為HTML標簽或 HTML元素

1.雙標簽

<標簽名> 內(nèi)容 </標簽名>

該語法中“<標簽名>”表示該標簽的作用開始氯葬，一般稱為“開始標簽（start tag）”挡篓，“</標簽名>” 表示該標簽的作用結(jié)束，一般稱為“結(jié)束標簽（end tag）”帚称。和開始標簽相比官研，結(jié)束標簽只是在前面加了一個關(guān)閉符“/”。

比如 <body>我是文字  </body>

2.單標簽

<標簽名 />

單標簽也稱空標簽闯睹，是指用一個標簽符號即可完整地描述某個功能的標簽戏羽。

比如  <br />

HTML標簽關(guān)系

標簽的相互關(guān)系就分為兩種：

1.嵌套關(guān)系

<head>  <title> </title>  </head>

father.jpg

2.并列關(guān)系

<head></head>
<body></body>

xiong.jpg

倡議：如果兩個標簽之間的關(guān)系是嵌套關(guān)系，子元素最好縮進一個tab鍵的身位楼吃。如果是并列關(guān)系始花，最好上下對齊。

文檔類型<!DOCTYPE>

<!DOCTYPE html>

同學你用啥手機孩锡？你咋回答酷宵？

這句話就是告訴我們使用哪個html版本？我們使用的是 html 5 的版本浮创。 html有很多版本忧吟，那我們應(yīng)該告訴用戶和瀏覽器我們使用的版本號。

<!DOCTYPE> 標簽位于文檔的最前面斩披，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規(guī)范溜族，必需在開頭處使用<!DOCTYPE>標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析垦沉。

注意：一些老網(wǎng)站可能用的還是老版本的文檔類型比如 XHTML之類的煌抒，但是我們學的是HTML5,而且HTML5的文檔類型兼容很好(向下兼容的原則)，所以大家放心的使用HTML5的文檔類型就好了厕倍。

字符集

utf-8是目前最常用的字符集編碼方式寡壮，常用的字符集編碼方式還有g(shù)bk和gb2312。

gb2312 簡單中文包括6763個漢字

BIG5 繁體中文港澳臺等用

GBK包含全部中文字符是GB2312的擴展，加入對繁體字的支持况既，兼容GB2312

UTF-8則包含全世界所有國家需要用到的字符

記住一點这溅，以后我們統(tǒng)統(tǒng)使用UTF-8 字符集, 這樣就避免出現(xiàn)字符集不統(tǒng)一而引起亂碼的情況了。

HTML標簽的語義化

白話：所謂標簽語義化棒仍，就是指標簽的含義悲靴。

為什么要有語義化標簽

方便代碼的閱讀和維護
同時讓瀏覽器或是網(wǎng)絡(luò)爬蟲可以很好地解析，從而更好分析其中的內(nèi)容
使用語義化標簽會具有更好地搜索引擎優(yōu)化

核心：合適的地方給一個最為合理的標簽莫其。

語義是否良好：當我們?nèi)サ鬋SS之后癞尚，網(wǎng)頁結(jié)構(gòu)依然組織有序，并且有良好的可讀性乱陡。

白話浇揩，一眼看去，就知道那個是重點憨颠，結(jié)構(gòu)是什么胳徽，知道每塊的內(nèi)容是干啥的。

遵循的原則：先確定語義的HTML 烙心，再選合適的CSS膜廊。

HTML常用標簽

首先 HTML和CSS是兩種完全不同的語言，我們學的是結(jié)構(gòu)淫茵，就只寫HTML標簽，認識標簽就可以了蹬跃。不會再給結(jié)構(gòu)標簽指定樣式了匙瘪。

HTML標簽有很多，這里我們學習最為常用的蝶缀，后面有些較少用的丹喻，我們可以查下手冊就可以了。

排版標簽

排版標簽主要和css搭配使用翁都，顯示網(wǎng)頁結(jié)構(gòu)的標簽碍论，是網(wǎng)頁布局最常用的標簽。

標題標簽 (熟記)

單詞縮寫： head 頭部. 標題 title 文檔標題

為了使網(wǎng)頁更具有語義化柄慰，我們經(jīng)常會在頁面中用到標題標簽鳍悠，HTML提供了6個等級的標題，即

標題標簽語義：  作為標題使用蠢挡，并且依據(jù)重要性遞減

其基本語法格式如下：

<hn>   標題文本   </hn>

注意： h1 標簽因為重要，盡量少用，不要動不動就向你扔了一個h1业踏。一般h1 都是給logo使用禽炬，或者頁面中最重要標題信息。

dog.gif

段落標簽( 熟記)

單詞縮寫： paragraph 段落 [?p?r?gr?f] 無須記這個單詞

在網(wǎng)頁中要把文字有條理地顯示出來勤家，離不開段落標簽腹尖，就如同我們平常寫文章一樣，整個網(wǎng)頁也可以分為若干個段落却紧，而段落的標簽就是

<p>  文本內(nèi)容  </p>

是HTML文檔中最常見的標簽桐臊，默認情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行晓殊。

水平線標簽(認識)

單詞縮寫： horizontal 橫線 [?h?r??zɑntl] 同上

在網(wǎng)頁中常扯闲祝看到一些水平線將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰巫俺，層次分明认烁。這些水平線可以通過插入圖片實現(xiàn)，也可以簡單地通過標簽來完成介汹，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標簽却嗡。其基本語法格式如下：

<hr />是單標簽

在網(wǎng)頁中顯示默認樣式的水平線。

課堂練習2：新聞頁面

sh.png

換行標簽(熟記)

單詞縮寫： break 打斷 ,換行

在HTML中嘹承，一個段落中的文字會從左到右依次排列窗价，直到瀏覽器窗口的右端，然后自動換行叹卷。如果希望某段文本強制換行顯示撼港，就需要使用換行標簽

<br />

這時如果還像在word中直接敲回車鍵換行就不起作用了。

課堂一練

關(guān)于標簽下列說法正確的是

(A) P1是段落標簽

(B) H1 是標題標簽

(D) Br 是一條直線

2 關(guān)于標簽下列說法不正確的是

(A) H標簽有6個等級分別是<h1> <h2> <h3> <h4> <h5>和<h6>

(B) h1到h6 文字從小到大

(D) P是段落標簽會給文字加上段落的語義

div span標簽(重點)

div span 是沒有語義的是我們網(wǎng)頁布局主要的2個盒子 css+div

div 就是 division 的縮寫分割骤竹，分區(qū)的意思其實有很多div 來組合網(wǎng)頁帝牡。

span, 跨度，跨距蒙揣；范圍

語法格式：

<div> 這是頭部 </div>    <span>今日價格</span>

文本格式化標簽(熟記)

在網(wǎng)頁中靶溜，有時需要為文字設(shè)置粗體、斜體或下劃線效果懒震，這時就需要用到HTML中的文本格式化標簽罩息，使文字以特殊的方式顯示。

tab.png

b i s u 只有使用沒有強調(diào)的意思 strong em del ins 語義更強烈

標簽屬性

ttt.jpg

屬性就是特性比如手機的顏色手機的尺寸挎狸，總結(jié)就是手機的扣汪。。

手機的顏色是黑色手機的尺寸是 8寸

水平線的長度是 200

圖片的寬度是 300 鍵值對

使用HTML制作網(wǎng)頁時锨匆，如果想讓HTML標簽提供更多的信息崭别，可以使用HTML標簽的屬性加以設(shè)置冬筒。其基本語法格式如下：

<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標簽名>

在上面的語法中，

1.標簽可以擁有多個屬性茅主，必須寫在開始標簽中舞痰，位于標簽名后面。

2.屬性之間不分先后順序诀姚，標簽名與屬性响牛、屬性與屬性之間均以空格分開。

3.任何標簽的屬性都有默認值赫段，省略該屬性則取默認值呀打。

采取鍵值對的格式 key="value" 的格式

比如:

<hr width="400" />

屬性是寬度

值是 400

提倡：盡量不使用樣式屬性。

sm.jpg

圖像標簽img (重點)

單詞縮寫： image 圖像

HTML網(wǎng)頁中任何元素的實現(xiàn)都要依靠HTML標簽糯笙，要想在網(wǎng)頁中顯示圖像就需要使用圖像標簽贬丛，接下來將詳細介紹圖像標簽<img />以及和他相關(guān)的屬性。其基本語法格式如下：

該語法中src屬性用于指定圖像文件的路徑和文件名给涕，他是img標簽的必需屬性豺憔。

<img src="圖像URL" />

img.png

**當網(wǎng)頁顯示圖片時,鼠標滑上圖片顯示文字描述是以下哪個屬性******

(A) 設(shè)置alt屬性

(B) 設(shè)置title屬性

(D) 設(shè)置src 屬性

**2 在HTML中，使用<img>標簽插入圖像够庙，下列選項關(guān)于<img>的src屬性說法正確的是 **

(A) 用來設(shè)置圖片的格式

(B) 用來設(shè)置圖片的所在位置

(D) 用來設(shè)置圖片是否能正確顯示

鏈接標簽(重點)

單詞縮寫： anchor 的縮寫 [???k?(r)] 恭应。基本解釋錨, 鐵錨的

在HTML中創(chuàng)建超鏈接非常簡單耘眨，只需用標簽環(huán)繞需要被鏈接的對象即可昼榛，其基本語法格式如下：

<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>

href：用于指定鏈接目標的url地址，當為標簽應(yīng)用href屬性時剔难，它就具有了超鏈接的功能褒纲。 Hypertext Reference的縮寫。意思是超文本引用

target：用于指定鏈接頁面的打開方式钥飞，其取值有_self和_blank兩種，其中_self為默認值衫嵌，_blank為在新窗口中打開方式读宙。

注意：

1.外部鏈接需要添加 http:// www.baidu.com

2.內(nèi)部鏈接直接鏈接內(nèi)部頁面名稱即可比如 < a href="index.html"> 首頁 </a >

3.如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")楔绞，表示該鏈接暫時為一個空鏈接结闸。

4.不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素酒朵，如圖像桦锄、表格、音頻蔫耽、視頻等都可以添加超鏈接结耀。

錨點定位（難點）

通過創(chuàng)建錨點鏈接留夜，用戶能夠快速定位到目標內(nèi)容。
創(chuàng)建錨點鏈接分為兩步：

1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點擊的）
  <a href="#two">   

2.使用相應(yīng)的id名標注跳轉(zhuǎn)目標的位置图甜。
  <h3 id="two">第2集</h3>

base 標簽基本的

base 可以設(shè)置整體鏈接的打開狀態(tài)

base 寫到 <head> </head> 之間

把所有的連接都默認添加 target="_blank"

base.png

課堂一練

1在HTML中碍粥，關(guān)于a標簽說法不正確的是（）

(A) a標簽可以通過href屬性跳轉(zhuǎn)到另外一個頁面

(B) a標簽可以通過targer屬性設(shè)置在是否在新窗口中打開

(D) a標簽可以通過href="#"設(shè)置一個空鏈接

2如果想跳轉(zhuǎn)到當前頁面里名為show的錨點黑毅，下列寫法是正確的

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的錨點嚼摩，下列寫法是正確的

(A) < a href="success.html#show">跳轉(zhuǎn)</a>

(B) < a href="#show">跳轉(zhuǎn)</a>

特殊字符標簽（理解）

注釋標簽

在HTML中還有一種特殊的標簽——注釋標簽。如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字矿瘦，就需要使用注釋標簽枕面。其基本語法格式如下：
?

    <!-- 注釋語句 -->   ctrl + /       或者 ctrl +shift + /

注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分缚去，也會被下載到用戶的計算機上潮秘，查看源代碼時就可以看到。

注釋重要性：

zs.png

路徑(重點病游、難點)

dt.png

lj.png

實際工作中唇跨，通常新建一個文件夾專門用于存放圖像文件，這時再插入圖像衬衬，就需要采用“路徑”的方式來指定圖像文件的位置买猖。

路徑可以分為：相對路徑和絕對路徑

相對路徑

以引用文件之網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑滋尉。因此玉控，當保存于不同目錄的網(wǎng)頁引用同一個文件時，所使用的路徑將不相同狮惜，故稱之為相對路徑高诺。

圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />碾篡。
圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名虱而，之間用“/”隔開，如<img src="img/img01/logo.gif" />开泽。
圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” 牡拇，如果是上兩級，則需要使用 “../ ../”穆律，以此類推惠呼，如<img src="../logo.gif" />。

絕對路徑

絕對路徑以Web站點根目錄為參考基礎(chǔ)的目錄路徑峦耘。之所以稱為絕對剔蹋，意指當所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的

“D:\web\img\logo.gif”辅髓，或完整的網(wǎng)絡(luò)地址泣崩，例如“http://www.itcast.cn/images/logo.gif”少梁。

在下面結(jié)構(gòu)中，哪種寫法可以在index頁面中有輸出1.jpg

1512226099480.png

(A) <img src=”../1/2/1.jpg” />

(B) <img src=”/1/2/1.jpg” />

(D) <img src=”1.jpg” />

在下面結(jié)構(gòu)中哪種寫法可以在index頁面中有輸出img.gif

1512226121609.png

(A) <img src=”demo/image/img.gif” />

(B) <img src=”image/img.gif” />

(D) <img src=”img.gif/image/demo” />

總結(jié)

每一天都有一個主題我們HTML第一天的主題就是 <認識標簽>

學HTML 之前覺得很神秘

z.png

等你學完之后忽然發(fā)現(xiàn)

rh.jpg

總結(jié)今天的思路貫穿線：

a.png

列表標簽

什么是列表律想？

list.png

把…制成表,以表顯示

容器里面裝載著文字或圖表的一種形式猎莲，叫列表。

列表最大的特點就是整齊技即、整潔著洼、有序

無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的而叼。其基本語法格式如下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

比如下面這些身笤，新聞是沒有順序的，不用排隊葵陵，先到先得液荸，后發(fā)布先顯示。

ul.png

腳下留心：

 1. <ul></ul>中只能嵌套<li></li>脱篙，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的娇钱。
 2. <li>與</li>之間相當于一個容器，可以容納所有元素绊困。
 3. 無序列表會帶有自己樣式屬性文搂，放下那個樣式，一會讓CSS來秤朗！

有序列表 ol （了解）

gold.png

有序列表即為有排列順序的列表煤蹭，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

所有特性基本與ul 一致取视。

自定義列表（理解）

定義列表常用于對術(shù)語或名詞進行解釋和描述硝皂，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

2.jpg

用的還可以：

mix.png

表格 table(會使用)

存在即是合理的作谭。表格的現(xiàn)在還是較為常用的一種標簽稽物，但不是用來布局，常見處理折欠、顯示表格式數(shù)據(jù)姨裸。

table.png

ps: 這些地方用表格，你會覺得生活還是那么美好怨酝。。那先。农猬。忍不住想說 PPAP i hava a pen

創(chuàng)建表格

在HTML網(wǎng)頁中，要想創(chuàng)建表格售淡，就需要使用表格相關(guān)的標簽斤葱。創(chuàng)建表格的基本語法格式如下：

<table>
  <tr>
    <td>單元格內(nèi)的文字</td>
    ...
  </tr>
  ...
</table>

在上面的語法中包含三對HTML標簽慷垮，分別為 <table></table>、<tr></tr>揍堕、<td></td>料身，他們是創(chuàng)建表格的基本標簽，缺一不可衩茸，下面對他們進行具體地解釋

1.table用于定義一個表格芹血。

2.tr 用于定義表格中的一行，必須嵌套在 table標簽中楞慈，在 table中包含幾對 tr幔烛，就有幾行表格。

3.td /td：用于定義表格中的單元格囊蓝，必須嵌套在<tr></tr>標簽中饿悬，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）聚霜。

注意：

1. <tr></tr>中只能嵌套<td></td>

2. <td></td>標簽狡恬，他就像一個容器，可以容納所有的元素

表格屬性

tt.png

表頭標簽

表頭一般位于表格的第一行或第一列蝎宇，其文本加粗居中弟劲，如下圖所示，即為設(shè)置了表頭的表格夫啊。設(shè)置表頭非常簡單函卒，只需用表頭標簽<th></th>替代相應(yīng)的單元格標簽<td></td>即可。

th.png

表格結(jié)構(gòu)（了解）

在使用表格進行布局時撇眯，可以將表格劃分為頭部报嵌、主體和頁腳（頁腳因為有兼容性問題，我們不在贅述）熊榛，具體 如下所示：

<thead></thead>：用于定義表格的頭部锚国。

必須位于<table></table> 標簽中，一般包含網(wǎng)頁的logo和導航等頭部信息玄坦。


<tbody></tbody>：用于定義表格的主體血筑。

位于<table></table>標簽中，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容煎楣。

thead.png

表格標題

表格的標題： caption

定義和用法

caption 元素定義表格標題豺总。

<table>
   <caption>我是表格標題</caption>
</table>

caption 標簽必須緊隨 table 標簽之后。您只能對每個表格定義一個標題择懂。通常這個標題會被居中于表格之上喻喳。

合并單元格(難點)

跨行合并：rowspan 跨列合并：colspan

合并單元格的思想：

? 將多個內(nèi)容合并的時候，就會有多余的東西困曙，把它刪除表伦。例如把 3個 td 合并成一個谦去，那就多余了2個，需要刪除蹦哼。

? 公式：刪除的個數(shù) = 合并的個數(shù) - 1

合并的順序先上先左

總結(jié)表格

表格提供了HTML 中定義表格式數(shù)據(jù)的方法鳄哭。
表格中由行中的單元格組成。
表格中沒有列元素纲熏，列的個數(shù)取決于行的單元格個數(shù)妆丘。
表格不要糾結(jié)于外觀赔退，那是CSS 的作用旦装。

?

表格的學習要求：能手寫表格結(jié)構(gòu)扒袖，并且能合并單元格奈梳。

表單標簽(掌握)

現(xiàn)實中的表單捎迫，類似我們?nèi)ャy行辦理信用卡填寫的單子芋膘。如下圖

car.jpg

目的是為了收集用戶信息宁昭。

在我們網(wǎng)頁中瓷患，我們也需要跟用戶進行交互剔氏，收集用戶資料塑猖，此時也需要表單。

在HTML中谈跛，一個完整的表單通常由表單控件（也稱為表單元素）羊苟、提示信息和表單域3個部分構(gòu)成。

bd.png

表單控件：

? 包含了具體的表單功能項感憾，如單行文本輸入框蜡励、密碼輸入框、復選框阻桅、提交按鈕凉倚、重置按鈕等。

提示信息：

? 一個表單中通常還需要包含一些說明性的文字嫂沉，提示用戶進行填寫和操作稽寒。

表單域：

? 他相當于一個容器，用來容納所有的表單控件和提示信息趟章，可以通過他定義處理表單數(shù)據(jù)所用程序的url地址杏糙，以及數(shù)據(jù)提交到服務(wù)器的方法。如果不定義表單域蚓土，表單中的數(shù)據(jù)就無法傳送到后臺服務(wù)器宏侍。

input 控件(重點)

在上面的語法中，<input />標簽為單標簽蜀漆，type屬性為其最基本的屬性负芋，其取值有多種，用于指定不同的控件類型。除了type屬性之外旧蛾，<input />標簽還可以定義很多其他的屬性，其常用屬性如下表所示蠕嫁。

input.png

label標簽(理解)

label 標簽為 input 元素定義標注（標簽）锨天。

作用：用于綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點

如何綁定元素呢？

for 屬性規(guī)定 label 與哪個表單元素綁定剃毒。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要輸入大量的信息病袄，就需要用到<textarea></textarea>標簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框赘阀，其基本語法格式如下：

<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
  文本內(nèi)容
</textarea>

textarea.png

下拉菜單

使用select控件定義下拉菜單的基本語法格式如下

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

注意：

<select></select>中至少應(yīng)包含一對<option></option>益缠。
在option 中定義selected =" selected "時，當前項即為默認選中項基公。

表單域

在HTML中幅慌，form標簽被用于定義表單域，即創(chuàng)建一個表單轰豆，以實現(xiàn)用戶信息的收集和傳遞胰伍，form中的所有內(nèi)容都會被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

常用屬性：

Action
在表單收集到信息后酸休，需要將信息傳遞給服務(wù)器進行處理骂租，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
method
用于設(shè)置表單數(shù)據(jù)的提交方式斑司，其取值為get或post渗饮。
name
用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單宿刮。

注意：每個表單都應(yīng)該有自己表單域互站。

查文檔

經(jīng)常查閱文檔是一個非常好的學習習慣。

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

01 --- HTML 基礎(chǔ)標簽

HTML 第一天目標

開發(fā)工具

瀏覽器（顯示）

sublime（書寫）

Photoshop(協(xié)助)

認識網(wǎng)頁

常見瀏覽器內(nèi)核介紹

瀏覽器內(nèi)核（理解）

Web標準（重點）

Web 標準的好處

Web 標準構(gòu)成

HTML 初識

HTML骨架格式

HTML標簽分類

HTML標簽關(guān)系

文檔類型<!DOCTYPE>

字符集

HTML標簽的語義化

為什么要有語義化標簽

HTML常用標簽

排版標簽

標題標簽 (熟記)

段落標簽( 熟記)

水平線標簽(認識)

換行標簽(熟記)

課堂一練

div span標簽(重點)

文本格式化標簽(熟記)

標簽屬性

圖像標簽img (重點)

鏈接標簽(重點)

錨點定位 （難點）

base 標簽 基本的

課堂一練

特殊字符標簽 （理解）

注釋標簽

路徑(重點病游、難點)

相對路徑

絕對路徑

總結(jié)

列表標簽

無序列表 ul （重點）

有序列表 ol （了解）

自定義列表（理解）

表格 table(會使用)

創(chuàng)建表格

表格屬性

表頭標簽

表格結(jié)構(gòu)（了解）

表格標題

合并單元格(難點)

總結(jié)表格

表單標簽(掌握)

input 控件(重點)

label標簽(理解)

textarea控件(文本域)

下拉菜單

表單域

查文檔

錨點定位（難點）

base 標簽基本的

特殊字符標簽（理解）