1. 程式人生 > >前端學習01

前端學習01

1、HTML、CSS、JavaScript

  • HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視訊等。
  • CSS樣式是表現。就像網頁的外衣。比如,標題字型、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
  •  JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有互動的一般都是用JavaScript來實現的。

 

2、HTML標籤的語法

1. 標籤由英文尖括號< 和 >括起來,如<html>就是一個標籤。

2. html中的標籤一般都是成對出現的,分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。如:

(1) <p></p>

(2) <div></div>

(3) <span></span>

3. 標籤與標籤之間是可以巢狀的,但先後順序必須保持一致,如:<div>裡巢狀<p>,那麼</p>必須放在</div>的前面。如下圖所示。

4. HTML標籤不區分大小寫,<h1><H1>是一樣的,但建議小寫,因為大部分程式設計師都以小寫為準。

3、認識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>等網頁內容標籤,在這裡的標籤中的內容會在瀏覽器中顯示出來。

4、認識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”會在瀏覽器中的標題欄上顯示出來,如下圖所示:

 

5、瞭解HTML的程式碼註釋

程式碼註釋的作用是幫助程式設計師標註程式碼的用途,過一段時間後再看你所編寫的程式碼,就能很快想起這段程式碼的用途。程式碼註釋不僅方便程式設計師自己回憶起以前程式碼的用途,還可以幫助其他程式設計師很快的讀懂你的程式的功能,方便多人合作開發網頁程式碼。

語法:

<!--註釋文字 -->