第一章 HTML介紹

來源:互聯網
上載者:User

標籤: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介紹

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.