WEB前端的定義
1.WEB 前端的發展
Web 1.0（共享）
代表公司: 新浪、搜狐、網易、雅虎、網景（門戶網站用于展示內容）
Web 2.0（交互）
代表產品: RSS、Wiki、Blog(以人為中心 關系為王 以網絡為溝通渠道進行人與人溝通)
Web 3.0（聚合）
行業特征： 聚合性、普適性、語義化（O2O人－網絡－人 注重線上與線下的溝通 通過大數據知道用戶的需求，智能匹配）
2.WEB 前端工程師
定義：需求 + 原型 + 交互 + 后端 + 實現 + 優化
基礎前端：HTML（結構）、CSS（樣式）、JavaScript（行為）
全棧前端：NodeJS、數據庫管理系統（BDMS）、服務端編程語言、框架、模式
移動前端：jQuery Mobile、React Native、ionic、PhoneGap/Cordova
動畫前端：Flash、ActionScript、Cocos2d
。
HTML工作原理
模式（B/S 架構）
瀏覽器：Browser
提交請求（GET / POST）
呈現內容（渲染引擎 / 內核）
執行腳本
通信協議：Protocol
HTTP：超文本傳輸協議 (是一個客戶端和服務器端請求和應答的標準 端口默認：80 或者8080)
HTTPS：簡單講是HTTP的安全版，即HTTP下加入SSL層，提供了身份驗證與加密通訊方法。現在它被廣泛用于萬維網上安全敏感的通訊，例如交易支付方面。（默認端口443）
FTP：文件傳輸協議，用于Internet上的控制文件的雙向傳輸（下載 上傳 端口號20 21）
DNS:域名解析，把IP地址解析成主機名（端口：53）
服務器：Server
響應請求
執行程序（運行環境）
存儲數據
開發工具
編輯器
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
激活服務器地址：http://114.215.133.70:41017
語法基礎
HTTP 協議
1.HTTP 定義超文本傳輸協議：HyperText Transfer Protocol
2.處理方式請求：Request
響應：Response
3.狀態編碼
200：請求成功
301：被請求的資源永久移動到新位置
403：權限不足
404：資源不存在
500：服務器內部錯誤
4.內容類型（MIME）text/plain 測試網址
text/html 測試網址
text/xml 測試網址
application/json 測試網址
標簽結構
1.<!DOCTYPE>聲明
<!DOCTYPE>是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，它應該使用什么樣的文檔類型定義（DTD）來解析文檔
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標簽之前
<!DOCTYPE> 聲明不是 HTML 標簽,它是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。
請始終向 HTML 文檔添加 <!DOCTYPE> 聲明，這樣瀏覽器才能獲知文檔類型
<!DOCTYPE>聲明是不區分大小寫的
HTML5標準下的<!DOCTYPE>聲明寫法為<!DOCTYPE html>
2.中文編碼
目前在大部分瀏覽器中,中文編碼會出現亂碼的情況,這時候我們需要在頭部將字符聲明為UTF-8
寫法為<meta charset="UTF-8”>。
3.HTML 標題
<head> 元素是所有頭部元素的容器。<head> 內的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標簽都可以添加到 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 頁面中創建水平線
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 文檔中的一個分隔區塊或者一個區域部分。
<div>標簽常用于組合塊級元素，以便通過CSS 來對這些元素進行格式化。
<span>
用于對文檔中的行內元素進行組合。
<span>
標簽沒有固定的格式表現。當對它應用樣式時，它才會產生視覺上的變化。如果不對 <span> 應用樣式，那么 <span>
元素中的文本與其他文本不會任何視覺上的差異。
<span>
標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。
11.HTML 表格
表格由 <table>
標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td
指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
表格的表頭使用 <th> 標簽進行定義。
<tableborder="1">
<tr>
<td width="100px"align="center">姓名</td>
<td align="center">學號</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：不要忘記結束標簽
即使忘記了使用結束標簽，大多數瀏覽器也會正確地顯示
HTML，因為關閉標簽是可選的。但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
提示2：使用小寫標簽
HTML
標簽對大小寫不敏感：<P> 等同于 <p>。許多網站都使用大寫的 HTML 標簽。
W3CSchool
使用的是小寫標簽，因為萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。
CSS
什么是CSS
CSS的全稱是CascadingStyle Sheets，層疊樣式表。
它用來控制HTML標簽的樣式，在美化網頁中起到非常重要的作用。
CSS的編寫格式是鍵值對形式的
color: red;
background-color: blue;
font-size: 20px;
冒號:左邊的是屬性名，冒號:右邊的屬性值
CSS有3種書寫形式
行內樣式：（內聯樣式）直接在標簽的style屬性中書寫
<body style="color: red;">
例子
<!--行內樣式-->
<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>
頁內樣式：在本網頁head標簽中的style標簽中書寫
<style>
body { color:red;}
</style>
例子
<!--頁內樣式-->
<style>
Input {
color:blue;
font:20px;
font-size:larger;
background:green;
}
</style>
<!--頁內樣式-->
<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文件中書寫，然后在網頁中用link標簽引用
<link rel="stylesheet"
href="index.css">
CSS選擇器
選擇器的作用：選擇對應的標簽，為其添加樣式
1.選擇器的分類：
標簽選擇器 div { color:red; }
類選擇器 .cls {color:blue; }
id選擇器 #hi { color:orange; }
并列選擇器 div, .cls { color: red ; }
復合選擇器 div.cls {color:red;}
后代選擇器 div p {color:red;}
直接后代選擇器 div > p{color:red;}
2.美化表格
<tableborder="1">
<tr>
<th>姓名</th>
<th>學號</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.布局網頁界面
<!--網頁常見布局-->
<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>
