1.<meta>
<meta> 標簽提供關于 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。<meta> 標簽始終位于 head 元素中。
meta 元素主要被用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。
元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。
一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。
name 和 content 屬性的作用是描述頁面的內容:
<meta name="keywords" content="HTML, CSS, XML" />
2.position
relative ：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
image.png
從圖片可以看出保留原來的位置
position: relactive;
left: 30px;
top: 20px;
image.png
absolute: 元素框從文檔流完全刪除，并相對于其包含塊定位。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:absolute;
left:20px
}
從圖片看出，原來位置被完全刪除，文字重疊了。
position: absolute;
left: 30px;
top: 20px;
image.png
3.clip（剪切）
clip:rect(0px 50px 200px 0px); //截上，寬，高，截左
4.Z-index
Z-index可被用于將在一個元素放置于另一元素之后。
Z-index：-1；為負值則放置在另一個元素之后。（透明）
Z-index：1；則會覆蓋原來的元素。
5.常用字符實體
空格
< 小于號 <
> 大于號 >
& 和號 &
" 引號 "
' 撇號 ' (IE不支持)
6.通配符選擇器
顯示為一個星號（*）。該選擇器可以與任何元素匹配，就像是一個通配符。每個元素都適用。
eg:* { color:red; }
7.屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。
<style type="text/css">
a[href] {
color:red;
}
</style>
</head>
<body>
<a >屬性選擇器</a>
//則鏈接會變成紅色的
8.后代選擇器
h1 em {color:red;}
//<h1>標簽內的<em>標簽都是紅色,其他 em 文本（如段落或塊引用中的 em）則不會被選中。
9.子元素選擇器
只針對子一代
h1 > strong {color:red;}
第一個 h1 下面的兩個 strong 元素變為紅色，但是第二個 h1 中的 strong 不受影響
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
10.兄弟選擇器
相鄰兄弟選擇器使用了加號
+
h1 + p {margin-top:50px;}
//選擇緊接在 h1 元素后出現的段落，h1 和 p 元素擁有共同的父元素。h1和p的上邊距均為50px。
11.偽類選擇器
a:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必須被置于 a:hover 之后，才是有效的。
a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS </a>
//假如上面的例子中的鏈接被訪問過，那么它將顯示為紅色。
p:first-child { font-weight: bold;}
//所有p標簽的本身以及第一個子元素加粗
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
//p標簽后面的第一個<i>標簽加粗，第二個不會被加粗
12. :before 偽元素
:before偽元素可以在元素的內容前面插入新內容。
下面的例子在每個 <h1> 元素前面插入一幅圖片：
h1:before
{
content:url(logo.gif);
}
13. :after 偽元素
:after偽元素可以在元素的內容之后插入新內容。
下面的例子在每個 <h1> 元素后面插入一幅圖片：
h1:after
{
content:url(logo.gif);
}
14.:first-letter/:first-line
:first-letter向文本的第一個字母添加特殊樣式。
:first-line 向文本的首行添加特殊樣式。
15.HTML文檔結構
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
16.Scheme（因特網服務）類型
Scheme 訪問 用于
http 超文本傳輸協議 以 http:/開頭的普通網頁。不加密。
https 安全超文本傳輸協議 安全網頁。加密所有信息交換。
ftp 文件傳輸協議 用于將文件下載或上傳至網站。
file 您計算機上的文件。
17.浮動（float）
float: left;
image.png
清除浮動
float:left;
clear:both; //圖像的左側和右側均不允許出現浮動元素
image.png
clear屬性
left在左側不允許浮動元素。
right在右側不允許浮動元素。
both在左右兩側均不允許浮動元素。
none默認值。允許浮動元素出現在兩側。
inherit規定應該從父元素繼承 clear 屬性的值。
18.HTML5
(1)video 添加視頻
<video src= " ...../...ogg" controls = "controls"></video>
controls 屬性供添加播放、暫停和音量控件。
(2)audio 添加音頻
<audio src= " ...../...ogg" controls = "controls"></audio>
video 與audio通用的屬性：
autoplay =" autoplay "如果出現該屬性，則音頻在就緒后馬上播放。
controls ="controls"如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
loop =" loop "如果出現該屬性，則每當音頻結束時重新開始播放。
preload =" preload "如果出現該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
(3)Canves 畫布
<canvas id="myCanvas" width="200" height="100"></canvas>
<script> 在畫布上繪制線條
var canves = document.getElementById("myCanves"); 找到畫布
var cxt=c.getContext("2d"); 二維繪圖（固定）
cxt.fillStyle="#FF0000"; 填充顏色
cxt.fillRect(0,0,150,75); 矩形框大小
cxt.moveTo(10,10); 從坐標（10，10）開始
cxt.lineTo(150,50); 直線到坐標（150,150）
cxt.lineTo(10,50); 再到坐標（10,50）
cxt.stroke(); 顯示移動路線
</script>
<script> 在畫布上放置一幅畫
var canves = document.getElementById("myCanves"); 找到畫布
var cxt=c.getContext("2d"); 二維繪圖（固定）
var img=new Image();
img.src="/..../.png";
cxt.drawImage(img,x,y); 向畫布上繪圖
</script>
(4)Input 類型 - number
number 類型用于應該包含數值的輸入域。
<form method="get">
<input type="number" max="70" min="8" step="7" value="9">
<input type="submit">
</form>
Input 類型 - range
range 類型用于應該包含一定范圍內數字值的輸入域。
range 類型顯示為滑動條。
<form method="get">
選擇：<input type="range" max="70" min="8" >
<input type="submit">
</form>
Input 類型 - Date Pickers（日期選擇器）
HTML5 擁有多個可供選取日期和時間的新輸入類型：
date - 選取日、月、年
<form method="get">
日期：<input type="date" name="user_date" >
<input type="submit">
</form>
month - 選取月、年
<input type="month" name="user_date" >
week - 選取周和年
<input type="week" name="user_date" >
time - 選取時間（小時和分鐘）
<input type="time" name="user_date" >
datetime - 選取時間、日、月、年（UTC 時間）
<input type="datetime" name="user_date" >
datetime-local - 選取時間、日、月、年（本地時間）
<input type="datetime-local" name="user_date" >
(5)datalist 元素
datalist 元素規定輸入域的選項列表。
列表是通過 datalist 內的 option 元素創建的。
如需把 datalist 綁定到輸入域，請用輸入域的 list 屬性引用 datalist 的 id。
<form method="get">
請輸入網址: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
(6)autofocus 屬性
autofocus 屬性規定在頁面加載時，域自動地獲得焦點。
注釋：autofocus 屬性適用于所有 <input> 標簽的類型。
