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值保持一致,否則不會出現上述效果