一姐浮、什么是HTML
- HTML的英文全稱是Hypertext Marked Language，中文叫做“超文本標(biāo)記語言”化戳。
- 和一般文本的不同的是单料，一個(gè)HTML文件不僅包含文本內(nèi)容，還包含一些Tag点楼，中文稱“標(biāo)記”。
- 一個(gè)HTML文件的后綴名是.htm或者是.html白对。 用文本編輯器就可以編寫HTML文件掠廓。
二、如何編寫HTML文件
讓我們先創(chuàng)建第一個(gè)HTML文件甩恼！
<html> <head> <title>simple</title> </head> <body>Thisisasimple.<b>Thistextisbold</b></body> </html>
HTML元素
- 這個(gè)文件的第一個(gè)Tag是<html>蟀瞧，這個(gè)Tag告訴你的瀏覽器這是HTML文件的頭。文件的最后一個(gè)Tag是</html>条摸，表示HTML文件到此結(jié)束悦污。
- 在<head>和</head>之間的內(nèi)容，是Head信息钉蒲。Head信息是不顯示出來的切端，你在瀏覽器里看不到。但是這并不表示這些信息沒有用處顷啼。比如你可以在Head信息里加上一些關(guān)鍵詞踏枣，有助于搜索引擎能夠搜索到你的網(wǎng)頁。
- 在<title>和</title>之間的內(nèi)容钙蒙，是這個(gè)文件的標(biāo)題茵瀑。你可以在瀏覽器最頂端的標(biāo)題欄看到這個(gè)標(biāo)題。
- 在<body>和</body>之間的信息躬厌，是正文马昨。
- 在b和/b之間的文字，用粗體表示。b顧名思義鸿捧，就是bold的意思屹篓。
HTML文件看上去和一般文本類似，但是它比一般文本多了Tag笛谦，比如<html>,<body>等抱虐，通過這些Tag，可以告訴瀏覽器如何顯示這個(gè)文件饥脑。
HTML元素屬性
HTML元素可以擁有屬性恳邀。屬性可以擴(kuò)展HTML元素的能力。
比如你可以使用一個(gè)bgcolor屬性灶轰，使得頁面的背景色成為紅色谣沸，就像這樣：
<body bgcolor="red">
再比如，你可以使用border這個(gè)屬性笋颤，將一個(gè)表格設(shè)成一個(gè)無邊框的表格乳附。如下：
<table border="0">
屬性通常由屬性名和值成對(duì)出現(xiàn)，就像這樣：name="value"
上面例子中的bgcolor, border就是name伴澄，red和0就是value赋除。屬性值一般用雙引號(hào)標(biāo)記起來。屬性通常是附加給HTML的Opening Tag非凌，而不是Closing Tag举农。
三、基礎(chǔ)HTML tag
HTML里敞嗡，比較基礎(chǔ)的Tag主要用于標(biāo)題颁糟，段落和分行。
學(xué)習(xí)HTML最好的方法喉悴，就是跟著示例學(xué)棱貌。
HTML用<h1>到<h6>這幾個(gè)Tag來定義正文標(biāo)題，從大到小箕肃。每個(gè)正文標(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>這個(gè)Tag突雪，可以在不新建段落的情況下?lián)Q行起惕。<br>沒有Closing Tag。用<p>換行是個(gè)壞習(xí)慣咏删，正確的是使用<br>惹想。
<p>This <br> is a para<br>graph with line breaks</p>
HTML注釋
在HTML文件里，你可以寫代碼注釋督函，解釋說明你的代碼嘀粱，這樣有助于你he他人日后能夠更好地理解你的代碼激挪。
注釋可以寫在``之間。瀏覽器是忽略注釋的锋叨，你不會(huì)在HTML
正文中看到你的注釋垄分。
居中的正文標(biāo)題
這個(gè)示例告訴你如何將正文標(biāo)題居中顯示。
<html> <body> <h1 align="center">這是標(biāo)題</h1> <p>上面的標(biāo)題是居中顯示的娃磺。</p> </body> </html>
加條橫線
這個(gè)示例演示了如何在HTML文中加條橫線薄湿。
<html> <body> <p>用hr這個(gè)Tag可以在HTML文件里加一條橫線</p> <hr><p>hello</p><hr> <p>helloworld</p><hr> <p>helloworldhello</p> </body> </html>
背景顏色
這個(gè)示例演示如何改變HTML文件的背景色。
<html><body bgcolor="yellow"><h2>看偷卧，這個(gè)頁面是黃色的</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ì)算機(jī)代碼豺瘤，等寬字體 |
<html>
<body>
<p><b>粗體用b表示。</b></p>
<p><i>斜體用i表示听诸。</i></p>
<p><del>芙蓉姐姐</del>這個(gè)詞當(dāng)中劃線表示刪除坐求。</p>
<p><ins>想唱就唱</ins>這個(gè)詞下劃線插入。</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這個(gè)tag里的文本保留空格和分行。</pre><code>call getOrders</code>
<p>用code顯示計(jì)算機(jī)代碼仔蝌，code里顯示的字符是等寬字符泛领。</p>
</body>
</html>
如何看HTML的源代碼
在瀏覽器看到的HTML網(wǎng)頁，是瀏覽器解釋HTML源代碼后產(chǎn)生的結(jié)果敛惊。
要查看這個(gè)HTML的源代碼师逸，有兩種方法。一是點(diǎn)擊鼠標(biāo)右鍵豆混，點(diǎn)擊View Source(查看源文件)命令；二是選擇瀏覽器菜單View(查看)中的Source(源文件)命令动知。利用View Source得到網(wǎng)頁的源代碼皿伺，你可以由此借鑒一下別人寫得好的地方。不過在你對(duì)HTML知識(shí)尚少的情況下盒粮，看別人復(fù)雜的HTML源代碼鸵鸥，只會(huì)讓你頭暈。建議你還是再等等丹皱，先掌握一些基礎(chǔ)再說妒穴。
四、Html特殊字符顯示
HTML字符實(shí)體(Character Entities)
有些字符在HTML里有特別的含義摊崭，比如小于號(hào)<就表示HTML Tag的開始讼油，這個(gè)小于號(hào)是不顯示在我們最終看到的網(wǎng)頁里的。那如果我們希望在網(wǎng)頁顯示一個(gè)小于號(hào)呢簸，該怎么辦呢矮台？這就要說到HTML字符實(shí)體(HTML Character Entities)了乏屯。
一個(gè)字符實(shí)體(Character Entity)分成三部分：第一部分是一個(gè)&符號(hào)，英文叫ampersand瘦赫；第二部分是實(shí)體(Entity)名字或者是#加上實(shí)體(Entity)編號(hào)辰晕；第三部分是一個(gè)分號(hào)。比如确虱，要顯示小于號(hào)含友，就可以寫<或者<。用實(shí)體(Entity)名字的好處是比較好理解校辩，一看lt窘问，大概就猜出是less than的意思，但是其劣勢在于并不是所有的瀏覽器都支持最新的Entity名字召川。而實(shí)體(Entity)編號(hào)南缓，各種瀏覽器都能處理。
注意：Entity是區(qū)分大小寫的荧呐。
如何顯示空格
通常情況下汉形，HTML
會(huì)自動(dòng)截去多余的空格。不管你加多少空格倍阐，都被看做一個(gè)空格概疆。比如你在兩個(gè)字之間加了10個(gè)空格，HTML會(huì)截去9個(gè)空格峰搪，只保留一個(gè)岔冀。為了在網(wǎng)頁中增加空格，你可以使用表示空格概耻。
五使套、HTML的超鏈接
先看兩個(gè)示例
建立一個(gè)超鏈接
這個(gè)示例演示了如何在HTML文件里創(chuàng)建超鏈接。
<html>
<body>
<p>
<a href="../asdocs/html_tutorials/humor02.html">這是一個(gè)鏈接</a>
</p>
<p><a href="http://www.baidu.com>百度</a></p>
</body>
</html>
將一個(gè)圖片作為一個(gè)超鏈接
這個(gè)示例演示了如何將一個(gè)圖片作為一個(gè)超鏈接鞠柄，即點(diǎn)擊一個(gè)圖片侦高，可以連接到其它文件。
<html>
<body>
<p>你可以將一張圖片作為一個(gè)鏈接厌杜，點(diǎn)擊這個(gè)圖片奉呛。<a href="../asdocs/html_tutorials/humor03.html">圖片</a>
</p>
</body>
</html>
a和href屬性
HTML用<a>來表示超鏈接，英文叫anchor夯尽。
<a>可以指向任何一個(gè)文件源：一個(gè)HTML網(wǎng)頁瞧壮，一個(gè)圖片，一個(gè)影視文件等匙握。用法如下：
<a href="url">鏈接的顯示文字</a>
點(diǎn)擊<a></a>當(dāng)中的內(nèi)容咆槽，即可打開一個(gè)鏈接文件，href屬性則表示這個(gè)鏈接文件的路徑肺孤。比如鏈接到home.com/html
站點(diǎn)首頁罗晕，就可以這樣表示：
<a >首頁</a>
target屬性
使用target屬性济欢，可以在一個(gè)新窗口里打開鏈接文件。
<a target=_blank>首頁</a>
<html>
<body>
<a href="../asdocs/html_tutorials/humor01.html" target="_blank">一則笑話</a>
<p>如果你將target的屬性值設(shè)成_blank小渊，你點(diǎn)擊這個(gè)鏈接的時(shí)候法褥，網(wǎng)頁就會(huì)在一個(gè)新窗口出現(xiàn)。</p>
</body>
</html>
title屬性
使用 title 屬性酬屉，可以讓鼠標(biāo)懸停在超鏈接上的時(shí)候半等，顯示該超鏈接的文字注釋。
<a title = "首頁">首頁</a>
如果希望注釋多行顯示呐萨，可以使用
杀饵；作為換行符。
<a title = "首頁
谬擦；點(diǎn)擊返回">首頁</a>
六切距、如何在HTML中創(chuàng)建表格
HTML表格用<table>表示。一個(gè)表格可以分成很多行(row)惨远，用<tr>表示谜悟；每行又可以分成很多單元格(cell)，用<td>表示北秽。這三個(gè)Tag是創(chuàng)建表格最常用的Tag葡幸。
