1.常見瀏覽器及其內(nèi)核
1.1 瀏覽器內(nèi)核
瀏覽器內(nèi)核又可以分成兩部分：渲染引擎(Rendering Engine)和JavaScript引擎
渲染引擎：它負責取得網(wǎng)頁的內(nèi)容（HTML涣易、XML、圖像等等）、整理訊息（例如加入 CSS 等）搂誉，以及計算網(wǎng)頁的顯示方式，然后輸出到顯示設(shè)備上
JavaScript引擎：負責解析并執(zhí)行 JavaScript 語言來實現(xiàn)網(wǎng)頁的動態(tài)效果
1.2 主流瀏覽器及其內(nè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)核不同眼姐，他們工作原理、解析也就不同佩番，顯示就會有差別
2.Web標準
2.1 Web標準的概念
Web標準不是某一個標準众旗，而是由W3C和其他標準化組織制定的一系列標準的集合。主要包括結(jié)構(gòu)（Structure）答捕、表現(xiàn)（Presentation）和行為（Behavior）三個方面
結(jié)構(gòu)標準：結(jié)構(gòu)用于對網(wǎng)頁元素進行整理和分類逝钥，主要包括XML和XHTML兩個部分
樣式標準：表現(xiàn)用于設(shè)置網(wǎng)頁元素的版式、顏色拱镐、大小等外觀樣式艘款，主要指的是CSS
行為標準：行為是指網(wǎng)頁模型的定義及交互的編寫，主要包括DOM和ECMAScript兩個部分
主要體現(xiàn)在：HTML標簽閉合沃琅、標簽小寫哗咆、不亂嵌套、頁面結(jié)構(gòu)編寫符合語義化益眉、使用外鏈 css 和 js 腳本晌柬、結(jié)構(gòu)行為表現(xiàn)的分離等
2.2 Web標準的好處
- 讓Web的發(fā)展前景更廣闊
- 內(nèi)容能被更廣泛的設(shè)備訪問
- 更容易被搜尋引擎搜索
- 降低網(wǎng)站流量費用
- 使網(wǎng)站更易于維護
- 提高頁面瀏覽速度
3.文檔類型<!DOCTYPE>
3.1 定義
<!DOCTYPE> 標簽位于文檔的最前面姥份，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規(guī)范，必需在開頭處使用
<!DOCTYPE>標簽為所有的XHTML文檔指定XHTML版本和類型年碘，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的XHTML文檔澈歉，并按指定的文檔類型進行解析
3.2 HTML5的DOCTYPE
HTML5只需要寫 <!DOCTYPE html>即可，因為HTML5 不基于 SGML(標準通用標記語言)屿衅，因此不需要對 DTD 進行引用埃难，但是需要 DOCTYPE 來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）
4.字符集
GB2312 簡單中文 包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK包含全部中文字符 是GB2312的擴展，加入對繁體字的支持涤久，兼容GB2312
UTF-8則包含全世界所有國家需要用到的字符
5.HTML骨架結(jié)構(gòu)(以HTML5為例)
<!DOCTYPE html>
<!-- 定義DOCTYPE文檔類型 -->
<html lang="zh">
<!-- lang屬性規(guī)定元素內(nèi)容的語言代碼 -->
<head>
<!-- 定義文檔的頭部涡尘，它是所有頭部元素的容器。<head> 中的元素可以引用腳本响迂、指示瀏覽器在哪里找到樣式表考抄、提供元信息等等 -->
<meta charset="UTF-8"><!-- 定義網(wǎng)頁字符集信息，charset屬性值是當前網(wǎng)頁字符集編碼 -->
<title>頁面標題</title><!-- 定義頁面的標題 -->
</head>
<body>
<!-- 網(wǎng)頁的主體部分 -->
</body>
</html>
6.HTML常用標簽
6.1 常用的語義化標簽
- 標題標簽
<h1>蔗彤、<h2>川梅、<h3>、<h4>然遏、<h5>和<h6>
- 段落標簽
<p> 文本內(nèi)容 </p>
- 文本格式化標簽
<strong>加粗強調(diào) <em>斜體強調(diào) <del>刪除 <ins>插入
- 列表
<ul>無序列表 <ol>有序列表 以上二者中的每一項都是<li>
<dl>自定義列表 <dt>是每一項的標題 <dd>是每一項的內(nèi)容
6.2 常用的功能性標簽
- 圖像標簽
<img src="圖片路徑" alt="圖像不能顯示時的文本" title="鼠標懸停時的文本">
- 鏈接標簽
<a href="鏈接目標的url地址" target="鏈接頁面的打開方式">文本或圖像</a>
target屬性取值有_self和_blank兩種挑势，其中_self為默認值，_blank為在新窗口中打開方式
- 表格標簽
<table><!-- 定義表格 -->
<caption></caption><!-- 表格標題 -->
<thead><!-- 表格頭部 -->
<tr><!-- 表格一行 -->
<th></th><!-- 表頭項 -->
<th></th>
<th></th>
</tr>
</thead>
<tbody><!-- 表格主體 -->
<tr>
<td></td><!-- 表格的一個單元格 -->
<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屬性定義控件名稱
value屬性定義控件值
checked用于設(shè)定單選和復(fù)選框被默認選中的項
maxlength設(shè)置輸入字符的最大個數(shù)
-->
- textarea控件
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
文本內(nèi)容
</textarea>
- 下拉菜單
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
<!--
1.<select></select>中至少應(yīng)包含一對<option></option>啦鸣。
2.在option 中定義selected =" selected "時，當前項即為默認選中項来氧。
-->
- 普通按鈕button
<button>按鈕文字</button>
- 表單域
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
<!--
action 在表單收集到信息后诫给，需要將信息傳遞給服務(wù)器進行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址啦扬。
method 用于設(shè)置表單數(shù)據(jù)的提交方式中狂，其取值為get或post
name 用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單
-->
7.HTML語義化的優(yōu)勢
（1）HTML 語義化讓頁面的內(nèi)容結(jié)構(gòu)化扑毡，結(jié)構(gòu)更清晰胃榕，便于對瀏覽器、搜索引擎解析瞄摊；
（2）即使在沒有樣式 CSS 的情況下也能以一種文檔格式顯示勋又，并且是容易閱讀的；
（3）搜索引擎的爬蟲也依賴于 HTML 標記來確定上下文和各個關(guān)鍵字的權(quán)重换帜，有利于 SEO楔壤；
（4）使閱讀源代碼的人更容易將網(wǎng)站分塊，便于閱讀惯驼、維護和理解蹲嚣。
8.網(wǎng)站優(yōu)化三大標簽
8.1 網(wǎng)頁title標題
title具有不可替代性递瑰，是我們的內(nèi)頁第一個重要標簽，是搜索引擎了解網(wǎng)頁的入口隙畜，和對網(wǎng)頁主題歸屬的最佳判斷點
建議：
首頁標題：網(wǎng)站名（產(chǎn)品名）- 網(wǎng)站的介紹
8.2 關(guān)鍵字Keywords
Keywords是頁面關(guān)鍵詞抖部，是搜索引擎關(guān)注點之一。Keywords應(yīng)該限制在6～8個關(guān)鍵詞议惰。 用英文逗號 關(guān)鍵詞1,關(guān)鍵詞2
<meta name="Keywords" content="網(wǎng)上購物,網(wǎng)上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數(shù)碼,配件,手表,存儲卡,京東" />
<meta name="keywords" content="小米,小米5s,紅米Note4,小米MIX,小米商城" />
8.3 網(wǎng)站說明Description
簡要說明我們網(wǎng)站的主要做什么的
Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括慎颗，多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話：010…”之類語句
<meta name="description" content="京東JD.COM-專業(yè)的綜合網(wǎng)上購物商城,銷售家電、數(shù)碼通訊换淆、電腦哗总、家居百貨、服裝服飾倍试、母嬰讯屈、圖書、食品等數(shù)萬個品牌優(yōu)質(zhì)商品.便捷县习、誠信的服務(wù)涮母，為您提供愉悅的網(wǎng)上購物體驗!" />
- 描述中出現(xiàn)關(guān)鍵詞，與正文內(nèi)容相關(guān)躁愿，這部分內(nèi)容是給人看的叛本，所以要寫的很詳細，讓人感興趣彤钟， 吸引用戶點擊来候。
- 同樣遵循簡短原則，字符數(shù)含空格在內(nèi)不要超過 120 個漢字逸雹。
- 補充在 title 和 keywords 中未能充分表述的說明营搅。
文本格式化標簽
| 標簽 | 描述 |
|---|---|
<b> |
定義粗體文字 |
<em> |
定義著重文字 |
<i> |
定義斜體字 |
<small> |
定義小號字 |
<strong> |
定義加重語氣 |
<sub> |
定義下標字 |
<sup> |
定義上標字 |
<ins> |
定義插入字 |
<del> |
定義刪除字 |
“計算機”輸出標簽
| 標簽 | 描述 |
|---|---|
<code> |
定義計算機代碼 |
<kbd> |
定義鍵盤嗎 |
<samp> |
定義計算機代碼樣本 |
<var> |
定義變量 |
<pre> |
定義預(yù)格式文本 |
引文、引用以及標簽定義
| 標簽 | 描述 |
|---|---|
<abbr> |
定義縮寫 |
<address> |
定義地址 |
<bdo> |
定義文字方向 |
<blockquote> |
定義長的引用語 |
<q> |
定義短的引用語 |
<cite> |
定義引用梆砸、引證 |
<dfn> |
定義一個定義項目 |
HTML 表格標簽
| 標簽 | 描述 |
|---|---|
<table> |
定義表格 |
<th> |
定義表格的表頭 |
<tr> |
定義表格的行 |
<td> |
定義表格的單元 |
<caption> |
定義表格的標題 |
<colgroup> |
定義表格列的組 |
<col> |
定義表格列的屬性 |
<thead> |
定義表格的頁眉 |
<tbody> |
定義表格的主體 |
<tfoot> |
定義表格的頁腳 |
HTML 列表標簽
| 標簽 | 描述 |
|---|---|
<ol> |
定義有序列表 |
<ul> |
定義無序列表 |
<li> |
定義列表項 |
<dl> |
定義列表 |
<dt> |
定義列表項目 |
<dd> |
定義自定義列表項的描述 |
HTML 分組標簽
| 標簽 | 描述 |
|---|---|
<div> |
定義了文檔的區(qū)域转质，塊級 (block-level) |
<span> |
用來組合文檔中的行內(nèi)元素， 內(nèi)聯(lián)元素(inline) |
HTML表單標簽
| 標簽 | 描述 |
|---|---|
<from> |
定義供用戶輸入的表單 |
<input> |
定義輸入與 |
<textarea> |
定義文本域 |
<label> |
定義了 <input> 元素的標簽帖世，一般為輸入標題 |
<filedset> |
定義了一組相關(guān)的表單元素休蟹，并使用外框包含起來 |
<legend> |
定義了 <fieldset> 元素的標題 |
<select> |
定義了下拉選項列表 |
<optgroup> |
定義選項組 |
<option> |
定義下拉列表中的選項 |
<button> |
定義一個點擊按鈕 |
<datalist> |
指定一個預(yù)先定義的輸入控件選項列表 |
<keygen> |
定義了表單的密鑰對生成器字段 |
<output> |
定義一個計算結(jié)果 |
HTML 字符實體標簽
| 顯示結(jié)果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于號 | < |
< |
| > | 大于號 | > |
> |
| & | 和號 | & |
& |
| “ | 引號 | " |
" |
| ’ | 撇號 | ' |
' |
| ￠ | 分 | ¢ |
¢ |
| ￡ | 鎊 | £ |
£ |
| ￥ | 元 | ¥ |
¥ |
| € | 歐元 | € |
€ |
| § | 小節(jié) | § |
§ |
| ? | 版權(quán) | © |
  |
| ? | 注冊商標 | ® |
™ |
| ? | 商標 | ™ |
  |
| × | 乘號 | × |
× |
| ÷ | 除號 | ÷ |
÷ |
| 字符 | URL 編碼 |
|---|---|
| € | %80 |
| ￡ | %A3 |
| ? | %A9 |
| ? | %AE |
| à | %C0 |
