HTML&CSS 基礎

HTML 基礎

HTML 標籤

HTML標題：HTML 標題（Heading）是通過 h1 - h6 等標籤進行定義的。
HTML段落： HTML 段落是通過 p 標籤進行定義的。
HTML連結：HTML 連結是通過 a 標籤進行定義的。
```
<a href="http://www.w3school.com.cn">This is a link</a>
```
HTML影象：HTML 影象是通過 img 標籤進行定義的。
```
<img src="w3school.jpg" width="104" height="142" />
```

HTML 元素

< body > 元素：定義了 HTML 文件的主體。
< html > 元素：定義了整個 HTML 文件。
空標籤：沒有內容的 HTML 元素被稱為空元素，常見的空標籤有 br

HTML 屬性

常用的全域性屬性

屬性名稱	含義
class	規定元素的一個或多個類名（引用樣式表中的類）
id	規定元素的唯一 id
lang	規定元素內容的語言
style	規定元素的行內 CSS 樣式

常用的 window 事件屬性

屬性名稱	含義
onload	頁面結束載入之後觸發

常用的 Form 事件屬性

屬性名稱	含義
onblur	元素失去焦點時執行的指令碼
onfocus	當元素獲得焦點時執行的指令碼
oninput	當元素獲得使用者輸入時執行的指令碼
onreset	表單中的重置按鈕被點選時觸發 HTML5 中不支援
onselect	在元素中文字被選中後觸發
onsubmit	在提交表單時觸發

常用的 Keyboard 事件屬性

屬性名稱	含義
onkeydown	在使用者按下按鍵時觸發
onkeypress	在使用者敲擊按鈕時觸發
onkeyrealse	當用戶釋放按鍵時觸發

常用的 Mouse 事件屬性

屬性名稱	含義
onclick	元素上發生滑鼠點選時觸發
ondblclick	元素上發生滑鼠雙擊時觸發
ondrag	元素被拖動時執行的指令碼
onmousedown	當元素上按下滑鼠按鈕時觸發
onmousemove	當滑鼠指標移動到元素上時觸發
onmouseout	當滑鼠指標移出元素時觸發
onmouseover	當滑鼠指標移動到元素上時觸發
onmouseup	當在元素上釋放滑鼠按鈕時觸發
onscroll	當元素滾動條被滾動時執行的指令碼

常用的表單屬性

屬性名稱	含義
form	定義供使用者輸入的 HTML 表單
input	定義輸入控制元件
button	定義按鈕
select	定義選擇列表（下拉列表）
option	定義選擇列表中的選項
label	定義 input 元素的標註
datalist	定義下拉列表

常用的列表屬性

屬性名稱	含義
ul	定義無序列表
ol	定義有序列表
li	定義列表的專案
dl	定義定義列表
dt	定義定義列表中的專案

常用的表格屬性

屬性名稱	含義
table	定義表格
th	定義表格中的表頭單元格
tr	定義表格中的行
td	定義表格中的單元
thead	定義表格中的表頭內容
tbody	定義表格中的主體內容
col	定義表格中一個或多個列的屬性值

其他常見屬性

屬性名稱	含義
audio	定義聲音內容
br	定義簡單的折行
canvas	定義圖形
div	定義文件中的節
diglog	定義對話方塊或視窗
em	定義強調文字
hr	定義水平線
i	定義斜體字
img	定義影象
map	定義影象對映
meta	定義關於 HTML 文件的元資訊
nar	定義導航連結
param	定義物件的引數

HTML 引用

用於短引用的 HTML 標籤：q

<q>構建人與自然和諧共存的世界。</q>

用於長引用的 HTML 標籤：blockquote

<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力於保護自然界的未來。
世界領先的環保組織，WWF 工作於 100 個國家，
並得到美國一百二十萬會員及全球近五百萬會員的支援。
</blockquote>

HTML 影象

影象標籤（img）和源屬性（src）：img 是空標籤，意思是說，它只包含屬性，並且沒有閉合標籤。要在頁面上顯示影象，你需要使用源屬性（src）。src 指 “source”。源屬性的值是影象的 URL 地址。
```
<img src="url" />
```
替換文字屬性（alt）:alt 屬性用來為影象定義一串預備的可替換的文字。替換文字屬性的值是使用者定義的。
```
<img src="boat.gif" alt="Big Boat">
```

HTML 頭部元素

head 元素是所有頭部元素的容器：head 內的元素可包含指令碼，指示瀏覽器在何處可以找到樣式表，提供元資訊等等。以下標籤都可以新增到 head 部分：title、base、link、meta、script 以及 style
title 標籤：定義文件的標題，title 在所有 HTML/XHTML 文件中都是必需的
base 元素：base 標籤為頁面上的所有連結規定預設地址或預設目標（target）
```
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
```
link 元素：link 標籤定義文件與外部資源之間的關係，最常用於連線樣式表
```
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head
```
style 元素：style 標籤用於為 HTML 文件定義樣式資訊
meta 元素：元資料（metadata）是關於資料的資訊。meta標籤提供關於 HTML 文件的元資料。元資料不會顯示在頁面上，但是對於機器是可讀的。典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他元資料。meta標籤始終位於 head 元素中。元資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務

