WEB前端的定義
1.WEB 前端的發(fā)展
Web 1.0（共享）
代表公司: 新浪卵慰、搜狐娘侍、網(wǎng)易大溜、雅虎、網(wǎng)景（門戶網(wǎng)站用于展示內(nèi)容）
Web 2.0（交互）
代表產(chǎn)品: RSS抖誉、Wiki、Blog(以人為中心 關(guān)系為王 以網(wǎng)絡(luò)為溝通渠道進行人與人溝通)
Web 3.0（聚合）
行業(yè)特征： 聚合性衰倦、普適性袒炉、語義化（O2O人－網(wǎng)絡(luò)－人 注重線上與線下的溝通 通過大數(shù)據(jù)知道用戶的需求，智能匹配）
2.WEB 前端工程師
定義：需求 + 原型 + 交互 + 后端 + 實現(xiàn) + 優(yōu)化
基礎(chǔ)前端：HTML（結(jié)構(gòu)）樊零、CSS（樣式）我磁、JavaScript（行為）
全棧前端：NodeJS孽文、數(shù)據(jù)庫管理系統(tǒng)（BDMS）、服務(wù)端編程語言夺艰、框架芋哭、模式
移動前端：jQuery Mobile、React Native郁副、ionic减牺、PhoneGap/Cordova
動畫前端：Flash、ActionScript存谎、Cocos2d
拔疚。
HTML工作原理
模式（B/S 架構(gòu)）
瀏覽器：Browser
提交請求（GET / POST）
呈現(xiàn)內(nèi)容（渲染引擎 / 內(nèi)核）
執(zhí)行腳本
通信協(xié)議：Protocol
HTTP：超文本傳輸協(xié)議 (是一個客戶端和服務(wù)器端請求和應(yīng)答的標準 端口默認：80 或者8080)
HTTPS：簡單講是HTTP的安全版，即HTTP下加入SSL層既荚，提供了身份驗證與加密通訊方法≈墒В現(xiàn)在它被廣泛用于萬維網(wǎng)上安全敏感的通訊，例如交易支付方面恰聘。（默認端口443）
FTP：文件傳輸協(xié)議句各，用于Internet上的控制文件的雙向傳輸（下載 上傳 端口號20 21）
DNS:域名解析，把IP地址解析成主機名（端口：53）
服務(wù)器：Server
響應(yīng)請求
執(zhí)行程序（運行環(huán)境）
存儲數(shù)據(jù)
開發(fā)工具
編輯器
1.Sublime Text 3
組冊碼
—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——
2.WebStorm 2016
激活服務(wù)器地址：http://114.215.133.70:41017
語法基礎(chǔ)
HTTP 協(xié)議
1.HTTP 定義超文本傳輸協(xié)議：HyperText Transfer Protocol
2.處理方式請求：Request
響應(yīng)：Response
3.狀態(tài)編碼
200：請求成功
301：被請求的資源永久移動到新位置
403：權(quán)限不足
404：資源不存在
500：服務(wù)器內(nèi)部錯誤
4.內(nèi)容類型（MIME）text/plain 測試網(wǎng)址
text/html 測試網(wǎng)址
text/xml 測試網(wǎng)址
application/json 測試網(wǎng)址
標簽結(jié)構(gòu)
1.<!DOCTYPE>聲明
<!DOCTYPE>是一種標準通用標記語言的文檔類型聲明晴叨，它的目的是要告訴標準通用標記語言解析器凿宾，它應(yīng)該使用什么樣的文檔類型定義（DTD）來解析文檔
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前
<!DOCTYPE> 聲明不是 HTML 標簽,它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫的指令篙螟。
請始終向 HTML 文檔添加 <!DOCTYPE> 聲明菌湃，這樣瀏覽器才能獲知文檔類型
<!DOCTYPE>聲明是不區(qū)分大小寫的
HTML5標準下的<!DOCTYPE>聲明寫法為<!DOCTYPE html>
2.中文編碼
目前在大部分瀏覽器中,中文編碼會出現(xiàn)亂碼的情況,這時候我們需要在頭部將字符聲明為UTF-8
寫法為<meta charset="UTF-8”>。
3.HTML 標題
<head> 元素是所有頭部元素的容器遍略。<head> 內(nèi)的元素可包含腳本惧所，指示瀏覽器在何處可以找到樣式表，提供元信息绪杏，等等下愈。
以下標簽都可以添加到 head 部分：<title>、<base>蕾久、<link>势似、<meta>、<script> 以及 <style>僧著。
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
4.HTML 段落
HTML 段落是通過標簽p 來定義的.
<p>這是一個段落履因。</p>
<p>這是另外一個段落。</p>
5.HTML 鏈接
HTML 鏈接是通過<a> 標簽進行定義的盹愚。
1.絕對路徑：http://www.baidu.com
2.相對路徑：...
3.物理路徑：file開頭
<a >這是一個鏈接</a>
6.HTML 圖像
HTML 圖像是通過標簽 <img> 來定義的
<img src="images/abc.png" width=“300" height="120" />
7.HTML 水平線
<hr> 標簽在 HTML 頁面中創(chuàng)建水平線
8.HTML 注釋
可以將注釋插入 HTML
代碼中栅迄，這樣可以提高其可讀性，使代碼更易被人理解皆怕。瀏覽器會忽略注釋毅舆，也不會顯示它們西篓。
9.HTML列表
無序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
10.HTML <div>和<span>
<div> 標簽定義HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分。
<div>標簽常用于組合塊級元素憋活，以便通過CSS 來對這些元素進行格式化岂津。
<span>
用于對文檔中的行內(nèi)元素進行組合。
<span>
標簽沒有固定的格式表現(xiàn)悦即。當對它應(yīng)用樣式時吮成，它才會產(chǎn)生視覺上的變化。如果不對 <span> 應(yīng)用樣式盐欺，那么 <span>
元素中的文本與其他文本不會任何視覺上的差異赁豆。
<span>
標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。
11.HTML 表格
表格由 <table>
標簽來定義冗美。每個表格均有若干行（由 <tr> 標簽定義）魔种，每行被分割為若干單元格（由 <td> 標簽定義）。字母 td
指表格數(shù)據(jù)（table data）粉洼，即數(shù)據(jù)單元格的內(nèi)容节预。數(shù)據(jù)單元格可以包含文本、圖片属韧、列表安拟、段落、表單宵喂、水平線糠赦、表格等等。
表格的表頭使用 <th> 標簽進行定義锅棕。
<tableborder="1">
<tr>
<td width="100px"align="center">姓名</td>
<td align="center">學(xué)號</td>
<td align="center">成績</td>
</tr>
<tr>
<td align="center">張三</td>
<td>9527</td>
<td>99</td>
</tr>
<tr>
<td align="center">李四</td>
<td>9528</td>
<td>90</td>
</tr>
</table>
12.HTML 表單和輸入
用于搜集不同類型的用戶輸入拙泽。
<form
method="get"action="two.html">
<input
type="tel"name="phone"/><br/>
<input
type="email"name="email"placeholder="請輸入郵箱地址"/><br/>
<input
type="checkbox">男
<input
type="checkbox"/>女<br/>
生日：<input
type="date"name="bday"><br/>
<input
type="datetime-local"name="dateTime"/><br/>
<input
type="color"><br/>
<input
type="submit"/><br/>
</form>
提示1：不要忘記結(jié)束標簽
即使忘記了使用結(jié)束標簽，大多數(shù)瀏覽器也會正確地顯示
HTML裸燎，因為關(guān)閉標簽是可選的顾瞻。但不要依賴這種做法。忘記使用結(jié)束標簽會產(chǎn)生不可預(yù)料的結(jié)果或錯誤德绿。
提示2：使用小寫標簽
HTML
標簽對大小寫不敏感：<P> 等同于 <p>荷荤。許多網(wǎng)站都使用大寫的 HTML 標簽。
W3CSchool
使用的是小寫標簽移稳，因為萬維網(wǎng)聯(lián)盟（W3C）在 HTML 4 中推薦使用小寫蕴纳，而在未來 (X)HTML 版本中強制使用小寫。
CSS
什么是CSS
CSS的全稱是CascadingStyle Sheets个粱，層疊樣式表袱蚓。
它用來控制HTML標簽的樣式，在美化網(wǎng)頁中起到非常重要的作用几蜻。
CSS的編寫格式是鍵值對形式的
color: red;
background-color: blue;
font-size: 20px;
冒號:左邊的是屬性名喇潘，冒號:右邊的屬性值
CSS有3種書寫形式
行內(nèi)樣式：（內(nèi)聯(lián)樣式）直接在標簽的style屬性中書寫
<body style="color: red;">
例子
<!--行內(nèi)樣式-->
<formmethod="get" action="two.html">
<input type="text" name="username" style="background:red;color:yellow
;font-weight:bold"/><br/>
<input type="datetime-local"name="brithDay"><br/>
<input type="password"name="password"/><br/>
</form>
頁內(nèi)樣式：在本網(wǎng)頁head標簽中的style標簽中書寫
<style>
body { color:red;}
</style>
例子
<!--頁內(nèi)樣式-->
<style>
Input {
color:blue;
font:20px;
font-size:larger;
background:green;
}
</style>
<!--頁內(nèi)樣式-->
<formmethod="get" action="two.html">
<input
type="text" name="username"/><br/>
<input
type="datetime-local"name="brithDay"><br/>
<input
type="password"name="password"/><br/>
</form>
外部樣式：在單獨的CSS文件中書寫，然后在網(wǎng)頁中用link標簽引用
<link rel="stylesheet"
href="index.css">
CSS選擇器
選擇器的作用：選擇對應(yīng)的標簽梭稚，為其添加樣式
1.選擇器的分類：
標簽選擇器 div { color:red; }
類選擇器 .cls {color:blue; }
id選擇器 #hi { color:orange; }
并列選擇器 div, .cls { color: red ; }
復(fù)合選擇器 div.cls {color:red;}
后代選擇器 div p {color:red;}
直接后代選擇器 div > p{color:red;}
2.美化表格
<tableborder="1">
<tr>
<th>姓名</th>
<th>學(xué)號</th>
<th>成績</th>
</tr>
<tr>
<td>張三</td>
<td>9527</td>
<td>99</td>
</tr>
<tr>
<td>李四</td>
<td>9528</td>
<td>90</td>
</tr>
</table>
CSS代碼
<styletype="text/css">
table{
border-collapse:collapse;
width:400px;
height:150px;
}
tableth{
font-size:larger;
color:blue;
height:50px;
}
tabletd{
text-align:center;
color:black;
font-size:20px;
}
table,td,th{
border-width:5px;
border-color:red;
}
</style>
3.布局網(wǎng)頁界面
<!--網(wǎng)頁常見布局-->
<divid="header">header</div>
<divid="container">
<divid="nav">nav</div>
<divid="content">content</div>
</div>
<divid="footer">footer</div>
<styletype="text/css">
#header{
width:100%;
height:200px;
color:black;
text-align:center;
background:red;
}
#nav{
width:20%;
height:500px;
background:yellow;
float:left;
}
#content{
width:80%;
height:500px;
float:right;
background:green;
}
#footer{
width:100%;
background:orange;
height:100px;
clear:right;
}
</style>
