整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
人在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)在如果想在一段話(huà)中特別強(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)一段話(huà)中的關(guān)鍵字時(shí)使用，它們的語(yǔ)義是強(qiáng)調(diào)。
<span>標(biāo)簽是沒(méi)有語(yǔ)義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。
如果現(xiàn)在我們想把上一小節(jié)的第一段話(huà)“美國(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ǔ)義：引用別人的話(huà)。
<blockquote>的作用也是引用別人的文本。但它是對(duì)長(zhǎng)文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。
等等，上一節(jié)<q>標(biāo)簽不是也是對(duì)文本的引用嗎？不要忘記<q>標(biāo)簽是對(duì)簡(jiǎn)短文本的引用，比如說(shuō)引用一句話(huà)就用到<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ì)需要加一些用于分隔的橫線(xiàn)，這樣會(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)樣式線(xià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)有表格線(xiàn)的
表頭，也就是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能讓訪(fǎng)問(wèn)者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請(qǐng)看詳細(xì)圖示：
提醒:如果mailto后面同時(shí)有多個(gè)參數(shù)的話(huà)，第一個(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等前端教程
注釋?zhuān)?/span><!-- -->
DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范
head：網(wǎng)頁(yè)頭部標(biāo)簽
body：代表網(wǎng)頁(yè)主題
標(biāo)題標(biāo)簽
段落標(biāo)簽
換行標(biāo)簽
水平線(xiàn)標(biāo)簽
字體樣式標(biāo)簽
注釋
特殊字符
特殊符號(hào)就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一級(jí)目錄
文本鏈接
<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>
圖像鏈接：就是嵌套圖片標(biāo)簽
頁(yè)面間鏈接
錨鏈接
功能性鏈接
塊元素
行內(nèi)元素
什么是列表：就是一種展示方式
有序列表
無(wú)序列表
自定義列表
<dl>
<dt></dt> 標(biāo)題
<dd></dd> 選項(xiàng)
<dd></dd>
<dd></dd>
</dl>為什么使用表格
基本結(jié)構(gòu)
<table border="1px" 邊框>表格標(biāo)簽
<tr>
<td></td>列標(biāo)簽
<td></td>
<td></td>
</tr>行標(biāo)簽 這代表一行
</table>跨列：使用colspan="夸的列數(shù)" <td colspan="4">
跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">
視頻元素
音頻元素
元素名 | 描述 |
header | 標(biāo)題頭部區(qū)域的內(nèi)容(用于頁(yè)面或頁(yè)面中的一塊區(qū)域) |
footer | 標(biāo)記腳部區(qū)域的內(nèi)容（用于整個(gè)頁(yè)面或頁(yè)面的一塊區(qū)域） |
section | web頁(yè)面中的一塊獨(dú)立區(qū)域 |
atricle | 獨(dú)立的文章內(nèi)容 |
aside | 相關(guān)內(nèi)容或應(yīng)用(常用于側(cè)邊欄) |
nav | 導(dǎo)航類(lèi)輔助內(nèi)容 |
<iframe src="path" name="mainFrame"></iframe>
表單：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效
post方式提交：比較安全，可以傳輸大文件
表單元素格式
屬性 | 說(shuō)明 |
type | 指定元素的類(lèi)型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默認(rèn)為text |
name | 指定表單元素的名稱(chēng) 必填，用來(lái)后臺(tái)讀取 |
value | 元素的初試值。type為radio時(shí)必須指定一個(gè)值 |
size | 指定元素的初始寬度。當(dāng)type為text時(shí)或者password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類(lèi)型，寬度以像素為單位 |
maxlength | type為txet或password時(shí)，輸入的最大字符數(shù) |
cheaked | type為radio或cheackbox時(shí)，指定按鈕是否被選中 |
單選框
多選框
按鈕
<input type="button" name="btn1" value="點(diǎn)擊" />普通按鈕
<input type="image" src ="點(diǎn)擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕下拉框
<select name="列表名稱(chēng)">
<option value="選項(xiàng)的值" select>中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
<option value="選項(xiàng)的值">中國(guó)</option>
</select>
提交的格式就是列表名稱(chēng)和value文本域
<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>郵件驗(yàn)證
<input type="email" name="youjian">URL
<input type="url" name="url"> 數(shù)字驗(yàn)證
<input type="number" name="num" max="100" min="0" step="10">滑塊
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隱藏域 hidden
<input type="text" id="mark" hidden>只讀 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增強(qiáng)鼠標(biāo)可用性
<label for="mark">點(diǎn)擊</label>
<input type="text" id="mark">為什么要進(jìn)行表單驗(yàn)證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全
提示信息
非空判斷
正則表達(dá)式驗(yàn)證
高級(jí)驗(yàn)證使用js
、新建項(xiàng)目
1、新建===web項(xiàng)目===輸入項(xiàng)目名稱(chēng)====完成
二、新建html文件
在新建項(xiàng)目中新建html模板
輸入文件名稱(chēng)：
三、認(rèn)識(shí)基本格式
聯(lián)想出基本格式：
四、編輯html文件
運(yùn)行html，選擇瀏覽器
五、html常用的快捷鍵
（1）ctrl+n+w web項(xiàng)目創(chuàng)建
（2）ctrl+n+h html文檔創(chuàng)建
（3）ctrl+s 保存html頁(yè)面（頁(yè)面上如果未保存會(huì)顯示*號(hào)）
（4）ctrl+r html運(yùn)行
（5）ctrl+z 撤回
（6）！+tab鍵 聯(lián)想基本格式
（7）ctrl+/ 注釋和取消注釋
（8）ctrl+鼠標(biāo)滾輪， 字體方大和縮小
六、認(rèn)識(shí)標(biāo)簽
（1）H標(biāo)簽（標(biāo)題標(biāo)簽）
（2）p標(biāo)簽 （段落標(biāo)簽）
（3）img 標(biāo)簽（圖片標(biāo)簽）
兩種：第一種widows上傳圖片，第二種：網(wǎng)上圖片鏈接
第一種
img中顯示圖片
img中引入圖片
第二種：網(wǎng)上圖片的鏈接：
（4） 標(biāo)簽（空格）
（5）em 標(biāo)簽表示斜體
（6）i 標(biāo)簽表示斜體
（7）br 表示換行
（8）b 標(biāo)簽表示加粗
（9） strong 標(biāo)簽表示加粗
（10）s 標(biāo)簽（刪除線(xiàn)）
（11）u 標(biāo)簽 （下劃線(xiàn)）
（12）font 顏色
（13）sub下標(biāo)
（14）sup上標(biāo)
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
