TML

1. 基本概念
   

• HTML 是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

• CSS 樣式是表現(xiàn)。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現(xiàn)。

• JavaScript 是用來實現(xiàn)網頁上的特效效果。如：鼠標滑過彈出下拉菜單，或鼠標滑過表格的背景顏色改變，還有焦點新聞（新聞圖片）的輪換。有動畫的，有交互的一般都是用 JavaScript 來實現(xiàn)的。

2.常用標簽

• 強調語氣：<em>是斜體，<strong>是加粗

• 引用：<q>短文本引用，<blockquote>長文本引用

• 換行 <br />

• 水平橫線 <hr />

• 空格 &nbsp;

• 表格 <table><tbody>

• 加上后表格內容全部下載完才會顯示

• 行 <tr>

• 列 <td>

• 表格表頭 <th>

• 標題 <caption>

• 超鏈 <a>

• 例子：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

• 新標簽打開：target="_blank"

• 圖片 <img>，圖像可以是 GIF，PNG，JPEG 格式的圖像文件

• 例子：<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

• 表單 <form>

• 文本域 <textarea>

• 例子 <textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>

• cols 多行輸入域的列數(shù)；rows 多行輸入域的行數(shù)。這兩個屬性可用 CSS 樣式的 width 和 height 來代替：col 用 width、row 用 height 來代替

• 輸入框 <input type="text/password" name="名稱" value="文本" />

• 當 type=”text” 時，輸入框為文本輸入框

• 當 type=”password” 時, 輸入框為密碼輸入框

• 單/復選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

• 當 type=”radio” 時，控件為單選框，同一組單選框 name 命名要一致

• 當 type=”checkbox” 時，控件為復選框

• 提交按鈕 <input type="submit" value="提交">

• 重置按鈕 <input type="reset" value="重置">

• 下拉列表框 ` `

• value <option value="提交值">選項</option>

• 選中 selected="selected"

• 多選 multiple="multiple"

• 標簽 <label for="控件id名稱">，標簽的 for 屬性中的值應當與相關控件的 id 屬性 值一定要相同

CSS

基本知識

CSS 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

• 選擇符：又稱選擇器，指明網頁中要應用樣式規(guī)則的元素。

• 聲明：在英文大括號{}中的的就是聲明，屬性和值之間用英文冒號{}分隔。當有多條聲明時，中間可以英文分號;分隔。

從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯(lián)式、嵌入式和外部式三種。優(yōu)先級遵循就近原則，一般來說，內聯(lián)式 > 嵌入式 > 外部式。

• 內聯(lián)式

例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>

• 嵌入式

• 外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 選擇器

常見的類選擇器類型有如下幾種：

• 標簽選擇器，.標簽選擇器名稱{css樣式代碼;}

• 類選擇器，.類選器名稱{css樣式代碼;}

• ID 選擇器，＃類選器名稱{css樣式代碼;}

• 子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素

• 包含選擇器，即加入空格 ,用于選擇指定標簽元素下的后輩元素

• 通用選擇器，匹配html中所有標簽元素，* {css樣式代碼;}類選擇器和ID選擇器都可以應用于任何元素，但 ID 選擇器只能在文檔中使用一次，可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，ID 選擇器是不可以的。

子選擇器和包含選擇器區(qū)別：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外還有兩種選擇符：

• 偽類選擇符，允許給 HTML 不存在的標簽（標簽的某種狀態(tài)）設置樣式。常用的有 a:hover{color:red;}

• 分組選擇符，為 HTML 中多個標簽元素設置同一個樣式時，可以使用分組選擇符,

。例如h1,span{color:red;}

CSS 的繼承、層疊和特殊性

• CSS 的某些樣式是具有繼承性的，繼承是一種規(guī)則，它允許樣式不僅應用于某個特定 HTML 標簽元素，而且應用于其后代。

• 特殊性：不同選擇器具有不同權值，標簽的權值為 1，類選擇符的權值為 10，ID選擇符的權值最高為 100。

• 層疊 就是在 HTML 文件中對于同一個元素可以有多個 CSS 樣式存在，當有相同權重的樣式存在時，會根據(jù)這些 CSS 樣式的前后順序來決定，處于最后面的 CSS 樣式會被應用。

CSS 格式化排版

文字排版

• 字體，body{font-family:"Microsoft Yahei";}

