背景： 老板讓我們客戶端必須出兩個人轉(zhuǎn)前端，其他同事都不是太愿意轉(zhuǎn)政溃，于是就有了以下轉(zhuǎn)前端學習的記錄了??趾访。學習資料全部來源于網(wǎng)絡(luò)資源，在此感謝網(wǎng)友的分享董虱。
瀏覽器內(nèi)核
瀏覽器內(nèi)核可以分成兩部分：渲染引擎 和 JS 引擎扼鞋。
渲染引擎： 它負責取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等）云头、整理訊息（例如加入 CSS 等）捐友，以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機盘寡。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同撮慨。
JS 引擎： 解析 Javascript 語言竿痰，執(zhí)行 javascript 語言來實現(xiàn)網(wǎng)頁的動態(tài)效果。
HTML
- 文檔類型<!DOCTYPE>
<!DOCTYPE html>
<!DOCTYPE>標簽位于文檔的最前面砌溺，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規(guī)范影涉，必需在開頭處使用<!DOCTYPE>標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析规伐。
- 字符集
<meta charset="UTF-8" />
UTF-8 是目前最常用的字符集編碼方式蟹倾，為了避免出現(xiàn)字符集不統(tǒng)一而引起亂碼的情況，所以統(tǒng)一使用UTF-8猖闪。
- 骨架結(jié)構(gòu)
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
-
常用標簽
- 標題標簽
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>說明： h1 標簽因為重要鲜棠，盡量少用。 一般h1 都是給logo使用培慌，或者頁面中最重要標題信息豁陆。
- 段落標簽（paragraph）
<p> 文本內(nèi)容 </p>是HTML文檔中最常見的標簽，默認情況下吵护，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行盒音。
- 水平線標簽（horizontal）
<hr /> 是單標簽在網(wǎng)頁中常常看到一些水平線將段落與段落之間隔開馅而，使得文檔結(jié)構(gòu)清晰祥诽，層次分明。這些水平線可以通過插入圖片實現(xiàn)瓮恭，也可以簡單地通過標簽來完成雄坪，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標簽。
- 換行標簽（break）
<br />在HTML中屯蹦，一個段落中的文字會從左到右依次排列诸衔，直到瀏覽器窗口的右端，然后自動換行颇玷。如果希望某段文本強制換行顯示笨农，就需要使用換行標簽
- div span標簽（div：division）
<div> 這是div </div> <span>這是span</span>div 和 span 是沒有語義的，是網(wǎng)頁布局主要的2個盒子帖渠。
-
input 控件
<input />標簽為單標簽谒亦，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型份招。除了type屬性之外切揭，<input />標簽還可以定義很多其他的屬性，其常用屬性如下表所示锁摔。
input 控件 textarea控件
如果需要輸入大量的信息廓旬，就需要用到<textarea></textarea>標簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框谐腰，其基本語法格式如下：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
文本內(nèi)容
</textarea>
- 表單域
在HTML中孕豹，form標簽被用于定義表單域，即創(chuàng)建一個表單十气，以實現(xiàn)用戶信息的收集和傳遞励背，form中的所有內(nèi)容都會被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
- Action：在表單收集到信息后砸西，需要將信息傳遞給服務(wù)器進行處理叶眉，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
- method：用于設(shè)置表單數(shù)據(jù)的提交方式芹枷，其取值為get或post衅疙。
- name：用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單鸳慈。
注意： 每個表單都應(yīng)該有自己表單域炼蛤。
- name：用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單鸳慈。
文本標簽
- 文本標簽
標簽屬性
<標簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標簽名>
- 圖像標簽（img）
<img src="圖像URL" />
- 鏈接標簽（anchor）
<a href="跳轉(zhuǎn)目標" target="目標窗口的彈出方式">文本或圖像</a>
href：（Hypertext Reference）用于指定鏈接目標的url地址，當為標簽應(yīng)用href屬性時蝶涩，它就具有了超鏈接的功能理朋。
target：用于指定鏈接頁面的打開方式，其取值有 self 和 blank 兩種绿聘，其中 self 為默認值嗽上，blank為在新窗口中打開方式。
注意：
- 1. 外部鏈接熄攘，需要添加 http://兽愤；
- 2. 內(nèi)部鏈接，直接鏈接內(nèi)部頁面名稱即可挪圾。比如 <a href="index.html"> 首頁 </a >
- 3. 如果當時沒有確定鏈接目標時浅萧，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接哲思；
- 4. 不僅可以創(chuàng)建文本超鏈接洼畅，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像棚赔、表格帝簇、音頻徘郭、視頻等都可以添加超鏈接。
- 錨點定位
通過創(chuàng)建錨點鏈接丧肴，用戶能夠快速定位到目標內(nèi)容残揉。
1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點擊的）
<a href="#two">
2.使用相應(yīng)的id名標注跳轉(zhuǎn)目標的位置。
<h3 id="two">第2集</h3>
- base 標簽
base 可以設(shè)置整體鏈接的打開狀態(tài)芋浮。base 寫到 `<head> </head>` 之間抱环，如把所有的連接都默認添加 target="_blank"：
<head>
<base target="_blank"/>
</head>
- 特殊字符標簽
- 注釋標簽
```
<!-- <div> 這是頭部 </div> <span>今日價格</span> -->
```
注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分纸巷，也會被下載到用戶的計算機上镇草，查看源代碼時就可以看到。
- 路徑：相對路徑和絕對路徑
-
相對路徑
以引用文件的網(wǎng)頁所在位置為參考基礎(chǔ)何暇，而建立出的目錄路徑陶夜。因此凛驮，當保存于不同目錄的網(wǎng)頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑媒熊。- 圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可溯祸，如<img src="logo.gif" />。
- 圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名本姥，之間用“/”隔開肩袍，如<img src="img/img01/logo.gif" />。
- 圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” 婚惫，如果是上兩級氛赐，則需要使用 “../../”，以此類推先舷，如<img src="../logo.gif" />艰管。
絕對路徑
絕對路徑以Web站點根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對蒋川，意指當所有網(wǎng)頁引用同一個文件時牲芋，所使用的路徑都是一樣的。
-
