HTML基礎(chǔ)
本文包括
- HTML基本知識(shí)與結(jié)構(gòu)
- HTML常見標(biāo)簽
- 標(biāo)簽寫法與嵌套的討論
HTML、CSS、javascript三者的關(guā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)的。
<!DOCTYPE HTML>
指示 web 瀏覽器關(guān)于頁面使用哪個(gè) HTML 版本進(jìn)行編寫,必須寫在所有代碼的第一行!
如果你的頁面添加了<!DOCTYPE html>，那么就等同于開啟了標(biāo)準(zhǔn)模式，那么瀏覽器就得老老實(shí)實(shí)的按照W3C的標(biāo)準(zhǔn)解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個(gè)樣子了。
這個(gè)屬性會(huì)被瀏覽器識(shí)別并使用，但是如果你的頁面沒有DOCTYPE的聲明，瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會(huì)顯示不同的樣式。
這就是<!DOCTYPE html>的作用。
文件固定結(jié)構(gòu)
結(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ì)在瀏覽器中顯示出來。為 html 文檔加上使用的語言類型說明
在很多國(guó)際化的網(wǎng)站中會(huì)使用到！
<html lang="zh-CN">
</html>
告訴瀏覽器等設(shè)備，語言使用以中文為顯示和閱讀基礎(chǔ)!
英文使用 en
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。
meta標(biāo)簽
- meta是html中的元標(biāo)簽，其中包含了對(duì)應(yīng)html的相關(guān)信息，客戶端瀏覽器或服務(wù)器端的程序會(huì)根據(jù)這些信息進(jìn)行處理。
- HTTP-EQUIV類似于HTTP的頭部協(xié)議，它回應(yīng)給瀏覽器一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容。
- content（內(nèi)容類型）：重要！！這個(gè)網(wǎng)頁的格式是文本的，網(wǎng)頁模式
- charset（編碼）：特別重要！！！這個(gè)網(wǎng)頁的編碼是utf-8，中文編碼，需要注意的是這個(gè)是網(wǎng)頁內(nèi)容的編碼，而不是文件本身的，其他類型的編碼中文可能會(huì)出現(xiàn)亂碼。
- http-equiv="Content-Type" 表示描述文檔類型
content="text/HTML; 文檔類型，這里為html,如果JS就是text/javascript，
charset=utf-8 頁面字符集，編碼，eg:gb2312,iso-8859-1,utf-8 - meta標(biāo)簽
meta是html語言head區(qū)的一個(gè)輔助性標(biāo)簽。幾乎所有的網(wǎng)頁里，我們可以看到類似下面這段的html代碼：
<head>
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
</head>
也許你認(rèn)為這些代碼可有可無。其實(shí)如果你能夠用好meta標(biāo)簽，會(huì)給你帶來意想不到的效果，例如加入關(guān)鍵字會(huì)自動(dòng)被大型搜索網(wǎng)站自動(dòng)搜集；可以設(shè)定頁面格式及刷新等等。 - meta標(biāo)簽的組成
meta標(biāo)簽共有兩個(gè)屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁功能。- name屬性
name屬性主要用于描述網(wǎng)頁，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
meta標(biāo)簽的name屬性語法格式是：
<meta name="參數(shù)" content="具體的參數(shù)值"> 。
其中name屬性主要有以下幾種參數(shù)：
A、Keywords(關(guān)鍵字)
說明：keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。
舉例：
<meta name ="keywords" content="science, education,culture,politics,ecnomics，relationships, entertaiment, human">
B、description(網(wǎng)站內(nèi)容描述)
說明：description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。
舉例：
<meta name="description" content="This page is about the meaning of science, education,culture.">
C、robots(機(jī)器人向?qū)?
說明：robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。
content的參數(shù)有all,none,index,noindex,follow,nofollow。默認(rèn)是all。
舉例：
<meta name="robots" content="none">
D、author(作者)
說明：標(biāo)注網(wǎng)頁的作者
舉例：
<meta name="author" content="root,root@21cn.com"> - http-equiv屬性
http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
meta標(biāo)簽的http-equiv屬性語法格式是：
<meta http-equiv="參數(shù)" content="參數(shù)變量值">
其中http-equiv屬性主要有以下幾種參數(shù)：
A、Expires(期限)
說明：可以用于設(shè)定網(wǎng)頁的到期時(shí)間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。
用法：
<meta http-equiv="expires" content="Fri, 12 Jan 2001 18:18:18 GMT">
注意：必須使用GMT的時(shí)間格式。
B、Pragma(cache模式)
說明：禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。
用法：
<meta http-equiv="Pragma" content="no-cache">
注意：這樣設(shè)定，訪問者將無法脫機(jī)瀏覽。
C、Refresh(刷新)
說明：自動(dòng)刷新并指向新頁面。
用法：
<meta http-equiv="Refresh" content="2;URL=http://www.root.net">(注意后面的引號(hào)，分別在秒數(shù)的前面和網(wǎng)址的后面)
注意：其中的2是指停留2秒鐘后自動(dòng)刷新到URL網(wǎng)址。
D、Set-Cookie(cookie設(shè)定)
說明：如果網(wǎng)頁過期，那么存盤的cookie將被刪除。
用法：
<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/">
注意：必須使用GMT的時(shí)間格式。
E、Window-target(顯示窗口的設(shè)定)
說明：強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示。
用法：
<meta http-equiv="Window-target" content="_top">
注意：用來防止別人在框架里調(diào)用自己的頁面。
F、content-Type(顯示字符集的設(shè)定)
說明：設(shè)定頁面使用的字符集。
用法：
<meta http-equiv="content-Type" content="text/html; charset=gb2312">
G、content-Language（顯示語言的設(shè)定）
用法：
<meta http-equiv="Content-Language" content="zh-cn" />
- name屬性
- meta標(biāo)簽的功能
1、幫助主頁被各大搜索引擎登錄；
2、定義頁面的使用語言
3、自動(dòng)刷新并指向新的頁面
4、實(shí)現(xiàn)網(wǎng)頁轉(zhuǎn)換時(shí)的動(dòng)畫效果
5、控制頁面緩沖
6、控制網(wǎng)頁顯示的窗口
style中的屬性
font-size:數(shù)值px; 文字大小控制
color:#六進(jìn)制的顏色值; 文字顏色控制
text-align:left/center/right; 文字的居左、居中、居右控制。
關(guān)于單雙引號(hào)、轉(zhuǎn)義字符等基本知識(shí)
純html標(biāo)簽下單引號(hào)和雙引號(hào)以及html和JS混編下單引號(hào)和雙引號(hào)
標(biāo)題標(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)題也可使用它們。
例如：
<body>
<h1>一級(jí)標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>三級(jí)標(biāo)題</h3>
<h4>四級(jí)標(biāo)題</h4>
<h5>五級(jí)標(biāo)題</h4>
</body>
HTML注釋
代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過一段時(shí)間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。
<!--注釋文字 -->
語義化
標(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)容。
在后面的章節(jié)會(huì)帶領(lǐng)大家學(xué)習(xí)了解html中每個(gè)標(biāo)簽的語義（用途）。
常見標(biāo)簽
-
段落標(biāo)簽
<p><p>標(biāo)簽的默認(rèn)樣式，段前段后都會(huì)有空白，如果不喜歡這個(gè)空白，可以用css樣式來刪除或改變它。-
改變CSS樣式刪除段前段后空白處。
<style> p{margin:0px;} </style>
-
斜體標(biāo)簽
<em><em>斜體</em> -
粗體標(biāo)簽
<strong><strong>加粗</strong> -
<span>標(biāo)簽
被用來組合文檔中的行內(nèi)元素。使用<span>來組合行內(nèi)元素，以便通過樣式來格式化它們。
<span>在CSS定義中屬于一個(gè)行內(nèi)元素,在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被<span>劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。
<span>本身沒有任何屬性。
<div>在CSS定義中屬于一個(gè)塊級(jí)元素<div>可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類，如章節(jié)、摘要或備注。在頁面效果上，使用<div>會(huì)自動(dòng)換行，使用<span>就會(huì)保持同行。
例如：<style> span{ color:blue; } </style>
這樣，<span>標(biāo)簽包含的文本就變成了藍(lán)色的字體。
-
<q>標(biāo)簽
作用：段文本引用
例如：
<p>最初知道莊子，是從一首詩<q>莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。</q>開始的。雖然當(dāng)時(shí)不知道是什么意思，只是覺得詩句挺特別。后來才明白這個(gè)典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對(duì)世俗社會(huì)的功名利祿及自己的舍棄。</p>
在上面的例子中，“莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因?yàn)椴皇亲髡咦约旱奈淖郑孕枰褂?code><q></q>實(shí)現(xiàn)引用。
注意要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。
這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤上輸入雙引號(hào)就行了），而是它的語義：引用別人的話。
補(bǔ)充知識(shí)：語義化網(wǎng)頁結(jié)構(gòu)有助于搜索引擎的收錄。同一個(gè)效果可以用很多鐘方式實(shí)現(xiàn)，但這只方便了瀏覽者，而搜索引擎不知道這里到底是什么內(nèi)容，這里如果你使用<q>標(biāo)簽，那么就告訴瀏覽器這里是引用的話。而且在手持設(shè)備或移動(dòng)設(shè)備不能很好支持css的基礎(chǔ)上，瀏覽器會(huì)使用默認(rèn)的效果，因而提供較好可讀性。
-
<blockquote>標(biāo)簽
作用：長(zhǎng)文本引用
例如：
<blockquote>明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬里，吹度玉門關(guān)。漢下白登道，胡窺青海灣。由來征戰(zhàn)地，不見有人還。 戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。</blockquote>
注意：瀏覽器對(duì)
<blockquote>標(biāo)簽的解析是縮進(jìn)樣式
<br>標(biāo)簽
怎么可以讓每一句詩詞后面加入一個(gè)折行呢？那就可以用到<br />標(biāo)簽了，在需要加回車換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車。
語法：
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 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。<hr>標(biāo)簽
在信息展示時(shí)，有時(shí)會(huì)需要加一些用于分隔的橫線，這樣會(huì)使文章看起來整齊些。
語法：
html4.01版本
<hr>
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)頁中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：
<address>聯(lián)系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區(qū)德外大街10號(hào)</address><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)簽。
-
<pre>標(biāo)簽
主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。
語法：
<pre>語言代碼段</pre>
如下代碼：<pre> var message="歡迎"; for(var i=1;i<=10;i++) { alert(message); } </pre>
效果如下：
>注意：`<pre>` 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它，只是`<pre>`標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。
-
<ul>標(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)
- 這樣是空心圓，
ul{
list-style:circle;
} - 這個(gè)就是去除前面的點(diǎn)
ul{
list-style:none
}
- 這樣是空心圓，
-
-
<ol>標(biāo)簽
ol-li是有前后順序的信息列表-
語法：
<ol> <li>信息</li> <li>信息</li> ...... </ol> -
舉例：
<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開始。 -
-
<div>標(biāo)簽-
<div>可定義文檔中的分區(qū)或節(jié)（division/section）。 -
<div>標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。 - 如果用 id 或 class 來標(biāo)記
<div>，那么該標(biāo)簽的作用會(huì)變得更加有效。 -
<div>是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開始一個(gè)新行。實(shí)際上，換行是<div>固有的唯一格式表現(xiàn)。可以通過<div>的 class 或 id 應(yīng)用額外的樣式。不必為每一個(gè)<div>都加上類或 id，雖然這樣做也有一定的好處。 - 可以對(duì)同一個(gè)
<div>元素應(yīng)用 class 或 id 屬性，但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類似的元素，或者可以理解為某一類元素），而id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。
-
-
<table>標(biāo)簽常用屬性
1）屬性：border
作用：規(guī)定表格邊框的寬度
2）屬性：cellpadding
作用：?jiǎn)卧裰械奈谋九c單元格邊框的間距
3）屬性：cellspacing
作用：?jiǎn)卧裰g的間距-
創(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>，說明一行中就有幾列。
- 常用屬性：
colspan：規(guī)定單元格可橫跨的列數(shù)，值為數(shù)字
rowspan：規(guī)定單元格可橫跨的行數(shù)，值為數(shù)字5、
<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
總結(jié)：
1、表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
2、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
3、用css樣式，為表格加入邊框Table 表格在沒有添加 css 樣式之前，是沒有邊框的。 -
<caption>標(biāo)簽
表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要。- 摘要
摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。
語法：
<table summary="表格簡(jiǎn)介文本"> - 標(biāo)題
用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。
語法：
<table>
<caption>標(biāo)題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
- 摘要
-
<a>標(biāo)簽href：Hypertext Reference的縮寫。意思是超文本引用。
-
使用
<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)頁鏈接跳轉(zhuǎn)到http://www.imooc.com這個(gè)網(wǎng)頁。
-
<
a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開，有時(shí)我們需要在新的瀏覽器窗口中打開。
如下代碼：
<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>_blank --在新窗口中打開鏈接_parent --在父窗體中打開鏈接_self --在當(dāng)前窗體打開鏈接,此為默認(rèn)值_top --在當(dāng)前窗體打開鏈接，并替換當(dāng)前的整個(gè)窗體(框架頁)一個(gè)對(duì)應(yīng)的框架頁的名稱 -在對(duì)應(yīng)框架頁中打開
title屬性的作用，鼠標(biāo)滑過鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）。
注意：還有一個(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ì)講解。
使用mailto在網(wǎng)頁中鏈接Email地址
<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。
注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。引號(hào)只有一對(duì)！
例子：<a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內(nèi)容">
1. 郵箱地址
mailto:<a href="mailto:qiujie@staff.weibo.com">發(fā)送</a>
2. 抄送地址
cc:<a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發(fā)送</a>
3. 密件抄送地址
用分號(hào)分隔:<a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發(fā)送</a>
4. 多個(gè)收件人、抄送人、密送人 ;
bcc:<a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發(fā)送</a>
5. 郵件主題
subject:<a href="mailto:qiujie@staff.weibo.com？subject=郵件主題">發(fā)送</a>
6. 郵件內(nèi)容
body:<a href="mailto:qiujie@staff.weibo.com？body=郵件正文">發(fā)送</a>
7. 例子
<a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好，對(duì)此評(píng)論有些想法。">對(duì)此影評(píng)有何感想，發(fā)送郵件給我</a>
- 如果：A 發(fā)送郵件給B1、B2、B3，抄送給C1、C2、C3，密送給D1、D2、D3。
那么：
1. A知道自己發(fā)送郵件給了B1、B2、B3，并且抄送給了C1、C2、C3，密送給了D1、D2、D3。
2. B1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
3. C1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
4. D1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。 -
<img>標(biāo)簽
在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。- 語法：
[站外圖片上傳中……(2)]
<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格式的圖像文件。
5、路徑有兩種填寫方式：絕對(duì)路徑、相對(duì)路徑
6、相對(duì)路徑：相對(duì)于我們當(dāng)前 html 文件的位置來寫路徑即可！
7、./表示當(dāng)前目錄，../表示上一級(jí)目錄
- 語法：
-
<form>標(biāo)簽- 網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
語法：
<form method="傳送方式" action="服務(wù)器文件"> - 講解：
-
<form>：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開始，以</form>結(jié)束。 - action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。
- 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)容屬于后端程序員考慮的問題。 - 網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。
-
<input>標(biāo)簽- 當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。
- 語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form> - 屬性：
- type：
當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。
hidden 定義隱藏輸入字段
image 定義圖像作為提交按鈕
number 定義帶有 spinner 控件的數(shù)字字段
password 定義密碼字段。字段中的字符會(huì)被遮蔽
radio 定義單選按鈕
checkbox 定義復(fù)選框按鈕
range 定義帶有 slider 控件的數(shù)字字段
reset 定義重置按鈕。重置按鈕會(huì)將所有表單字段重置為初始值
search 定義用于搜索的文本字段
submit 定義提交按鈕。提交按鈕向服務(wù)器發(fā)送數(shù)據(jù)
text 默認(rèn)。定義單行輸入字段，用戶可在其中輸入文本。默認(rèn)是 20 個(gè)字符
url 定義用于 URL 的文本字段 - name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。
- value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)
- type：
- 舉例：
<form>
姓名：
<input type="text" name="myName"/>
密碼：
<input type="password" name="pass"/>
</form> - value="xxx" 替換為 placeholder="xxx" 的體驗(yàn)更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。
語法：
<input placeholder="text"/>
注釋：placeholder 屬性適用于以下的
<input>類型：text, search, url, telephone, email 以及 password。- 注意:同一組的單選按鈕，name 取值一定要一致，比如上同一個(gè)名稱“gender”，這樣同一組的單選按鈕才可以起到單選的作用！
知識(shí)擴(kuò)展：表單提交中的input、button、submit的區(qū)別
-
<textarea>標(biāo)簽- 當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。
- 語法：
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
1、<textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。
2、cols ：多行輸入域的列數(shù)。
3、rows ：多行輸入域的行數(shù)。
4、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。
舉例：
<form method="post" action="save.php">
<label>聯(lián)系我們</label>
<textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>
-
<select>標(biāo)簽- 使用下拉列表框，節(jié)省空間。下拉列表在網(wǎng)頁中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。
- 語法：
<select>
<option value="提交的值">顯示的值</option>
...
</select>
設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。
selected="selected" - 若想實(shí)現(xiàn)多選
<select multiple="multiple">然后選擇時(shí)候按ctrl點(diǎn)鼠標(biāo)選中 - 若想讓某個(gè)選項(xiàng)不可選
<option disabled="disabled"> - optgroup 標(biāo)簽
把相關(guān)的選項(xiàng)組合在一起
屬性 label：給選項(xiàng)組命名
屬性 disabled：禁用該選項(xiàng)組
-
<label>標(biāo)簽label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說，當(dāng)用戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。
語法：
<label for="控件id名稱">
注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。例子：
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
<map>標(biāo)簽
- 使用 map 標(biāo)簽可以給圖片某塊區(qū)域加超鏈接
- 使用方法：
1）為 map 標(biāo)簽首先加上 id 屬性用來為 map 標(biāo)簽定義一個(gè)唯一的名稱
2）為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同
3）為 map 標(biāo)簽所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱
4）在 map 標(biāo)簽內(nèi)嵌套 area 標(biāo)簽來實(shí)現(xiàn)給指定區(qū)域加鏈接
<area shape="" coords="" href ="" alt="" />
shape 屬性：定義鏈接區(qū)域的形狀，常用值 rect、circle
coords 屬性：確定區(qū)域的精確位置。填寫坐標(biāo)即可，以父元素左上角為原點(diǎn)，可借助qq截圖來得到想要的坐標(biāo)
href 屬性：填寫鏈接地址即可
alt 屬性：給鏈接加一些說明信息 - 例子
<map id="img1" name="img1">
<area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" />
<area shape="circle" coords="507,287,20" alt="私房庫(kù)我的博客" target="_blank" />
</map>注意：
第一個(gè)coords的四個(gè)參數(shù)中，前兩個(gè)參數(shù)為矩形的接近原點(diǎn)的頂角的坐標(biāo)，后兩個(gè)參數(shù)為對(duì)角的坐標(biāo)。
第二個(gè)coords的三個(gè)參數(shù)中，前兩個(gè)為圓心坐標(biāo)，第三個(gè)參數(shù)為圓的半徑。
-
<iframe>標(biāo)簽
- 創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
- 屬性：
- frameborder
值：1、0
作用：規(guī)定是否顯示框架周圍的邊框。 - width值：以像素計(jì)的寬度值、以包含元素百分比計(jì)的寬度值
作用：定義 iframe 的寬度 - height
作用：定義高度 - name
作用：給 iframe 命名 - scrolling
值：yes、no、auto
作用：規(guī)定是否在 iframe 中顯示滾動(dòng)條 - src
作用：規(guī)定在 iframe 中顯示的文檔的 URL
可以是本地的 html 文件，也可以是遠(yuǎn)程的 html 文件
- frameborder
標(biāo)簽寫法與嵌套的討論
標(biāo)簽寫法
- 元素標(biāo)記的省略（在 html5 里面有的標(biāo)記是可以省略不寫的）
1）不允許寫結(jié)束標(biāo)簽的元素
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。
這些標(biāo)簽都是單標(biāo)簽例如：br 標(biāo)簽，不可以這樣<br></br>，只能<br />這樣來關(guān)閉
標(biāo)簽。
2）可以省略結(jié)束標(biāo)記的元素有：
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
3）可以省略全部標(biāo)記的元素有
html,head,body,colgroup,tbody - 具有 boolean 值得屬性
例如：disabled,readonly，checked 等只寫屬性而不寫屬性值得時(shí)候當(dāng)做 ture
不寫屬性表示 false - 屬性值的引號(hào)可以省略
要求：屬性值不包含 空字符串，<，>，=， ‘
標(biāo)簽嵌套探討
- html 規(guī)定我們必須要嵌套著寫的標(biāo)簽
例如：頁面頭部是嵌套在 head 標(biāo)簽里面的，主體內(nèi)容都是嵌套在 body 標(biāo)簽里面的表單的內(nèi)容是嵌套在 form 標(biāo)簽里面的，dt、dd 是嵌套在 dl 標(biāo)簽里面的，li 是嵌套到ul 標(biāo)簽里面的，等等... - 塊級(jí)元素可以嵌套內(nèi)聯(lián)元素，但是內(nèi)聯(lián)元素不能包含塊元素
<div><span>我是一個(gè) span 元素</span></div> —— 對(duì)
<span><div>div 元素</div></span> —— 錯(cuò) - 內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素
<a href="#"><span></span></a> —— 對(duì) - 塊級(jí)元素與塊級(jí)元素嵌套注意點(diǎn)
- div 塊級(jí)元素是一個(gè)容器，幾乎可以存放任何常用標(biāo)簽，包括自己，我們?yōu)槭裁匆褂?div 來嵌套標(biāo)簽？這個(gè)問題可以用用我們國(guó)家的省份劃分來解釋，國(guó)家需要?jiǎng)澐植煌氖》輥砝诠芾恚敲次覀?html 頁面也是的，整個(gè) html 文檔元素太多，我們需要使用 div 標(biāo)簽將頁面劃分成不同的塊，這樣可以對(duì)每塊進(jìn)行分開管理，學(xué)完 css 我們就知道怎么進(jìn)行管理了。
-
塊級(jí)元素不能放在 p 標(biāo)簽里面
<p><ol><li></li></ol></p> —— 錯(cuò)
<p><div></div></p> —— 錯(cuò) - li 內(nèi)可以包含 div 標(biāo)簽，li 和 div 標(biāo)簽都是裝載內(nèi)容的容器，地位平等，沒有級(jí)別之分（例如：h1、h2 這樣森嚴(yán)的等級(jí)制度） ，要知道 li 標(biāo)簽連它的父級(jí) ul 或者是 ol 都可以容納的
