必知HTML基礎(chǔ)

示：點(diǎn)擊上方"WEB網(wǎng)頁設(shè)計(jì)自學(xué)平臺"↑ 可以訂閱噢！

摘要 51RGB官方微信在學(xué)習(xí)CSS制作知識之前，我們必須需要認(rèn)識的HTML什么基礎(chǔ)知識。

一、必知HTML基礎(chǔ)-CSS教程系列

搞清瀏覽器作用
搞清什么是HTML
html作用
html我們涉及哪些基礎(chǔ)知識
常見html單詞及單詞功能作用有哪些
html結(jié)構(gòu)
html與CSS關(guān)系

1、搞清瀏覽器作用

瀏覽器主要作用是瀏覽網(wǎng)頁作用，在DIV+CSS制作開發(fā)時(shí)候仍然是瀏覽我們制作開發(fā)重構(gòu)網(wǎng)頁作用。瀏覽器可測試我們開發(fā)的CSS網(wǎng)頁兼容性、網(wǎng)頁效果、因開發(fā)疏忽導(dǎo)致錯(cuò)誤等作用。

在CSS測試（CSS工具）里常用瀏覽器包括IE6、IE7、IE8、火狐（FF）、谷歌（chrome）、蘋果Safari、Opera主流瀏覽器。至于傲游、360瀏覽器因?yàn)樗麄兪褂媚阆到y(tǒng)自帶的IE內(nèi)核，所以不必考慮，只要支持你瀏覽器版本即支持類似這2款瀏覽器

需要兼容瀏覽器有哪些？http://www.51rgb.com/css-tool/t86.shtml

2、搞清什么是HTML

html是hypertext markup language的縮寫，即超文本標(biāo)記語言。可以這樣理解，HTML文件是一定規(guī)則規(guī)律以html\htm等命名后綴名的文本文件。

3、html作用

HTML作用，通過一定html自身語法結(jié)構(gòu)（html結(jié)構(gòu)），顯示文字、圖片、動畫（flash）、視頻或音頻音樂。而CSS則是配合html實(shí)現(xiàn)漂亮的各式各樣的頁面內(nèi)容。

4、html我們涉及哪些基礎(chǔ)知識

Html擴(kuò)展名、html源代碼、DOCTYPE、html結(jié)構(gòu)、head標(biāo)簽、charset

5、常見html單詞及單詞功能作用有哪些

a、B(strong)：加粗

b、P：換行實(shí)例：<p>我是第一段內(nèi)容</p><p>我是第二段內(nèi)容</p>

c、Br：提行實(shí)例：我是第一排<br />我是第二排內(nèi)容

d、px：像素、長度寬度單位

實(shí)例：width:30px; 寬度30像素

e、ul、ol、li列表標(biāo)簽實(shí)例：

<ul> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ul> 
<ol> 
<li>列表一</li> 
<li>列表二</li> 
<li>列表三</li> 
</ol>

f、div與span：都是html標(biāo)簽

實(shí)例：<div>我占一行</div><span>我多長占多長位置</span>

兩者區(qū)別：DIV占用1整排，而SPAN所占位置是內(nèi)容多少占用多長長度

g、img：圖片引用標(biāo)簽

<img src="/css-images/css-logo.gif" />圖片標(biāo)簽

h、dl dt dd：CSS的另類表格組合

實(shí)例：

<dl>

</dl>

j、title：標(biāo)題標(biāo)簽

實(shí)例：<title>標(biāo)題</title>

特點(diǎn)，在一個(gè)網(wǎng)頁內(nèi)只能使用一次（只能出現(xiàn)一次）

6、html結(jié)構(gòu) - TOP

這里Html結(jié)構(gòu)可用于每次新建制作網(wǎng)頁模板使用。

舊html結(jié)構(gòu)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>DIVCSS5標(biāo)題</title>

</head>

<body>

具體網(wǎng)頁呈現(xiàn)內(nèi)容

</body>

</html>

