一 、什么是前端
前端即網(wǎng)站前臺部分呛占，運行在PC端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的網(wǎng)頁懦趋。隨著互聯(lián)網(wǎng)技術的發(fā)展晾虑，HTML5，CSS3,前端框架的應用仅叫，跨平臺響應式網(wǎng)頁設計能夠適應各種屏幕分辨率帜篇，完美的動效設計，給用戶帶來極高的用戶體驗诫咱。
二 笙隙、開發(fā)流程
產(chǎn)品設計好原型，UI設計好頁面樣板-->前端工程師將樣板做成靜態(tài)網(wǎng)頁-->后端工程師將靜態(tài)網(wǎng)頁修改為動態(tài)網(wǎng)頁
從軟件分類來說: (根據(jù)使用的目的不同)
系統(tǒng)軟件
應用軟件
從軟件信息存儲位置的不同:
單機軟件：
軟件和數(shù)據(jù)都存儲在客戶端
C/S架構軟件 Client / Server：
軟件程序和數(shù)據(jù)一部分存在客戶端,一部分存在服務器端
B/S架構軟件 Browser / Server：
軟件程序和數(shù)據(jù)全部存在服務器端坎缭、
前端開發(fā)也叫作web前端開發(fā), 是為B/S架構的軟件提供界面解決方案的.
三 竟痰、W3C標準
W3C標準是由萬維網(wǎng)聯(lián)盟所制定及修改
1.結構（HTML）
用于描述頁面結構,指的是超文本標記語言 (Hyper Text Markup Language)，這個也是我們網(wǎng)頁最常用普通的語言了掏呼，經(jīng)歷了多個版本的發(fā)展坏快，已經(jīng)發(fā)展到5.0版了, 即HTML5。
2.表現(xiàn)（CSS)
用于控制頁面中元素的樣式,在前端中起美化頁面的作用憎夷。
級聯(lián)樣式表（Cascading Style Sheet）簡稱“CSS”莽鸿，通常又稱為“風格樣式表（Style Sheet）”，它是用來進行網(wǎng)頁風格設計的拾给。比如富拗，如果想讓鏈接字未點擊時是藍色的，當鼠標移上去后字變成紅色的且有下劃線鸣戴，這就是一種風格。通過設立樣式表粘拾，可以統(tǒng)一地控制HTML中各標志的顯示屬性窄锅。級聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁外觀。使用級聯(lián)樣式表，可以擴充精確指定網(wǎng)頁元素位置入偷，外觀以及創(chuàng)建特殊效果的能力追驴。
3.行為（JavaScript）
用于響應用戶的操作,在前端中起網(wǎng)頁布局修改的作用。
JavaScript一種直譯式腳本語言疏之，是一種動態(tài)類型殿雪、弱類型、基于原型的語言锋爪，內(nèi)置支持類型丙曙。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分其骄，廣泛用于客戶端的腳本語言亏镰，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能拯爽。
這三個是前端開發(fā)中最基本也是最必須的三個技能索抓。前端的開發(fā)中，在頁面的布局時毯炮， HTML將元素進行定義逼肯，CSS對展示的元素進行定位，再通過JavaScript實現(xiàn)相應的效果和交互桃煎。
四 篮幢、網(wǎng)站協(xié)議
協(xié)議就是一種加密方式 別名（超文本傳輸協(xié)議） 目前世界通用HTTP協(xié)議相對安全，如果網(wǎng)站涉及密碼安全與支付安全的同時备禀，在此誕生了HTTPS協(xié)議
五 洲拇、HTML頁面基本代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網(wǎng)頁標題</title>
</head>
<body>
網(wǎng)頁正文
</body>
</html>
六 、 常用塊級元素
<!DOCTYPE html>
<html>
<head> <!--<html>標簽用來表示網(wǎng)頁的元數(shù)據(jù)曲尸，head中包含了瀏覽器和搜索引擎使用的其他不可見信息-->
<meta charset="UTF-8">
<title>網(wǎng)頁標題</title> <!--<title>標簽表示網(wǎng)頁的標題赋续，顯示在標題欄上，是搜索引擎最先看到的醒目內(nèi)容-->
</head>
<body> <!--<body>標簽用來設置網(wǎng)頁的主體另患，所有可視頁面都編寫在body標簽中-->
<h1>常用塊級元素</h1>
<div>div盒子</div>
<h1>標題一級</h1>
<h2>標題一級</h2>
<h3>標題三級</h3>
<h4>標題四級</h4>
<h5>標題五級</h5>
<h6>標題六級</h6>
<hr> <!--水平分割線-->
<p>段落</p>
<pre>預格式化 可 保留空格</pre>
<ul>
<li>無序列表</li>
<li>無序列表</li>
</ul>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<dl>
<dt>定義列表：</dt>
<dd>定義內(nèi)容</dd>
</dl>
<table border="1">
<th>標題1</th>
<th>標題2</th>
<tr>
<td>單元格</td>
<td>單元格</td>
</tr>
</table>
<form>表單</form>
<blockquote> 段落縮進 前后5個字符</blockquote>
<marquee>滾動文本</marquee>
<address> 定義地址 </address>
<center>居中文字</center>
</body>
</html>
七 纽乱、 常用行內(nèi)元素
<!--常用行內(nèi)元素-->
<a >標簽可定義錨</a>
<b>字體加粗</b>
<br /><!--換行-->
<i>傾斜文本效果</i>
<img src="../img/a1.jpg" alt="" />
<input type="text" />
<span>組合文檔中的行內(nèi)元素</span>
<sub>定義下標文本</sub>
<sup>定義上標文本</sup>
所以我們要根據(jù)網(wǎng)頁上顯示的內(nèi)容, 使用合適的標簽, 可以優(yōu)化之前的代碼.
八 、 CSS樣式介紹
CSS使用格式:
選擇器 {
屬性 : 值;
屬性 : 值;
...
}
說明:
●選擇器是將樣式和頁面元素關聯(lián)起來的名稱
●屬性名是希望設置的樣式屬性, 每個屬性有一個或者多個值
●屬性和值之間用冒號隔開
●一個屬性和值與下一個屬性和值之間用分號, 最后一個分號可以省略.
例如:
div {
width: 100px;
height: 100px;
background: gold;
}
1.內(nèi)聯(lián)式:
<div style="width:100px; height:100px; background:red">這是個div標簽</div>
2. 嵌入式:
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
}
</style>
3.外聯(lián)式:
<link rel="stylesheet" type="text/css" href="css/樣式文件名.css">
九 昆箕、 CSS屬性入門
| 屬性 | 作用 | 舉例 |
|---|---|---|
| width | 設置元素(標簽)的寬度 | width: 200px; |
| height | 設置元素(標簽)的高度 | height: 200px; |
| background | 設置元素背景色或者背景圖片(詳看下面) | background: pink; |
| border | 設置元素四周的邊框 | border: 1px solid pink; |
| border-top | 設置元素頂部邊框 | border-top: 1px solid pink; |
| border-left | 設置元素左邊邊框 | border-left: 1px solid pink; |
| border-right | 設置元素右邊邊框 | border-right: 1px solid pink; |
| border-bottom | 設置元素底部邊框 | border-bottom: 1px solid pink; |
| padding | 設置內(nèi)邊距(同時設置四個邊,也可以分開設置) | padding: 20px; |
| margin | 設置外邊距(同時設置四個邊,也可以分開設置) | margin: 20px; |
| float | 設置元素浮動,浮動可以讓塊元素在一行排列 | float:left(左浮動) float: right(右浮動) |
十 鸦列、 入門樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.sea{ /*類選擇*/
width:200px; /*寬度*/
height: 200px; /*高度*/
border: 2px solid #FF0000; /*邊框*/
color: #000000; /*文本顏色*/
line-height: 200px; /*行高*/
text-align: center; /*對齊方式*/
border-radius: 8px; /*圓角*/
margin: 20px 10px 10px 100px; /*外邊距 距上右下左*/
background: green; /*背景顏色,也可放圖片路徑*/
}
/* #sea{
id選擇 唯一的
} */
</style>
</head>
<body>
<div class="sea" id="sea">面朝大海</div>
</body>
</html>