HTML URL

URL 也被稱為網址，用於定位全球資訊網上的資源
語法規則：scheme://host.domain:port/path/filename
- scheme - 定義因特網服務的型別。常見的型別有 http https ftp file
- host - 定義域主機，http 的預設主機是 www
- domain - 定義因特網域名，比如 w3school.com.cn
- port - 定義主機上的埠號，http 的預設埠號是 80
- path - 定義伺服器上的路徑，如果省略，則資源必須位於網站的根目錄中
- filename - 定義資源的名稱

HTML 表單

表單基礎

HTML 表單用於蒐集不同型別的使用者輸入
HTML 表單包含表單元素，表單元素指的是不同型別的 input 元素、複選框、單選按鈕、提交按鈕等

HTML 輸入型別

input 元素有很多形態，根據不同的 type 屬性來區分。

text 定義供文字輸入的單行輸入欄位
password 定義密碼欄位，password 欄位中的字元會被做掩碼處理
submit 定義提交表單資料至表單處理程式的按鈕
radio 定義單選按鈕
checkbox 定義複選框
button 定義按鈕
number 用於應該包含數字值的輸入欄位，可以對數字做出如下限制：
- disabled 規定輸入欄位應該被禁用
- max 規定輸入欄位的最大值
- maxlength 規定輸入欄位的最大字元數
- min 規定輸入欄位的最小值
- pattern 規定通過其檢查輸入值的正則表示式
- readonly 規定輸入欄位為只讀的
- required 規定輸入欄位為必須的
- size 規定輸入欄位的寬度，以字元計
- step 規定輸入欄位的合法數字間隔
- value 規定輸入欄位的預設值
HTML5新增的輸入型別：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

XHTML 基礎

XHTML 是 HTML 與 XML 的結合物
XHTML 是更嚴格更純淨的 HTML 程式碼
XHTML 指可擴充套件超文字標籤語言（EXtensible HyperText Markup Language）
XHTML 元素必須被正確地巢狀
XHTML 元素必須被關閉
標籤名必須用小寫字母
XHTML 文件必須擁有一個根元素
屬性名稱必須小寫，屬性值必須加引號，屬性不能簡寫

CSS 基礎

概述：

CSS 指層疊樣式表（Cascading Style Sheets）
樣式定義如何顯示 HTML 元素
樣式通常儲存在樣式表中
把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常儲存在 CSS 檔案中

基礎語法：

由兩個主要的部分構成：選擇器，以及一條或多條宣告
選擇器通常是需要改變樣式的 HTML 元素
每條宣告由一個屬性和一個值組成
- 屬性（property）是您希望設定的樣式屬性
- 每個屬性有一個值

高階語法：

選擇器分組：可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告，用逗號將需要分組的選擇器分開

CSS 選擇器

派生選擇器

派生選擇器允許根據文件的上下文關係來確定某個標籤的樣式，通過合理地使用派生選擇器，可以使 HTML 程式碼變得更加整潔
```
/* 列表中的 strong 元素變為斜體字 */
li strong {
    font-style: italic;
    font-weight: normal;
}
```

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式
id 屬性只能在每個 HTML 文件中出現一次

id 選擇器以 # 來定義

#sidebar {
    border: 1px dotted #000;
    padding: 10px;
}

在現代佈局中，id 選擇器常常用於建立派生選擇器。即使被標註為 sidebar 的元素只能在文件中出現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
}

#sidebar h2 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    margin: 0;
    line-height: 1.5;
    text-align: right;
}

類選擇器

類選擇器以一個點號顯示，類名的第一個字元不能使用數字
和 id 選擇器一樣，class 選擇器也可被用作派生選擇器
```
.center {text-align: center}
```

屬性選擇器

對帶有指定屬性的 HTML 元素設定樣式
```
[title] {color:red;}
```

屬性和值選擇器

[title=W3School] {border:5px solid blue;}

後代選擇器

後代選擇器又稱為包含選擇器
後代選擇器可以選擇作為某元素後代的元素
```
div.sidebar {background:blue;}
```

子元素選擇器

與後代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素
```
h1 > strong {color:red;}
```

可以結合後代選擇器的子元素選擇器

/* 選擇器會選擇作為 td 元素子元素的所有 p 元素，這個 td 元素本身從 table 元素繼承，該 table 元素有一個包含 company 的 class 屬性 */
table.company td > p

相鄰兄弟選擇器