經(jīng)過CSS教程網(wǎng)的DIVCSS5優(yōu)化后的HTML結(jié)構(gòu)（可用于每次新建HTML模板）：

<!DOCTYPE html>

<html>

內(nèi)容www.divcss5.com提供

7、html與CSS關(guān)系 - TOP

搞清楚html與CSS關(guān)系很重要，也是認(rèn)識CSS基礎(chǔ)。html與CSS關(guān)系解釋：HTML內(nèi)放置顯示網(wǎng)頁要顯示的具體內(nèi)容（圖片、文字、動畫等）而CSS是控制HTML內(nèi)這些具體內(nèi)容的怎么顯示、怎么排版、顏色、大小、寬度、高度、左右布局等顯示樣式。

以上7點(diǎn)是學(xué)習(xí)CSS的html基礎(chǔ)，可能還不完善，但是在以后運(yùn)用的時(shí)候DIVCSS5會給大家詳細(xì)、本簡單CSS教程分為15節(jié)，此節(jié)DIV CSS教程以文字內(nèi)容為主，以后會穿插更多實(shí)例和圖例、跟我做的內(nèi)容希望對大家能有幫助。

人在51RGB網(wǎng)學(xué)習(xí)HTML+CSS基礎(chǔ)課程，記錄一些文字，方便自己回憶，也希望對大家有所幫助

基礎(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è)奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼，投身到那個(gè)年代的燈紅酒綠之中，卻在名利場中看盡世態(tài)炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。
</p>
</body>
</html>

了解HTML的代碼注釋

什么是代碼注釋？代碼注釋的作用是幫助程序員標(biāo)注代碼的用途，過一段時(shí)間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發(fā)網(wǎng)頁代碼。

語法：

認(rèn)識標(biāo)簽<head>

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>

<title>標(biāo)簽

在<title>和<title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會出現(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>helloworld</title></head>

<title>標(biāo)簽的內(nèi)容“hello world”會在瀏覽器中的標(biāo)題欄上顯示出來，如下圖所示

<body>標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里

在網(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)簽中。如下圖所示。

了解<hx(1-6)>標(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分別為一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題、六級標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級。

語法：<hx>標(biāo)題文本</hx> x:1-6

注意：因?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)簽代碼：

在瀏覽器中顯示的樣式：

加入強(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)，在瀏覽器中<em>默認(rèn)用斜體表示
<strong>表示更強(qiáng)烈的強(qiáng)調(diào)，在瀏覽器中<strong>用粗體表示。
兩個(gè)標(biāo)簽相比，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)。

在瀏覽器中默認(rèn)樣式是有區(qū)別的：

瀏覽器中的樣子，如下圖。

語法：

<em>需要強(qiáng)調(diào)的文本</em>

<strong>需要強(qiáng)調(diào)的文本</strong>

栗子：

在網(wǎng)上商城中，某產(chǎn)品的打折后的價(jià)格是需要強(qiáng)調(diào)的。如下圖。

代碼實(shí)現(xiàn):

使用<span>標(biāo)簽為文字設(shè)置單獨(dú)樣式

語法：<span>文本</span>

我們對<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é)的第一段話“美國夢”三個(gè)字設(shè)置成blue（藍(lán)色），但注意不是為了強(qiáng)調(diào)“美國夢”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個(gè)字加重音讀出），所以這樣情況下就可以用到<span>標(biāo)簽了。如下面例子：

<p>1922年的春天，一個(gè)想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾TobeyMaguire飾）的作家， 離開了美國中西部，來到了紐約。那是一個(gè)道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時(shí)代。 為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>

我們?nèi)绻朐O(shè)置“美國夢”三個(gè)字設(shè)置成blue（藍(lán)色），只需要在<style>標(biāo)簽中加入：

span{color:blue; }

css部分，以后會聊，你能大概明白span就是能干單獨(dú)設(shè)置樣式的活，就ok了

<q>標(biāo)簽，短文本引用

