前端學習路線

第一部分 HTML

第一章職業規劃和前景

職業方向規劃定位：
- web前端開發工程師
- web網站架構師
- 自己創業
- 轉崗管理或其他
web前端開發的前景展望：
- 未來IT行業企業需求最多的人才
- 結合最新的html5搶占移動端的市場
- 自己創業做老板
- 隨著互聯網的普及web開發成為企業的寵兒和核心
web職業發展目標：
- 起步階段：
- 提升階段：
- 成型階段：
- 基本知識的掌握
- 常用工具的掌握
- 溝通技巧的掌握（圍繞客戶的需求）
- 良好的開發習慣（加注釋、對齊方式）
- 熟悉掌握HTML基本標簽和屬性
- 熟練掌握css的基本語法和使用
- 瀏覽器兼容和w3c標準的掌握
- 結合html+css+js開始系統項目的開發
- 精通DIV+CCS布局
- 精通css樣式表控制html標簽
- 熟悉運用js制作動態網站的效果
- 能獨立開發完成網站
- 負責內容的HTML
- 負責外觀的css（層疊樣式表）
- 負責行為的js
- ps切圖
- 第一、梳理知識架構
- 第二、分解目標（起步階段、提升階段、成型階段）

第二章 html基本結構

認識HTML：
- html不是一種編程語言，是一種標志語言
- 標記語言是由一套標識標簽組成的
- html使用標簽來描述網頁
html結構：

<html>
????<head></head>
????<body></body></html>

不成對出現的標簽
<br>?<hr>?<meta>?<img>?<input..>?<option..>?<link>
HTML 基本標簽的講解：
?
- <strong>用于強調文本，強度更深，表示重要文本--->用于SEO優化
- <b>只是視覺加粗效果--->單純為了產生加粗
- <html>?<head>?<body>標簽
- <h1>----<h6>?僅僅用于標題文本，不要為了產生粗體文本使用它們
- <p>標簽段落標簽
- <strong><b>標簽
- 都會讓文字產生加粗效果
- <em>?<i>標簽
  - em用于強調文本
  - i只是視覺斜體效果
  - <strong>比<em>強調更強
- 特殊符號：
  - &nbsp; ---->空格
  - &gt; --->大于號
  - &lt；--->小于號
  - &quot；--->引號
  - &copy;-->版權號

第三章 html基本標簽

HTMl基本標簽：
- 可以創建一個內容滾動效果
- 錨點也是一種超鏈接，是頁面內進行跳轉的超鏈接
- 第一步：創建錨點?<a name="錨點名稱"></a>
- 第二步：使用創建好的錨點名稱?<a href="#錨點名稱">內容</a>
- target屬性：
- _self(在原來頁面打開)
- _blank（新窗口打開）
- _top（打開時忽略所有的框架）
- _parent（在父窗口中打開）
- 文字的格式按源碼的排版來顯示，我們稱之為預處理格式
- 對被用來組合文檔中的行內元素
- 注意：span沒有固定的格式表現，當對它應用樣式時，才會產生視覺上的變化
- span標簽
- <pre>標簽
- <a>標簽--->他有一個必不可少的屬性 href
- 創建錨點和錨鏈接
- marquee標簽

<marquee?direction="down"?loop="4"?οnmοuseοver=this.stop()?οnmοuseοut=this.start()></marquee>

direction?表示滾動方向，取值有（left,right,up,down,默認left）
loop?表示滾動循環的次數，默認為無限循環

οnmοuseοver=this.stop()?οnmοuseοver=this.start()?scrollamout="1"(滾動速度)

表示當鼠標移上區域的時候停止滾動，鼠標移開繼續滾動

第四章 img圖片標簽與路徑

圖片標簽與路徑：
- 常見圖片格式?jpg?png?gif
- Gif?（只支持全透明）
- Jpeg?/jpg
- Png?半/全透明都支持
圖片標簽寫法：
- <img src="" alt="" width="" height="" />
圖片四要素：
- src=""?圖片路徑
- alt=""?圖片含義
- width=""?圖片寬度和圖片大小保持一致
- height=""?圖片高度和圖片大小保持一致
- title=""
路徑知識：
- 相對路徑：(Relative Path) 相對于該文件的路徑；
- 絕對路徑：(Absolute Path) 從磁盤出發的路徑；
- 相對路徑、絕對路徑：
- <img src="" …… align="" />?align屬性--設置圖片與后面文字的位置關系
  值--top、bottom、middle、absmiddle、left、right
