背景： 老板讓我們客戶端必須出兩個人轉(zhuǎn)前端，其他同事都不是太愿意轉(zhuǎn)，于是就有了以下轉(zhuǎn)前端學(xué)習(xí)的記錄了??。學(xué)習(xí)資料全部來源于網(wǎng)絡(luò)資源，在此感謝網(wǎng)友的分享。
瀏覽器內(nèi)核
瀏覽器內(nèi)核可以分成兩部分：渲染引擎 和 JS 引擎。
渲染引擎： 它負(fù)責(zé)取得網(wǎng)頁的內(nèi)容（HTML、XML、圖像等）、整理訊息（例如加入 CSS 等），以及計算網(wǎng)頁的顯示方式，然后會輸出至顯示器或打印機(jī)。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同，所以渲染的效果也不相同。
JS 引擎： 解析 Javascript 語言，執(zhí)行 javascript 語言來實(shí)現(xiàn)網(wǎng)頁的動態(tài)效果。
HTML
- 文檔類型<!DOCTYPE>
<!DOCTYPE html>
<!DOCTYPE>標(biāo)簽位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范，必需在開頭處使用<!DOCTYPE>標(biāo)簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進(jìn)行解析。
- 字符集
<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>
-
常用標(biāo)簽
- 標(biāo)題標(biāo)簽
<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>說明： h1 標(biāo)簽因為重要，盡量少用。 一般h1 都是給logo使用，或者頁面中最重要標(biāo)題信息。
- 段落標(biāo)簽（paragraph）
<p> 文本內(nèi)容 </p>是HTML文檔中最常見的標(biāo)簽，默認(rèn)情況下，文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
- 水平線標(biāo)簽（horizontal）
<hr /> 是單標(biāo)簽在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明。這些水平線可以通過插入圖片實(shí)現(xiàn)，也可以簡單地通過標(biāo)簽來完成，<hr />就是創(chuàng)建橫跨網(wǎng)頁水平線的標(biāo)簽。
- 換行標(biāo)簽（break）
<br />在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后自動換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽
- div span標(biāo)簽（div：division）
<div> 這是div </div> <span>這是span</span>div 和 span 是沒有語義的，是網(wǎng)頁布局主要的2個盒子。
-
input 控件
<input />標(biāo)簽為單標(biāo)簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input />標(biāo)簽還可以定義很多其他的屬性，其常用屬性如下表所示。
input 控件 textarea控件
如果需要輸入大量的信息，就需要用到<textarea></textarea>標(biāo)簽。通過textarea控件可以輕松地創(chuàng)建多行文本輸入框，其基本語法格式如下：
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
文本內(nèi)容
</textarea>
- 表單域
在HTML中，form標(biāo)簽被用于定義表單域，即創(chuàng)建一個表單，以實(shí)現(xiàn)用戶信息的收集和傳遞，form中的所有內(nèi)容都會被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控件
</form>
- Action：在表單收集到信息后，需要將信息傳遞給服務(wù)器進(jìn)行處理，action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
- method：用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為get或post。
- name：用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。
注意： 每個表單都應(yīng)該有自己表單域。
- name：用于指定表單的名稱，以區(qū)分同一個頁面中的多個表單。
文本標(biāo)簽
- 文本標(biāo)簽
標(biāo)簽屬性
<標(biāo)簽名 屬性1="屬性值1" 屬性2="屬性值2" …> 內(nèi)容 </標(biāo)簽名>
- 圖像標(biāo)簽（img）
<img src="圖像URL" />
- 鏈接標(biāo)簽（anchor）
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
href：（Hypertext Reference）用于指定鏈接目標(biāo)的url地址，當(dāng)為標(biāo)簽應(yīng)用href屬性時，它就具有了超鏈接的功能。
target：用于指定鏈接頁面的打開方式，其取值有 self 和 blank 兩種，其中 self 為默認(rèn)值，blank為在新窗口中打開方式。
注意：
- 1. 外部鏈接，需要添加 http://；
- 2. 內(nèi)部鏈接，直接鏈接內(nèi)部頁面名稱即可。比如 <a href="index.html"> 首頁 </a >
- 3. 如果當(dāng)時沒有確定鏈接目標(biāo)時，通常將鏈接標(biāo)簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接；
- 4. 不僅可以創(chuàng)建文本超鏈接，在網(wǎng)頁中各種網(wǎng)頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。
- 錨點(diǎn)定位
通過創(chuàng)建錨點(diǎn)鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。
1.使用“a href=”#id名>“鏈接文本"</a>創(chuàng)建鏈接文本（被點(diǎn)擊的）
<a href="#two">
2.使用相應(yīng)的id名標(biāo)注跳轉(zhuǎn)目標(biāo)的位置。
<h3 id="two">第2集</h3>
- base 標(biāo)簽
base 可以設(shè)置整體鏈接的打開狀態(tài)。base 寫到 `<head> </head>` 之間，如把所有的連接都默認(rèn)添加 target="_blank"：
<head>
<base target="_blank"/>
</head>
- 特殊字符標(biāo)簽
- 注釋標(biāo)簽
```
<!-- <div> 這是頭部 </div> <span>今日價格</span> -->
```
注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機(jī)上，查看源代碼時就可以看到。
- 路徑：相對路徑和絕對路徑
-
相對路徑
以引用文件的網(wǎng)頁所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁引用同一個文件時，所使用的路徑將不相同，故稱之為相對路徑。- 圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。
- 圖像文件位于HTML文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如<img src="img/img01/logo.gif" />。
- 圖像文件位于HTML文件的上一級文件夾：在文件名之前加入“../” ，如果是上兩級，則需要使用 “../../”，以此類推，如<img src="../logo.gif" />。
絕對路徑
絕對路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對，意指當(dāng)所有網(wǎng)頁引用同一個文件時，所使用的路徑都是一樣的。
-
