HTML
五大瀏覽器
IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera
瀏覽器內(nèi)核
瀏覽器 | 內(nèi)核 | 備注 |
---|---|---|
IE | Trident | IE、獵豹安全、360極速瀏覽器、百度瀏覽器 |
firefox | Gecko | 可惜這幾年已經(jīng)沒(méi)落了,打開(kāi)速度慢、升級(jí)頻繁、豬一樣的隊(duì)友flash、神一樣的對(duì)手chrome。 |
Safari | webkit | 現(xiàn)在很多人錯(cuò)誤地把 webkit 叫做 chrome內(nèi)核(即使 chrome內(nèi)核已經(jīng)是 blink 了)。蘋果感覺(jué)像被別人搶了媳婦,都哭暈再廁所里面了。 |
chrome | Chromium/Blink | 在 Chromium 項(xiàng)目中研發(fā) Blink 渲染引擎(即瀏覽器核心),內(nèi)置于 Chrome 瀏覽器之中。Blink 其實(shí)是 WebKit 的分支。大部分國(guó)產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開(kāi)發(fā) |
Opera | blink | 現(xiàn)在跟隨chrome用b |
web標(biāo)準(zhǔn)
Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是由W3C組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。W3C 萬(wàn)維網(wǎng)聯(lián)盟是國(guó)際最著名的標(biāo)準(zhǔn)化組織。1994年成立后,至今已發(fā)布近百項(xiàng)相關(guān)萬(wàn)維網(wǎng)的標(biāo)準(zhǔn),對(duì)萬(wàn)維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。
Web 標(biāo)準(zhǔn)的好處
遵循web標(biāo)準(zhǔn)可以讓不同我們寫的頁(yè)面更標(biāo)準(zhǔn)更統(tǒng)一外,還有許多優(yōu)點(diǎn)
1、讓W(xué)eb的發(fā)展前景更廣闊
2、內(nèi)容能被更廣泛的設(shè)備訪問(wèn)
3、更容易被搜尋引擎搜索
4、降低網(wǎng)站流量費(fèi)用
5、使網(wǎng)站更易于維護(hù)
6、提高頁(yè)面瀏覽速度
HTML骨架
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
文檔協(xié)議
-
文檔類型<!DOCTYPE>
DOCTYPE用來(lái)指定HTML的版本。HTML5的聲明是< !DOCTYPE html >
< !DOCTYPE> 聲明位于文檔中的最前面的位置,處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
-
字符集
<meta charset="UTF-8" />
:計(jì)算機(jī)要準(zhǔn)確的處理各種字符集文字,需要進(jìn)行字符編碼,以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。utf-8是目前最常用的字符集編碼方式,常用的字符集編碼方式還有g(shù)bk和gb2312。- gb2312 簡(jiǎn)單中文 包括6763個(gè)漢字 GUO BIAO
- BIG5 繁體中文 港澳臺(tái)等用
- GBK包含全部中文字符 是GB2312的擴(kuò)展,加入對(duì)繁體字的支持,兼容GB2312
- UTF-8則基本包含全世界所有國(guó)家需要用到的字符
HTML常用標(biāo)簽
標(biāo)簽分類
- 單標(biāo)簽
<br/>、<hr/>、<img/>、<input/>
- 雙標(biāo)簽
span、div、ul li、a、h1-h6、p
常用標(biāo)簽
標(biāo)簽名 | 定義 | 說(shuō)明 |
---|---|---|
<p></p> | 段落標(biāo)簽 | 可以把 HTML 文檔分割為若干段落 |
<hr /> | 水平線標(biāo)簽 | 沒(méi)啥可說(shuō)的,就是一條線 |
<br /> | 換行標(biāo)簽 | |
<div></div> | div標(biāo)簽 | 用來(lái)布局的,但是現(xiàn)在一行只能放一個(gè)div |
<span></span> | span標(biāo)簽 | 用來(lái)布局的,一行上可以放好多個(gè)span |
<ul><li></li></ul> | 無(wú)序列表 | ul里只包li標(biāo)簽 |
<ol><li></li></ol> | 有序列表 | |
<dl><dt></dt></dl> | 自定義列表 | |
<img/> | 圖片標(biāo)簽 | 行內(nèi)塊會(huì)元素是下對(duì)齊 |
<a></a> | 超鏈接標(biāo)簽 | |
<h1></h1>...... | 標(biāo)題標(biāo)簽 |
標(biāo)簽常用屬性
標(biāo)簽屬性
img
alt屬性:規(guī)定圖像的替代文本(必須)
-
src 屬性:規(guī)定顯示圖像的 URL(必須)
相對(duì)路徑
? 以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ),而建立出的目錄路徑。因此,當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè) 文件時(shí),所使用的路徑將不相同,故稱之為相對(duì)路徑。
- 圖像文件和HTML文件位于同一文件夾:只需輸入圖像文件的名稱即可,如<img src="logo.gif" />。
- 圖像文件位于HTML文件的下一級(jí)文件夾:輸入文件夾名和文件名,之間用“/”隔開(kāi),如<img src="img/img01/logo.gif" />。
- 圖像文件位于HTML文件的上一級(jí)文件夾:在文件名之前加入“../” ,如果是上兩級(jí),則需要使用 “../ ../”,以此類推,如<img src="../logo.gif" />。
絕對(duì)路徑
絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對(duì),意指當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí),所使用的路徑都是一樣的
“D:\web\img\logo.gif”,或完整的網(wǎng)絡(luò)地址,例如“http://www.baidu.com”。
title屬性:鼠標(biāo)到圖片的提示信息
height屬性
width屬性
超鏈接標(biāo)簽a:
- href屬性:用于指定鏈接目標(biāo)的url地址
target屬性:用于指定鏈接頁(yè)面的打開(kāi)方式 _blank _self
錨點(diǎn)定位:
<a href="#two">
表格標(biāo)簽:table
- 表格屬性: border:表格邊框
- cellspacing:?jiǎn)卧耖g的間距
- cellpadding:?jiǎn)卧竦膬?nèi)容與其邊框的內(nèi)邊距
- align:表格的對(duì)齊方式,通常是left,center,right
- bgcolor:表格的背景顏
- width:表格寬度
- height:表格高度
- border-collaspe:collaspe:邊框合并,不疊加 cellspacing:0:邊框合并,但合并之后的邊框?qū)挾鹊扔谇皟蓚€(gè)邊框?qū)挾戎?/li>
<table>
<tr>
<td>單元格內(nèi)的文字</td>
...
</tr>
...
</table>
<thead></thead>
<tbody></tbody>:用于定義表格的主體。
表單標(biāo)簽:form
form 屬性規(guī)定 label 與哪個(gè)表單元素綁定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
常用表單元素
type | 說(shuō)明 | 常用屬性 |
---|---|---|
text | 文本框 | value,placeholder,autofocus,name |
password | 密碼框 | value,name |
radio | 單選按鈕 | name |
checkbox | 復(fù)選按鈕 | name |
submit | 提交按鈕 | value |
reset | 重置按鈕 | value |
button | 普通按鈕 | value |
下拉菜單
<select>
<option>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
...
</select>
表單域
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
所有標(biāo)簽公有的常用屬性
class、id、style、data-*
塊級(jí)元素、行內(nèi)元素的區(qū)別
常見(jiàn)的塊級(jí)元素有:h1, h2 ,h3, h4, h5, h6 ,p ,div, dl, dt, hr ,ol ,ul, li, form, pre, table, td, th;
常見(jiàn)的行內(nèi)元素有:em,strong,span,button,input,label,code,select,img,textarea
兩者之間的區(qū)別:
1.塊級(jí)元素占據(jù)一整行,內(nèi)聯(lián)元素的寬度是其元素內(nèi)容的寬度,多個(gè)內(nèi)聯(lián)元素排列會(huì)放在同一行里除非放不下,才會(huì)擠到新的一行
2.塊級(jí)元素可以設(shè)置寬度width和高度height,而內(nèi)聯(lián)元素設(shè)置widht和height是無(wú)效的
3.塊級(jí)元素可以包含塊級(jí)元素和內(nèi)聯(lián)元素,而內(nèi)聯(lián)元素只能包含文本
4.塊級(jí)元素可以設(shè)置margin和padding屬性,行內(nèi)元素只有margin-left、margin-right、padding-left、padding-right起作用