整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body bgcolor="grey">
<p>HELLO,everyone.This is my first page!</p>
</body>
</html>我自己是一名從事了多年開(kāi)發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號(hào)并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
第2章 文章段落
2.1 文檔聲明和META標(biāo)簽
<html>,<body>,<head>標(biāo)簽是html文檔結(jié)構(gòu)標(biāo)簽，<!DOCTYPE HTML>不屬于html標(biāo)簽，它用于定義文檔類(lèi)型
網(wǎng)頁(yè)中不能正常顯示中文，出現(xiàn)亂碼現(xiàn)象，使用meta標(biāo)簽設(shè)置編碼格式：<meta charset="utf-8">
<!DOCTYPE html>
<html>
<head>
<title>第一個(gè)網(wǎng)頁(yè)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
大家好，一起來(lái)學(xué)習(xí)html標(biāo)記語(yǔ)言
</body>
</html>3.如果想在html頁(yè)面中顯示空格，使用
4.
標(biāo)題標(biāo)簽：<h1></h1>~<h6></h6>
段落標(biāo)簽：<p></p>
align對(duì)齊屬性值：
left:左對(duì)齊內(nèi)容
right:右對(duì)齊內(nèi)容
center:居中對(duì)齊內(nèi)容
justify:對(duì)行進(jìn)行延申，這樣每行都可以有相等的長(zhǎng)度
換行標(biāo)簽<br/>
5.一個(gè)<p></p>標(biāo)簽代表一個(gè)段落，兩個(gè)<p>標(biāo)簽中的文本內(nèi)容不在同一行，在<p>標(biāo)簽中，使用<br/>文本內(nèi)容的位置只是換行，其實(shí)還是一個(gè)段落
6.<pre></pre>標(biāo)簽用于預(yù)定義格式顯示文本，即文本在瀏覽器中顯示時(shí)遵循在HTML原文檔中定義的格式
<!DOCTYPE html>
<html>
<head>
<title>練習(xí)1</title>
<meta http-equiv="Content-Type" content="text/http;charset=utf-8"/>
</head>
<body>
<h3 align="center">《早發(fā)白帝城》</h3>
<p align="center">朝辭白帝彩云間，千里江陵一日還。</p>
<p align="center">兩岸猿聲啼不住，輕舟已過(guò)萬(wàn)重山。</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>練習(xí)2</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<h1>敕勒歌</h1>
<h2>朝代：南北朝</h2>
<h3>作者：佚名</h3>
<p> 敕勒川，<br/>
陰山下，<br/>
天似穹廬，<br/>
</p>
<pre>
籠蓋四野，
天蒼蒼，
野茫茫，
風(fēng)吹草低見(jiàn)牛羊。
</pre>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>任務(wù)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p align="center">關(guān)于我們 | 招聘信息 | 聯(lián)系我們 | 意見(jiàn)反饋</p>
<hr/>
<p align="center">Copyright ? 2016 imooc.com All Rights Reserved</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>任務(wù)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p>公式:x<sup>2</sup>+x=0 解:x<sub>1</sub>=0;x<sub>2</sub>=-1</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<ul type="disc">
<li>朝辭白帝彩云間，</li>
<li>千里江陵一日還，</li>
<li>兩岸猿聲啼不住，</li>
<li>輕舟已過(guò)萬(wàn)重山，</li>
</ul>
<ul type="square">
<li>朝辭白帝彩云間，</li>
<li>千里江陵一日還，</li>
<li>兩岸猿聲啼不住，</li>
<li>輕舟已過(guò)萬(wàn)重山，</li>
</ul>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<ol type="a">
<li>朝辭白帝彩云間，</li>
<li>千里江陵一日還，</li>
<li>兩岸猿聲啼不住，</li>
<li>輕舟已過(guò)萬(wàn)重山，</li>
</ol>
<ol type="i">
<li>朝辭白帝彩云間，</li>
<li>千里江陵一日還，</li>
<li>兩岸猿聲啼不住，</li>
<li>輕舟已過(guò)萬(wàn)重山，</li>
</ol>
</body>
</html><dt><dd>是同級(jí)標(biāo)簽
絕對(duì)路徑：
相對(duì)路徑：
效果圖
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p>一幅圖像:<img src="http://climg.mukewang.com/58c112ed0001370f03000300.jpg" width="30%"></p>
<p>一幅動(dòng)畫(huà)圖像:<img src="http://climg.mukewang.com/58c11324000144f703550220.jpg" height="50px" width="50px"></p>
</body>
</html>超鏈接標(biāo)簽
空鏈接：<a href="#"> </a>
任務(wù)：
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<p><a name="dingbu">這里是頂部</p>
<p><a href="#shuiguo">水果</p>
<p><a href="#shucai">蔬菜</p>
<p><a href="#yundong">運(yùn)動(dòng)</a></p>
<h3><a name="shuiguo">水果</a></h3>
<ul>
<li>香蕉</li>
<li>蘋(píng)果</li>
<li>葡萄</li>
<li>梨</li>
<li>西瓜</li>
<li>櫻桃</li>
<li>菠蘿</li>
<li>橙子</li>
<li>柚子</li>
<li>芒果</li>
</ul>
<p><a href="#dingbu">返回頂部</a></p>
<h3><a name="shucai">蔬菜</a></h3>
<ul>
<li>西紅柿</li>
<li>黃瓜</li>
<li>土豆</li>
<li>芹菜</li>
<li>蒜苔</li>
<li>西葫蘆</li>
<li>香菇</li>
<li>菠菜</li>
<li>豆角</li>
<li>油菜</li>
</ul>
<a name="yundong"></a>
<p><a href="#dingbu">返回頂部</a></p>
</body>
</html>1. 電子郵件鏈接
2.文件下載
<!DOCTYPE html>
<html>
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="mailto:2539391306@qq.com.cn">郵箱鏈接</a>
<a href="58ca5b6700018dfc02400135.zip">文件下載</a>
</body>
</html>原文鏈接：https://blog.csdn.net/qq_43405634/article/details/103789819
人在51RGB網(wǎng)學(xué)習(xí)HTML+CSS基礎(chǔ)課程，記錄一些文字，方便自己回憶，也希望對(duì)大家有所幫助
基礎(chǔ)框架
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標(biāo)題標(biāo)簽</title>
</head>
<body>
<h1>了不起的蓋茨比</h1>
<p>《了不起的蓋茨比》為那個(gè)奢靡年代的縮影。蓋茨比懷揣著對(duì)"美國(guó)夢(mèng)"的期翼，投身到那個(gè)年代的燈紅酒綠之中，卻在名利場(chǎng)中看盡世態(tài)炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問(wèn)世。
</p>
</body>
</html>
什么是代碼注釋?zhuān)看a注釋的作用是幫助程序員標(biāo)注代碼的用途，過(guò)一段時(shí)間后再看你所編寫(xiě)的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開(kāi)發(fā)網(wǎng)頁(yè)代碼。
語(yǔ)法：
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。
<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>
<title>標(biāo)簽
在<title>和<title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁(yè)的標(biāo)題信息，它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁(yè)的title標(biāo)簽用于告訴用戶(hù)和搜索引擎這個(gè)網(wǎng)頁(yè)的主要內(nèi)容是什么，搜索引擎可以通過(guò)網(wǎng)頁(yè)標(biāo)題，迅速的判斷出網(wǎng)頁(yè)的主題。每個(gè)網(wǎng)頁(yè)的內(nèi)容都是不同的，每個(gè)網(wǎng)頁(yè)都應(yīng)該有一個(gè)獨(dú)一無(wú)二的title。
例如：
<head> <title>helloworld</title></head>
<title>標(biāo)簽的內(nèi)容“hello world”會(huì)在瀏覽器中的標(biāo)題欄上顯示出來(lái)，如下圖所示
在網(wǎng)頁(yè)上要展示出來(lái)的頁(yè)面內(nèi)容一定要放在body標(biāo)簽中。如下圖是一個(gè)新聞文章的網(wǎng)頁(yè)。
如果想在網(wǎng)頁(yè)上顯示文章，這時(shí)就需要<p>標(biāo)簽了，把文章的段落放到<p>標(biāo)簽中。
語(yǔ)法：<p>段落文本</p>
注意一段文字一個(gè)<p>標(biāo)簽，如在一篇新聞文章中有3段文字，就要把這3個(gè)段落分別放到3個(gè)<p>標(biāo)簽中。如下圖所示。
文章的段落用<p>標(biāo)簽，那么文章的標(biāo)題用什么標(biāo)簽?zāi)兀吭诒竟?jié)我們將使用<hx>標(biāo)簽來(lái)制作文章的標(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í)。
語(yǔ)法：<hx>標(biāo)題文本</hx> x:1-6
注意：因?yàn)閔1標(biāo)簽在網(wǎng)頁(yè)中比較重要，所以一般h1標(biāo)簽被用在網(wǎng)站名稱(chēng)上。騰訊網(wǎng)站就是這樣做的。如：<h1>騰訊網(wǎng)</h1>
h1-h6標(biāo)簽的默認(rèn)樣式：
標(biāo)簽代碼：
在瀏覽器中顯示的樣式：
有了段落又有了標(biāo)題，現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字，這時(shí)候就可以用到<em>或<strong>標(biāo)簽但兩者在強(qiáng)調(diào)的語(yǔ)氣上有區(qū)別:
<em>表示強(qiáng)調(diào)，在瀏覽器中<em>默認(rèn)用斜體表示
<strong>表示更強(qiáng)烈的強(qiáng)調(diào)，在瀏覽器中<strong>用粗體表示。
兩個(gè)標(biāo)簽相比，目前國(guó)內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)。
在瀏覽器中默認(rèn)樣式是有區(qū)別的：
瀏覽器中的樣子，如下圖。
語(yǔ)法：
<em>需要強(qiáng)調(diào)的文本</em>
<strong>需要強(qiáng)調(diào)的文本</strong>
栗子：
在網(wǎng)上商城中，某產(chǎn)品的打折后的價(jià)格是需要強(qiáng)調(diào)的。如下圖。
代碼實(shí)現(xiàn):
語(yǔ)法：<span>文本</span>
我們對(duì)<em>、<strong>、<span>這三個(gè)標(biāo)簽進(jìn)行一下總結(jié)：
<em>和<strong>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，它們的語(yǔ)義是強(qiáng)調(diào)。
<span>標(biāo)簽是沒(méi)有語(yǔ)義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。
如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國(guó)夢(mèng)”三個(gè)字設(shè)置成blue（藍(lán)色），但注意不是為了強(qiáng)調(diào)“美國(guó)夢(mèng)”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對(duì)“美國(guó)夢(mèng)”這三個(gè)字加重音讀出），所以這樣情況下就可以用到<span>標(biāo)簽了。如下面例子：
<p>1922年的春天，一個(gè)想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾TobeyMaguire飾）的作家， 離開(kāi)了美國(guó)中西部，來(lái)到了紐約。那是一個(gè)道德感漸失，爵士樂(lè)流行，走私為王，<strong>股票</strong>飛漲的時(shí)代。 為了追尋他的<span>美國(guó)夢(mèng)</span>，他搬入紐約附近一海灣居住。</p>
我們?nèi)绻朐O(shè)置“美國(guó)夢(mèng)”三個(gè)字設(shè)置成blue（藍(lán)色），只需要在<style>標(biāo)簽中加入：
span{color:blue; }css部分，以后會(huì)聊，你能大概明白span就是能干單獨(dú)設(shè)置樣式的活，就ok了
想在你的html中加一段引用嗎？比如在你的網(wǎng)頁(yè)的文章里想引用某個(gè)作家的一句詩(shī)，這樣會(huì)使你的文章更加出彩，那么<q>標(biāo)簽是你所需要的。
語(yǔ)法：<q>引用文本</q>
<p>最初知道莊子，是從一首詩(shī)<q>莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑
</q>開(kāi)始的。雖然當(dāng)時(shí)不知道是什么意思，只是覺(jué)得詩(shī)句挺特別。
后來(lái)才明白這個(gè)典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對(duì)世俗社會(huì)的功名利祿及自己的舍棄。
</p>
講解:
在上面的例子中，“莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。” 這是一句詩(shī)歌，出自晚唐詩(shī)人李商隱的《錦瑟》 。因?yàn)椴皇亲髡咦约旱奈淖郑孕枰褂脤?shí)現(xiàn)引用。
注意要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。
下圖是代碼顯示結(jié)果：
注意這里用標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤(pán)上輸入雙引號(hào)就行了），而是它的語(yǔ)義：引用別人的話。
<blockquote>的作用也是引用別人的文本。但它是對(duì)長(zhǎng)文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。
等等，上一節(jié)<q>標(biāo)簽不是也是對(duì)文本的引用嗎？不要忘記<q>標(biāo)簽是對(duì)簡(jiǎn)短文本的引用，比如說(shuō)引用一句話就用到<q>標(biāo)簽。
如想在我的文章中引用李白《關(guān)山月》中的詩(shī)句，因?yàn)橐梦谋颈容^長(zhǎng)，所以使用
<blockquote>。
語(yǔ)法：<blockquote>引用文本</blockquote>
如下面例子：
<blockquote> 明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門(mén)關(guān)。漢下白登道，胡窺青海灣。由來(lái)征戰(zhàn)地，不見(jiàn)有人還。戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。 </blockquote>
瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式。如下圖所示：
例子，我們想讓一首詩(shī)顯示得更美觀些，如顯示下面效果：
怎么可以讓每一句詩(shī)詞后面加入一個(gè)折行呢？那就可以用到<br />標(biāo)簽了，在需要加回車(chē)換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車(chē)。
代碼改為：
<h2>《詠桂》</h2> <p>暗淡輕黃體性柔，<br/>情疏跡遠(yuǎn)只香留。<br/>何須淺碧深紅色，<br/>自是花中第一流。
詩(shī)文在瀏覽器中顯示為：
在html代碼中輸入空格、回車(chē)都是沒(méi)有作用的。要想輸入空格，必須寫(xiě)入。不要忘了那個(gè)分號(hào)
在html代碼中輸入空格是不起作用的，如下代碼。
在瀏覽中顯示，還是沒(méi)有空格效果。
輸入空格的正確方法：
在瀏覽器中的顯示出來(lái)的空格效果。如下圖所示。
在信息展示時(shí)，有時(shí)會(huì)需要加一些用于分隔的橫線，這樣會(huì)使文章看起來(lái)整齊些。如下圖所示：
語(yǔ)法：
html4.01版本<hr>
xhtml1.0版本<hr />注意：
<hr />標(biāo)簽和<br />標(biāo)簽一樣也是一個(gè)空標(biāo)簽，所以只有一個(gè)開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。
<hr />標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺(jué)得這種樣式不美觀，沒(méi)有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對(duì)其修改。
大家注意，現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是），這種版本比較規(guī)范。
一般網(wǎng)頁(yè)中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁(yè)中展示出來(lái)，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。栗子：
<address>本文的作者：<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>
在介紹語(yǔ)言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁(yè)中顯示一些計(jì)算機(jī)專(zhuān)業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用<code>標(biāo)簽了，如下面例子：
<code>var i = a + b;</code>
注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了。如果是多行代碼，可以使用<pre>標(biāo)簽。
在上節(jié)中介紹加入一行代碼的標(biāo)簽為<code>，但是在大多數(shù)情況下是需要加入大段代碼的，如下圖：
怎么辦？不會(huì)是每一代碼都加入一個(gè)<code>標(biāo)簽吧，沒(méi)有這么復(fù)雜，這時(shí)候就可以使用<pre>標(biāo)簽。
語(yǔ)法：<pre>語(yǔ)言代碼段</pre>
<pre>標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。如下代碼：
<pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>在瀏覽器中的顯示結(jié)果為：
在上面的例子中可以看到代碼中的空格，換行符都保留下來(lái)。如果用以前的方法，回車(chē)需要輸入<br>簽，空格需要輸入
注意：<pre>標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁(yè)中預(yù)顯示格式時(shí)都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)展示計(jì)算機(jī)的源代碼。
在瀏覽網(wǎng)頁(yè)時(shí)，你會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。
這些列表就可以使用ul-li標(biāo)簽來(lái)完成。ul-li是沒(méi)有前后順序的信息列表。
語(yǔ)法：
<ul> <li>信息</li> <li>信息</li> ......</ul>
舉例：
<ul> <li>精彩少年</li> <li>美麗突然出現(xiàn)</li> <li>觸動(dòng)心靈的旋律</li></ul>
ul-li在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)，如下圖所示：
如果想在網(wǎng)頁(yè)中展示有前后順序的信息列表，怎么辦呢？如，當(dāng)當(dāng)網(wǎng)上的書(shū)籍熱賣(mài)排行榜，如下圖所示。這類(lèi)信息展示就可以使用<ol>標(biāo)簽來(lái)制作有序列表來(lái)展示。
語(yǔ)法：
<ol> <li>信息</li> <li>信息</li> ......</ol>
舉例：
下面是一個(gè)熱點(diǎn)課程下載排行榜：
<ol> <li>前端開(kāi)發(fā)面試心法</li> <li>零基礎(chǔ)學(xué)習(xí)html</li> <li>JavaScript全攻略</li></ol>
<ol>在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開(kāi)始，如下圖所示：
在網(wǎng)頁(yè)制作過(guò)程過(guò)中，可以把一些獨(dú)立的邏輯部分劃分出來(lái)，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。
語(yǔ)法：<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁(yè)面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁(yè)中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用<div>標(biāo)簽作為容器。
在上一小節(jié)中，我們把一些標(biāo)簽放進(jìn)<div>里，劃分出一個(gè)獨(dú)立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱(chēng)，用id屬性來(lái)為<div>提供唯一的名稱(chēng)，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號(hào)，這個(gè)身份證號(hào)是唯一標(biāo)識(shí)我們的身份的，也是必須唯一的。
如下兩圖進(jìn)行比較，如果設(shè)計(jì)師把兩個(gè)圖給你，哪個(gè)圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。
語(yǔ)法：<div id="版塊名稱(chēng)">…</div>
有時(shí)候我們需要在網(wǎng)頁(yè)上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁(yè)上展示公司的庫(kù)存清單。如下表：
想在網(wǎng)頁(yè)上展示上述表格效果可以使用以下代碼：
創(chuàng)建表格的四個(gè)元素：table、tbody、tr、th、td
<table>…</table>：整個(gè)表格以<table>標(biāo)記開(kāi)始、</table>標(biāo)記結(jié)束。
<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。
<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。
<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>，說(shuō)明一行中就有幾列。
<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。
表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
上述代碼在瀏覽器中顯示的默認(rèn)的樣式為：
總結(jié)：
table表格在沒(méi)有添加css樣式之前，在瀏覽器中顯示是沒(méi)有表格線的
表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
Table 表格在沒(méi)有添加 css 樣式之前，是沒(méi)有邊框的。這樣不便于我們后期合并單元格知識(shí)點(diǎn)的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮剑瑸樗砑舆吙颉４a中加入：
<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>上述代碼是用 css 樣式代碼，為th，td單元格添加粗細(xì)為一個(gè)像素的黑色邊框。
結(jié)果窗口顯示出結(jié)果樣式：
表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要。代碼如下
摘要摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來(lái)的。它的作用是增加表格的可讀性(語(yǔ)義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶(hù)讀取表格內(nèi)容。
語(yǔ)法：<table summary="表格簡(jiǎn)介文本">
標(biāo)題用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。語(yǔ)法：
<table> <caption>標(biāo)題文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>
使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁(yè)制作中可以說(shuō)是無(wú)處不在，只要有鏈接的地方，就會(huì)有這個(gè)標(biāo)簽。
語(yǔ)法 ：<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過(guò)顯示的文本">鏈接顯示的文本</a>
例如：<a title="點(diǎn)擊進(jìn)入我的博客">click here!</a>
上面例子作用是單擊click here!文字，網(wǎng)頁(yè)鏈接到http://www.zhaolion.com這個(gè)網(wǎng)頁(yè)。
title屬性的作用，鼠標(biāo)滑過(guò)鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁(yè)開(kāi)發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語(yǔ)義化更友好)
提醒
還有一個(gè)有趣的現(xiàn)象不知道小伙伴們發(fā)現(xiàn)了沒(méi)有，只要為文本加入a標(biāo)簽后，文字的顏色就會(huì)自動(dòng)變?yōu)樗{(lán)色（被點(diǎn)擊過(guò)的文本顏色為紫色），顏色很難看吧，不過(guò)沒(méi)有關(guān)系后面我們學(xué)習(xí)了css樣子就可以設(shè)置過(guò)來(lái)（a{color:#000}),后面會(huì)詳細(xì)講解。
<a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁(yè)是在當(dāng)前瀏覽器窗口中打開(kāi)，有時(shí)我們需要在新的瀏覽器窗口中打開(kāi)。只需要添加一個(gè)屬性target="_blank"
如下代碼：
<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>
<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問(wèn)者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請(qǐng)看詳細(xì)圖示：
提醒:如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開(kāi)頭，后面的參數(shù)每一個(gè)都以“&”分隔。
下面是一個(gè)完整的實(shí)例: 在瀏覽器中顯示的一個(gè)發(fā)送按鈕
點(diǎn)擊鏈接會(huì)打開(kāi)電子郵件應(yīng)用，并自動(dòng)填寫(xiě)收件人等設(shè)置好的信息，如下圖：
在網(wǎng)頁(yè)的制作中為使網(wǎng)頁(yè)炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來(lái)插入圖片。語(yǔ)法：[站外圖片上傳中……(48)]
舉例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
src：標(biāo)識(shí)圖像的位置；
alt：指定圖像的描述性文本，當(dāng)圖像不可見(jiàn)時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；
title：提供在圖像可見(jiàn)時(shí)對(duì)圖像的描述(鼠標(biāo)滑過(guò)圖片時(shí)顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
網(wǎng)站怎樣與用戶(hù)進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。
語(yǔ)法：<form method="傳送方式" action="服務(wù)器文件">
講解：
<form>：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開(kāi)始，以</form>結(jié)束。
action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php)。
method ： 數(shù)據(jù)傳送的方式（get/post）。
<formmethod="post"action="save.php"> <labelfor="username">用戶(hù)名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>
注意
所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在<form></form>標(biāo)簽之間（否則用戶(hù)輸入的信息可提交不到服務(wù)器上哦！）。
method:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問(wèn)題。感興趣的小伙伴可以問(wèn)谷哥
當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。
語(yǔ)法：
<form> <inputtype="text/password"name="名稱(chēng)"value="文本"/></form>
type：
當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。
name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。
value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
舉例：
<form> 姓名：<inputtype="text"name="myName"> <br/> 密碼：<inputtype="password"name="pass"></form>
在瀏覽器中顯示的結(jié)果：
當(dāng)用戶(hù)需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。
語(yǔ)法：<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
<textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開(kāi)始，以</textarea>結(jié)束。
cols ：多行輸入域的列數(shù)。
rows ：多行輸入域的行數(shù)。
在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。
舉例：
<formmethod="post"action="save.php"> <label>聯(lián)系我們</label> <textareacols="50"rows="10">在這里輸入內(nèi)容...</textarea></form>
在瀏覽器中顯示結(jié)果：
在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶(hù)的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶(hù)只能選擇一項(xiàng)，而復(fù)選框中用戶(hù)可以任意選擇多項(xiàng)，甚至全選。請(qǐng)看下面的例子:語(yǔ)法：<input type="radio/checkbox" value="值" name="名稱(chēng)" checked="checked"/>
type:
當(dāng) type="radio" 時(shí)，控件為單選框
當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框
value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
name：為控件命名，以備后臺(tái)程序 ASP、PHP 使用
checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
如下面代碼：
在瀏覽器中顯示的結(jié)果：
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱(chēng)“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表在網(wǎng)頁(yè)中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁(yè)空間。既可以單選、又可以多選。如下代碼：
講解：
value：
selected="selected"：設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。
下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性，就可以實(shí)現(xiàn)多選功能，在 widows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)。如下代碼：
在瀏覽器中顯示的結(jié)果：
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當(dāng)用戶(hù)需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕。語(yǔ)法：<input type="submit" value="提交">
type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結(jié)果：
當(dāng)用戶(hù)需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶(hù)輸入“用戶(hù)名”后，發(fā)現(xiàn)書(shū)寫(xiě)有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。語(yǔ)法：<input type="reset" value="重置">
type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結(jié)果：
輸入賬號(hào)
單擊重置按鈕
小伙伴們，你們?cè)谇懊鎸W(xué)習(xí)表單各種控件的時(shí)候，有沒(méi)有發(fā)現(xiàn)一個(gè)標(biāo)簽--label，這一小節(jié)就來(lái)揭曉它的作用。
label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。
語(yǔ)法：<label for="控件id名稱(chēng)">
注意標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。這樣你會(huì)在點(diǎn)慢跑標(biāo)簽，即使沒(méi)有點(diǎn)checkbox 也能選中
例子：
<form> <a>你對(duì)什么運(yùn)動(dòng)感興趣：</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">籃球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>
限時(shí)!！免費(fèi)送Dreamweaver、js等前端教程
頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高：document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高：document.body.offsetHeight (包括邊線的寬)
網(wǎng)頁(yè)正文全文寬：document.body.scrollWidth
網(wǎng)頁(yè)正文全文高：document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高：document.body.scrollTop
網(wǎng)頁(yè)被卷去的左：document.body.scrollLeft
網(wǎng)頁(yè)正文部分上：window.screenTop
網(wǎng)頁(yè)正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對(duì)象的滾動(dòng)高度。
scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離
scrollWidth:獲取對(duì)象的滾動(dòng)寬度
offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置
event.clientX 相對(duì)文檔的水平座標(biāo)
event.clientY 相對(duì)文檔的垂直座標(biāo)
event.offsetX 相對(duì)容器的水平坐標(biāo)
event.offsetY 相對(duì)容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動(dòng)的值
event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量
IE，F(xiàn)ireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無(wú)關(guān))
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.clientHeight
網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁(yè)可見(jiàn)區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁(yè)正文全文寬： document.body.scrollWidth
網(wǎng)頁(yè)正文全文高： document.body.scrollHeight
網(wǎng)頁(yè)被卷去的高： document.body.scrollTop
網(wǎng)頁(yè)被卷去的左： document.body.scrollLeft
網(wǎng)頁(yè)正文部分上： window.screenTop
網(wǎng)頁(yè)正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術(shù)要點(diǎn)
本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對(duì)于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測(cè)窗口的真實(shí)尺寸，在Netscape下需要使用Window的屬性；在IE下需要 深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對(duì)象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對(duì)象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。
Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的標(biāo)簽。Document對(duì)象的documentElement屬性則表示HTML文檔的根節(jié)點(diǎn)。
document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
實(shí)現(xiàn)代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>請(qǐng)調(diào)整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請(qǐng)調(diào)整瀏覽器窗口大小</h2><hr>
<form action="#" method="get" name="form1" id="form1">
<!--顯示瀏覽器窗口的實(shí)際尺寸-->
瀏覽器窗口 的 實(shí)際高度: <input type="text" name="availHeight" size="4"><br>
瀏覽器窗口 的 實(shí)際寬度: <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<!--
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函數(shù)：獲取尺寸
{
//獲取窗口寬度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//獲取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//結(jié)果輸出至兩個(gè)文本框
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//調(diào)用函數(shù)，獲取數(shù)值
window.onresize=findDimensions;
//-->
</script>
</body>
</html>
源程序解讀
（1）程序首先建立一個(gè)表單，包含兩個(gè)文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會(huì)隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個(gè)變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個(gè)變量中。
（4）再通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè)，獲取窗口大小，并存儲(chǔ)在前述兩個(gè)變量中。
（5）在函數(shù)的最后，通過(guò)按名稱(chēng)訪問(wèn)表單元素，結(jié)果輸出至兩個(gè)文本框。
（6）在JavaScript代碼的最后，通過(guò)調(diào)用findDimensions ( )函數(shù)，完成整個(gè)操作。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