想在你的html中加一段引用嗎？比如在你的網(wǎng)頁的文章里想引用某個(gè)作家的一句詩，這樣會使你的文章更加出彩，那么<q>標(biāo)簽是你所需要的。

語法：<q>引用文本</q>

<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑

</q>開始的。雖然當(dāng)時(shí)不知道是什么意思，只是覺得詩句挺特別。

后來才明白這個(gè)典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。

</p>

講解:

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。因?yàn)椴皇亲髡咦约旱奈淖郑孕枰褂脤?shí)現(xiàn)引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標(biāo)簽自動添加雙引號。

下圖是代碼顯示結(jié)果：

注意這里用標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

<blockquote>標(biāo)簽，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。

等等，上一節(jié)<q>標(biāo)簽不是也是對文本的引用嗎？不要忘記<q>標(biāo)簽是對簡短文本的引用，比如說引用一句話就用到<q>標(biāo)簽。

如想在我的文章中引用李白《關(guān)山月》中的詩句，因?yàn)橐梦谋颈容^長，所以使用

<blockquote>。

語法：<blockquote>引用文本</blockquote>

如下面例子：

<blockquote> 明月出天山，蒼茫云海間。長風(fēng)幾萬里，吹度玉門關(guān)。漢下白登道，胡窺青海灣。由來征戰(zhàn)地，不見有人還。戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。 </blockquote>

瀏覽器對<blockquote>標(biāo)簽的解析是縮進(jìn)樣式。如下圖所示：

使用<br>標(biāo)簽分行顯示文本

例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：

怎么可以讓每一句詩詞后面加入一個(gè)折行呢？那就可以用到<br />標(biāo)簽了，在需要加回車換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車。

代碼改為：

<h2>《詠桂》</h2> <p>暗淡輕黃體性柔，<br/>情疏跡遠(yuǎn)只香留。<br/>何須淺碧深紅色，<br/>自是花中第一流。

詩文在瀏覽器中顯示為：

為你的網(wǎng)頁中添加一些空格

在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入。不要忘了那個(gè)分號

在html代碼中輸入空格是不起作用的，如下代碼。

在瀏覽中顯示，還是沒有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來的空格效果。如下圖所示。

認(rèn)識<hr>標(biāo)簽，添加水平橫線

在信息展示時(shí)，有時(shí)會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：

語法：

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樣式表之后，都可以對其修改。
大家注意，現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是），這種版本比較規(guī)范。

<address>標(biāo)簽，為網(wǎng)頁加入地址信息

一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。栗子：

<address>本文的作者：<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>

想加入一行代碼嗎？使用<code>標(biāo)簽

在介紹語言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁中顯示一些計(jì)算機(jī)專業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用<code>標(biāo)簽了，如下面例子：

注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了。如果是多行代碼，可以使用<pre>標(biāo)簽。

使用<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼

在上節(jié)中介紹加入一行代碼的標(biāo)簽為<code>，但是在大多數(shù)情況下是需要加入大段代碼的，如下圖：

怎么辦？不會是每一代碼都加入一個(gè)<code>標(biāo)簽吧，沒有這么復(fù)雜，這時(shí)候就可以使用<pre>標(biāo)簽。

語法：<pre>語言代碼段</pre>

<pre>標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如下代碼：

<pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>

在瀏覽器中的顯示結(jié)果為：

在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入

注意：<pre>標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁中預(yù)顯示格式時(shí)都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見應(yīng)用就是用來展示計(jì)算機(jī)的源代碼。

使用<ul>，添加新聞信息列表

在瀏覽網(wǎng)頁時(shí)，你會發(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>觸動心靈的旋律</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è)序號，序號默認(rèn)從1開始，如下圖所示：

初識div

認(rèn)識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è)身份證號，這個(gè)身份證號是唯一標(biāo)識我們的身份的，也是必須唯一的。

如下兩圖進(jìn)行比較，如果設(shè)計(jì)師把兩個(gè)圖給你，哪個(gè)圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法：<div id="版塊名稱">…</div>