相鄰兄弟選擇器可選擇緊接在另一元素後的元素，且二者有相同父元素
```
/* 增加緊接在 h1 元素後出現的段落的上邊距 */
h1 + p {margin-top:50px;}
```

偽類和偽元素

偽類：

:active 向被啟用的元素新增樣式
:focus 向擁有鍵盤輸入焦點的元素新增樣式
:hover 當滑鼠懸浮在元素上方時向元素新增樣式
:link 向未被訪問的連線新增樣式
:visited 向已被訪問的連線新增樣式
:first-child 向元素的第一個子元素新增樣式
lang 向帶有指定 lang 屬性的元素新增樣式

偽元素：

first-letter 向文字的第一個字母新增特殊樣式
first-line 向文字的首行新增特殊樣式
before 在元素之前新增內容
after 在元素之後新增內容

CSS 樣式

背景

設定背景色：可以使用 background-color 屬性為元素設定背景色，這個屬性接受任何合法的顏色值
設定背景影象：要把影象放入背景，需要使用 background-image 屬性。background-image 屬性的預設值是 none，表示背景上沒有放置任何影象。如果需要設定一個背景影象，必須為這個屬性設定一個 URL 值
設定背景重複：如果需要在頁面上對背景影象進行平鋪，可以使用 background-repeat 屬性。repeat-x 和 repeat-y 分別導致影象只在水平或垂直方向上重複，no-repeat 則不允許影象在任何方向上平鋪
設定背景定位：可以利用 background-position 屬性改變影象在背景中的位置。為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值
設定背景關聯：如果文件比較長，那麼當文件向下滾動時，背景影象也會隨之滾動。當文件滾動到超過影象的位置時，影象就會消失。您可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以宣告影象相對於可視區是固定的（fixed），因此不會受到滾動的影響

文字

文字屬性：

color 設定文字顏色
direction 設定文字方向
line-height 設定行高
letter-spacing 設定字元間距
text-align 對齊元素中的文字
text-decoration 向文字新增修飾
text-indent 縮排元素中文字的首行
text-shadow 設定文字陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性
text-transform 控制元素中的字母
unicode-bidi 設定文字方向
white-space 設定元素中空白的處理方式
word-spacing 設定字間距

字型

在 CSS 中，有兩種不同型別的字體系列名稱：

通用字體系列 - 擁有相似外觀的字體系統組合（比如 "Serif" 或 "Monospace"）
特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）

除了各種特定的字體系列外，CSS 定義了 5 種通用字體系列：

Serif 字型
Sans-serif 字型
Monospace 字型
Cursive 字型
Fantasy 字型

字型屬性：

font 簡寫屬性。作用是把所有針對字型的屬性設定在一個宣告中
font-family 設定字體系列
font-size 設定字型的尺寸
font-size-adjust 當首選字型不可用時，對替換字型進行智慧縮放。（CSS2.1 已刪除該屬性。）
ont-stretch 對字型進行水平拉伸。（CSS2.1 已刪除該屬性。）
font-style 設定字型風格
font-variant 以小型大寫字型或者正常字型顯示文字
font-weight 設定字型的粗細

連結

連結的四種狀態：

a:link - 普通的、未被訪問的連結
a:visited - 使用者已訪問的連結
a:hover - 滑鼠指標位於連結的上方
a:active - 連結被點選的時刻

當為連結的不同狀態設定樣式時，請按照以下次序規則：

a:hover 必須位於 a:link 和 a:visited 之後
a:active 必須位於 a:hover 之後

列表

列表屬性：

list-style 簡寫屬性。用於把所有用於列表的屬性設置於一個宣告中
list-style-image 將圖象設定為列表項標誌
list-style-position 設定列表中列表項標誌的位置
list-style-type 設定列表項標誌的型別

表格

表格屬性：

border-collapse 設定是否把表格邊框合併為單一的邊框。
border-spacing 設定分隔單元格邊框的距離。
caption-side 設定表格標題的位置。
empty-cells 設定是否顯示錶格中的空單元格。
table-layout 設定顯示單元、行和列的演算法

輪廓

邊框屬性：

outline 在一個宣告中設定所有的輪廓屬性
outline-color 設定輪廓的顏色
outline-style 設定輪廓的樣式
outline-width 設定輪廓的寬度

CSS 框模型

概述

內邊距、邊框和外邊距都是可選的，預設值是零
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸

內邊距 padding

CSS padding 屬性定義元素的內邊距。padding 屬性接受長度值或百分比值，但不允許使用負值
還可以按照上、右、下、左的順序分別設定各邊的內邊距，各邊均可以使用不同的單位或百分比值
```
h1 {padding: 10px 0.25em 2ex 20%;}
```
元素的內邊距設定百分數值。百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變

邊框 border

元素的邊框就是圍繞元素內容和內邊據的一條或多條線