1. 程式人生 > >CSS基礎知識學習(一)

CSS基礎知識學習(一)

一、HTML、CSS、JavaScript

   1、 HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊,可以包含文字、圖片、視訊等。

   2、 CSS樣式是表現。就像網頁的外衣。比如,標題字型、顏色變化,或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。

  3、 JavaScript是用來實現網頁上的特效效果。如:滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有互動的一般都是用JavaScript來實現的。

二、語義化的含義

   1、概念

      語義化簡單理解:表示明確各個標籤的含義,在適當的情況下使用合適的標籤。

   2、作用

      (1)可讓搜尋引擎快速定位到關鍵字;

      (2)讓螢幕閱讀器更加容易讀出網頁內容

三、基礎標籤

   1、Strong和em

      兩者均表示對某段內容的強調,只是強調的方式不同。

      strong是以對內容加粗的形式;em是將內容進行斜體展示。這兩個標籤相比,strong在程式中使用比較頻繁。

      補充:span相較於前兩個標籤來說,它不存在語義感,沒有強調之說,只是可以對某部分設定對應的樣式。

    2、引用標籤

      (1)<q></q>

          表示對引用的名著或者其他話加引號

          案例:<q>莊生曉夢迷蝴蝶</q>

     (2)<blockquote></blockquote>

           表示對於大量片段的引用,瀏覽器對<blockquote>標籤的解析是縮排樣式

    3、換行標籤

      在 html 中是忽略回車和空格的,你輸入的再多回車和空格也是顯示不出來的。因此需要使用br標籤,使用方法:<br/>該標籤在html中不需要輸入內容,因此定義為空標籤。類似的空標籤還有<img/> <hr/>

      附註:一般而言,在html中,空標籤沒有開始標籤和結束標籤

    4、pre標籤

       pre標籤不只是為顯示計算機的原始碼時用的,在你需要在網頁中預顯示格式時都可以使用它,只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。

    5、ul li

        預設的是以圓點樣式顯示

   6、ol li

        預設就是以數字的形式進行排序顯示的1、2、等形式

   7、下拉框多選

            <select multiple="multiple">

               <option value="看書">看書</option>

               <option value="旅遊">旅遊</option>

               <option value="運動">運動</option>

               <option value="購物">購物</option>

            </select>

  8、lable標籤

      常用的label標籤通常用於的情況為label標籤帶上input等控制元件結合使用。這樣使用的效果是當選中label標籤中的文字後,瀏覽器會自動將焦點轉到和該標籤相關的表單控制元件上去。

      案例如下:

               <label for="users">使用者名稱</label><input type="text" name="users" value="" id="users">

 

      效果如下:

                                           

     注意點: label中的for屬性值必須同input控制元件中的id值保持一致,否則不會出現上述效果