歡迎進(jìn)入HTML的神奇世界
一输玷、什么是HTML
- HTML的英文全稱是Hypertext Marked Language，中文叫做“超文本標(biāo)記語言”靡馁。
- 和一般文本的不同的是欲鹏，一個HTML文件不僅包含文本內(nèi)容，還包含一些Tag臭墨，中文稱“標(biāo)記”赔嚎。
- 一個HTML文件的后綴名是.htm或者是.html。 用文本編輯器就可以編寫HTML文件胧弛。
二尤误、如何編寫HTML文件
讓我們先創(chuàng)建第一個HTML文件！
<html> <head> <title>simple</title> </head> <body>Thisisasimple.<b>Thistextisbold</b></body> </html>
HTML元素
- 這個文件的第一個Tag是<html>结缚，這個Tag告訴你的瀏覽器這是HTML文件的頭损晤。文件的最后一個Tag是</html>，表示HTML文件到此結(jié)束红竭。
- 在<head>和</head>之間的內(nèi)容尤勋，是Head信息喘落。Head信息是不顯示出來的，你在瀏覽器里看不到最冰。但是這并不表示這些信息沒有用處瘦棋。比如你可以在Head信息里加上一些關(guān)鍵詞，有助于搜索引擎能夠搜索到你的網(wǎng)頁暖哨。
- 在<title>和</title>之間的內(nèi)容赌朋，是這個文件的標(biāo)題。你可以在瀏覽器最頂端的標(biāo)題欄看到這個標(biāo)題篇裁。
- 在<body>和</body>之間的信息箕慧，是正文。
- 在b和/b之間的文字茴恰，用粗體表示颠焦。b顧名思義，就是bold的意思往枣。
HTML文件看上去和一般文本類似伐庭，但是它比一般文本多了Tag，比如<html>,<body>等分冈，通過這些Tag圾另，可以告訴瀏覽器如何顯示這個文件。
HTML元素屬性
HTML元素可以擁有屬性雕沉。屬性可以擴(kuò)展HTML元素的能力集乔。
比如你可以使用一個bgcolor屬性，使得頁面的背景色成為紅色坡椒，就像這樣：
<body bgcolor="red">
再比如扰路，你可以使用border這個屬性，將一個表格設(shè)成一個無邊框的表格倔叼。如下：
<table border="0">
屬性通常由屬性名和值成對出現(xiàn)汗唱，就像這樣：name="value"
上面例子中的bgcolor, border就是name，red和0就是value丈攒。屬性值一般用雙引號標(biāo)記起來哩罪。屬性通常是附加給HTML的Opening Tag，而不是Closing Tag巡验。
三际插、基礎(chǔ)HTML tag
HTML里，比較基礎(chǔ)的Tag主要用于標(biāo)題显设，段落和分行框弛。
學(xué)習(xí)HTML最好的方法，就是跟著示例學(xué)敷硅。
HTML用<h1>到<h6>這幾個Tag來定義正文標(biāo)題功咒，從大到小愉阎。每個正文標(biāo)題自成一段绞蹦。
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>
顯示為：
<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3><h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6>
段落劃分
在HTML里用<p>和</p>劃分段落力奋。
<p>This is a paragraph</p><p>This is another paragraph</p>
換行
通過使用<br>這個Tag，可以在不新建段落的情況下?lián)Q行幽七。<br>沒有Closing Tag景殷。用<p>換行是個壞習(xí)慣，正確的是使用<br>澡屡。
<p>This <br> is a para<br>graph with line breaks</p>
HTML注釋
在HTML文件里猿挚，你可以寫代碼注釋，解釋說明你的代碼驶鹉，這樣有助于你he他人日后能夠更好地理解你的代碼绩蜻。
注釋可以寫在``之間。瀏覽器是忽略注釋的室埋，你不會在HTML
正文中看到你的注釋办绝。
居中的正文標(biāo)題
這個示例告訴你如何將正文標(biāo)題居中顯示。
<html> <body> <h1 align="center">這是標(biāo)題</h1> <p>上面的標(biāo)題是居中顯示的姚淆。</p> </body> </html>
加條橫線
這個示例演示了如何在HTML文中加條橫線孕蝉。
<html> <body> <p>用hr這個Tag可以在HTML文件里加一條橫線</p> <hr><p>hello</p><hr> <p>helloworld</p><hr> <p>helloworldhello</p> </body> </html>
背景顏色
這個示例演示如何改變HTML文件的背景色。
<html><body bgcolor="yellow"><h2>看腌逢，這個頁面是黃色的</h2></body></html>
常用文本格式Tag
| Tag | Tag說明 |
|---|---|
<b> |
粗體blod |
<i> |
斜體italic |
<del> |
文字當(dāng)中劃線表示刪除 |
<ins> |
文字下劃線表示插入 |
<sub> |
下標(biāo) |
<sup> |
上標(biāo) |
<blockquote> |
縮進(jìn)表示引用 |
<pre> |
保留空格和換行 |
<code> |
表示計算機(jī)代碼降淮，等寬字體 |
<html>
<body>
<p><b>粗體用b表示。</b></p>
<p><i>斜體用i表示搏讶。</i></p>
<p><del>芙蓉姐姐</del>這個詞當(dāng)中劃線表示刪除佳鳖。</p>
<p><ins>想唱就唱</ins>這個詞下劃線插入。</p>
<p>X<sub>2</sub>其中的2是下標(biāo)</p>
<p>X<sup>2</sup>其中的2是上標(biāo)</p>
<p><blockquote>好好學(xué)習(xí)媒惕，天天向上腋颠。這句話縮進(jìn)表示引用</blockquote></p>
<pre>這是預(yù)設(shè)(preformatted) 文本.在pre這個tag里的文本保留空格和分行。</pre><code>call getOrders</code>
<p>用code顯示計算機(jī)代碼吓笙，code里顯示的字符是等寬字符淑玫。</p>
</body>
</html>
如何看HTML的源代碼
在瀏覽器看到的HTML網(wǎng)頁，是瀏覽器解釋HTML源代碼后產(chǎn)生的結(jié)果面睛。
要查看這個HTML的源代碼絮蒿，有兩種方法。一是點(diǎn)擊鼠標(biāo)右鍵叁鉴，點(diǎn)擊View Source(查看源文件)命令土涝；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令。利用View Source得到網(wǎng)頁的源代碼幌墓，你可以由此借鑒一下別人寫得好的地方但壮。不過在你對HTML知識尚少的情況下冀泻，看別人復(fù)雜的HTML源代碼，只會讓你頭暈蜡饵。建議你還是再等等弹渔，先掌握一些基礎(chǔ)再說。
四溯祸、Html特殊字符顯示
HTML字符實(shí)體(Character Entities)
有些字符在HTML里有特別的含義肢专，比如小于號<就表示HTML Tag的開始，這個小于號是不顯示在我們最終看到的網(wǎng)頁里的焦辅。那如果我們希望在網(wǎng)頁顯示一個小于號博杖，該怎么辦呢？這就要說到HTML字符實(shí)體(HTML Character Entities)了筷登。
一個字符實(shí)體(Character Entity)分成三部分：第一部分是一個&符號剃根，英文叫ampersand；第二部分是實(shí)體(Entity)名字或者是#加上實(shí)體(Entity)編號前方；第三部分是一個分號狈醉。比如，要顯示小于號镣丑，就可以寫<或者<舔糖。用實(shí)體(Entity)名字的好處是比較好理解，一看lt莺匠，大概就猜出是less than的意思金吗，但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字。而實(shí)體(Entity)編號趣竣，各種瀏覽器都能處理摇庙。
注意：Entity是區(qū)分大小寫的。
如何顯示空格
通常情況下遥缕，HTML
會自動截去多余的空格卫袒。不管你加多少空格，都被看做一個空格单匣。比如你在兩個字之間加了10個空格夕凝，HTML會截去9個空格，只保留一個户秤。為了在網(wǎng)頁中增加空格码秉，你可以使用表示空格。
五鸡号、HTML的超鏈接
先看兩個示例
建立一個超鏈接
這個示例演示了如何在HTML文件里創(chuàng)建超鏈接转砖。
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">這是一個鏈接</a>
</p>
<p><a href="http://www.baidu.com>百度</a></p>
</body>
</html>
將一個圖片作為一個超鏈接
這個示例演示了如何將一個圖片作為一個超鏈接，即點(diǎn)擊一個圖片鲸伴，可以連接到其它文件府蔗。
<html>
<body>
<p>你可以將一張圖片作為一個鏈接晋控，點(diǎn)擊這個圖片。<a href="../asdocs/html_tutorials/humor03.html">[圖片上傳失敗...(image-35cde9-1562915560626)]</a>
</p>
</body>
</html>
a和href屬性
HTML用<a>來表示超鏈接姓赤，英文叫anchor赡译。
<a>可以指向任何一個文件源：一個HTML網(wǎng)頁，一個圖片模捂，一個影視文件等捶朵。用法如下：
<a href="url">鏈接的顯示文字</a>
點(diǎn)擊<a></a>當(dāng)中的內(nèi)容蜘矢，即可打開一個鏈接文件狂男，href屬性則表示這個鏈接文件的路徑。比如鏈接到home.com/html
站點(diǎn)首頁品腹，就可以這樣表示：
<a >首頁</a>
target屬性
使用target屬性岖食，可以在一個新窗口里打開鏈接文件。
<a target=_blank>首頁</a>
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一則笑話</a>
<p>如果你將target的屬性值設(shè)成_blank舞吭，你點(diǎn)擊這個鏈接的時候泡垃，網(wǎng)頁就會在一個新窗口出現(xiàn)。</p>
</body>
</html>
title屬性
使用 title 屬性羡鸥，可以讓鼠標(biāo)懸停在超鏈接上的時候蔑穴，顯示該超鏈接的文字注釋。
<a title = "首頁">首頁</a>
如果希望注釋多行顯示惧浴，可以使用
逞频；作為換行符宗收。
<a title = "首頁
；點(diǎn)擊返回">首頁</a>
六、HTML相對路徑(Relative Path)和絕對路徑(Absolute Path)
HTML初學(xué)者會經(jīng)常遇到這樣一個問題陷揪，如何正確引用一個文件。比如位迂，怎樣在一個HTML網(wǎng)頁中引用另外一個HTML網(wǎng)頁作為超鏈接(hyperlink)渺贤？怎樣在一個網(wǎng)頁中插入一張圖片？如果你在引用文件時(如加入超鏈接嘁锯，或者插入圖片等)宪祥，使用了錯誤的文件路徑，就會導(dǎo)致引用失效(無法瀏覽鏈接文件家乘，或無法顯示插入的圖片等)蝗羊。為了避免這些錯誤，正確地引用文件烤低，我們需要學(xué)習(xí)一下HTML路徑肘交。
HTML有2種路徑的寫法：相對路徑和絕對路徑。
HTML相對路徑(Relative Path)
同一個目錄的文件引用如果源文件和引用文件在同一個目錄里扑馁，直接寫引用文件名即可涯呻。
我們現(xiàn)在建一個源文件info.html凉驻，在info.html里要引用index.html文件作為超鏈接。假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/Desktop/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "index.html">index.html</a>
<a href = "index.html">index.html</a>
如何表示上級目錄
../表示源文件所在目錄的上一級目錄复罐，
../../表示源文件所在目錄的上上級目錄涝登，以此類推。
假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "../index.html">index.html</a>
<a href = "../index.html">index.html</a>
假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "../../index.html">index.html</a>
<a href = "../../index.html">index.html</a>
假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/babala/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "../babala/index.html">index.html</a>
<a href = "../babala/index.html">index.html</a>
如何表示下級目錄
引用下級目錄的文件效诅，直接寫下級目錄文件的路徑即可胀滚。
假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/Desktop/html/Untitled-2.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "html/index.html">index.html</a>
<a href = "html/index.html">index.html</a>
假設(shè)info.html路徑是：
C:/Users/asus/Desktop/Untitled-1.html
假設(shè)index.html路徑是：
C:/Users/asus/Desktop/html\tutorials\index.html
在info.html加入index.html超鏈接的代碼應(yīng)該這樣寫：
<a href = "html/tutorials/index.html">index.html</a>
<a href = "html/tutorials/index.html">index.html</a>
HTML絕對路徑(Absolute Path)
HTML絕對路徑(absolute path)指帶域名的文件的完整路徑。
假設(shè)你注冊了域名www.admin5.com/html乱投，并申請了虛擬主機(jī)咽笼，你的虛擬主機(jī)提供商會給你一個目錄，比如www戚炫，這個www就是你網(wǎng)站的根目錄剑刑。
假設(shè)你在www根目錄下放了一個文件index.html，這個文件的絕對路徑就是：
http://www.admin5.com/html双肤。
假設(shè)你在www根目錄下建了一個目錄叫html_tutorials施掏，然后在該目錄下放了一個文件index.html，這個文件的絕對路徑就是
http://www.admin5.com/html/html_tutorials/index.html茅糜。
七七芭、如何在HTML中創(chuàng)建表格
HTML表格用<table>表示。一個表格可以分成很多行(row)蔑赘，用<tr>表示狸驳；每行又可以分成很多單元格(cell)，用<td>表示米死。這三個Tag是創(chuàng)建表格最常用的Tag锌历。
示例
<html>
<body>
<p>表格所用到的Tag：整個表格開始要用table；每一行開始要用tr峦筒；每一單元格開始要用td究西。</p>
<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列的表格</h4>
<table border="1"><tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table><h4>兩行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr><tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
border屬性
在缺省情況下，如果不設(shè)置表格的邊界物喷，表格是不顯示邊界的卤材。
示例
<html>
<body>
<h4>缺省情況下，表格沒有邊界峦失。</h4>
<table><tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr><tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table><h4>表格Border設(shè)為0扇丛，也不顯示邊界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr><tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
要顯示表格的邊界，可使用border這個屬性尉辑。
示例
<html>
<body>
<h4>表格的邊界值設(shè)為1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr></table>
<h4>表格的邊界值設(shè)為8帆精，邊界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr></table>
<h4>表格的邊界值設(shè)為15，邊界更粗：</h4>
<table border="15">
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td></tr>
</table>
</body>
</html>
表格的表頭
用<th>來表示表格的表頭，表頭的字是粗體顯示的卓练。
設(shè)置表格的背景顏色和背景圖片
這個示例演示如何用bgcolor屬性設(shè)置表格的背景顏色隘蝎，如何用background
屬性為表格添加背景圖片。
<html>
<body>
<h4>給表格設(shè)置背景顏色：</h4>
<table border="1" bgcolor="red">
<tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
<h4>給表格加背景圖片：</h4>
<table border="1"background="../images/html_tutorials/background.gif"><tr>
<td>第一</td>
<td>行</td>
</tr><tr>
<td>第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
設(shè)置單元格的背景顏色和背景圖片
這個示例演示如何用bgcolor屬性設(shè)置單元格的背景顏色襟企，如何用background屬性為單元格添加背景圖片嘱么。
<html>
<body>
<h4>單元格背景色：</h4>
<table border="1"><tr>
<td bgcolor="red">第一</td>
<td>行</td>
</tr>
<tr>
<td background="../images/html_tutorials/background.gif">第二</td>
<td>行</td>
</tr>
</table>
</body>
</html>
八、后記
由于HTML的內(nèi)容實(shí)在太多顽悼，我也只是將一些基礎(chǔ)進(jìn)行列舉曼振，如果通過這幾個實(shí)例你已經(jīng)對HTML和創(chuàng)建網(wǎng)站有了大概的了解，那么恭喜你蔚龙，你已經(jīng)通過到HTML的神奇大門進(jìn)入到他的世界啦冰评！
再往后深入學(xué)習(xí)推薦你幾本書籍：《Head first HTML&CSS》、《cookbook》
還有網(wǎng)站：慕課網(wǎng)
當(dāng)然府蛇，HTML后有很長的一條路要走集索，但是千里之行始于足下屿愚，加油汇跨！