table標(biāo)簽，認(rèn)識網(wǎng)頁上的表格

table標(biāo)簽＝我們平時(shí)看到到表格

有時(shí)候我們需要在網(wǎng)頁上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁上展示公司的庫存清單。如下表：

想在網(wǎng)頁上展示上述表格效果可以使用以下代碼：

創(chuàng)建表格的四個(gè)元素：table、tbody、tr、th、td

<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會顯示。
<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個(gè)單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。
表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。

上述代碼在瀏覽器中顯示的默認(rèn)的樣式為：

總結(jié)：

table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示

用css樣式，為表格加入邊框

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點(diǎn)的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮剑瑸樗砑舆吙颉４a中加入：

<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>

上述代碼是用 css 樣式代碼，為th，td單元格添加粗細(xì)為一個(gè)像素的黑色邊框。

結(jié)果窗口顯示出結(jié)果樣式：

caption標(biāo)簽，為表格添加標(biāo)題和摘要

表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要。代碼如下

摘要摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(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)簽

使用<a>標(biāo)簽，鏈接到另一個(gè)頁面

使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個(gè)標(biāo)簽。

語法：<a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>

例如：<a title="點(diǎn)擊進(jìn)入我的博客">click here!</a>

上面例子作用是單擊click here!文字，網(wǎng)頁鏈接到http://www.zhaolion.com這個(gè)網(wǎng)頁。

title屬性的作用，鼠標(biāo)滑過鏈接文字時(shí)會顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好)

提醒

還有一個(gè)有趣的現(xiàn)象不知道小伙伴們發(fā)現(xiàn)了沒有，只要為文本加入a標(biāo)簽后，文字的顏色就會自動變?yōu)樗{(lán)色（被點(diǎn)擊過的文本顏色為紫色），顏色很難看吧，不過沒有關(guān)系后面我們學(xué)習(xí)了css樣子就可以設(shè)置過來（a{color:#000}),后面會詳細(xì)講解。

在新建瀏覽器窗口中打開鏈接

<a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開，有時(shí)我們需要在新的瀏覽器窗口中打開。只需要添加一個(gè)屬性target="_blank"

如下代碼：

<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)行講解，請看詳細(xì)圖示：

提醒:如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。

下面是一個(gè)完整的實(shí)例: 在瀏覽器中顯示的一個(gè)發(fā)送按鈕

點(diǎn)擊鏈接會打開電子郵件應(yīng)用，并自動填寫收件人等設(shè)置好的信息，如下圖：

認(rèn)識<img>標(biāo)簽，為網(wǎng)頁插入圖片

在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。語法：[站外圖片上傳中……(48)]

舉例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

src：標(biāo)識圖像的位置；
alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；
title：提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。

認(rèn)識表單

使用表單標(biāo)簽，與用戶交互

網(wǎng)站怎樣與用戶進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。

語法：<form method="傳送方式" action="服務(wù)器文件">

講解：

<form>：<form>標(biāo)簽是成對出現(xiàn)的，以<form>開始，以</form>結(jié)束。
action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。

method ：數(shù)據(jù)傳送的方式（get/post）。

<formmethod="post"action="save.php"> <labelfor="username">用戶名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>

注意

所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在<form></form>標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）。
method:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥

文本輸入框、密碼輸入框

當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。

語法：

<form> <inputtype="text/password"name="名稱"value="文本"/></form>

type：

當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。

name：為文本框命名，以備后臺程序ASP 、PHP使用。

value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)

舉例：

<form> 姓名：<inputtype="text"name="myName"> <br/> 密碼：<inputtype="password"name="pass"></form>

在瀏覽器中顯示的結(jié)果：

文本域，支持多行文本輸入

當(dāng)用戶需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。

語法：<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>

<textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始，以</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é)果：

使用單選框、復(fù)選框，讓用戶選擇

在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。請看下面的例子:語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

