一酣衷、Html和CSS的關(guān)系
學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML锨天、CSS、JavaScript語言皿渗。下面我們就來了解下這三門技術(shù)都是用來實(shí)現(xiàn)什么的：
- HTML是網(wǎng)頁內(nèi)容的載體仰冠。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息乏冀，可以包含文字、圖片洋只、視頻等辆沦。
- CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣识虚。比如肢扯，標(biāo)題字體、顏色變化担锤，或?yàn)闃?biāo)題加入背景圖片蔚晨、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)妻献。
- JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單团赁∮Γ或鼠標(biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換欢摄“旧ィ可以這么理解，有動(dòng)畫的怀挠，有交互的一般都是用JavaScript來實(shí)現(xiàn)的析蝴。
二、標(biāo)簽的語法
-
標(biāo)簽由英文尖括號(hào)<
和>
括起來绿淋，如<html>
就是一個(gè)標(biāo)簽闷畸。 - html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的，分開始標(biāo)簽和結(jié)束標(biāo)簽吞滞。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/
佑菩。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
- 標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致裁赠，如：<div>里嵌套<p>殿漠，那么</p>必須放在</div>的前面。如下圖所示佩捞。
- HTML標(biāo)簽不區(qū)分大小寫绞幌，<h1>
和<H1>
是一樣的，但建議小寫一忱，因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)莲蜘。
三谭确、認(rèn)識(shí)html文件基本結(jié)構(gòu)
這一節(jié)中我們來學(xué)習(xí)html文件的結(jié)構(gòu)：一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。
<html> <head>...</head> <body>...</body></html>
代碼講解：
- <html></html>
稱為根標(biāo)簽菇夸，所有的網(wǎng)頁標(biāo)簽都在<html></html>中琼富。 - <head>
標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器庄新。頭部元素有<title>
鞠眉、<script>
、 <style>
择诈、<link>
械蹋、 <meta>
等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹羞芍。 - 在<body>
和</body>
標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容哗戈，如<h1>
、<p>
荷科、<a>
唯咬、<img>
等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來畏浆。
四胆胰、認(rèn)識(shí)head標(biāo)簽
做得好，下面我們來了解一下<head>
標(biāo)簽的作用刻获。文檔的頭部描述了文檔的各種屬性和信息蜀涨，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者蝎毡。
下面這些標(biāo)簽可用在 head 部分：
<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>
<title>
標(biāo)簽
：在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息厚柳，它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用于告訴用戶和搜索引擎這個(gè)網(wǎng)頁的主要內(nèi)容是什么沐兵，搜索引擎可以通過網(wǎng)頁標(biāo)題别垮，迅速的判斷出網(wǎng)頁的主題。每個(gè)網(wǎng)頁的內(nèi)容都是不同的扎谎，每個(gè)網(wǎng)頁都應(yīng)該有一個(gè)獨(dú)一無二的title宰闰。
例如：
<head> <title>hello world</title></head>
<title>
標(biāo)簽的內(nèi)容“hello world”會(huì)在瀏覽器中的標(biāo)題欄上顯示出來，如下圖所示：
五簿透、了解HTML的代碼注釋
什么是代碼注釋移袍？代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過一段時(shí)間后再看你所編寫的代碼老充，就能很快想起這段代碼的用途葡盗。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼觅够。
語法：
****
六胶背、語義化，讓你的網(wǎng)頁更好的被搜索引擎理解
在這一章節(jié)我們要開始把網(wǎng)頁中常用到的標(biāo)簽一 一向大家介紹喘先，學(xué)習(xí)這一章節(jié)的時(shí)候要記住學(xué)習(xí)html標(biāo)簽過程中钳吟，主要注意兩個(gè)方面的學(xué)習(xí)：標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式窘拯。
標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁制作時(shí)红且，常常會(huì)聽到一個(gè)詞，語義化涤姊。那么什么叫做語義化呢暇番，說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽思喊，網(wǎng)頁上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽壁酬。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本恨课，就可以使用 em 標(biāo)簽表示強(qiáng)調(diào)等等舆乔。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢剂公？
- 更容易被搜索引擎收錄希俩。
- 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。
七诬留、<body>標(biāo)簽斜纪，網(wǎng)頁上顯示的內(nèi)容放在這里
還記得body標(biāo)簽嗎贫母，在上一章節(jié)我們簡單介紹過：在網(wǎng)頁上要展示出來的頁面內(nèi)容一定要放在body標(biāo)簽中文兑。如下圖是一個(gè)新聞文章的網(wǎng)頁。
在瀏覽器中的顯示效果：
八腺劣、開始學(xué)習(xí)<p>標(biāo)簽绿贞，添加段落
如果想在網(wǎng)頁上顯示文章，這時(shí)就需要<p>標(biāo)簽了橘原，把文章的段落放到<p>標(biāo)簽中籍铁。
語法：
<p>段落文本</p>
注意一段文字一個(gè)<p>
標(biāo)簽，如在一篇新聞文章中有3段文字趾断，就要把這3個(gè)段落分別放到3個(gè)<p>
標(biāo)簽中拒名。如下圖所示。
在瀏覽器中顯示的效果：
<p>
標(biāo)簽的默認(rèn)樣式芋酌，可以在上圖中看出來增显，段前段后都會(huì)有空白，如果不喜歡這個(gè)空白脐帝，可以用css樣式來刪除或改變它同云。
九糖权、了解<hx>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題
文章的段落用<p>
標(biāo)簽炸站，那么文章的標(biāo)題用什么標(biāo)簽?zāi)匦前模吭诒竟?jié)我們將使用<hx>
標(biāo)簽來制作文章的標(biāo)題。標(biāo)題標(biāo)簽一共有6個(gè)旱易，h1禁偎、h2、h3咒唆、h4届垫、h5、h6
分別為一級(jí)標(biāo)題全释、二級(jí)標(biāo)題装处、三級(jí)標(biāo)題、四級(jí)標(biāo)題浸船、五級(jí)標(biāo)題妄迁、六級(jí)標(biāo)題。并且依據(jù)重要性遞減李命。<h1>
是最高的等級(jí)登淘。語法：<hx>標(biāo)題文本</hx>
(x為1-6)文章的標(biāo)題前面已經(jīng)說過了，可以使用標(biāo)題標(biāo)簽封字，另外網(wǎng)頁上的各個(gè)欄目的標(biāo)題也可使用它們黔州。如下圖為騰訊網(wǎng)站。
注意：因?yàn)閔1
標(biāo)簽在網(wǎng)頁中比較重要阔籽，所以一般h1
標(biāo)簽被用在網(wǎng)站名稱上流妻。騰訊網(wǎng)站就是這樣做的。如：<h1>騰訊網(wǎng)</h1>
h1-h6****標(biāo)簽的默認(rèn)樣式：
標(biāo)簽代碼：
在瀏覽器中顯示的樣式：
從上面的圖片可以看出標(biāo)題標(biāo)簽的樣式都會(huì)加粗笆制，h1
標(biāo)簽字號(hào)最大绅这，h2
標(biāo)簽字號(hào)相對(duì)h1要小，以此類推h6
標(biāo)簽的字號(hào)最小在辆。
十证薇、加入強(qiáng)調(diào)語氣，使用<strong>和<em>標(biāo)簽
有了段落又有了標(biāo)題匆篓，現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字浑度，這時(shí)候就可以用到<em>或<strong>標(biāo)簽。
但兩者在強(qiáng)調(diào)的語氣上有區(qū)別:<em> 表示強(qiáng)調(diào)鸦概，<strong> 表示更強(qiáng)烈的強(qiáng)調(diào)箩张。并且在瀏覽器中<em> 默認(rèn)用**斜體**表示，<strong> 用**粗體**表示。兩個(gè)標(biāo)簽相比伏钠，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)横漏。
語法：
<em>需要強(qiáng)調(diào)的文本</em>
<strong>需要強(qiáng)調(diào)的文本</strong>
如，在網(wǎng)上商城中熟掂，某產(chǎn)品的打折后的價(jià)格是需要強(qiáng)調(diào)的缎浇。如下圖。
代碼實(shí)現(xiàn)：
在瀏覽器中默認(rèn)樣式是有區(qū)別的：
原代碼赴肚，如下圖素跺。
瀏覽器中的樣子，如下圖誉券。
<em>的內(nèi)容在瀏覽中顯示為斜體指厌，<strong>顯示為加粗。如果不喜歡這種樣式踊跟，沒有關(guān)系踩验，以后可以使用css樣式去改變它。
十一商玫、使用<span>標(biāo)簽為文字設(shè)置單獨(dú)樣式
這一小節(jié)講解<span>標(biāo)簽箕憾，我們對(duì)<em>
、<strong>
拳昌、<span>
這三個(gè)標(biāo)簽進(jìn)行一下總結(jié)：
- <em>
和<strong>
標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用袭异，它們的語義是強(qiáng)調(diào)。 - <span>
標(biāo)簽是沒有語義的炬藤，它的作用就是為了設(shè)置單獨(dú)的樣式用的御铃。
如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國夢(mèng)”三個(gè)字設(shè)置成blue（藍(lán)色）法希，但注意不是為了強(qiáng)調(diào)“美國夢(mèng)”姨伤，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對(duì)“美國夢(mèng)”這三個(gè)字加重音讀出），所以這樣情況下就可以用到<span>標(biāo)簽了倚舀。
如下面例子：
<p>1922年的春天细睡，一個(gè)想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾Tobey Maguire 飾）的作家谷羞，離開了美國中西部帝火，來到了紐約溜徙。那是一個(gè)道德感漸失，爵士樂流行犀填，走私為王蠢壹，<strong>股票</strong>飛漲的時(shí)代。為了追尋他的<span>美國夢(mèng)</span>九巡，他搬入紐約附近一海灣居住图贸。</p>
語法：
<span>文本</span>
十二、<q>標(biāo)簽，短文本引用
想在你的html中加一段引用嗎疏日？比如在你的網(wǎng)頁的文章里想引用某個(gè)作家的一句詩偿洁，這樣會(huì)使你的文章更加出彩，那么<q>
標(biāo)簽是你所需要的沟优。
語法：
<q>引用文本</q>
如下面例子：
<p>最初知道莊子涕滋，是從一首詩<q>莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑挠阁。</q>開始的宾肺。雖然當(dāng)時(shí)不知道是什么意思，只是覺得詩句挺特別侵俗。后來才明白這個(gè)典故出自是莊子的《逍遙游》锨用，《逍遙游》代表了莊子思想的最高境界，是對(duì)世俗社會(huì)的功名利祿及自己的舍棄隘谣。</p>
講解：
- 在上面的例子中增拥，“莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑寻歧。” 這是一句詩歌跪者，出自晚唐詩人李商隱的《錦瑟》 。因?yàn)椴皇亲髡咦约旱奈淖窒ㄇ螅孕枰褂?lt;q></q>
實(shí)現(xiàn)引用渣玲。 - 注意要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)弟晚。
下圖是代碼顯示結(jié)果：
注意這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤上輸入雙引號(hào)就行了）忘衍，而是它的語義：引用別人的話。
十三卿城、<blockquote>標(biāo)簽枚钓，長文本引用
<blockquote>的作用也是引用別人的文本。但它是對(duì)**長文本**的引用瑟押，如在文章中引入大段某知名作家的文字搀捷，這時(shí)需要這個(gè)標(biāo)簽。
等等多望，上一節(jié)<q>標(biāo)簽不是也是對(duì)文本的引用嗎嫩舟？不要忘記<q>
標(biāo)簽是對(duì)簡短文本的引用，比如說引用一句話就用到<q>
標(biāo)簽怀偷。
如想在我的文章中引用李白《關(guān)山月》中的詩句家厌，因?yàn)橐梦谋颈容^長，所以使用<blockquote>
椎工。
語法:
<blockquote>引用文本</blockquote>
如下面例子：
<blockquote>明月出天山饭于，蒼茫云海間蜀踏。長風(fēng)幾萬里，吹度玉門關(guān)掰吕。漢下白登道果覆，胡窺青海灣。由來征戰(zhàn)地殖熟，不見有人還随静。 戍客望邊色，思?xì)w多苦顏吗讶。高樓當(dāng)此夜燎猛，嘆息未應(yīng)閑。</blockquote>
瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式照皆。如下圖所示：
十四重绷、使用
標(biāo)簽分行顯示文本
對(duì)于上一小節(jié)的例子，我們想讓那首詩顯示得更美觀些膜毁，如顯示下面效果：
怎么可以讓每一句詩詞后面加入一個(gè)折行呢昭卓？那就可以用到<br />
標(biāo)簽了，在需要加回車換行的地方加入<br />瘟滨，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車候醒。
上節(jié)的代碼改為：
語法：
xhtml1.0寫法：
<br />
html4.01寫法：
大家注意，現(xiàn)在一般使用 xhtml1.0 的版本的寫法（其它標(biāo)簽也是）杂瘸，這種版本比較規(guī)范倒淫。
與以前我們學(xué)過的標(biāo)簽不一樣，<br />
標(biāo)簽是一個(gè)空標(biāo)簽败玉，沒有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽敌土，空標(biāo)簽只需要寫一個(gè)開始標(biāo)簽，這樣的標(biāo)簽有<br />
运翼、<hr />
和<img />
返干。
講到這里，你是不是有個(gè)疑問血淌，想折行還不好說嘛矩欠，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎悠夯？很遺憾癌淮，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的疗疟。如下邊的代碼该默。
上面的代碼在瀏覽中顯示是沒有回車效果的瞳氓。如下圖所示：
總結(jié)：在 html 代碼中輸入回車策彤、空格都是沒有作用的栓袖。在html文本中想輸入回車換行，就必須輸入<br />
店诗。
十五裹刮、為你的網(wǎng)頁中添加一些空格
在上一節(jié)的例子，我們已經(jīng)講解過在html代碼中輸入空格庞瘸、回車都是沒有作用的捧弃。要想輸入空格，必須寫入
擦囊。
語法：
在瀏覽中顯示瞬场，還是沒有空格效果买鸽。
輸入空格的正確方法：
在瀏覽器中的顯示出來的空格效果。如下圖所示贯被。
十六眼五、認(rèn)識(shí)
標(biāo)簽，添加水平橫線
在信息展示時(shí)彤灶，有時(shí)會(huì)需要加一些用于分隔的橫線看幼，這樣會(huì)使文章看起來整齊些。如下圖所示：
語法：
html4.01版本** **
xhtml1.0版本 <hr />
注意：
- <hr />
標(biāo)簽和<br />
標(biāo)簽一樣也是一個(gè)空標(biāo)簽幌陕，所以只有一個(gè)開始標(biāo)簽诵姜，沒有結(jié)束標(biāo)簽。 - <hr />
標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗搏熄，顏色為灰色茅诱，可能有些人覺得這種樣式不美觀，沒有關(guān)系搬卒，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后瑟俭，都可以對(duì)其修改。 - 大家注意契邀，現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是）摆寄，這種版本比較規(guī)范。
十六坯门、<address>標(biāo)簽微饥，為網(wǎng)頁加入地址信息
一般網(wǎng)頁中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽古戴。也可以定義一個(gè)地址（比如電子郵件地址）欠橘、簽名或者文檔的作者身份。
語法：
<address>聯(lián)系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區(qū)德外大街10號(hào)</address>
<address>本文的作者：<a href="mailto:lilian@imooc.com">lilian</a></address>
在瀏覽器上顯示的樣式為斜體现恼，如果不喜歡斜體肃续，當(dāng)然可以黍檩，可以在后面的課程中使用 css 樣式來修改它<address>
標(biāo)簽的默認(rèn)樣式。
十七始锚、想加入一行代碼嗎刽酱？使用<code>標(biāo)簽
在介紹語言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁中顯示一些計(jì)算機(jī)專業(yè)的編程代碼瞧捌，當(dāng)代碼為一行代碼時(shí)棵里，你就可以使用<code>標(biāo)簽了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了姐呐。
語法：
<code>代碼語言</code>
注：如果是多行代碼殿怜，可以使用<pre>標(biāo)簽。
我們可能知道水平漸變的實(shí)現(xiàn)曙砂，類似這樣：
{background-image:linear-gradient(left, red 100px, yellow 200px);}
十八稳捆、使用<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼
在上節(jié)中介紹加入一行代碼的標(biāo)簽為<code>，但是在大多數(shù)情況下是需要加入大段代碼的麦轰，如下圖：
怎么辦乔夯？不會(huì)是每一代碼都加入一個(gè)<code>標(biāo)簽吧，沒有這么復(fù)雜款侵，這時(shí)候就可以使用<pre>標(biāo)簽末荐。
語法：
<pre>語言代碼段</pre>
<pre> 標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符新锈。
如下代碼：
<pre> var message="歡迎"; for(var i=1;i<=10;i++) { alert(message); }</pre>
在瀏覽器中的顯示結(jié)果為：
在上面的例子中可以看到代碼中的空格甲脏，換行符都保留下來。如果用以前的方法妹笆，回車需要輸入
簽块请，空格需要輸入
注意：<pre>
標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它拳缠，只是<pre>
標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼墩新。
十九、使用ul窟坐，添加新聞信息列表
在瀏覽網(wǎng)頁時(shí)海渊，你會(huì)發(fā)現(xiàn)網(wǎng)頁上有很多信息的列表，如新聞列表哲鸳、圖片列表臣疑，如下圖所示。
新聞列表
圖片列表
這些列表就可以使用ul-li標(biāo)簽來完成徙菠。ul-li是沒有前后順序的信息列表讯沈。
語法：
<ul> <li>信息</li> <li>信息</li> ......</ul>
舉例：
<ul> <li>精彩少年</li> <li>美麗突然出現(xiàn)</li> <li>觸動(dòng)心靈的旋律</li></ul>
ul-li在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)，如下圖所示：
二十婿奔、使用ol缺狠，添加圖書銷售排行榜
如果想在網(wǎng)頁中展示有前后順序的信息列表问慎，怎么辦呢？如儒老，當(dāng)當(dāng)網(wǎng)上的書籍熱賣排行榜蝴乔，如下圖所示记餐。這類信息展示就可以使用<ol>
標(biāo)簽來制作有序列表來展示驮樊。
語法：
<ol> <li>信息</li> <li>信息</li> ......</ol>
舉例：
下面是一個(gè)熱點(diǎn)課程下載排行榜：
<ol> <li>前端開發(fā)面試心法 </li> <li>零基礎(chǔ)學(xué)習(xí)html</li> <li>JavaScript全攻略</li></ol>
<ol>
在網(wǎng)頁中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>
前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1
開始片酝，如下圖所示：
二十一囚衔、認(rèn)識(shí)div在排版中的作用
在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來雕沿，放在一個(gè)<div>
標(biāo)簽中练湿，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。
語法：
<div>…</div>
確定邏輯部分：
什么是邏輯部分审轮？它是頁面上相互關(guān)聯(lián)的一組元素肥哎。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分疾渣。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分篡诽，就可以使用<div>
標(biāo)簽作為容器。
二十二杈女、給div命名，使邏輯更加清晰
在上一小節(jié)中吊圾，我們把一些標(biāo)簽放進(jìn)<div>里达椰，劃分出一個(gè)獨(dú)立的邏輯部分。為了使邏輯更加清晰项乒，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱啰劲，用id
屬性來為<div>
提供唯一的名稱，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)檀何，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的呈枉，也是必須唯一的。
如下兩圖進(jìn)行比較埃碱，如果設(shè)計(jì)師把兩個(gè)圖給你猖辫，哪個(gè)圖你看上去能更快的理解呢？是不是右邊的那幅圖呢砚殿。
語法：
<div id="版塊名稱">…</div>
二十三啃憎、table標(biāo)簽，認(rèn)識(shí)網(wǎng)頁上的表格
有時(shí)候我們需要在網(wǎng)頁上展示一些數(shù)據(jù)似炎，如某公司想在網(wǎng)頁上展示公司的庫存清單辛萍。如下表：
想在網(wǎng)頁上展示上述表格效果可以使用以下代碼：
創(chuàng)建表格的四個(gè)元素：
table悯姊、tbody、tr贩毕、th悯许、td
1、<table>…</table>：整個(gè)表格以<table>
標(biāo)記開始辉阶、</table>
標(biāo)記結(jié)束先壕。
2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)谆甜，表格會(huì)下載一點(diǎn)顯示一點(diǎn)垃僚，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示规辱。如右側(cè)代碼編輯器中的代碼谆棺。
3、<tr>…</tr>：表格的一行罕袋，所以有幾對(duì)tr 表格就有幾行改淑。
4、<td>…</td>：表格的一個(gè)單元格浴讯，一行中包含幾對(duì)<td>...</td>
朵夏，說明一行中就有幾列。
5兰珍、<th>…</th>：表格的頭部的一個(gè)單元格侍郭，表格表頭。
6掠河、表格中列的個(gè)數(shù)亮元，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
上述代碼在瀏覽器中顯示的默認(rèn)的樣式為：
總結(jié)：
1唠摹、table表格在沒有添加css樣式之前爆捞，在瀏覽器中顯示是沒有表格線的
2、表頭勾拉，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
二十三煮甥、用css樣式，為表格加入邊框
Table 表格在沒有添加 css 樣式之前藕赞，是沒有邊框的成肘。這樣不便于我們后期合并單元格知識(shí)點(diǎn)的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮礁桑瑸樗砑舆吙颉?br>
在右側(cè)代碼編輯器中添加如下代碼：
<style type="text/css">table tr td,th{border:1px solid #000;}</style>
上述代碼是用 css 樣式代碼（后面章節(jié)會(huì)詳細(xì)講解）双霍，為th
，td
單元格添加粗細(xì)為一個(gè)像素的黑色邊框。
結(jié)果窗口顯示出結(jié)果樣式：
二十四洒闸、caption標(biāo)簽染坯，為表格添加標(biāo)題和摘要
表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要丘逸。代碼如下：
摘要
摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的单鹿。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容深纲，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容仲锄。
語法：<table summary="表格簡介文本">
標(biāo)題
用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方囤萤。
語法：
<table> <caption>****標(biāo)題文本</caption> <tr> <td>…</td> <td>…</td> … </tr>…</table>
二十五昼窗、使用<a>標(biāo)簽是趴，鏈接到另一個(gè)頁面
使用<a>
標(biāo)簽可實(shí)現(xiàn)超鏈接涛舍，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方唆途，就會(huì)有這個(gè)標(biāo)簽富雅。
語法：
<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>
例如：
<a title="點(diǎn)擊進(jìn)入慕課網(wǎng)">click here!</a>
上面例子作用是單擊click here!
文字，網(wǎng)頁鏈接到http://www.imooc.com
這個(gè)網(wǎng)頁肛搬。
title屬性的作用没佑，鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大温赔，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）蛤奢，如右側(cè)案例代碼（8-12行）。
注意：還有一個(gè)有趣的現(xiàn)象不知道小伙伴們發(fā)現(xiàn)了沒有陶贼，只要為文本加入a標(biāo)簽后啤贩，文字的顏色就會(huì)自動(dòng)變?yōu)樗{(lán)色（被點(diǎn)擊過的文本顏色為紫色），顏色很難看吧拜秧，不過沒有關(guān)系后面我們學(xué)習(xí)了css樣子就可以設(shè)置過來（a{color:#000}),后面會(huì)詳細(xì)講解痹屹。
二十六、在新建瀏覽器窗口中打開鏈接
<a>
標(biāo)簽在默認(rèn)情況下枉氮，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開志衍，有時(shí)我們需要在新的瀏覽器窗口中打開。
如下代碼：
<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>
二十七聊替、使用mailto在網(wǎng)頁中鏈接Email地址
<a>
標(biāo)簽還有一個(gè)作用是可以鏈接Email地址楼肪，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto
做許多其它事情惹悄。下面一一進(jìn)行講解春叫，請(qǐng)看詳細(xì)圖示：
注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?
”開頭，后面的參數(shù)每一個(gè)都以“&
”分隔象缀。
下面是一個(gè)完整的實(shí)例:
在瀏覽器中顯示的結(jié)果：
發(fā)送
點(diǎn)擊鏈接會(huì)打開電子郵件應(yīng)用蔬将，并自動(dòng)填寫收件人等設(shè)置好的信息，如下圖：
二十八央星、認(rèn)識(shí)<img>標(biāo)簽霞怀，為網(wǎng)頁插入圖片
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片莉给，可以使用<img>
標(biāo)簽來插入圖片毙石。
語法：
舉例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
1****、src：標(biāo)識(shí)圖像的位置颓遏；
2****徐矩、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)）叁幢，可看到該屬性指定的文本滤灯；
3****、title：提供在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)曼玩；
4鳞骤、圖像可以是GIF，PNG黍判，JPEG格式的圖像文件豫尽。
二十九、使用表單標(biāo)簽顷帖，與用戶交互
網(wǎng)站怎樣與用戶進(jìn)行交互美旧？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端贬墩，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)榴嗅。
語法：
<form method="傳送方式" action="服務(wù)器文件">
講解：
1.<form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開始震糖，以</form>結(jié)束录肯。
2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。
3.method ： 數(shù)據(jù)傳送的方式（get/post）吊说。
<form method="post" action="save.php"> <label for="username">用戶名:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /></form>
注意:
1论咏、所有表單控件（文本框、文本域颁井、按鈕厅贪、單選框、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦Ｑ疟觥）养涮。
2、method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。感興趣的小伙伴可以查看本小節(jié)的 wiki贯吓，里面有詳細(xì)介紹懈凹。
