1.常見(jiàn)瀏覽器及其內(nèi)核
1.1 瀏覽器內(nèi)核
瀏覽器內(nèi)核又可以分成兩部分:渲染引擎(Rendering Engine)和JavaScript引擎
渲染引擎:它負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入 CSS 等),以及計(jì)算網(wǎng)頁(yè)的顯示方式,然后輸出到顯示設(shè)備上
JavaScript引擎:負(fù)責(zé)解析并執(zhí)行 JavaScript 語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果
1.2 主流瀏覽器及其內(nèi)核分類(lèi)
Trident:IE內(nèi)核
Gecko:FireFox內(nèi)核
Presto:Opera原內(nèi)核(現(xiàn)為Blink)
Webkit:Safari、Chrome內(nèi)核(現(xiàn)在Chrome是Blink內(nèi)核,是Webkit的分支)
EdgeHTML:Edge瀏覽器內(nèi)核
瀏覽器的內(nèi)核不同,他們工作原理、解析也就不同,顯示就會(huì)有差別
2.Web標(biāo)準(zhǔn)
2.1 Web標(biāo)準(zhǔn)的概念
Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是由W3C和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。主要包括結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)三個(gè)方面
結(jié)構(gòu)標(biāo)準(zhǔn):結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi),主要包括XML和XHTML兩個(gè)部分
樣式標(biāo)準(zhǔn):表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式,主要指的是CSS
行為標(biāo)準(zhǔn):行為是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě),主要包括DOM和ECMAScript兩個(gè)部分
主要體現(xiàn)在:HTML標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、頁(yè)面結(jié)構(gòu)編寫(xiě)符合語(yǔ)義化、使用外鏈 css 和 js 腳本、結(jié)構(gòu)行為表現(xiàn)的分離等
2.2 Web標(biāo)準(zhǔn)的好處
- 讓W(xué)eb的發(fā)展前景更廣闊
- 內(nèi)容能被更廣泛的設(shè)備訪問(wèn)
- 更容易被搜尋引擎搜索
- 降低網(wǎng)站流量費(fèi)用
- 使網(wǎng)站更易于維護(hù)
- 提高頁(yè)面瀏覽速度
3.文檔類(lèi)型<!DOCTYPE>
3.1 定義
<!DOCTYPE> 標(biāo)簽位于文檔的最前面,用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范,必需在開(kāi)頭處使用
<!DOCTYPE>標(biāo)簽為所有的XHTML文檔指定XHTML版本和類(lèi)型,只有這樣瀏覽器才能將該網(wǎng)頁(yè)作為有效的XHTML文檔,并按指定的文檔類(lèi)型進(jìn)行解析
3.2 HTML5的DOCTYPE
HTML5只需要寫(xiě) <!DOCTYPE html>
即可,因?yàn)镠TML5 不基于 SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言),因此不需要對(duì) DTD 進(jìn)行引用,但是需要 DOCTYPE 來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)
4.字符集
GB2312 簡(jiǎn)單中文 包括6763個(gè)漢字
BIG5 繁體中文 港澳臺(tái)等用
GBK包含全部中文字符 是GB2312的擴(kuò)展,加入對(duì)繁體字的支持,兼容GB2312
UTF-8則包含全世界所有國(guó)家需要用到的字符
5.HTML骨架結(jié)構(gòu)(以HTML5為例)
<!DOCTYPE html>
<!-- 定義DOCTYPE文檔類(lèi)型 -->
<html lang="zh">
<!-- lang屬性規(guī)定元素內(nèi)容的語(yǔ)言代碼 -->
<head>
<!-- 定義文檔的頭部,它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等 -->
<meta charset="UTF-8"><!-- 定義網(wǎng)頁(yè)字符集信息,charset屬性值是當(dāng)前網(wǎng)頁(yè)字符集編碼 -->
<title>頁(yè)面標(biāo)題</title><!-- 定義頁(yè)面的標(biāo)題 -->
</head>
<body>
<!-- 網(wǎng)頁(yè)的主體部分 -->
</body>
</html>
6.HTML常用標(biāo)簽
6.1 常用的語(yǔ)義化標(biāo)簽
- 標(biāo)題標(biāo)簽
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
- 段落標(biāo)簽
<p> 文本內(nèi)容 </p>
- 文本格式化標(biāo)簽
<strong>加粗強(qiáng)調(diào) <em>斜體強(qiáng)調(diào) <del>刪除 <ins>插入
- 列表
<ul>無(wú)序列表 <ol>有序列表 以上二者中的每一項(xiàng)都是<li>
<dl>自定義列表 <dt>是每一項(xiàng)的標(biāo)題 <dd>是每一項(xiàng)的內(nèi)容
6.2 常用的功能性標(biāo)簽
- 圖像標(biāo)簽
<img src="圖片路徑" alt="圖像不能顯示時(shí)的文本" title="鼠標(biāo)懸停時(shí)的文本">
- 鏈接標(biāo)簽
<a href="鏈接目標(biāo)的url地址" target="鏈接頁(yè)面的打開(kāi)方式">文本或圖像</a>
target屬性取值有_self和_blank兩種,其中_self為默認(rèn)值,_blank為在新窗口中打開(kāi)方式
- 表格標(biāo)簽
<table><!-- 定義表格 -->
<caption></caption><!-- 表格標(biāo)題 -->
<thead><!-- 表格頭部 -->
<tr><!-- 表格一行 -->
<th></th><!-- 表頭項(xiàng) -->
<th></th>
<th></th>
</tr>
</thead>
<tbody><!-- 表格主體 -->
<tr>
<td></td><!-- 表格的一個(gè)單元格 -->
<td></td>
</tr>
</tbody>
</table>
表格中<caption><thead><tbody>一般都可以忽略
可以使用colspan屬性跨列合并 rowspan屬性跨行合并
6.3 表單
- input控件
<input type="text">單行文本輸入框
<input type="password">密碼輸入框
<input type="radio">單選框
<input type="checkbox">復(fù)選框
<input type="button">按鈕
<input type="submit">提交按鈕
<input type="reset">重置按鈕
<input type="file">文件域
<!--
name屬性定義控件名稱(chēng)
value屬性定義控件值
checked用于設(shè)定單選和復(fù)選框被默認(rèn)選中的項(xiàng)
maxlength設(shè)置輸入字符的最大個(gè)數(shù)
-->
- textarea控件
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
文本內(nèi)容
</textarea>
- 下拉菜單
<select>
<option>選項(xiàng)1</option>
<option>選項(xiàng)2</option>
<option>選項(xiàng)3</option>
...
</select>
<!--
1.<select></select>中至少應(yīng)包含一對(duì)<option></option>。
2.在option 中定義selected =" selected "時(shí),當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
-->
- 普通按鈕button
<button>按鈕文字</button>
- 表單域
<form action="url地址" method="提交方式" name="表單名稱(chēng)">
各種表單控件
</form>
<!--
action 在表單收集到信息后,需要將信息傳遞給服務(wù)器進(jìn)行處理,action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
method 用于設(shè)置表單數(shù)據(jù)的提交方式,其取值為get或post
name 用于指定表單的名稱(chēng),以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單
-->
7.HTML語(yǔ)義化的優(yōu)勢(shì)
(1)HTML 語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化,結(jié)構(gòu)更清晰,便于對(duì)瀏覽器、搜索引擎解析;
(2)即使在沒(méi)有樣式 CSS 的情況下也能以一種文檔格式顯示,并且是容易閱讀的;
(3)搜索引擎的爬蟲(chóng)也依賴(lài)于 HTML 標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,有利于 SEO;
(4)使閱讀源代碼的人更容易將網(wǎng)站分塊,便于閱讀、維護(hù)和理解。
8.網(wǎng)站優(yōu)化三大標(biāo)簽
8.1 網(wǎng)頁(yè)title標(biāo)題
title具有不可替代性,是我們的內(nèi)頁(yè)第一個(gè)重要標(biāo)簽,是搜索引擎了解網(wǎng)頁(yè)的入口,和對(duì)網(wǎng)頁(yè)主題歸屬的最佳判斷點(diǎn)
建議:
首頁(yè)標(biāo)題:網(wǎng)站名(產(chǎn)品名)- 網(wǎng)站的介紹
8.2 關(guān)鍵字Keywords
Keywords是頁(yè)面關(guān)鍵詞,是搜索引擎關(guān)注點(diǎn)之一。Keywords應(yīng)該限制在6~8個(gè)關(guān)鍵詞。 用英文逗號(hào) 關(guān)鍵詞1,關(guān)鍵詞2
<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東" />
<meta name="keywords" content="小米,小米5s,紅米Note4,小米MIX,小米商城" />
8.3 網(wǎng)站說(shuō)明Description
簡(jiǎn)要說(shuō)明我們網(wǎng)站的主要做什么的
Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括,多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話:010…”之類(lèi)語(yǔ)句
<meta name="description" content="京東JD.COM-專(zhuān)業(yè)的綜合網(wǎng)上購(gòu)物商城,銷(xiāo)售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書(shū)、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù),為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />
- 描述中出現(xiàn)關(guān)鍵詞,與正文內(nèi)容相關(guān),這部分內(nèi)容是給人看的,所以要寫(xiě)的很詳細(xì),讓人感興趣, 吸引用戶點(diǎn)擊。
- 同樣遵循簡(jiǎn)短原則,字符數(shù)含空格在內(nèi)不要超過(guò) 120 個(gè)漢字。
- 補(bǔ)充在 title 和 keywords 中未能充分表述的說(shuō)明。
文本格式化標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<b > |
定義粗體文字 |
<em > |
定義著重文字 |
<i > |
定義斜體字 |
<small > |
定義小號(hào)字 |
<strong > |
定義加重語(yǔ)氣 |
<sub > |
定義下標(biāo)字 |
<sup > |
定義上標(biāo)字 |
<ins > |
定義插入字 |
<del > |
定義刪除字 |
“計(jì)算機(jī)”輸出標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<code > |
定義計(jì)算機(jī)代碼 |
<kbd > |
定義鍵盤(pán)嗎 |
<samp > |
定義計(jì)算機(jī)代碼樣本 |
<var > |
定義變量 |
<pre > |
定義預(yù)格式文本 |
引文、引用以及標(biāo)簽定義
標(biāo)簽 | 描述 |
---|---|
<abbr > |
定義縮寫(xiě) |
<address > |
定義地址 |
<bdo > |
定義文字方向 |
<blockquote > |
定義長(zhǎng)的引用語(yǔ) |
<q > |
定義短的引用語(yǔ) |
<cite > |
定義引用、引證 |
<dfn > |
定義一個(gè)定義項(xiàng)目 |
HTML 表格標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<table > |
定義表格 |
<th > |
定義表格的表頭 |
<tr > |
定義表格的行 |
<td > |
定義表格的單元 |
<caption > |
定義表格的標(biāo)題 |
<colgroup > |
定義表格列的組 |
<col > |
定義表格列的屬性 |
<thead > |
定義表格的頁(yè)眉 |
<tbody > |
定義表格的主體 |
<tfoot > |
定義表格的頁(yè)腳 |
HTML 列表標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<ol > |
定義有序列表 |
<ul > |
定義無(wú)序列表 |
<li > |
定義列表項(xiàng) |
<dl > |
定義列表 |
<dt > |
定義列表項(xiàng)目 |
<dd > |
定義自定義列表項(xiàng)的描述 |
HTML 分組標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<div > |
定義了文檔的區(qū)域,塊級(jí) (block-level) |
<span > |
用來(lái)組合文檔中的行內(nèi)元素, 內(nèi)聯(lián)元素(inline) |
HTML表單標(biāo)簽
標(biāo)簽 | 描述 |
---|---|
<from > |
定義供用戶輸入的表單 |
<input > |
定義輸入與 |
<textarea > |
定義文本域 |
<label > |
定義了 <input > 元素的標(biāo)簽,一般為輸入標(biāo)題 |
<filedset > |
定義了一組相關(guān)的表單元素,并使用外框包含起來(lái) |
<legend > |
定義了 <fieldset > 元素的標(biāo)題 |
<select > |
定義了下拉選項(xiàng)列表 |
<optgroup > |
定義選項(xiàng)組 |
<option > |
定義下拉列表中的選項(xiàng) |
<button > |
定義一個(gè)點(diǎn)擊按鈕 |
<datalist > |
指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
<keygen > |
定義了表單的密鑰對(duì)生成器字段 |
<output > |
定義一個(gè)計(jì)算結(jié)果 |
HTML 字符實(shí)體標(biāo)簽
顯示結(jié)果 | 描述 | 實(shí)體名稱(chēng) | 實(shí)體編號(hào) |
---|---|---|---|
空格 | |
  |
|
< | 小于號(hào) | < |
< |
> | 大于號(hào) | > |
> |
& | 和號(hào) | & |
& |
“ | 引號(hào) | " |
" |
’ | 撇號(hào) | ' |
' |
¢ | 分 | ¢ |
¢ |
£ | 鎊 | £ |
£ |
¥ | 元 | ¥ |
¥ |
€ | 歐元 | € |
€ |
§ | 小節(jié) | § |
§ |
? | 版權(quán) | © |
  |
? | 注冊(cè)商標(biāo) | ® |
™ |
? | 商標(biāo) | ™ |
  |
× | 乘號(hào) | × |
× |
÷ | 除號(hào) | ÷ |
÷ |
字符 | URL 編碼 |
---|---|
€ | %80 |
£ | %A3 |
? | %A9 |
? | %AE |
à | %C0 |