在靜態頁面中：
?
- /開頭表示根目錄；
- ./表示當前目錄；（斜畫線前面一個點）
- ../上級目錄；（斜畫線前面兩個點）
- 直接用文件名不帶/也表示同一目錄
- 這些都是相對于當前文件的位置來說的，如果用絕對路徑的話就是寫全了。

第五章三種列表的講解

三種列表的知識講解：
- 無序列表是一個沒有順序項目的列表，此列表項默認粗體圓點進行標識
- <ul>無序列表

<ul>
???<li></li>
???<li></li>
???<li></li></ul>

<ol>有序列表
- 有序列表也是一列項目，只是列表項目使用的是數字進行標記。有序列表始于?<ol>?標簽。每個列表項始于?<li>?標簽。

<ol>
???<li>內容一</li>
???<li>內容二</li>
???<li>內容三</li></ol>

列表符號
- type="A"?A B C D
- type="a"?a b c d
- type="1"?1 2 3 4 默認值type="I" I II III type="i" i ii iii
- type="circle"?空心圓?type=“disc”?實心圓默認值?type="square"?方塊符
- 無序列表-列表符號:
- 有序列表-列表符號
- 列表嵌套
- 無序列表-嵌套

<ul>
?<li>柚子??<ul>
???<li>沙田柚</li>
???<li>蜜柚</li>
??</ul>
?</li>
?<li>荔枝</li>
?<li>蘋果</li></ul>

有序列表-嵌套

<ol>
?<li>茶??<ul>
???<li>紅茶</li>
???<li>綠茶</li>
??</ul>
?</li>
?<li>果汁</li>
?<li>牛奶</li></ol>

定義列表
- 定義列表不僅僅是一列項目，而是項目及其注釋的組合。定義列表以?<dl>?標簽開始。每個定義列表項以?<dt>?開始。每個自定義列表項的定義以?<dd>?開始。

<dl>??
?????<dt>pc網頁制作</dt>??
?????<dd>學習DIV+CSS?JS?JQ?項目實戰</dd>??
?????<dt>手機網頁制作</dt>??
?????<dd>手機網頁制作實戰</dd></dl>

dd是對dt的解釋
- < dl>< /dl>用來創建一個普通的列表,
- < dt>< /dt>用來創建列表中的上層項目，
- < dd>< /dd>用來創建列表中最下層項目，
- < dt>< /dt>和< dd>< /dd>都必須放在< dl>< /dl>標志對之間。

<dl>
????<dt>中國城市</dt>
????<dd>北京?</dd>
????<dd>上海?</dd>
????<dd>廣州?</dd>
????<dt>美國城市</dt>
????<dd>華盛頓?</dd>
????<dd>芝加哥?</dd>
????<dd>紐約?</dd></dl>

dl是definition list的縮寫
dt是definition title的縮寫
dd是definition description的縮寫
list-style屬性具有三個屬性分量：
list-style-position?：設置列表項圖標的位置，位于文本內或者文本外
list-style-type：設置列表項圖標的類型
list-style-image?：使用圖像設置列表項圖標

第六章表單元素(上)

表單標簽:
- <form>表單是一個包含表單元素的區域，包括起來的都是表單的內容
- <form>表單標簽

<form>
?<input?type="text"/></form>

HTML標簽 -?Action和確認按鈕：
- 當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。

<form?action="html.do"?method="get">????
????????username:??<input?type="text"?name="user"?/>???
????????<input?type="submit"?value="提??交"?/></form>

HTML標簽 - 隱藏域隱藏標簽：
隱藏域在頁面中對于用戶是不可見的，在表單中插入隱藏域的目的在于收集或發送信息，以利于被處理表單的程序所使用。瀏覽者單擊發送按鈕發送表單的時候，隱藏域的信息也被一起發送到服務器