type:

當(dāng) type="radio" 時(shí)，控件為單選框
當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）

name：為控件命名，以備后臺程序 ASP、PHP 使用

checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中

如下面代碼：

在瀏覽器中顯示的結(jié)果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

使用下拉列表框，節(jié)省空間

下拉列表在網(wǎng)頁中也常會用到，它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。如下代碼：

講解：

value：

selected="selected"：設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。

使用下拉列表框進(jì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é)果：

使用提交按鈕，提交數(shù)據(jù)

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕。語法：<input type="submit" value="提交">

type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結(jié)果：

使用重置按鈕，重置表單信息

當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。語法：<input type="reset" value="重置">

type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用
value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結(jié)果：

輸入賬號

單擊重置按鈕

form表單中的label標(biāo)簽

小伙伴們，你們在前面學(xué)習(xí)表單各種控件的時(shí)候，有沒有發(fā)現(xiàn)一個(gè)標(biāo)簽--label，這一小節(jié)就來揭曉它的作用。

label標(biāo)簽不會向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會觸發(fā)此控件。就是說，當(dāng)用戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動選中和該label標(biāo)簽相關(guān)連的表單控件上）。

語法：<label for="控件id名稱">

注意標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。這樣你會在點(diǎn)慢跑標(biāo)簽，即使沒有點(diǎn)checkbox 也能選中

例子：

<form> <a>你對什么運(yùn)動感興趣：</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等前端教程

天開始小編將會給大家講解HTML的入門知識以及做項(xiàng)目會遇到的某些問題以及如何解決此類問題的方法。說道網(wǎng)頁設(shè)計(jì)，HTML是我們必不可少的一部分。基礎(chǔ)網(wǎng)頁的構(gòu)成，無論怎么變幻，都是由原聲的HTML代碼組成構(gòu)成網(wǎng)頁。

下面我就根據(jù)工作中所用和看過的書籍一點(diǎn)一點(diǎn)總結(jié)下我們常用的HTML格式和代碼。

一、什么是HTML。

HTM不是一段編程語言，而是一款標(biāo)記語言，本身不能顯示在瀏覽器中。經(jīng)過瀏覽器的編釋和編譯，才能正確反映HTML標(biāo)記語言的內(nèi)容。HTML從1.0到5.0經(jīng)歷了巨大的變化，從單一的文本顯示功能到多功能互動，已經(jīng)成為了一款非常成熟的標(biāo)記語言。

二、HTML文件的基本結(jié)構(gòu)

<!doctype html>

<html>文件開始標(biāo)記

<head>文件頭開始的標(biāo)記

</head>文件頭結(jié)束

<body>文件主題的內(nèi)容

</body>文件主題的結(jié)束

</html>文件結(jié)束的標(biāo)記

這里主要說明title和meta(元信息)

三、HTML主要常用標(biāo)簽

3.1標(biāo)題

3.2 標(biāo)題字對齊屬性align

默認(rèn)情況下，標(biāo)題文字是左對齊的。在網(wǎng)頁制作過程中，常常需要選擇對其他的方式，這時(shí)我們就需要用到align屬性。

3.3 段落標(biāo)記p

段落標(biāo)記是文檔中最常見的標(biāo)記，<p>用來起始的一個(gè)段落。

3.3 換行標(biāo)記

換行標(biāo)記<br>作用是在不另起一段的情況下將當(dāng)前文本強(qiáng)制換行。

3.4 不換行標(biāo)記nobr

<nobor>表示的是不換行的標(biāo)記</nobor>

3.5 水平線

<hr/>

四、建立超鏈接

與自身網(wǎng)站頁面有關(guān)的連接被稱為內(nèi)部連接

4.1絕對路徑

絕對路徑是包括服務(wù)器規(guī)范在內(nèi)的完全路徑。絕對路徑不管源文件在什么位置都可以非常精確地找到，除非是目標(biāo)文檔的位置發(fā)生變化，否則連接不會失效。

