URL地址
就是我們所說的網址：www.jd.com
瀏覽器內核，渲染引擎
Ie內核：triteent
谷歌/歐鵬：blink
火狐：gecko
蘋果：webkit
渲染引擎是出現兼容性的根本問題
-html概念:hyper Text Markup Language (超文本標記語言)
Html結構標准
- <!DOCTYPE html> //聲明文檔類型
- <html>//根標簽
- <head>//頭部標簽
- <title></title>//標題標簽
- </head>
- <body>//主題標簽
- </body>
- </html>
后綴名不能決定文件的格式，只能決定文檔打開的方式
Html標簽分類
超文本：超鏈接（實現頁面跳轉）
結構規則：HTML（Hyper Text Markup Language）
樣式規則：CSS（Cascading Style Sheets）
行為規則：JS（JavaScript）
Html標簽分類： 1 雙標簽 2 單標簽
Html標簽之間的關系: 1 嵌套關系 2 並列關系
Html單標記：
橫線標記 <hr/> 換行標記<br/>
注釋標記<!– 注釋文本--> ctrl+/
Html雙標記
-標題標記 <hn></hn> n 取值1-6
-段落標記<p></p>
| 標簽名字 |
標簽作用 |
標簽屬性 |
Display |
| <!DOCTYPE > |
定義文檔類型 |
|
|
| <p></p> |
段落標簽，文本內容（上下自動產生一個空白行，<br/>不會） |
|
|
| <h1-h6> |
標題標簽：一個頁面只能出現一次h1 因為H1搜索權重高 影響SEO搜索優化 |
塊級元素 |
|
| <font> |
文本標簽 |
|
|
| <a> |
定義一個超鏈接 |
Href=“鏈接的網址” title=“提示的文字” target=“鏈接在何處打開” |
Line |
| <abbr> |
定義縮寫 |
Title=“縮寫前的全稱” |
Line |
| <area> |
定義熱點，總是嵌套在<map>中實用
|
Alt：定義替換的文字 Cords：熱點坐標值 圓形（circle）：（x，y，r） X,y定義了遠點坐標，R半徑 方形（rect）：（x1,y1,x2,y2,） X1,y1:定義了左上角頂點 2x,y2:定義了右下角頂點 (網頁圖片左上角坐標是：0，0) Href：目標的鏈接 Target：何地打開鏈接 圖片的usemap屬性要和map的那么屬性一樣，並且圖片的usemap屬性值要加井號# |
|
| Base |
為頁面內所有鏈接規定默認地址或者默認目標 位於head內部 |
Href=“鏈接地址URL” Target=“在何地打開鏈接”
|
|
| Bdo |
定義文字方向 |
Dir=“ltr（左）/rtl（右）” |
|
| Body |
定義文檔的主題 |
|
|
| Button |
定義按鈕 |
Disabled=“disabled”禁用此按鈕 Name：按鈕名稱 Type=“sibmit/reset/button” 提交/重置/普通按鈕 Value=“按鈕的初始值” |
Line |
| Caption |
定義表格標題，必須緊跟table標簽，只能對每個標簽定義一個標題，通常居中與表格之上 |
|
|
| Code |
定義計算機代碼文本 |
|
|
| Col |
為一個或多個列設置屬性 |
Span：規定行橫跨的列數 Align水平對其方式 Valign：垂直對其方式
|
|
| Div |
定義文檔中的分區 |
|
|
| Dl，dt，dd |
自定義列表 |
|
|
| Form |
表單標簽 |
|
|
| Frame |
定義一個框架 |
|
|
| Frameset |
定義一個框架集 |
Col：定義框架的列數 Rew：定義框架水平行 |
|
| Img |
定義圖像 |
Src=“圖像路徑” Alt=“替換文本” Title=“提示文字” Width、height
|
|
| Input |
定義輸入控件 |
Type=“text/button/password/checkbox/radio/submit/reset” 文本/按鈕/密碼/復選框/單選框/提交按鈕/重置按鈕 Value=“元素的默認值” |
|
| Lable |
為input元素定義標注， Lable屬性的for應與被綁定的元素的id元素相同 |
|
|
| Link |
定義文檔與外部資源的聯系，最常見的用途是鏈接樣式表 |
Charset=“鏈接文檔的字符編碼方式” Href=“被鏈接文檔的路徑” Rel=“當前文本與被鏈接的文本的關系” Rev=“定義被鏈接的文本與當前文本的關系”
|
|
| Map |
定義熱點鏈接 |
Id/name |
|
| Meta |
定義文檔的元數據 |
Content=“內容” http-equiv=“把content屬性關聯到http頭部” Name=“description/keywords/” |
|
| Object |
定義內嵌對象 |
|
|
| Ol、ul、 |
定義有序/無序列表 |
|
|
| Select>Option |
定義下拉列表 |
Selected=“selected”定義默認被選中項 Value=“定義被發往服務器的值” Disabled=”disabled”被禁用的項 |
|
| Span |
定義文檔中的行內元素 |
|
Line |
| Style |
定義內嵌式樣式表 |
Type=“text/css” |
|
| Sub/sup |
定義下標/上標文本 |
|
|
| Table/tr/td |
定義表格 |
Border=“邊框”
|
|
| Th |
定義表頭單元格 |
<tr><th></th></tr> |
|
| Textarea |
定義多行文本輸入框 |
Cols=“文本可見寬度” Rows=“文本可見高度” Readonly=“readonly”規定只讀
|
|
| Tfoot |
定義表格頁腳 |
|
<font></font> 控制網頁文字顏色，大小，字體。
<strong></strong> 與 <b></b> 文字加粗
<em></em> 與 <i></i> 文字斜體
<ins></ins> 與 <u></u> 文字下划線
<del></del> 與 <s></s> 文字刪除線
超鏈接
href：鏈接到的地址（必寫屬性）
target：新鏈接在哪打開 _blank 在新窗口打開
title：提示文本
<base target=”_blank”>寫在head之中，作用是讓所以的超鏈接都在新窗口打開
Base 作用是使頁面內所有超鏈接指向同一目標或者同一個鏈接
路徑
●相對路徑：相對於自己出發找其他文件
跳出文件夾就要使用 （ . . / ）
★往下一級目錄用（ / ） 往上一級目錄用（ . . / ）
●絕對路徑：文件完整的路徑
<Img src=”圖像URL” alt=”圖像不能顯示時的替換文本” title=”鼠標懸浮時顯示的內容” width/height=”XX” / >
<img src=”路徑” alt=“替換圖片文本，對SEO優化有好處” title=“提示文本（鼠標放到圖片上顯示的文字）”
單獨更改img的寬或者高 圖片等比縮放 不會變形
同時設置img的寬高會導致圖片變形
沒有定義寬高的時候按照圖片尺寸的100%的尺寸顯示
<a hrf=”跳轉目標” target = “目標窗口彈出方式_self / _blank”> 文本或圖像 </a>
<a href=”#”>此處為空鏈</a>
錨點：
定義<a id=“md”></a>
<a href = “#id”>鏈接文本</a>
注意需要英文的 ; 結尾才生效
| 特殊字符 |
描述 |
字符的代碼 |
|
|
空格符 |
 ； |