<form>????????
?????<input?type="hidden"?name="hid"?value="value"></form>

<input>標簽的掌握
- <input type="" name="" value="" />
- type="text"?單行文本輸入框
- type="password"?密碼（maxlength=""）
- type="radio"?單項選擇（checked="checked"）
- type="checkbox"?多項選擇
- type="button"?按鈕
- type="submit"?提交?type="image"?圖片提交
- type="file"?上傳文件
- type="reset"?重置
- type="hidden"?隱藏
- 常用type類型：
關于表單中的設置默認值：

<input?type="text"?name=""?value="今天心情不錯"?/>
<input?type="radio"?name=""?value=""?checked="checked">
<input?type="checkbox"?name=""?value=""?checked="checked">

<select?name=""?>
?<option??value=""></option>
?<option??value=""?selected="selected"></option><select>

textarea沒有默認值
<label>標簽的使用
- label?元素不會向用戶呈現任何特殊效果。
- 不過，它為鼠標用戶改進了可用性。
- 如果您在?label?元素內點擊文本，就會觸發此控件。
- 就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
- <label></label>
- <label>?標簽的?for?屬性應當與相關元素的?id?屬性相同。
- 例子：（重要---注冊表單--用戶體驗--必做）

<p>單向選擇</p><label?for="male">男：</label><input?type="radio"?name="sex"?id="male"/><label?for="nv">女：</label><input?type="radio"?name="sex"checked="check"/>

第七章表單和表格(下)

表單和表格標簽：
- <textarea>文本域標簽
- <textarea>標簽：
- <textarea></textarea>是文本域標簽，可以在其中插入一段文字內容，它有兩個常用屬性rows和cols
注意：
- rows表示這個文本域有多少行
- cols表示這個文本域有多少列
除了這兩個屬性它還有readonly（只讀，文本域的內容無法改變，相當于協議）和title（鼠標放上提示）
<select>標簽的掌握
- 注：當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，并且在將?<select>?表單數據提交給服務器時包括?name?屬性

<form>??????
????<select?name=""??id="">
?????????<option?value="1">1月</option>??
??????????<option?value="2">2月</option>??????</select></form>

常用到的屬性：disabled=“disabled” name="sel" size="2"
<table>表格標簽
<table>表格標簽：<table>是表格標簽，可以用它定義一個表格。

<table?border="1">
????<tr>
????<td>姓名</td>
????<td>性別</td>
????</tr></table>

注意：<table>的border屬性不能少
<tr>?<td>標簽的使用
- <tr>可以定義表格中的一行，一個<tr></tr>表示一行。
- <tr>行標簽：

<table?border="1"><tr>
?<td>姓名</td>
?<td>性別</td></tr><tr>
?<td>姓名</td>
?<td>性別</td></tr></table>

<td>單元格標簽:
- <td>可以定義表格中的一個單元格，<td></td>表示一個單元格。

<table?border="1"><tr><td?>姓名</td><td>性別</td><td>愛好</td></tr></table>

border-collapse?屬性設置是否將表格邊框折疊為單一邊框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并

第一部分總結：

非可視化標簽：head?meta?style?scrpit...
可視化標簽：img?div?span?a?ul?li...
只有可視化標簽，才能用css改變它
單標簽：meta?link?base?img?input?br?hr
雙標簽：html?head?body?div?a?p?span?..ul?li?ol?dl?....
常用可視化標簽
- 慢慢已經被淘汰了被ul li代替
- 如果是合并豎排的就是合并行（rowspan）
- 如果是合并橫排的就是合并列（colspan）
- 列表
- 結論：只要將來設計頁面中有固定樣式的列表，就用ul和li
- src*屬性用來設置圖片的url數據
- alt提供給搜索引擎搜索的
- width
- height
- 結論：顯示圖片
- href*屬性：設置跳轉的網頁地址
- target屬性：設置跳轉的目標
- 結論：凡事頁面可以點擊跳轉或者表單提交的文字，都用a標簽
- 一般用它來布局
- div
- a?超鏈接標簽
- img
- ul li
- table?caption?tr?td (th)