4.2相對路徑

為了避免絕對路徑的缺陷，對于在同一站點(diǎn)之中的連接來說，使用相對路徑是一個(gè)很好的方法。

4.3 內(nèi)部連接

屬性值

含義

-self在當(dāng)前頁面中打開連接

-blank在一個(gè)全新的空白窗口中打開連接

-top在頂層框架中打開連接，也可以理解為在根框架中打開連接

-parent在當(dāng)前框架的上一層里打開連接

4.4 錨點(diǎn)連接

錨點(diǎn)到本頁面中的位置

錨點(diǎn)到其他頁面的位置

<a href="index.html#1"></a>對應(yīng)連接到index.html中name=1的位置

4.5 連接到外部網(wǎng)站

在設(shè)置友情鏈接時(shí)，需要打開HTTP協(xié)議進(jìn)行外部連接訪問。

4.6 連接到E-mail

4.7 連接到FTP

FTP代表文件傳輸協(xié)議，一個(gè)FTP站點(diǎn)通常包含一些上傳和下載文件的文件目錄。

大部分FTP網(wǎng)站需要使用用戶名和密碼來登錄。

當(dāng)然還有其他的一些連接方式，例如文件下載，連接到Telnet等。這些都會可以用a標(biāo)簽實(shí)現(xiàn)。

HTML基礎(chǔ)就先講到這里，后面退出DIV設(shè)計(jì)網(wǎng)頁格式已經(jīng)網(wǎng)頁分框的實(shí)現(xiàn)。

在線咨詢

上一篇：JavaScript 語句
下一篇：文字填充圖片的兩種方法#ppt教學(xué)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

必知HTML基礎(chǔ)

1、搞清瀏覽器作用

2、搞清什么是HTML

3、html作用

5、常見html單詞及單詞功能作用有哪些

7、html與CSS關(guān)系 - TOP

了解HTML的代碼注釋

認(rèn)識標(biāo)簽<head>

<body>標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里

開始學(xué)習(xí)<p>標(biāo)簽，添加段落

了解<hx(1-6)>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題

加入強(qiáng)調(diào)語氣，使用<strong>和<em>標(biāo)簽

使用<span>標(biāo)簽為文字設(shè)置單獨(dú)樣式

<q>標(biāo)簽，短文本引用

<blockquote>標(biāo)簽，長文本引用

使用<br>標(biāo)簽分行顯示文本

為你的網(wǎng)頁中添加一些空格

認(rèn)識<hr>標(biāo)簽，添加水平橫線

<address>標(biāo)簽，為網(wǎng)頁加入地址信息

想加入一行代碼嗎？使用<code>標(biāo)簽

使用<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼

使用<ul>，添加新聞信息列表

使用<ol>，添加順序列表

初識div

認(rèn)識div在排版中的作用

給div命名，使邏輯更加清晰

table標(biāo)簽，認(rèn)識網(wǎng)頁上的表格

table標(biāo)簽 ＝ 我們平時(shí)看到到表格

用css樣式，為表格加入邊框

caption標(biāo)簽，為表格添加標(biāo)題和摘要

初識<a>標(biāo)簽

使用<a>標(biāo)簽，鏈接到另一個(gè)頁面

在新建瀏覽器窗口中打開鏈接

使用mailto在網(wǎng)頁中鏈接Email地址

認(rèn)識<img>標(biāo)簽，為網(wǎng)頁插入圖片

認(rèn)識表單

使用表單標(biāo)簽，與用戶交互

文本輸入框、密碼輸入框

文本域，支持多行文本輸入

使用單選框、復(fù)選框，讓用戶選擇

使用下拉列表框，節(jié)省空間

使用下拉列表框進(jìn)行多選

使用提交按鈕，提交數(shù)據(jù)

使用重置按鈕，重置表單信息

form表單中的label標(biāo)簽

您的項(xiàng)目需求

table標(biāo)簽＝我們平時(shí)看到到表格