| < |
小於號 |
<； |
| > |
大於號 |
>； |
| & |
和號 |
&； |
| ￥ |
人民幣 |
&； |
| © |
版權 |
©； |
| ® |
注冊商標 |
®； |
| ° |
攝氏度 |
°； |
| ± |
正負號 |
± ； |
| × |
乘號 |
×； |
| ÷ |
除號 |
÷ ； |
| ² |
平方2（上標2） |
²； |
| ³ |
立方3（上標3） |
³； |
音樂標簽
Embed
Hidden=“true” 隱藏播放器
列表（list）分為 ：
無序列表UL
有序列表ol
自定義列表 dl
無序列表ul：
<UL>
<li> 列表項目1</li>
</ul>
list-style:none；取消列表樣式 disc/square/circle/
下圖
有序列表ol
< ol type = 1/ a / A / i / I / start=” 2 / b / B / ii / II / ”>
< li > </li>
</ol>
自定義列表dl
<dl>
<dt>123</dt>
<dt>weqwe</dt>
<dt>qweq</dt>
</dl>
滾動marquee
HTML頭部標簽
| <head> |
定義關於文檔的信息 |
| <title> |
定義文檔標題 |
| <base> |
定義頁面上所有鏈接的默認地址或默認目標 |
| <link> |
定義文檔與外部資源的關系 |
| <meta> |
定義HTML文檔的元數據 |
| <script> |
定義客戶端腳本 |
| <style> |
定義文檔的樣式信息 |
Base元素
- <head>
- <base href="http://www.w3school.com.cn/images/" />
- <base target="_blank" />
- </head>
Base標簽為頁面所有鏈接都指向默認地址或者默認目標
Link元素
- <head>
- <link rel="stylesheet" type="text/css" href="mystyle.css" /> //外鏈樣式
- <link rel=”shortcut icon（只用icon也可以）” type=“image/x-icon” href=”圖標路徑”> //網頁快捷圖標
- </head>
Link：標簽定義文檔與外部資源之間的關系
a) Rel：屬性定義該標簽關聯的樣式表標簽
b) Href：定義該便簽所鏈接的外部資源的URL地址，可相對地址，可以是絕對地址
c) Type：定義文檔類型
d) Media：設置屬性調用的資源主要針對什么設備而使用
- Screen：針對計算器機顯示器的樣式
- All：所以的設備
- <style type=”text/css”>
- @import URL(“css/base.css”);
- </style>//不建議使用
Meta元數據
元數據metadata是關於數據的信息，元數據不會顯示在頁面上，對與機器是可讀的。
Meta元素被用來規定頁面的描述、關鍵詞、文檔的作者、最后的修改時間以及其他元數據。
Meta標簽始終位於head元素中。
元數據可用於瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或者其他web服務。
◆ 一些搜索引擎會利用meta元素的name和conteng屬性來索引你的頁面
Meta 標簽介紹
Meta屬性有兩種：name和http-equiv 。
<meta name = “generator” content = ““”> 用以說明生成工具
<meta name = “keywords” content = “ ”> 向搜索引擎說明自身網頁關鍵詞
<meta name = “description” content =” “> 告訴搜索引擎本站點主要內容
<meta name = “Author” content = “你的名字”> 告訴其制作者的名字
<meta name = “Robots” content = “all/none/index/noindex/follow/nofollow”>
設定為all：文件將被檢索，且頁面上的鏈接可以被查詢；
設定為none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
設定為index：文件將被檢索；
設定為follow：頁面上的鏈接可以被查詢；
設定為noindex：文件將不被檢索，但頁面上的鏈接可以被查詢；
設定為nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
http-equiv屬性
<meta http-equiv=”content-Type” content = “text/html”; charset=gb_2312”>
描述網頁屬性 編碼
<meta http-equiv=”refresh” content=”5 ; URL=http://www.123.com”/>
網頁跳轉
URL編碼
URL只能使用ASCII字符集通過因特網進行發送
由於 URL 常常會包含 ASCII 集合之外的字符，URL 必須轉換為有效的 ASCII 格式。
URL 編碼使用 "%" 其后跟隨兩位的十六進制數來替換非 ASCII 字符。
URL 不能包含空格。URL 編碼通常使用 + 來替換空格。
字符集 charset
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312
gb2312 簡單中文
GBK包含全部中文字符 繁體
BIG5 繁體中文
UTF-8則包含全世界所有國家需要用到的字符
表格 table
最簡單的表格 <table>
<caption>表格的名字</caption>
< tr >
<th>加粗居中</th>
<td> 普通 </td>
</tr>
</table>
< table border = “0” > 邊框
< table cellspacing = “0” > 單元格與單元格之間的距離
< table cellpadding = “0” > 文字與單元格之間的距離
< table width= “0” > 寬度
< table height= “0” > 高度
< table align= “ lift / right / center ” > 對齊方式
< table bgcolor= “ white/ red/...” > 背景色
表格的結構
在使用表格進行布局時，可以將表格划分為頭部、主體和頁腳，具體 如下所示：
<thead></thead>：用於定義表格的頭部，必須位於<table></table>標記中，一般包含網頁的 logo和導航等頭部信息。
<tfoot></ tfoot >：用於定義表格的頁腳，位於<table></table>標記中<thead></thead>標記之 后，一般包含網頁底部的企業信息等。
<tbody></tbody>：用於定義表格的主體，位於<table></table>標記中<tfoot></ tfoot >標記之 后，一般包含網頁中除頭部和底部之外的其他內容。
Colspan 合並同一行 rowspan 合並同一列
表單 form
表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、 重置按鈕等。
提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單域：他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表 單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單 域，表單中的數據就無法傳送到后台服務器。
<from name = “from_name” action = “url” method = “get/post”> ...</form>
Name ：定義表單的名稱
Method ： 傳送方式 默認get
Get：通過地址欄提交信息，安全性差
Post：通過文件提交信息，安全性高
Action ： 指定表單處理程序的位置（服務器端腳本處理程序）
Fieldset ： 把表單分組
Legend ：分組名稱
http方法
在客戶機和服務器之間進行請求-響應時，兩種最常被用到的方法是：GET 和 POST。
get：從指定的資源請求數據
有關 GET 請求的其他一些注釋：
- GET 請求可被緩存
- GET 請求保留在瀏覽器歷史記錄中
- GET 請求可被收藏為書簽
- GET 請求不應在處理敏感數據時使用
- GET 請求有長度限制
- GET 請求只應當用於取回數據
Post：向指定的資源提交要被處理的數據
有關 POST 請求的其他一些注釋：
- POST 請求不會被緩存
- POST 請求不會保留在瀏覽器歷史記錄中
- POST 不能被收藏為書簽
- POST 請求對數據長度沒有要求
比較 GET 與 POST
|
|
GET |
POST |
| 后退按鈕/刷新 |
無害 |
數據會被重新提交 |
| 書簽 |
可收藏為書簽 |
不可收藏為書簽 |
| 緩存 |
能被緩存 |
不能緩存 |
| 編碼類型 |
application/x-www-form-urlencoded |
application/x-www-form-urlencoded 或 multipart/form-data。為二進制數據使用多重編碼。 |
| 歷史 |
參數保留在瀏覽器歷史中 |
參數不會保存在瀏覽器歷史中。 |
| 對數據長度的要求 |
是的。當發送數據時，GET 方法向 URL 添加數據；URL 的長度是受限制的（URL 的最大長度是 2048 個字符）。 |
無限制 |
| 對數據類型的限制 |
只允許 ASCII 字符。 |
沒有限制。也允許二進制數據。 |
| 安全性 |
與 POST 相比，GET 的安全性較差，因為所發送的數據是 URL 的一部分。 |
POST 比 GET 更安全，因為參數不會被保存在瀏覽器歷史或 web 服務器日志中 |
| 可見性 |
數據在 URL 中對所有人都是可見的。 |
數據不會顯示在 URL 中。 |
Input控件
< Input type = “控件類型”>
| 控件語法 |
含義 |
| <input type=”text” name=“”> |
文本輸入框 |
| <input type=“password”> |
密碼輸入框 |
| <input type=“radio” name=“gender”> |
單選框 |
| <input type=“checkbox”> |
復選框（多選框） |
| <input type=“file”> |
文件上傳控件 |
| <input type=“button”> |
普通按鈕 value 設置顯示文字 |
l HTML5表單標簽
<Input type=“url”>：網址提交；
<Input type=“date”>：顯示日期控件
<Input type=“time”>：時間控件
<input type=”emial”>：郵件控件
<input type=”number” step=“5”(默認1，值是幾每次跳幾)>：數字控件
<input type=”range” step=“5”>：滑塊控件
Step：默認1，值是幾每次跳幾
Textarea 控件
textarea控件可以輕松地創建多行文本輸入框
<textera cols = “每行顯示的字符數” rows = “ 顯示的行數” > 文本提示</textera>
Select 控件
用來制作下拉菜單
<select size = “ 指定下拉菜單的可見選項 ” multiple = “multiple”>
<option > 選項1</option>
<option selected = “selected”> 選項2</option>
</select>
Select>option：下拉列表
Selectked：selectked：默認選項
Multiple：multiple 可多選
Size：定義列表顯示的項
Optgroup：對option進行分組
<fieldset>
<!-- 表格名字 -->
<legend>賬戶信息</legend>
<!-- 表格的內容 -->
<font color="red" size="2">*</font>用戶名:<input type="text"><br><br>
<font color="red" size="2">*</font>密 碼：<input type="password">
<br><input type="radio" checked="checked">男 <br>
<input type="radio">女
</fieldset>
<fieldset>
HTML腳本
JavaScript是HTML文檔具有更強的動態性和交互性
JavaScript最常用於圖片操作、表單驗證、動態內容更新
<noscript> 標簽提供無法使用腳本時的替代內容，比方在瀏覽器禁用腳本時，或瀏覽器不支持客戶端腳本時。
noscript 元素可包含普通 HTML 頁面的 body 元素中能夠找到的所有元素。
只有在瀏覽器不支持腳本或者禁用腳本時，才會顯示 noscript 元素中的內容：
- <script type="text/javascript">
- document.write("Hello World!")
- </script>
- <noscript>Your browser does not support JavaScript!</noscript>
HTML統一資源定位器URL
URL（Unifrom Resource Locator）也被稱為網址
URL可由單詞組成，比如www.taobao.com，或者因特網協議（IP）地址：192.168.12.122。大多數人上網的時候會輸入網站的域名。
當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標簽指向萬維網上的一個地址。
統一資源定位器（URL）用於定位萬維網上的文檔（或其他數據）。
網址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的語法規則：
scheme://host.domain:port/path/filename
◆解釋：
scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 w3school.com.cn
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位於網站的根目錄中）。
filename - 定義文檔/資源的名稱
| Scheme（服務類型） |
訪問 |
用於… |
| http |
超文本傳輸協議 |
以http://開頭的普通網頁，不加密 |
| https |
安全超文本傳輸協議 |
安全網頁，加密所有信息交換 |
| ftp |
文件傳輸協議 |
用於將文件上傳或者下載 |
| File |
|
您計算機上的文件 |
HTML WEB Server
ISP：因特網服務提供商
大多數小公司會把網站存放到由 ISP 提供的服務器上
HTML多媒體
Web 上的多媒體指的是音效、音樂、視頻和動畫。
HTML5多媒體標簽
<embed src=“路徑” width=“” height=“”></embed>
XHTML
什么是XHTML？
- XHTML 指的是可擴展超文本標記語言
- XHTML 與 HTML 4.01 幾乎是相同的
- XHTML 是更嚴格更純凈的 HTML 版本
- XHTML 是以 XML 應用的方式定義的 HTML
- XHTML 是 2001 年 1 月發布的 W3C 推薦標准
- XHTML 得到所有主流瀏覽器的支持
為什么使用 XHTML？
因特網上的很多頁面包含了“糟糕”的 HTML。
XHTML 是一種必須正確標記且格式良好的標記語言
與 HTML 相比最重要的區別
文檔結構
- XHTML DOCTYPE 是強制性的
- <html> 中的 XML namespace 屬性是強制性的
- <html>、<head>、<title> 以及 <body> 也是強制性的
- XHTML 元素必須正確嵌套
- XHTML 元素必須始終關閉
- XHTML 元素必須小寫
- XHTML 文檔必須有一個根元素
- XHTML 屬性必須使用小寫
- XHTML 屬性值必須用引號包圍
- XHTML 屬性最小化也是禁止的
元素語法
- XHTML 元素必須正確嵌套
- XHTML 元素必須始終關閉
- XHTML 元素必須小寫
- XHTML 文檔必須有一個根元素
屬性語法
- XHTML 屬性必須使用小寫
- XHTML 屬性值必須用引號包圍
- XHTML 屬性最小化也是禁止的
XHTML 文檔必須進行 XHTML 文檔類型聲明
（XHTML DOCTYPE declaration）。
如何從 HTML 轉換到 XHTML
- 向每張頁面的第一行添加 XHTML <!DOCTYPE>
- 向每張頁面的 html 元素添加 xmlns 屬性
- 把所有元素名改為小寫
- 關閉所有空元素
- 把所有屬性名改為小寫
- 為所有屬性值加引號