此時(shí)center代表是一個(gè)標(biāo)簽，而不是一個(gè)屬性值了。只要是在這個(gè)標(biāo)簽里面的內(nèi)容，都會(huì)居于瀏覽器的中間。 效果演示：

Paste_Image.png

到了HTML5里面，center標(biāo)簽不建議使用，建議使用css布局來實(shí)現(xiàn)。

預(yù)定義（預(yù)格式化）標(biāo)簽

含義：將保留標(biāo)簽內(nèi)部所有的空白字符(空格、換行符)，原封不動(dòng)地輸出結(jié)果（告訴瀏覽器不要忽略空格和空行）。
說明：真正排網(wǎng)頁(yè)過程中，
標(biāo)簽幾乎用不著。 效果演示：
Paste_Image.png
字體標(biāo)簽和超鏈接
字體標(biāo)簽： 、 、  、 、
超鏈接 
字體標(biāo)簽
特殊字符（轉(zhuǎn)義字符）
 ：空格 （non-breaking spacing，不斷打空格）
<：小于號(hào)
<（less than）
>：大于號(hào)
>（greater than）
&：符號(hào)
&
"：雙引號(hào)
'：?jiǎn)我?hào)
©：版權(quán)
?
™：商標(biāo)
?
绐：文字
紿。其實(shí)，
#32464是漢字
紿的unicode編碼。
比如說，你想把
作為一個(gè)文本在頁(yè)面上顯示，直接寫
是肯定不行的，因?yàn)檫@代表的是一個(gè)段落標(biāo)簽，所以這里需要用到轉(zhuǎn)義字符。應(yīng)該這么寫：
這是一個(gè)HTML語(yǔ)言的<p>標(biāo)簽
正確的效果如下：
Paste_Image.png
錯(cuò)誤的效果如下：
Paste_Image.png
其實(shí)我們只要記住前三個(gè)符號(hào)就行了，其他的在需要的時(shí)候查一下就行了。而且，EditPlus軟件中是可以直接點(diǎn)擊這些符號(hào)進(jìn)行選擇的：
Paste_Image.png
來一張表格，方便需要的時(shí)候查詢：
特殊字符描述字符的代碼空格符 <小于號(hào)<>大于號(hào)>&和號(hào)&￥人民幣¥?版權(quán)©?注冊(cè)商標(biāo)®°攝氏度°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2平方2（上標(biāo)2）²3立方3（上標(biāo)3）³
下劃線、中劃線、斜體
：下劃線標(biāo)記
或：中劃線標(biāo)記（刪除線）
或：斜體標(biāo)記
效果：
Paste_Image.png
上面的這幾個(gè)標(biāo)簽，常用于做一些小裝飾、小圖標(biāo)。比如：
這張圖中，我們通過查看京東網(wǎng)站的代碼發(fā)現(xiàn)，箭頭處的小圖標(biāo)都是用的標(biāo)簽。
粗體標(biāo)簽或（已廢棄）
效果：
Paste_Image.png
字體標(biāo)簽（已廢棄）
屬性：
color="紅色"或color="#ff00cc"或color="new rgb(0,0,255)"：設(shè)置字體顏色。 設(shè)置方式：?jiǎn)卧~ \ #ff00cc \ rgb(0,0,255)
size：設(shè)置字體大小。 取值范圍只能是：1至7。取值時(shí)，如果取值大于7那就按照7來算，如果取值小于1那就按照1來算。如果想要更大的字體，那就只能通過css樣式來解決。
face="微軟雅黑"：設(shè)置字體類型。
舉例：
vae
效果：
Paste_Image.png
上標(biāo) 下標(biāo)
上小標(biāo)這兩個(gè)標(biāo)簽容易混淆，怎么記呢？這樣記：b的意思是bottom：底部 舉例：
O2????53
效果：
Paste_Image.png
三、超鏈接
超鏈接有三種形式，下面分別講講。
1、外部鏈接：鏈接到外部文件
舉例：
點(diǎn)擊進(jìn)入另外一個(gè)文件
a是英語(yǔ)anchor“錨”的意思，就好像這個(gè)頁(yè)面往另一個(gè)頁(yè)面扔出了一個(gè)錨。是一個(gè)文本級(jí)的標(biāo)簽。
href（hypertext reference）：超文本地址。讀作“喝瑞夫”，不要讀作“喝夫”。
效果：
Paste_Image.png
當(dāng)然，我們也可以直接點(diǎn)進(jìn)鏈接，訪問一個(gè)網(wǎng)址。代碼舉例如下：
點(diǎn)我點(diǎn)我
2、錨鏈接
錨鏈接：給超鏈接起一個(gè)名字，作用是在本頁(yè)面或者其他頁(yè)面的的不同位置進(jìn)行跳轉(zhuǎn)。比如說，在網(wǎng)頁(yè)底部有一個(gè)向上箭頭，點(diǎn)擊箭頭后回到頂部，這個(gè)就可以利用錨鏈接。
首先我們要?jiǎng)?chuàng)建一個(gè)錨點(diǎn)，也就是說，使用name屬性或者id屬性給那個(gè)特定的位置起個(gè)名字。效果如下：
Paste_Image.png
上圖中解釋：
第11行代碼表示，頂部這個(gè)錨的名字叫做name1。 然后在底部設(shè)置超鏈接，點(diǎn)擊時(shí)將回到頂部（此時(shí)，網(wǎng)頁(yè)中的url的末尾也出現(xiàn)了#name1）。注意上圖中紅框部分的#號(hào)不要忘記了，表示跳到名為name1的特定位置，這是規(guī)定。如果少了#號(hào)，點(diǎn)擊之后，就會(huì)跳到name1這個(gè)文件或者name1這個(gè)文件夾中去。
如果我們將上圖中的第28行代碼寫成：
回到頂部
那就表示，點(diǎn)擊之后，跳轉(zhuǎn)到a.html頁(yè)面的name1錨點(diǎn)中去。
說明：name屬性是HTML4.0以前使用的，id屬性是HTML4.0后才開始使用。為了向前兼容，因此，name和id這兩個(gè)屬性都要寫上，并且值是一樣的。
3、郵件鏈接
代碼舉例：
點(diǎn)擊進(jìn)入我的郵箱
效果：點(diǎn)擊之后，會(huì)彈出outlook，作用不大。
超鏈接的屬性
href：目標(biāo)URL
title：懸停文本。
name：主要用于設(shè)置一個(gè)錨點(diǎn)的名稱。
target：告訴瀏覽器用什么方式來打開目標(biāo)頁(yè)面。
target屬性有以下幾個(gè)值：
_self：在同一個(gè)網(wǎng)頁(yè)中顯示（默認(rèn)值）
_blank：
在新的窗口中打開。
_parent：在父窗口中顯示
_top：在頂級(jí)窗口中顯示
title屬性舉例：
結(jié)婚照
效果如下：
target屬性舉例：
鏈接的內(nèi)容
blank就是“空白”的意思，就表示新建一個(gè)空白窗口。為啥有一個(gè)_ ，就是規(guī)定，無需解釋。 也就是說，如果不寫target=”_blank”那么就是在相同的標(biāo)簽頁(yè)打開，如果寫了target=”_blank”，就是在新的空白標(biāo)簽頁(yè)中打開。
備注1：分清楚img和a標(biāo)簽的各自的屬性
區(qū)別如下：
備注2：a是一個(gè)文本級(jí)的標(biāo)簽
比如一個(gè)段落中的所有文字都能夠被點(diǎn)擊，那么應(yīng)該是p包裹a：
?段落段落段落段落段落段落
而不是a包裹p：
?
??段落段落段落段落段落段落?
a的語(yǔ)義要小于p，a就是可以當(dāng)做文本來處理，所以p里面相當(dāng)于放的就是純文字。
圖片標(biāo)簽 img標(biāo)簽介紹
img: 英文全稱 image（圖像），代表的是一張圖片。
如果要想在網(wǎng)頁(yè)中顯示圖像，就可以使用img 標(biāo)簽，它是一個(gè)單標(biāo)簽。語(yǔ)法如下：
能插入的圖片類型
能夠插入的圖片類型是：jpg(jpeg)、gif、png、bmp等。
不能往網(wǎng)頁(yè)中插入的圖片格式是：psd、ai等。
HTML頁(yè)面不是直接插入圖片，而是插入圖片的引用地址，所以要先把圖片上傳到服務(wù)器上。
img標(biāo)簽的src屬性
這里涉及到圖片的一個(gè)屬性：
src屬性：指圖片的路徑。英文名稱 source。
在寫圖片的路徑時(shí)，有兩種寫法：相對(duì)路徑、絕對(duì)路徑
寫法一：圖片的相對(duì)路徑
相對(duì)當(dāng)前頁(yè)面所在的路徑。兩個(gè)標(biāo)記 . 和 .. 分表代表當(dāng)前目錄和上一層目錄。
舉例1：
相對(duì)路徑不會(huì)出現(xiàn)這種情況：
aaa/../bbb/1.jpg
../要么不寫，要么就寫在開頭。
舉例2：
上方代碼的意思是說，當(dāng)前html頁(yè)面有一個(gè)并列的文件夾images，在文件夾images中存放了一張圖片1.jpg
相對(duì)路徑的面試題。現(xiàn)有如下文件層級(jí)圖：
問題：如果想在index.html中插入1.png，那么對(duì)應(yīng)的img語(yǔ)句是？
分析：
現(xiàn)在document是最大的文件夾，里面有兩個(gè)文件夾work和photo。work中又有一個(gè)文件夾叫做myweb。myweb文件夾里面有index.html。 所以index.html在myweb文件夾里面，上一級(jí)就是work文件夾，上兩級(jí)就是document文件夾。通過document文件夾當(dāng)做一個(gè)中轉(zhuǎn)站，進(jìn)入photo文件夾，看到了1.png。
答案：
寫法二：圖片的絕對(duì)路徑
絕對(duì)路徑包括以下兩種：
（1）以盤符開始的絕對(duì)路徑。舉例：
（2）網(wǎng)絡(luò)路徑。舉例：
大家打開上面的img中的鏈接，可能有彩蛋哦。
相對(duì)路徑和絕對(duì)路徑的總結(jié)
相對(duì)路徑的好處：站點(diǎn)不管拷貝到哪里，文件和圖片的相對(duì)路徑關(guān)系都是不變的。相對(duì)路徑使用有一個(gè)前提，就是網(wǎng)頁(yè)文件和你的圖片，必須在一個(gè)服務(wù)器上。
總結(jié)一下：
無論是在 a 標(biāo)簽還是 img 標(biāo)簽上，如果要用路徑。只有兩種路徑能用，就是相對(duì)路徑和絕對(duì)路徑：
相對(duì)路徑從自己出發(fā)，找到別人。
絕對(duì)路徑，就是http://或者h(yuǎn)ttps://開頭的路徑。
img標(biāo)簽的其他屬性
width、height 屬性
width：圖像的寬度。
height：圖像的高度。
width和height，在 HTML5 中的單位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比?？梢灾恢付?width 和 height 中的一個(gè)值，瀏覽器會(huì)根據(jù)原始圖像進(jìn)行縮放。
重要提示：如果要想保證圖片等比例縮放，請(qǐng)只設(shè)置width和height中其中一個(gè)。
Alt 屬性
alt：當(dāng)圖片不可用（無法顯示）的時(shí)候，代替圖片顯示的內(nèi)容。alt是英語(yǔ) alternate “替代”的意思，代表替換資源。
Alt屬性效果演示：
Paste_Image.png
如上圖所示：當(dāng)圖片 src 不可用的時(shí)候，顯示文字。這樣做，至少能讓用戶知道，這個(gè)圖片大概是什么內(nèi)容。
title 屬性
title：
提示性文本。鼠標(biāo)懸停時(shí)出現(xiàn)的文本。
title 屬性不該被用作一幅圖片在 alt 之外的補(bǔ)充說明信息。如果一幅圖片需要小標(biāo)題，使用 figure 或 figcaption 元素。
title 元素的值一般作為提示條(tooltip)呈現(xiàn)給用戶，在光標(biāo)于圖片上停下后顯示出來。盡管這確實(shí)能給用戶提供更多的信息，您不該假定用戶真的能看到：用戶可能只有鍵盤或觸摸屏。如果要把特別重要的信息提供給用戶，可以選擇上面提供的一種方法將其內(nèi)聯(lián)顯示，而不是使用 title。
舉例：
效果：
Paste_Image.png
align 屬性
圖片的
align屬性：
圖片和周圍文字的相對(duì)位置。屬性取值可以是：bottom（默認(rèn)）、center、top、left、right。
如果想實(shí)現(xiàn)圖文混排的效果，請(qǐng)使用align屬性，取值為left或right。
其他已廢棄的屬性
Align（已廢棄）：指圖片的水平對(duì)齊方式，屬性值可以是：top、middle、bottom、left、center、right。該屬性已廢棄，替換為
vertical-align這個(gè)CSS屬性。
border（已廢棄）：給圖片加邊框，單位是像素，邊框的顏色默認(rèn)黑色。該屬性已廢棄，替換為
border這個(gè)CSS屬性。
Hspace（已廢棄）：指圖片左右的邊距。
Vspace（已廢棄）：指圖片上下的邊距。
title: 07-HTML標(biāo)簽圖文詳解（二）
本文主要內(nèi)容
列表標(biāo)簽：
、
、
表格標(biāo)簽：
框架標(biāo)簽及內(nèi)嵌框架
??
??嘿嘿?
效果演示：
表單標(biāo)簽
表單標(biāo)簽用
表示，用于與服務(wù)器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
屬性：
name：表單的名稱，用于JS來操作或控制表單時(shí)使用；
id：表單的名稱，用于JS來操作或控制表單時(shí)使用；
action：指定表單數(shù)據(jù)的處理程序，一般是PHP，如：action=“l(fā)ogin.php”
method：表單數(shù)據(jù)的提交方式，一般取值：get(默認(rèn))和post
注意：表單和表格嵌套時(shí)，是在標(biāo)記中套
標(biāo)記。
form標(biāo)簽里面的action屬性和method屬性，在后續(xù)的 ajax文章上再講。這里簡(jiǎn)單說一下：action屬性就是表示，表單將提交到哪里。 method屬性表示用什么HTTP方法提交，有g(shù)et、post兩種。
get提交和post提交的區(qū)別：
GET方式： 將表單數(shù)據(jù)，以"name=value"形式追加到action指定的處理程序的后面，兩者間用"?"隔開，每一個(gè)表單的"name=value"間用"&"號(hào)隔開。 特點(diǎn)：只適合提交少量信息，并且不太安全(不要提交敏感數(shù)據(jù))、提交的數(shù)據(jù)類型只限于ASCII字符。
POST方式： 將表單數(shù)據(jù)直接發(fā)送(隱藏)到action指定的處理程序。POST發(fā)送的數(shù)據(jù)不可見。Action指定的處理程序可以獲取到表單數(shù)據(jù)。 特點(diǎn)：可以提交海量信息，相對(duì)來說安全一些，提交的數(shù)據(jù)格式是多樣的(Word、Excel、rar、img)。
Enctype： 表單數(shù)據(jù)的編碼方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
Application/x-www-form-urlencoded：
默認(rèn)加密方式，除了上傳文件之外的數(shù)據(jù)都可以
Multipart/form-data：
上傳附件時(shí)，必須使用這種編碼方式。
：輸入標(biāo)簽（文本框）
用于接收用戶輸入。
屬性：
**type="屬性值"**：文本類型。屬性值可以是：
text（默認(rèn)）
password：密碼類型
radio：?jiǎn)芜x按鈕，名字相同的按鈕作為一組進(jìn)行單選（單選按鈕，天生是不能互斥的，如果想互斥，必須要有相同的name屬性。name就是“名字”。 ）。非常像以前的收音機(jī)，按下去一個(gè)按鈕，其他的就抬起來了。所以叫做radio。
checkbox：多選按鈕，
name 屬性值相同的按鈕作為一組進(jìn)行選擇。
checked：將單選按鈕或多選按鈕默認(rèn)處于選中狀態(tài)。當(dāng)
標(biāo)簽設(shè)置為
type="radio"或者
type=checkbox時(shí)，可以用這個(gè)屬性。屬性值也是checked，可以省略。
hidden：隱藏框，在表單中包含不希望用戶看見的信息
button：普通按鈕，結(jié)合js代碼進(jìn)行使用。
submit：提交按鈕，傳送當(dāng)前表單的數(shù)據(jù)給服務(wù)器或其他程序處理。這個(gè)按鈕不需要寫value自動(dòng)就會(huì)有“提交”文字。這個(gè)按鈕真的有提交功能。點(diǎn)擊按鈕后，這個(gè)表單就會(huì)被提交到form標(biāo)簽的action屬性中指定的那個(gè)頁(yè)面中去。
reset：重置按鈕，清空當(dāng)前表單的內(nèi)容，并設(shè)置為最初的默認(rèn)值
image：圖片按鈕，和提交按鈕的功能完全一致，只不過圖片按鈕可以顯示圖片。
file：文件選擇框。 提示：如果要限制上傳文件的類型，需要配合JS來實(shí)現(xiàn)驗(yàn)證。對(duì)上傳文件的安全檢查：一是擴(kuò)展名的檢查，二是文件數(shù)據(jù)內(nèi)容的檢查。
**value="內(nèi)容"**：文本框里的默認(rèn)內(nèi)容（已經(jīng)被填好了的）
size="50"：表示文本框內(nèi)可以顯示五十個(gè)字符。一個(gè)英文或一個(gè)中文都算一個(gè)字符。 注意size屬性值的單位不是像素哦。
readonly：文本框只讀，不能編輯。因?yàn)樗膶傩灾狄彩莚eadonly，所以屬性值可以不寫。 用了這個(gè)屬性之后，在google瀏覽器中，光標(biāo)點(diǎn)不進(jìn)去；在IE瀏覽器中，光標(biāo)可以點(diǎn)進(jìn)去，但是文字不能編輯。
disabled：文本框只讀，不能編輯，光標(biāo)點(diǎn)不進(jìn)去。屬性值可以不寫。
備注：HTML5中，input的類型又增加了很多（比如date、color，我們會(huì)在 html5 中講到）。
舉例：
???姓名：逗比
??昵稱：
??名字：
??密碼：
??性別：男?????女
??愛好：吃飯?????睡覺?????打豆豆?
效果：
注意，多個(gè)單選框的input標(biāo)簽中，name 的屬性值可以相同，但是 id 的屬性值必須是唯一的。我們知道，html的標(biāo)簽中，id的屬性值是唯一的。
四種按鈕的舉例：
?
??
??
??
??
??
???
前端開發(fā)工程師，重點(diǎn)關(guān)心頁(yè)面的美、樣式、板式、交互。至于數(shù)據(jù)的提供和比較重的業(yè)務(wù)邏輯，都是后臺(tái)工程師做的事情。
效果：
：下拉列表標(biāo)簽
標(biāo)簽里面的每一項(xiàng)用表示。select就是“選擇”，option“選項(xiàng)”。
select標(biāo)簽和ul、ol、dl一樣，都是組標(biāo)簽。
標(biāo)簽的屬性：
multiple：可以對(duì)下拉列表中的選項(xiàng)進(jìn)行多選。屬性值為 multiple，也可以沒有屬性值。也就是說，既可以寫成
multiple=""，也可以寫成
multiple="multiple"。
size="3"：如果屬性值大于1，則列表為滾動(dòng)視圖。默認(rèn)屬性值為1，即下拉視圖。
標(biāo)簽的屬性：
selected：預(yù)選中。沒有屬性值。
舉例：
?
?????小學(xué)???初中???高中???大學(xué)???研究生????


