1 HTML介紹
1.1 代碼初體驗(yàn),制作第一個(gè)網(wǎng)頁(yè)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>制作我的第一個(gè)網(wǎng)頁(yè)</title>
- </head>
- <body>
- <h1>Hello World</h1>
- </body>
- </html>
1.2 HTML和CSS的關(guān)系
學(xué)習(xí)web前端開(kāi)發(fā)基礎(chǔ)技術(shù)需要掌握:HTML、CSS、JavaScript語(yǔ)言。下面我們就來(lái)了解下這三門技術(shù)都是用來(lái)實(shí)現(xiàn)什么的:
1. HTML是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。
2. CSS樣式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣。比如,標(biāo)題字體、顏色變化,或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來(lái)改變內(nèi)容外觀的東西稱之為表現(xiàn)。
3. JavaScript是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如:鼠標(biāo)滑過(guò)彈出下拉菜單?;蚴髽?biāo)滑過(guò)表格的背景顏色改變。還有焦點(diǎn)新聞(新聞圖片)的輪換。可以這么理解,有動(dòng)畫(huà)的,有交互的一般都是用JavaScript來(lái)實(shí)現(xiàn)的。
下面代碼演示了CSS的效果,HTML用來(lái)表示網(wǎng)頁(yè)元素,CSS讓元素表現(xiàn)更豐富,比如元素位置,大小,顏色,字體等:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Html和CSS的關(guān)系</title>
- <style type="text/css">
- h1{
- font-size:19px;
- color:#930;
- text-align:center;
- }
- </style>
- </head>
- <body>
- <h1>Hello World!</h1>
- </body>
- </html>
-
(1)第8行代碼,影響窗口的文字大小。
(2)第9行代碼,影響窗口文字顏色的變化。
(3)第10行,影響窗口文字居中的變化。
1.3 認(rèn)識(shí)HTML標(biāo)簽
各種各式各樣的網(wǎng)頁(yè),這些網(wǎng)頁(yè)都是由html標(biāo)簽組成的。下面就是一個(gè)簡(jiǎn)單的網(wǎng)頁(yè):
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>認(rèn)識(shí)html標(biāo)簽</title>
- </head>
-
- <body>
- <h1>勇氣</h1>
- <p>三年級(jí)時(shí),我還是一個(gè)膽小如鼠的小女孩,上課從來(lái)不敢回答老師提出的問(wèn)題,生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒(méi)有這個(gè)勇氣來(lái)回答老師提出的問(wèn)題。學(xué)校舉辦的活動(dòng)我也沒(méi)勇氣參加。</p>
- <p>到了三年級(jí)下學(xué)期時(shí),我們班上了一節(jié)公開(kāi)課,老師提出了一個(gè)很簡(jiǎn)單的問(wèn)題,班里很多同學(xué)都舉手了,甚至成績(jī)比我差很多的,也舉手了,還說(shuō)著:"我來(lái),我來(lái)。"我環(huán)顧了四周,就我沒(méi)有舉手。</p>
- <img src="http://img.imooc.com/52b4113500018cf102000200.jpg" >
- </body>
- </html>
-
效果如下:
分析這個(gè)網(wǎng)頁(yè)由哪些HTML組成:
(1)“勇氣”是網(wǎng)頁(yè)內(nèi)容文章的標(biāo)題,<h1></h1>就是標(biāo)題標(biāo)簽,它在網(wǎng)頁(yè)上的代碼寫(xiě)成<h1>勇氣</h1>。
(2)“三年級(jí)時(shí)…我也沒(méi)勇氣參加。” 是網(wǎng)頁(yè)中文章的段落,<p></p>是段落標(biāo)簽。它在網(wǎng)頁(yè)上的代碼寫(xiě)成 <p>三年級(jí)時(shí)...我也沒(méi)勇氣參加。</p>
(3)網(wǎng)頁(yè)上那張小女生的圖片,由img標(biāo)簽來(lái)完成的,它在網(wǎng)頁(yè)上的代碼寫(xiě)成<img src="1.jpg">
1.4 標(biāo)簽語(yǔ)法
1.標(biāo)簽由英文尖括號(hào)<和>括起來(lái),如就是一個(gè)標(biāo)簽。
2.html中的標(biāo)簽一般都是成對(duì)出現(xiàn)的,分開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽比開(kāi)始標(biāo)簽多了一個(gè)/。
3.標(biāo)簽結(jié)構(gòu)示意圖如下:
4.標(biāo)簽舉例:
(1) <p></p>
(2) <div></div>
(3) <span></span>
5.標(biāo)簽與標(biāo)簽之間是可以嵌套的,但先后順序必須保持一致,如:<div>里嵌套<p>,那么</p>必須放在</div>的前面。如下圖所示。
6.HTML標(biāo)簽不區(qū)分大小寫(xiě),<h1>和<H1>是一樣的,但建議小寫(xiě),因?yàn)榇蟛糠殖绦騿T都以小寫(xiě)為準(zhǔn)。
7.測(cè)試:有一個(gè)網(wǎng)頁(yè)的代碼,但第9行缺少代碼,請(qǐng)補(bǔ)充:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>標(biāo)簽的語(yǔ)法</title>
- </head>
- <body>
- <h1>在本教程中,你將學(xué)習(xí)如何使用 HTML 來(lái)創(chuàng)建站點(diǎn)</h1>
- <p>當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí),就可以使用內(nèi)聯(lián)樣式。
- </body>
- </html>
-
1.5 html/head/body認(rèn)識(shí)HTML文件基本結(jié)構(gòu)
學(xué)習(xí)html文件的結(jié)構(gòu):一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <html>
- <head>...</head>
- <body>...</body>
- </html>
代碼講解:
1. <html></html>稱為根標(biāo)簽,所有的網(wǎng)頁(yè)標(biāo)簽都在<html></html>中。
2.<head> 標(biāo)簽用于定義文檔的頭部,它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽,頭部標(biāo)簽在下一小節(jié)中會(huì)有詳細(xì)介紹。
3.在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁(yè)的主要內(nèi)容,如<h1>、<p>、<a>、<img>等網(wǎng)頁(yè)內(nèi)容標(biāo)簽,在這里的標(biāo)簽中的內(nèi)容會(huì)在瀏覽器中顯示出來(lái)。
下面的代碼的HTML文件結(jié)構(gòu)不完整,因?yàn)槿鄙贅?biāo)簽<html>和</html>:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
-
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>認(rèn)識(shí)html文件基本結(jié)構(gòu)</title>
- </head>
- <body>
- <h1>在本小節(jié)中,你將學(xué)會(huì)認(rèn)識(shí)html文件基本結(jié)構(gòu)</h1>
- </body>
-
1.6 head標(biāo)簽
•標(biāo)簽的作用:文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。
•下面的標(biāo)簽可以在head部分:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <head>
- <title>...</title>
- <meta>
- <link>
- <style>...</style>
- <script>...</script>
- </head>
•<title>標(biāo)簽:在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁(yè)的標(biāo)題信息,它會(huì)出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁(yè)的title標(biāo)簽用于告訴用戶和搜索引擎這個(gè)網(wǎng)頁(yè)的主要內(nèi)容是什么,搜索引擎可以通過(guò)網(wǎng)頁(yè)標(biāo)題,迅速的判斷出網(wǎng)頁(yè)的主題。每個(gè)網(wǎng)頁(yè)的內(nèi)容都是不同的,每個(gè)網(wǎng)頁(yè)都應(yīng)該有一個(gè)獨(dú)一無(wú)二的title。
例如,<title>標(biāo)簽的內(nèi)容“hello world”會(huì)在瀏覽器中的標(biāo)題欄上顯示出來(lái),如圖:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <head>
- <title>hello world</title>
- </head>
1.7 了解HTML的代碼注釋
代碼注釋的作用:幫助程序員標(biāo)注代碼的用途,過(guò)一段時(shí)間后再看你所編寫(xiě)的代碼,就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途,還可以幫助其他程序員很快的讀懂你的程序的功能,方便多人合作開(kāi)發(fā)網(wǎng)頁(yè)代碼。
語(yǔ)法:
<!--注釋文字 -->
下面代碼的第 8、12 行都是注釋代碼,但是發(fā)現(xiàn)他們是不會(huì)在結(jié)果窗口中顯示出來(lái)的:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>HTML的代碼注釋</title>
- </head>
- <body>
-
- <div>
- <p>一站式報(bào)名咨詢!<a href="#">向報(bào)名顧問(wèn)咨詢</a></p>
- </div>
-
- </body>
- </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
原文地址:http://blog.csdn.net/qq_17416741/article/details/51416313