標籤:bsp asc 這一 表格 多人合作 協助 roman pre 上網
1.1 Html和CSS的關係
學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來瞭解下這三門技術都是用來實現什麼的:
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如,標題字型、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉式功能表。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有互動的一般都是用JavaScript來實現的。
代碼範例:
1 <!DOCTYPE HTML> 2 3 <html> 4 5 <head> 6 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 8 9 <title>Html和CSS的關係</title>10 11 <style type="text/css">12 13 h1{14 15 font-size:18px; //改變字型大小 16 17 color:#930; //改變字型顏色18 19 text-align:center; //改變字型位置20 21 }22 23 </style>24 25 </head>26 27 <body>28 29 <h1>Hello World!</h1>30 31 </body>32 33 </html>
1.2
認識html標籤
讓我們通過一個網頁的學習,來對html標籤有一個初步理解。平常大家說的上網就是瀏覽各種各式各樣的網頁,這些網頁都是由html標籤組成的。下面就是一個簡單的網頁。如下:
我們來分析一下,這個網頁由哪些html標籤組成:
“勇氣”是網頁內容文章的標題,<h1></h1>就是標題標籤,它在網頁上的代碼寫成<h1>勇氣</h1>。
“三年級時...我也沒勇氣參加。” 是網頁中文章的段落,<p></p>是段落標籤。它在網頁上的代碼寫成 <p>三年級時...我也沒勇氣參加。</p>
網頁上那張小女生的圖片,由img標籤來完成的,它在網頁上的代碼寫成<img src="1.jpg">
代碼範例:
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>認識html標籤</title> </head> <body> <h1>勇氣</h1> <p>三年級時,我還是一個膽小如鼠的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p>到了三年級下學期時,我們班上了一節公開課,老師提出了一個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。</p> <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" > </body></html>
1.3標籤的文法
1. 標籤由英文角括弧<和>括起來,如<html>就是一個標籤。
2. html中的標籤一般都是成對出現的,分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。
如:
(1) <p></p>
(2) <div></div>
(3) <span></span>
3. 標籤與標籤之間是可以嵌套的,但先後順序必須保持一致,如:<div>裡嵌套<p>,那麼</p>必須放在</div>的前面。如所示。
4. HTML標籤不區分大小寫,<h1>和<H1>是一樣的,但建議小寫,因為大部分程式員都以小寫為準。
1.4認識html檔案基本結構
這一節中我們來學習html檔案的結構:一個HTML檔案是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解:
1. <html></html>稱為根標籤,所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文檔的頭部,它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤,頭部標籤在下一小節中會有詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容,如<h1>、<p>、<a>、<img>等網頁內容標籤,在這裡的標籤中的內容會在瀏覽器中顯示出來。
1.5認識head標籤
做得好,下面我們來瞭解一下<head>標籤的作用。文檔的頭部描述了文檔的各種屬性和資訊,包括文檔的標題等。絕大多數文檔頭部包含的資料都不會真正作為內容顯示給讀者。
下面這些標籤可用在 head 部分:
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標籤: 在<title>和</title>標籤之間的文字內容是網頁的標題資訊,它會出現在瀏覽器的標題列中。網頁的title標籤用 於告訴使用者和搜尋引擎這個網頁的主要內容是什麼,搜尋引擎可以通過網頁標題,迅速的判斷出網頁的主題。每個網頁的內容都是不同的,每個網頁都應該有一個獨 一無二的title。
例如:
<head>
<title>hello world</title>
</head>
<title>標籤的內容“hello world”會在瀏覽器中的標題列上顯示出來,如所示:
1.6瞭解HTML的代碼注釋
什麼是代碼注釋?代碼注釋的作用是協助程式員標註代碼的用途,過一段時間後再看你所編寫的代碼,就能很快想起這段代碼的用途。代碼注釋不僅方便程式員自己回憶起以前代碼的用途,還可以協助其他程式員很快的讀懂你的程式的功能,方便多人合作開發網頁代碼。
文法:
<!--注釋文字 -->
第一章 HTML介紹