2017.11月8復習總結
1
html(超文本標記語言由瀏覽器解析‘prase‘)
對於中文網頁需要使用 <meta charset="utf-8"> 聲明編碼，否則會出現亂碼。有些瀏覽器會設置 GBK 為默認編碼，則你需要設置為 <meta charset="gbk">。
GBK包含全部中文字符；UTF-8則包含全世界所有國家需要用到的字符。
GBK是在國家標準GB2312基礎上擴容後兼容GB2312的標準（好像還不是國家標準）
UTF-8編碼的文字可以在各國各種支持UTF8字符集的瀏覽器上顯示。
比如，如果是UTF8編碼，則在外國人的英文IE上也能顯示中文，而無需他們下載IE的中文語言支持包。 所以，對於英文比較多的論壇 ，使用GBK則每個字符占用2個字節，而使用UTF－8英文卻只占一個字節。
UTF8是國際編碼，它的通用性比較好，外國人也可以瀏覽論壇，GBK是國家編碼，通用性比UTF8差，不過UTF8占用的數據庫比GBK大~
HTML 不是一種編程語言，而是一種標記語言
HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例
2
可以使用專業的 HTML 編輯器來編輯 HTML，菜鳥教程為大家推薦幾款常用的編輯器：
Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/
每一種操作系統都帶有簡單的文本編輯器：
Windows 用戶可以使用記事本；
Linux 用戶可以選擇幾種不同的文本編輯器，如 vi、vim 或者 emacs ；
Mac 用戶可以使用 OS X 預裝的 TextEdit。
3
經過親自測試得出:
瀏覽器默認為body:100%=16px;
瀏覽器計算得出
h1=32px
h2=24px
h3=18.72px
h4=16px
p=16px
h5=13.28px
h6=12px
font-size尺寸指的是他的高還是寬:
不是寬也不是高也不是對角線，他是一種長度單位，依賴設備的的dpi，而字體渲染是另外一碼事。
打個比方厘米，你說是寬呢還是高呢？
4
默認
註意：瀏覽器會自動地在段落的前後添加空行。（</p> 是塊級元素）
5
<br>單個是換行，多個出現空行
6
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
這裏的del是刪除標簽--出現了在文字中間；<ins>標簽是插入標簽，出現了underline;
My favorite color is blue red!
7
HTML "計算機輸出" 標簽:::
<code> 定義計算機代碼-----單行
<kbd> 定義鍵盤碼
<samp> 定義計算機代碼樣本
<var> 定義變量
<pre> 定義預格式文本-------預留空格文本，可以多行；
按照慣例，引用的文本將以斜體顯示。
用<cite>標簽把指向其他文檔的引用分離出來，尤其是分離那些傳統媒體中的文檔，如書籍、雜誌、期刊等。如果引用的這些文檔有聯機版本，
最好是把該引用包含於一個a元素中，從而把一個超鏈接指向該聯機版本。
<cite>標簽還有一個隱藏功能：它可以使你或者其他人從文檔中自動摘錄參考書目。
可以很容易想象一個瀏覽器，它能夠自動整理引用表格，並把它們作為腳註或者獨立的文檔來顯示。
8
d屬性可用於創建在一個HTML文檔書簽標記。
提示: 書簽是不以任何特殊的方式顯示，在HTML文檔中是不顯示的，所以對於讀者來說是隱藏的。
（您可以使用 id 屬性來替代 name 屬性，命名錨同樣有效。[1]）
在標簽<a> 中使用了href屬性來描述鏈接的地址。
默認情況下，鏈接將以以下形式出現在瀏覽器中：
一個未訪問過的鏈接顯示為藍色字體並帶有下劃線。
訪問過的鏈接顯示為紫色並帶有下劃線。
點擊鏈接時，鏈接顯示為紅色並帶有下劃線。
註意：如果為這些超鏈接設置了 CSS 樣式，展示樣式會根據 CSS 的設定而顯示。
9
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
<base href="http://www.runoob.com/images/" target="_blank">
<meta> 標簽- 使用實例-----name,http-equiv,:http://www.jb51.net/web/70787.html
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免費 Web & 編程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">
10
CSS (Cascading Style Sheets) 用於渲染HTML元素標簽的樣式.
在HTML 4, 原來支持定義HTML元素樣式的標簽和屬性已被棄用。這些標簽將不支持新版本的HTML標簽。
不建議使用的標簽有: <font>, <center>, <strike> <strike>仍然支持</strike>已經不支持這個標簽了。--刪除線
不建議使用的屬性: color 和 bgcolor.
<body bgcolor="#E6E6FA"> ---bgcolor是屬性；
11
註意: 假如某個 HTML 文件包含十個圖像，那麽為了正確顯示這個頁面，需要加載 11 個文件。
加載圖片是需要時間的，所以我們的建議是：慎用圖片。
他的屬性align="middle" .......left,top,等
border，邊框屬性；
12
<img> 定義圖像
<map> 定義圖像地圖
<area> 定義圖像地圖中的可點擊區域
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
1、距形：(左上角頂點坐標為(x1,y1)，右下角頂點坐標為(x2,y2))
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2、圓形：(圓心坐標為(X1,y1)，半徑為r)
<area shape="circle" coords="x1,y1,r" href=url>
3、多邊形：(各頂點坐標依次為(x1,y1)、(x2,y2)、(x3,y3) ......)
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
13
<caption>表格的標題
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。
使用邊框屬性來顯示一個帶有邊框的表格：
跨行或跨列的表格單元格：
<th colspan="2">Telephone</th>---跨行
<th rowspan="2">Telephone:</th>---誇列
table 裏可以嵌套
vertical-align垂直屬性對齊
<table border="1"
cellpadding="10">-----單元格邊距(Cell padding)
<table border="1" cellspacing="0">-----單元格間距(Cell spacing)
<colgroup> 定義表格列的組
<col> 定義用於表格列的屬性
<col span="2" style="background-color:red">
<col style="background-color:yellow">
14
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<ol type="a A 羅馬字母的大小寫 ">type是 列表的屬性
<ul style="list-style-type:disc"> circle square
15
內聯元素在顯示時通常不會以新行開始。
實例: <b>, <td>, <a>, <img>
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。
使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數據。
HTML <span> 元素是內聯元素，可用作文本的容器
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用於為部分文本設置樣式屬性。
16表單
HTML <optgroup> 標簽
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars" disabled>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
label 屬性為選項組規定描述標簽。
disabled 屬性是一個布爾屬性。
disabled 屬性規定選項組應該被禁用。
<select>的屬性
autofocusNew autofocus 規定在頁面加載時下拉列表自動獲得焦點。
disabled disabled 當該屬性為 true 時，會禁用下拉列表。
formNew form_id 定義 select 字段所屬的一個或多個表單。
multiple multiple 當該屬性為 true 時，可選擇多個選項。
name name 定義下拉列表的名稱。
requiredNew required 規定用戶在提交表單前必須選擇一個下拉列表中的選項。
size number 規定下拉列表中可見選項的數目。
17框架
使用 iframe 作為鏈接的目標
iframe 可用作鏈接的目標（target）。
鏈接的 target 屬性必須引用 iframe 的 name 屬性：
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
框架結構標簽（<frameset>）
框架結構標簽（<frameset>）定義如何將窗口分割為框架
每個 frameset 定義了一系列行或列
rows/columns 的值規定了每行或每列占據屏幕的面積
編者註：frameset 標簽也被某些文章和書籍譯為框架集。
18顏色
HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。
每種顏色的最小值是0（十六進制：#00）。最大值是255（十六進制：#FF）。
（1600萬種不同顏色：256 x 256 x 256)
rgba(255,255,0,0.5)可以實現設置顏色透明度的功能，這裏的0.5表示透明度，範圍0~1。
顏色名：antique white --古董白
coral 珊瑚的；珊瑚色的
yellowgreen:黃綠；
Violet 紫羅蘭；
brown:n. 褐色，棕色
navy:深藍色；海軍；DarkBlue ：深藍色；
teal:鴨子，青色；
19腳本
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>-----為了 不支持腳本的瀏覽器應用
提示：如果瀏覽器支持腳本，那麽它不會顯示出 noscript 元素中的文本。
19
<object> 標簽用於包含對象，比如圖像、音頻、視頻、Java applets、ActiveX、PDF 以及 Flash。
20URL
21
<a href="mailto:[email protected]?subject=test&[email protected]&body=use mailto sample">send mail</a>
mailto後跟的是收信人。
可使用參數列表
to 收信人
suject 主題
cc 抄送
bcc 暗抄送
body 內容
22國際標準化組織---ISO----ISO 639-1 為各種語言定義了縮略詞。您可以在 HTML 和 XHTML 中的 lang 和 xml:lang 屬性中使用它們。
寫在html標簽中的lang屬性作用：聲明當前頁面的語言類型。
如：
<html lang=‘en‘></html> //英文
1
<html lang=‘zh‘></html> //中文
1
<html lang=‘ja‘></html> //日文
1
<html lang=‘en-us‘></html> //美式英文
23HTTP 狀態消息
以下列舉了有可能會返回的一系列 HTTP 狀態消息：
2xx: 成功
4xx: 客戶端錯誤
5xx: 服務器錯誤
24
兩種最常用的 HTTP 方法是：GET 和 POST。
超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。
25
下表列出了在網頁字體默認值為 16px 時， px 和 em 及網頁字體百分比的換算數據。
26IE瀏覽器
技術含量最高的是IE10，性能最好的是IE9，國內使用人數最多的是IE7、8，
因為國內大多數還是XP。而且盜版居多，不，是特別多。盜版不會自動更新，
所以IE7、8最多，而且IE9也不支持XP
甚至你可以教會 IE6 (Windows XP 2001) 瀏覽器處理未知的 HTML 元素。
HTML5 定了 8 個新的 HTML 語義（semantic） 元素。所有這些元素都是 塊級 元素。
header, section, footer, aside, nav, main, article, figure {
display: block;
}
為了能讓舊版本的瀏覽器正確顯示這些元素，你可以設置 CSS 的 display 屬性值為 block:
----------------創建新的元素，利用javascriptdedocument.creatElement(‘‘),記得 CSS把其設置為block
你可以為 HTML 添加新的元素。
JavaScript 語句 document.createElement("myHero") 是為 IE 瀏覽器添加新的元素。
EG:
<myHero>我的第一個新元素</myHero>
<script>
document.createElement("myHero")
</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
27
HTML5
swf(shock wave flash)是Macromedia(現已被ADOBE公司收購)公司的動畫設計軟件Flash的專用格式，
被廣泛應用於網頁設計、動畫制作等領域，swf文件通常也被稱為Flash文件。
bdi 指的是 bidi 隔離（Bi-directional Isolation）。
<bdi> 標簽允許您設置一段文本，使其脫離其父元素的文本方向設置。
註釋：只有 IE 9 支持 <command> 標簽，其他之前版本或者之後版本的 IE 瀏覽器不支持 <command> 標簽。
IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 標簽。
28
SVG優勢
與其他圖像格式相比（比如 JPEG 和 GIF），使用 SVG 的優勢在於：
SVG 圖像可通過文本編輯器來創建和修改
SVG 圖像可被搜索、索引、腳本化或壓縮
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
Canvas 與 SVG 的比較
下表列出了 canvas 與 SVG 之間的一些不同之處。
Canvas SVG
依賴分辨率
不支持事件處理器
弱的文本渲染能力
能夠以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪
不依賴分辨率
支持事件處理器
最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
復雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
不適合遊戲應用
29
e.target 是目標對象，e.event是目標所發生的事件。
2017.11月8復習總結