• 字號、顏色，body{font-size:12px;color:#666}

• 粗體，body{font-weight:bold;}

• 斜體，body{font-style:italic;}

• 下劃線，body{font-style:italic;}

• 刪除線，body{text-decoration:line-through;}

段落排版

• 縮進，p{text-indent:2em;}

• 行間距（行高），p{line-height:1.5em;}

• 中文字間距、字母間距，letter-spacing:50px;和word-spacing:50px;

• 對齊，div{text-align:center;}

CSS 盒模型

元素分類

在 CSS 中，HTML 中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯(lián)元素(又叫行內元素)和內聯(lián)塊狀元素。

• 常用的塊狀元素有：

塊級元素特點：

1. 每個塊級元素都從新的一行開始，并且其后的元素也另起一行。

2. 元素的高度、寬度、行高以及頂和底邊距都可設置。

3. 元素寬度在不設置的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設定一個寬度。

設置 display:block就是將元素顯示為塊級元素，從而使元素具有塊狀元素特點。

注：img 標簽與 div 層之間會有空隙的解決方法是：使用 display:block 就可以消除間隙。

• 常用的內聯(lián)元素有：

內聯(lián)元素特點：

1. 和其他元素都在一行上；

2. 元素的高度、寬度及頂部和底部邊距不可設置；

3. 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊狀元素也可以通過代碼 display:inline將元素設置為內聯(lián)元素。

• 常用的內聯(lián)塊狀元素有：

inline-block 元素特點：

1. 和其他元素都在一行上；

2. 元素的高度、寬度、行高以及頂和底邊距都可設置。

內聯(lián)塊狀元素（inline-block）就是同時具備內聯(lián)元素、塊狀元素的特點，代碼 display:inline-block就是將元素設置為內聯(lián)塊狀元素。

盒模型

• 邊框

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

單獨設置下邊框的例子 div{border-bottom:1px solid red;}

• 寬度和高度

CSS 內定義的寬（width）和高（height），指的是 填充以里的內容范圍。一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

W3C 的標準 Box Model:

所以有時會設置 box-sizing: border-box;來避免計算內部元素大小

• 填充(padding)

元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。

例子：

• 邊界(margin)

元素與其它元素之間的距離可以使用邊界（margin）來設置，順序和填充一樣是上，右，下，左。padding 在邊框里，margin 在邊框外。

CSS 布局模型

CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。 在網頁中，元素有三種布局模型：

1. 流動模型（Flow）

2. 浮動模型 (Float)

3. 層模型（Layer）

流動模型

流動模型，流動（Flow）是默認的網頁布局模式。

流動布局模型具有2個比較典型的特征：

1. 塊狀元素 都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式占據(jù)位置。

2. 在流動模型下，內聯(lián)元素 都會在所處的包含元素內從左到右水平分布顯示。

浮動模型

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動。例子：#div1{float:left;}

層模型

CSS 定義了一組定位（positioning）屬性來支持層布局模型。

層模型有三種形式：

1. 絕對定位(position: absolute)

2. 相對定位(position: relative)

3. 固定定位(position: fixed)

• 絕對定位(position: absolute)

如果想為元素設置層模型中的絕對定位，需要設置 position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口。

• 相對定位(position: relative)

如果想為元素設置層模型中的相對定位，需要設置 position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

簡單來說，就是相對元素原來的位置進行移動，元素本身所占的位置會保留。

• 固定定位(position: fixed)

設置 position:fixed;。fixed：表示固定定位，與 absolute 定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed; 屬性功能相同。

Relative 與 Absolute 組合使用,必須遵守下面規(guī)范：

1. 參照定位的元素必須是相對定位元素的前輩元素

2. 參照定位的元素必須加入 position:relative;

3. 定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了

例子(HTML 和 CSS 代碼分別為)：

顏色和長度

設置顏色的方法也有很多種：

• 英文命令顏色，p{color:red;}

• RGB顏色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}

• 十六進制顏色， 這種顏色設置方法是現(xiàn)在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。p{color:#00ffff;}(當你設置的顏色是 16 進制的色彩值時，如果每兩位的值相同，可以縮寫一半，#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國 或者 RGB 配色表長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。

• 像素

• em，就是本元素給定字體的 font-size 值

• % 百分比

設置小技巧

水平居中設置

• 行內元素。如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center來實現(xiàn)的。

• 定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右 margin”值為 auto 來實現(xiàn)居中的。

• 不定寬塊狀元素。

• 加入 table 標簽(包括 <tbody>、<tr>、<td>)，為這個 table 設置“左右 margin 居中”

• 設置 display: inline方法：與第一種類似，顯示類型設為 行內元素，然后使用 text-align:center來實現(xiàn)居中效果，進行不定寬元素的屬性設置。

• 給父元素設置 float 和 position:relative; left:50%，子元素設置 position:relative 和left: -50% 來實現(xiàn)水平居中。

垂直居中設置

• 父元素高度確定的單行文本。通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的。(height: 該元素的高度；line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的 基線間的距離 )。

• 父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標簽，同時設置 vertical-align：middle。

另外，為元素設置以下兩個屬性之一會隱形改變 display 類型，元素的display顯示類型就會自動變?yōu)橐?span>display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素。

position: absolute

float: left 或 float:right