站長(zhǎng)資訊網(wǎng)一、初步了解HTML
HTML是一種超文本標(biāo)簽語(yǔ)言，瀏覽器則是用來(lái)“解釋和執(zhí)行”HTML源碼的工具。
HTML的基本結(jié)構(gòu)
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body></body></html>
其中<!DOCTYPE html>是文檔類型聲明，聲明這個(gè)文件必須是HTML5文件，讓瀏覽器按照HTML5準(zhǔn)備進(jìn)行解析，必須在HTML5中，必須要有，且是一定要寫(xiě)在文件的最上方滴。
<title></title>是網(wǎng)頁(yè)的標(biāo)題，顯示在最上方的文字：
<head> </head>是用來(lái)描述網(wǎng)頁(yè)的一些關(guān)鍵信息。例如網(wǎng)頁(yè)的配置、設(shè)置、關(guān)鍵字等等。。。這些信息，大多在瀏覽器看不到，但是對(duì)網(wǎng)頁(yè)的解析至關(guān)重要！
<body> </body>則是所有的代碼都寫(xiě)在其中。
二、初步了解標(biāo)簽
1、<head>頭部部分
1）link：網(wǎng)頁(yè)標(biāo)題的圖標(biāo)
鏈接網(wǎng)頁(yè)的小圖標(biāo)，網(wǎng)頁(yè)選項(xiàng)卡上面的小圖片
其中rel="icon"表示當(dāng)前l(fā)ink的作用是鏈接網(wǎng)頁(yè)圖標(biāo)
href="img/ss.gif"表示圖標(biāo)的地址所在的位置
<link rel="icon" href="img/sss.gif" />
2)meta:用于描述網(wǎng)頁(yè)的各種信息
①其中<meta charset="utf-8" />設(shè)置網(wǎng)頁(yè)的編碼格式為utf-8格式
常見(jiàn)的中文編碼格式：GB2312：國(guó)標(biāo)碼，簡(jiǎn)體中文；GBK：擴(kuò)展國(guó)標(biāo)碼，簡(jiǎn)體中文
utf-8：萬(wàn)國(guó)碼，兼容各種語(yǔ)言編碼，常用！
<meta charset="utf-8" />
②可以設(shè)置網(wǎng)頁(yè)的關(guān)鍵字有助于搜索引擎的搜索，多個(gè)關(guān)鍵字用英文逗號(hào)分開(kāi)
<meta name="keywords"content="杰睿教育,網(wǎng)頁(yè)開(kāi)發(fā)" />
③設(shè)置網(wǎng)頁(yè)的詳細(xì)信息，搜索引擎時(shí)標(biāo)題下面的一段文字！
name="description" 表示這個(gè)meta標(biāo)簽設(shè)置的是網(wǎng)頁(yè)的描述信息；
content="" 表示描述信息的詳細(xì)內(nèi)容??！
<meta name="description"content="這是我在，，，，"/>
2、<body>主體部分
1）標(biāo)簽的分類
①塊級(jí)標(biāo)簽：顯示為塊狀，獨(dú)占一行，自動(dòng)換行。
②行級(jí)標(biāo)簽：在一行中，從左往右依次排列，不會(huì)自動(dòng)換行。
2）塊級(jí)標(biāo)簽
常見(jiàn)的塊級(jí)標(biāo)簽有：
a.標(biāo)題標(biāo)簽：<h1></h1>……<h6></h6> 特點(diǎn):h1最大，h6最小且自動(dòng)加粗。
b.水平線標(biāo)簽：<hr/>
c.段落標(biāo)簽：<p></p>
d.換行標(biāo)簽：<br/>
e.引用標(biāo)簽：<blockquote></blockquote>
要的cite屬性表明引用的來(lái)源，一般為網(wǎng)址，且網(wǎng)址不會(huì)在網(wǎng)頁(yè)中展示，瀏覽器一般顯示為首行縮進(jìn)
f.預(yù)格式標(biāo)簽：<pre></pre>
瀏覽器默認(rèn)顯示樣式：①顯示為等寬字體
②代碼中的換行，空格等元素可在瀏覽器中直接顯示。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本塊級(jí)標(biāo)簽</title></head> <body><h1>這是h1標(biāo)簽</h1><h2>這是h2標(biāo)簽</h2><h3>這是h3標(biāo)簽</h3><h4>這是h4標(biāo)簽</h4><h5>這是h5標(biāo)簽</h5><h6>這是h6標(biāo)簽</h6><hr/><p>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！ 哈哈啊哈哈哈啊哈哈哈哈啊哈！<br/>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><p>這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！這是一段文字！哈哈啊哈哈哈啊哈哈哈哈啊哈！</p><pre>if(entity != null){ tring result = EntityUtils.toString(entity,"UTF-8");//HttpEntity轉(zhuǎn)為字符串類型 jsonObject = JSONObject.fromObject(result);//字符串類型轉(zhuǎn)為JSON類型 } </pre><blockquote cite="http://www.jredu100.com">光明正大的不要臉！這段話就是抄的！你能咋地！</blockquote></body></html>
g.有序列表
<ol> （order list）
<li>…</li> 列表項(xiàng)可以有n多個(gè)
<li>…</li>
<li>…</li>
</ol>
h.無(wú)序列表
<ul> (unorder list)
<li>…</li> n多個(gè)
<li>…</li>
<li>…</li>
</ul>
i.定義描述列表
<dl>
<dt>一般只有一項(xiàng)</dt> （列表標(biāo)題）
<dd>可以有很多項(xiàng)</dd> （列表描述項(xiàng)）
<dd>132</dd>
<dd>123</dd>
</dl>
g.組合標(biāo)簽 顯示效果：上面是圖片，下面是圖片的標(biāo)題，同時(shí)圖片和標(biāo)題前代縮進(jìn)。
<figure>
<img/> 圖片
<figcaption></figcaption> 圖片的標(biāo)題。
</figure>
k.分區(qū)標(biāo)簽
<div></div> 可以包裹任何標(biāo)簽，也可以被包裹進(jìn)任何標(biāo)簽。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本塊級(jí)標(biāo)簽</title></head> <body><ul><li>這是無(wú)序列表第一項(xiàng)</li><li>這是無(wú)序列表第二項(xiàng)</li><li>這是無(wú)序列表第三項(xiàng)</li><li>這是無(wú)序列表第四項(xiàng)</li></ul> <ol><li>這是無(wú)序列表第一項(xiàng)</li><li>這是無(wú)序列表第二項(xiàng)</li><li>這是無(wú)序列表第三項(xiàng)</li><li>這是無(wú)序列表第四項(xiàng)</li></ol> <dl><dt>這是dl列表的標(biāo)題</dt><dd>這是dl列表的描述項(xiàng)1</dd><dd>這是dl列表的描述項(xiàng)2</dd><dd>這是dl列表的描述項(xiàng)3</dd></dl> <figure><img src="img/icon.jpg" /><figcaption>圖片的描述標(biāo)題</figcaption></figure> <div style="width: 500px; height: 100px; background-color: yellow;">這是div里面的文字?。。?lt;p>11111</p></div> <div style="height: 500px;"></div></body></html>
3)行級(jí)標(biāo)簽
常見(jiàn)的行級(jí)標(biāo)簽：
（1）文本標(biāo)簽span
① span標(biāo)簽只是包裹作用，沒(méi)有任何其他含義；
② span作用與div類似，需配合CSS使用。只不過(guò)div是塊級(jí)標(biāo)簽、span是行級(jí)標(biāo)簽
（2）強(qiáng)調(diào)標(biāo)簽em與strong；傾斜標(biāo)簽i；加粗標(biāo)簽b；四個(gè)之間的區(qū)別
① em和i都能傾斜。strong和b都能加粗！但是，i和b僅僅是單純的傾斜加粗，而em和Strong多了強(qiáng)調(diào)的語(yǔ)義。
② em和strong都表示強(qiáng)調(diào)，但是strong強(qiáng)調(diào)的級(jí)別更高！！
注意：
1、強(qiáng)調(diào)的目的：讓搜索引擎知道網(wǎng)頁(yè)重點(diǎn)強(qiáng)調(diào)的內(nèi)容！便于搜索引擎顯示！
2、Strong和em都可以多層嵌套，表示強(qiáng)調(diào)程度的遞增！
（3）短引用標(biāo)簽q：表示短引用 。 cite屬性：用于聲明引用的來(lái)源。
【常用的引用標(biāo)簽】
<blockquote>用于引用一段內(nèi)容</blockquote>
<q>用于引用一句話</q>
<cite>常用于引用作品名、書(shū)畫(huà)名等</cite>
相同點(diǎn)：三個(gè)引用標(biāo)簽，都用cite屬性表示引用來(lái)源
不同點(diǎn)：① 引用的內(nèi)容不同。 blockquote->一段話，q->一句話，cite->作品名
② 顯示的默認(rèn)效果不同。 blockquote->默認(rèn)整段向右縮進(jìn)； q->默認(rèn)加引號(hào)； cite->默認(rèn)傾斜！
（4）縮小標(biāo)簽small：將字體縮小一號(hào)；big標(biāo)簽：將字體放大一號(hào)。
注意：
① small和big可以多層嵌套，直到字體達(dá)到最小或最大為止；
② 這倆標(biāo)簽已經(jīng)被淘汰，并不建議使用。
（5）圖片標(biāo)簽img
① src屬性：表示圖片的路徑
[圖片路徑的合法方式]
A.網(wǎng)絡(luò)鏈接：由于圖片在其他網(wǎng)站，如果其他網(wǎng)站刪除圖片，我們也不能訪問(wèn)，所以不建議使用這種方式；
<img src="https://www.baidu.com/img/bd_logo1.png" />
B.絕對(duì)路徑：使用絕對(duì)路徑的圖片，只有在本機(jī)使用file協(xié)議才能訪問(wèn)！所以，嚴(yán)禁使用這種方式！
<img src="file:///E:/icon.jpg" />
C.相對(duì)路徑：
a、 圖片與當(dāng)前文檔在同一層文件夾：直接寫(xiě)圖片名
<img src="icon.jpg" />
b、圖片在當(dāng)前文檔的下一層文件夾：文件夾名/圖片名
<img src="img/icon.jpg" />
c、 圖片在當(dāng)前文檔的上一層文件夾： ../圖片名 (../表示后退一層)
<img src="../icon.jpg" />
但是，一定要注意：圖片必須包含在項(xiàng)目里面，不能訪問(wèn)項(xiàng)目外的圖片。
② height:圖片的高度 width：圖片的寬度
<img src="img/icon.jpg" height="500" width="10" />
③ title：圖片的標(biāo)題，也就是鼠標(biāo)指上后看到的提示文字
<img src="img/icon.jpg" title="鼠標(biāo)指上后看到的提示文字" />
④ alt: 圖片無(wú)法加載時(shí)顯示的文字
<img src="img/icon.jpg" alt="圖片無(wú)法加載時(shí)顯示的文字" />
⑤ align：圖片周圍的文字相對(duì)于圖片如何對(duì)齊。
可選值：top->圖片頂部 center->圖片中部 bottom->圖片底部
<img src="img/icon.jpg" align="top" />12345
（6）超鏈接標(biāo)簽a
A、href屬性：表示超鏈接跳轉(zhuǎn)的頁(yè)面。
① 可以寫(xiě)網(wǎng)絡(luò)地址：
<a href="http://www.baidu.com">這是一個(gè)超鏈接</a>
② 可以打開(kāi)本地的html文件：
采用相對(duì)路徑確定文件地址。與img標(biāo)簽確定方式相同。
<a href="01-HTMLhead部分index.html">這是一個(gè)超鏈接</a>
B、title屬性：鼠標(biāo)指上后顯示的提示文字
<a href="01-HTMLhead部分index.html"title="ttt">這是一個(gè)超鏈接</a>
C、target屬性：設(shè)置新頁(yè)面打開(kāi)的窗口位置
可選值：_self自身頁(yè)面打開(kāi)（默認(rèn)）
_blank 新窗口打開(kāi)
<a href="01-HTMLhead部分index.html"target"_blank">這是一個(gè)超鏈接</a>
【超鏈接的特殊應(yīng)用】
1、功能性鏈接：（了解）
mailto:// 點(diǎn)擊鏈接給指定郵箱發(fā)送郵件
<a href="mailto://jianghao@jerei.com"target"_blank">點(diǎn)擊發(fā)送郵件</a>
tencent://message/?uin=1105093212"
還有：tell://手機(jī)端點(diǎn)擊打電話
message://手機(jī)端點(diǎn)擊發(fā)送短信
ftp://使用ftp協(xié)議進(jìn)行文件的上傳下載
2、錨點(diǎn)鏈接：
>>>本頁(yè)面錨鏈接
① 在頁(yè)面的指定位置中設(shè)置一個(gè)錨點(diǎn)，用那么屬性表示錨點(diǎn)名字：
a name="top"></a>
<div style="background-color: aqua;height: 1000px"></div>
② 將超鏈接的href屬性，設(shè)置為#加錨點(diǎn)名字
<a href="#top">點(diǎn)擊鏈接，跳轉(zhuǎn)到top錨點(diǎn)位置</a>
>>>頁(yè)面間錨鏈接
① 在新頁(yè)面的指定位置中設(shè)置一個(gè)錨點(diǎn)，用那么屬性表示錨點(diǎn)名字：
a name="top"></a>
<div style="background-color: aqua;height: 1000px"></div>
② 將超鏈接的href屬性，設(shè)置為“新頁(yè)面地址#加錨點(diǎn)名字”：
<a href="錨點(diǎn).html#3">點(diǎn)擊鏈接，跳轉(zhuǎn)到錨地.html的top錨點(diǎn)位置</a>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>HTML基本行級(jí)標(biāo)簽</title></head><body><a name="e"></a> 糖糖<span style="color: red; font-size: 48px;">真帥</span>?。?！<br /> <em>這是em標(biāo)簽</em><br /><strong>這是strong標(biāo)簽</strong><br /><i>這是i標(biāo)簽</i><br /><b>這是b標(biāo)簽</b><br /><u>這是b標(biāo)簽</u><br /> <q cite="http://www.jianghaozhenshuai.com">我是q標(biāo)簽引用</q><blockquote>我是blockqoute的引用?。。。?！</blockquote><cite cite="">我是cite標(biāo)簽的引用！！</cite><br /> <small><small>我比正常小兩號(hào)</small></small><br /><big>我比正常大一號(hào)</big><br /> <img src="img/icon.jpg" align="top" />12345 --><img src="img/icon.jpg" align="bottom" />12345 <a href="tencent://message/?uin=1105093212"target"_blank">點(diǎn)擊發(fā)送郵件</a><div style="background-color: aqua;height: 1000px"></div><a href="#e">點(diǎn)擊</a><a href="錨點(diǎn).html#1">1</a><a href="錨點(diǎn).html#2">2</a><a href="錨點(diǎn).html#3">3</a></body></html>
4）塊級(jí)標(biāo)簽與行級(jí)標(biāo)簽的區(qū)別
1、塊級(jí)標(biāo)簽：默認(rèn)寬度100%(占滿一行)；
塊級(jí)標(biāo)簽自動(dòng)換行(獨(dú)占一行，右邊不能有任何東西)；
塊級(jí)標(biāo)簽可以使用CSS設(shè)置寬度高度！
2、行級(jí)標(biāo)簽：默認(rèn)寬度由內(nèi)容撐開(kāi)(內(nèi)容多寬、寬度就占多寬)；
行級(jí)標(biāo)簽不會(huì)自動(dòng)換行(一行當(dāng)中，從左往右依次排列)；
行級(jí)標(biāo)簽的寬度高度不能設(shè)置！
5）表格
（1）表格table
表格用table表示，表格中的每一行tr表示，一行中的每一列用td表示
th表示的是：表頭。表頭中的文字，默認(rèn)為加粗居中。th要放在tr中，用于替換掉td。
（2）table的常用屬性
A、border：給表格加邊框。 默認(rèn)給所有td加邊框，并且給整個(gè)table加外邊框。 當(dāng)增大border的值時(shí)，td上的邊框不變化，只有最外層大邊框變寬。
B、cellspacing：?jiǎn)卧衽c單元格之間的距離。
cellspacing="0" 表示單元格與單元格之間沒(méi)有距離，但是邊框線的寬度依然是兩條線的寬度。
[注意] 表格邊框合并的CSS寫(xiě)法：
style="border-collapse: collapse;"
這條CSS與cellspacing="0"有什么區(qū)別？
cellspacing="0"僅僅是將單元格之間的距離調(diào)整為0，實(shí)際上單元格之間依然還是兩條線；
border-collapse: collapse; 是將表格相鄰的兩條邊框進(jìn)行合并處理，只有一條線存在。(一旦邊框合并，cellspace屬性將會(huì)失效。)
C、cellpadding：?jiǎn)卧裰械奈淖峙c單元格邊框的距離。
D、 height：表格的高度
width：表格的寬度
使用表格寬、高屬性設(shè)置大?。?br /> <table height="400" width="500"></table>
使用CSS樣式設(shè)置大小：
<table style="height:400px; width:500px;"></table>
E、align：設(shè)置表格在瀏覽器中的位置。不建議使用了。
可選值：left 表格居左 /center 表格居中/right 表格居右
F、bgcolor：背景色
bordercolor:邊框顏色
background:背景圖 background="img/computer.jpg"
背景色和背景圖同時(shí)存在時(shí)，背景圖會(huì)覆蓋背景色
（3）tr與td常用屬性
A、width：?jiǎn)卧駥挾?br /> height：?jiǎn)卧竦母叨?/p>
B、bgcolor： 單元格的顏色
C、align:設(shè)置單元格中的文字，水平對(duì)齊方式。
left、center、right
valign:設(shè)置單元格中的文字，垂直對(duì)齊方式。
top、middle、bottom
D、 nowrap="nowrap" 當(dāng)單元格文字過(guò)多時(shí)，設(shè)置單元格文字不斷行顯示。 但是，會(huì)把表格的寬度撐大!!!
（4）表格的跨行與跨列
①跨列：在td上使用屬性colspan="n"進(jìn)行跨列。如果一個(gè)單元格跨n列，則，單元格右邊的n-1個(gè)單元格需要去掉。
②跨行：在td上使用屬性rowspan="n"進(jìn)行跨行。如果一個(gè)單元格跨n行，則，單元格下邊的n-1個(gè)單元格需要去掉。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>表格</title></head><body><table border="1"><tr><th >標(biāo)題一</th><th colspan="2">標(biāo)題二</th></tr><tr><td rowspan="2">1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-2</td><td>2-3</td></table> <table border="10" width="500" height="400" bordercolor="#ff99cc" style="border-collapse: collapse;"><!--1--><tr><td rowspan="7"></td><td rowspan="4"></td><td rowspan="2"></td><td ></td></tr><!--2--><tr><td ></td></tr><!--3--><tr><td rowspan="2"></td><td></td></tr><!--4--><tr><td rowspan="4"></td> </tr><!--5--><tr><td rowspan="2"></td><td rowspan="2"></td></tr><!--6--><tr> </tr><!--7--><tr><td colspan="2"></td> </tr></table> </body></html>
三、寫(xiě)在后面的話
第一次接觸博客，第一發(fā)文內(nèi)心還是有些小激動(dòng)的，對(duì)于剛接觸不久代碼的我，就覺(jué)得代碼是一個(gè)神奇的地方，而且既神奇又覺(jué)得很好玩。
之前就一直覺(jué)得這些東西很深?yuàn)W，感覺(jué)是我所觸及不到的，但是當(dāng)我接觸到后，還是挺喜歡的。
最后請(qǐng)各位多多關(guān)照。