?????小學(xué)???初中???高中???大學(xué)???研究生????


?????小學(xué)???初中???高中???大學(xué)???研究生????


?
效果：
標(biāo)簽：多行文本輸入框</p><p>text 就是“文本”，area 就是“區(qū)域”。</p><p>屬性：</p><p>rows="4"：指定文本區(qū)域的行數(shù)。</p><p>cols="20"：指定文本區(qū)域的列數(shù)。</p><p>readonly：只讀。</p><p>舉例：</p><p>?<form>??<textarea?name="txtInfo"?rows="4"?cols="20">1、不愛攝影不懂設(shè)計(jì)的程序猿不是一個(gè)好的產(chǎn)品經(jīng)理。?
效果：
上圖的紅框部分表示，我在文本區(qū)域進(jìn)行了換行，所以顯示的效果也出現(xiàn)了空白。
表單的語(yǔ)義化
比如，我們?cè)谧?cè)一個(gè)網(wǎng)站的信息的時(shí)候，有一部分是必填信息，有一部分是選填信息，這個(gè)時(shí)候可以利用表單的語(yǔ)義化。 舉例：
?
??
??
賬號(hào)信息
??姓名：逗比
??密碼：
??
??
??
其他信息
??性別：男?????女
??愛好：吃飯?????睡覺?????打豆豆??
?
效果：
標(biāo)簽
我們先來看下面一段代碼：
?男?女
對(duì)于上面這樣的單選框，我們只有點(diǎn)擊那個(gè)單選框（小圓圈）才可以選中，點(diǎn)擊“男”、“女”這兩個(gè)文字時(shí)是無法選中的；于是，label標(biāo)簽派上了用場(chǎng)。
本質(zhì)上來講，“男”、“女”這兩個(gè)文字和input標(biāo)簽時(shí)沒有關(guān)系的，而label就是解決這個(gè)問題的。我們可以通過label把input和漢字包裹起來作為整體。
解決方法如下：
?男?女
上方代碼中，讓label標(biāo)簽的for 屬性值，和 input 標(biāo)簽的 id 屬性值相同，那么這個(gè)label和input就有綁定關(guān)系了。
當(dāng)然了，復(fù)選框也有l(wèi)abel：（任何表單元素都有l(wèi)abel）
10天內(nèi)免登陸
多媒體標(biāo)簽
聲明： 多媒體包含：音頻、視頻、Flash。網(wǎng)頁(yè)上的多媒體基本都是Flash格式的。 .wmv、.dat、.mob、.rmvb等視頻格式，在網(wǎng)頁(yè)上不能直接播放，需要安裝第三方的插件，才可以播放。不同的瀏覽器，播客上述視頻格式，所使用插件參數(shù)又不一樣。 上述格式視頻一般文件較大，不利于網(wǎng)絡(luò)下載播放。 一般情況下，是將其它的視頻格式，轉(zhuǎn)成Flash來在網(wǎng)頁(yè)上播放。轉(zhuǎn)換軟件：格式工廠等。 Flash格式的視頻兼容性非常好，F(xiàn)lash格式的文件很小。
標(biāo)簽：播放背景音樂
屬性：
src="音樂文件的路徑"
loop="-1"：屬性值代表播放次數(shù)，-1代表循環(huán)播放。
舉例：
???
運(yùn)行效果： 打開網(wǎng)頁(yè)后，在IE 8中播放正常，播放時(shí)網(wǎng)頁(yè)上顯示一片空白。在google瀏覽器中無法播放。
標(biāo)簽：播放多媒體文件（音頻、視頻等）
主要應(yīng)用Netscape瀏覽器，它不是W3C規(guī)范。
備注：視頻格式可以支持 mp4、wav等，但不是所有視頻格式都支持。
屬性：
src="多媒體文件的路徑"
loop="-1"：屬性值代表播放次數(shù)，-1代表循環(huán)播放。
autostart="false"：打開網(wǎng)頁(yè)時(shí)，禁止自動(dòng)播放。默認(rèn)值是true。
volume="100"：設(shè)置默認(rèn)的音量大小，測(cè)試發(fā)現(xiàn)這個(gè)值好像不起作用哦。
width：指Flash文件的寬度
height：指Flash文件的高度
quality：指Flash的播放質(zhì)量，質(zhì)量有高有低 hight low
pluginspage：如果指定的Flash插件不存在，則從pluginspage指定的地方進(jìn)行下載。
type：指定Flash的文件格式類型
wmode：指Flash的背景是否可以透明，取值：transparent是透明的
標(biāo)簽播放音頻舉例：
???
IE 8中的運(yùn)行效果：
google瀏覽器中的運(yùn)行效果：
注：在HTML5中新增了
<table id="d7qpn"></table>
<ul id="d7qpn"></ul>