基礎總結

表格

1.表格

<table border="1">

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

    </tr>

    <tr>

        <td>row 1, cell 1</td>

        <td>row 1, cell 2</td>

    </tr>

    <tr>

        <td>row 2, cell 1</td>

        <td>row 2, cell 2</td>

    </tr>

</table>

 

 

2.跨行或跨列的表格單元格

<h4>單元格跨兩格:</h4>

<table border="1">

<tr>

  <th>Name</th>

  <th colspan="2">Telephone</th>

</tr>

<tr>

  <td>Bill Gates</td>

  <td>555 77 854</td>

  <td>555 77 855</td>

</tr>

</table>

 

 

 

<h4>單元格跨兩列:</h4>

<table border="1">

<tr>

  <th>First Name:</th>

  <td>Bill Gates</td>

</tr>

<tr>

  <th rowspan="2">Telephone:</th>

  <td>555 77 854</td>

</tr>

<tr>

  <td>555 77 855</td>

</tr>

</table>

 

 

3.單元格邊距

<h4>有單元格邊距:</h4>

<table border="1"

cellpadding="10">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>   

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

 

 

4.單元格間距

<h4>單元格間距="10":</h4>

<table border="1" cellspacing="10">

<tr>

  <td>First</td>

  <td>Row</td>

</tr>

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

 

 

 

 

 

 

列表

無序列表

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

 

 

有序列表

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

 

 

自定義列表

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

 

 

 

表單

文本

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密碼

<form>
Password: <input type="password" name="pwd">
</form>

 

 

單選按鈕

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

複選框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

提交按鈕

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

下拉

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

預選下拉

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected>Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

 

 

html5:

 

canvas 與SVG的使用（畫圖）

 

SVG 是一種使用 XML 描述 2D 圖形的語言。

Canvas 經過 JavaScript 來繪製 2D 圖形。

Canvas和SVG是HTML5中主要的2D圖形技術，前者提供畫布標籤和繪製API，後者是一整套獨立的矢量圖形語言

 

SVG適用場景

SVG功能更完善，適合靜態圖片展現，高保真文檔查看和打印的應用場景

 

新多媒體元素

<audio>      定義音頻內容

<video>      定義視頻（video 或者 movie）

<source>     定義多媒體資源 <video> 和 <audio>

<embed>      定義嵌入的內容，好比插件。

<track>      爲諸如 <video> 和 <audio> 元素之類的媒介規定外部文本軌道。

 

 

新表單元素

<datalist>   定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。(相似歷史記錄，點擊表單出來選項)

<keygen>     規定用於表單的密鑰對生成器字段。（加密傳數據庫）

<output>     定義不一樣類型的輸出，好比腳本的輸出。（表單選值方式）

 

 

新的語義和結構元素

<article> 定義頁面獨立的內容區域。

<aside>   定義頁面的側邊欄內容。

<bdi>         容許您設置一段文本，使其脫離其父元素的文本方向設置。

<command> 定義命令按鈕，好比單選按鈕、複選框或按鈕

<details> 用於描述文檔或文檔某個部分的細節

<dialog> 定義對話框，好比提示框

<summary> 標籤包含 details 元素的標題

<figure> 規定獨立的流內容（圖像、圖表、照片、代碼等等）。（能夠定義圖片的屬性）

<figcaption> 定義 <figure> 元素的標題（和figure一塊兒用）

<footer> 定義 section 或 document 的頁腳。

<header> 定義了文檔的頭部區域

<mark>         定義帶有記號的文本。（帶個背景色）

<meter>         定義度量衡。僅用於已知最大和最小值的度量。（進度條）

<nav>         定義運行中的進度（進程）。

<progress> 定義任何類型的任務的進度。（進度條）

<ruby>         定義 ruby 註釋（中文註音或字符）。（加拼音）

<rt>         定義字符（中文註音或字符）的解釋或發音。（和ruby一塊兒用）

<rp>         在 ruby 註釋中使用，定義不支持 ruby 元素的瀏覽器所顯示的內容。（和ruby一塊兒用）

<section> 定義文檔中的節（section、區段）。

<time>         定義日期或時間。

<wbr>         規定在文本中的何處適合添加換行符。

css

css盒子模型

內容，邊框，外邊距，內邊距，就像盒子同樣 設置float（浮動），會脫離文檔流，默認狀況父級高度會跟隨子集高度調整，可是子集脫離文檔就會致使父級高度是0

 

選擇器

1.組選擇器：html input[type='button']    2.li:nth-child(2)  3.p:nth-of-type(3) 第2種和第三種區別在於，第二種數第三個，若是第三個是div就會失效，第三種，數第三個是div就跳過

 

字體

1.個性化字體：@font-face 2.反射：.box-reflect 3.字體描邊 .text-stroke  4.分欄  column-count 分幾欄  column-gap 每欄寬度 column-rule分欄中間樣式

 

圖片

1.想沾滿容器高度：background-size:auto 100% 或者background-size:cover 2.指定背景圖的起始位置 background-origin background-clip

 

變化（transform）漸變（transition）和動畫(animation)

1.transform :roate旋轉 skew（扭曲變換，不支持3D） scale（比例縮放） translate（位移）

2.@keyframes製做動畫

 

flex佈局

1.box-flex:1 width:100px box-flex:1  2.默認橫向佈局，box-orient（控制元素方向） 3.box-align（垂直方向向上、向下、居中） 4.box-pack(水平方向左中右) 5.box-direction(子元素排列順序，正序倒序)

 

css經常使用工具

1.css兼容性前綴 2.css文件壓縮(gulp\grunt)

 

經常使用css佈局方式

1.固定佈局（固定寬度：穩定、簡單、通常最大寬度960） 2.(流式佈局：適合終端窗口變化不太大的狀況，好比pc和pad，還需注意圖片最大寬度，圖片寬度固定的解決方法就是max-width:100% height:auto) 3.（響應式佈局）

 

 

css3:

2D

經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

translate() 移動

rotate()       旋轉

scale() 翻轉

skew() 縮放

matrix() 全部效果一塊兒實現

 

3D

rotateX() x軸旋轉

rotateY() y軸旋轉

 

 

漸變（過渡）

transition

規定您但願把效果添加到哪一個 CSS 屬性上（好比寬度變成300px 或者left：100）

規定效果的時長

 

動畫

 @keyframes 無需觸發

 

動畫：

jQuery animate()  一次性

CSS3 @keyframes  循環的動畫 可執行一次 回到最初

CSS3 transition  一次性,設置過渡屬性

css3 transform  變形