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 |
