web前端開發(fā)通俗的講就是做網(wǎng)頁嘛寂玲，在瀏覽器上看到的所有靜態(tài)頁面以及各種特效都是前端開發(fā)出來的，想要入門web前端開發(fā)很簡(jiǎn)單梗摇，但是其實(shí)web前端開發(fā)的水還是很深的拓哟，不過沒關(guān)系，學(xué)習(xí)都是一個(gè)循序漸進(jìn)的過程伶授，作為前端小白已有一年的開發(fā)經(jīng)驗(yàn)断序，這次想要進(jìn)行一個(gè)系統(tǒng)的記錄，由淺到深糜烹，我們一起踏上web前端開發(fā)的學(xué)習(xí)記錄之旅吧违诗，有些太基礎(chǔ)的概念沒有做太詳細(xì)的整理，主要提供一個(gè)從無到有的學(xué)習(xí)路徑疮蹦，望多多交流_
傻球鎮(zhèn)樓 哈哈哈哈.JPG
HTML簡(jiǎn)介以及基本結(jié)構(gòu)
- html的全稱是Hyper Text Markup Language（超文本標(biāo)記語言）诸迟，它不是英國(guó)人能聽懂的英語，也不是聾啞人能看懂的手語愕乎，它是一種能被瀏覽器所識(shí)別的語言阵苇， 它通過標(biāo)記符號(hào)來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分，網(wǎng)頁文件本身是一種文本文件感论，通過在文本文件中添加標(biāo)記符绅项，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排比肄，圖片如何顯示等）快耿。
- 基本HTML結(jié)構(gòu)包括：
A. DOCTYPE聲明(DOCTYPE是document type文檔類型的簡(jiǎn)寫庐舟，在web設(shè)計(jì)中用來說明你用的HTML是什么版本间雀。)；
B. title標(biāo)題(在網(wǎng)頁運(yùn)行之后迫淹，瀏覽器標(biāo)簽上面會(huì)顯示你所寫的網(wǎng)頁表頭)示括；
C. head(meta ,link最常見的用途是鏈接外部樣式表铺浇、外部資源 ，base是網(wǎng)頁默認(rèn)打開方式聲明標(biāo)簽 ,script標(biāo)簽最常見的用途是鏈接外部js垛膝、外部資源)：
D. 網(wǎng)頁編碼聲明主要是通過charset 屬性規(guī)定在外部腳本文件中使用的字符編碼鳍侣。如果外部文件中的字符編碼與主文件中的編碼方式不同，就要用到 charset 屬性吼拥。默認(rèn)的字符編碼是 ISO-8859-1倚聚；
E. 網(wǎng)頁主體部分是通過body標(biāo)簽進(jìn)行包裹，網(wǎng)頁的一般布局和命名參考：前端基礎(chǔ)知識(shí)（一）-布局和命名凿可。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>網(wǎng)頁標(biāo)題</title>
<meta name="keywords" content="關(guān)鍵字" />
<meta name="description" content="此網(wǎng)頁描述" />
<link href="style/test.css" rel="stylesheet" type="text/css" />
<base target=_blank><!--表示網(wǎng)頁中所有的超鏈接都在單獨(dú)頁面打開-->
</head>
<body>
網(wǎng)頁正文內(nèi)容
</body>
</html>
編輯工具的使用和圖形圖像軟件的使用
- 前端開發(fā)的編輯工具有很多惑折。dreamweaver授账、sublime等都可以進(jìn)行編碼操作，可以根據(jù)個(gè)人的編碼習(xí)慣進(jìn)行選擇惨驶。其中sublime是完全開源的編輯軟件白热，很多操作都可以根據(jù)個(gè)人的喜好進(jìn)行設(shè)置，也有很多快捷鍵可以使用粗卜，是個(gè)很好的選擇屋确。
-
圖形圖像軟件的最主要的就是要會(huì)PS切圖和取色，當(dāng)UI將一個(gè)設(shè)計(jì)好的頁面給你時(shí)候续扔，你要根據(jù)需要切出對(duì)應(yīng)的圖標(biāo)和取出相應(yīng)的顏色攻臀，能精確的得出某一模塊的寬高等等基本操作。圖標(biāo)一般保存為png格式纱昧，顏色用吸管根據(jù)即可獲取相應(yīng)的rgb值刨啸，獲取某一模塊的寬高用選區(qū)根據(jù)即可。
切片工具.png
吸管工具.png
矩形選框工具.png
常用標(biāo)簽和W3C標(biāo)準(zhǔn)
- html標(biāo)簽對(duì)大小寫不敏感识脆，但是推薦使用小寫
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標(biāo)題
<link> 文檔與外部資源的關(guān)系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內(nèi)容
<!--…--> 注釋
文本
<h1>...</h1> 標(biāo)題字大猩枇（h1~h6）
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強(qiáng)調(diào))
<i>...</i> 斜體字
<em>...</em> 斜體字(強(qiáng)調(diào))
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項(xiàng)目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色存璃、大小
<sub> 下標(biāo)
<sup> 上標(biāo)
<br> 換行
<p> 段落
圖形
<img src=’”…”> 定義圖像
<hr> 水平線
表格
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元
其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
- W3C標(biāo)準(zhǔn)的中文叫萬維網(wǎng)聯(lián)盟仑荐，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)雕拼，W3C）標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)纵东，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）啥寇、表現(xiàn)（Presentation）和行為（Behavior）偎球。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS辑甜，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3C DOM）衰絮、ECMAScript等。
官網(wǎng)網(wǎng)址：W3C基本包含了html的所有語法標(biāo)準(zhǔn)磷醋。
CSS結(jié)構(gòu)以及語法
- css是網(wǎng)頁的樣式文件猫牡，漂亮的網(wǎng)頁都是通過css渲染出來的，css樣式分為外部樣式表（用link標(biāo)簽導(dǎo)入）邓线，內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）淌友，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）。
- CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器骇陈，以及一條或多條聲明震庭。
selector {declaration1; declaration2; ... declarationN }
CSS常用樣式大全（參考：css樣式大全(整理版））
一、 CSS文字屬性：
color : #999999; /*文字顏色*/
font-family : 宋體,sans-serif; /*文字字體*/
font-size : 9pt; /*文字大小*/
font-style:italic; /*文字斜體*/
font-variant:small-caps; /*小字體*/
letter-spacing : 1pt; /*字間距離*/
line-height : 200%; /*設(shè)置行高*/
font-weight:bold; /*文字粗體*/
vertical-align:sub; /*下標(biāo)字*/
vertical-align:super; /*上標(biāo)字*/
text-decoration:line-through; /*加刪除線*/
text-decoration: overline; /*加頂線*/
text-decoration:underline; /*加下劃線*/
text-decoration:none; /*刪除鏈接下劃線*/
text-transform : capitalize; /*首字大寫*/
text-transform : uppercase; /*英文大寫*/
text-transform : lowercase; /*英文小寫*/
text-align:right; /*文字右對(duì)齊*/
text-align:left; /*文字左對(duì)齊*/
text-align:center; /*文字居中對(duì)齊*/
text-align:justify; /*文字分散對(duì)齊*/
vertical-align屬性
vertical-align:top; /*垂直向上對(duì)齊*/
vertical-align:bottom; /*垂直向下對(duì)齊*/
vertical-align:middle; /*垂直居中對(duì)齊*/
vertical-align:text-top; /*文字垂直向上對(duì)齊*/
vertical-align:text-bottom; /*文字垂直向下對(duì)齊*/
二你雌、CSS邊框空白
padding-top:10px; /*上邊框留空白*/
padding-right:10px; /*右邊框留空白*/
padding-bottom:10px; /*下邊框留空白*/
padding-left:10px; /*左邊框留空白
三器联、CSS符號(hào)屬性：
list-style-type:none; /*不編號(hào)*/
list-style-type:decimal; /*阿拉伯?dāng)?shù)字*/
list-style-type:lower-roman; /*小寫羅馬數(shù)字*/
list-style-type:upper-roman; /*大寫羅馬數(shù)字*/
list-style-type:lower-alpha; /*小寫英文字母*/
list-style-type:upper-alpha; /*大寫英文字母*/
list-style-type:disc; /*實(shí)心圓形符號(hào)*/
list-style-type:circle; /*空心圓形符號(hào)*/
list-style-type:square; /*實(shí)心方形符號(hào)*/
list-style-image:url(/dot.gif); /*圖片式符號(hào)*/
list-style-position: outside; /*凸排*/
list-style-position:inside; /*縮進(jìn)*/
四、CSS背景樣式：
background-color:#F5E2EC; /*背景顏色*/
background:transparent; /*透視背景*/
background-image : url(/image/bg.gif); /*背景圖片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重復(fù)排列-網(wǎng)頁默認(rèn)*/
background-repeat : no-repeat; /*不重復(fù)排列*/
background-repeat : repeat-x; /*在x軸重復(fù)排列*/
background-repeat : repeat-y; /*在y軸重復(fù)排列*/
指定背景位置
background-position : 90% 90%; /*背景圖片x與y軸的位置*/
background-position : top; /*向上對(duì)齊*/
background-position : buttom; /*向下對(duì)齊*/
background-position : left; /*向左對(duì)齊*/
background-position : right; /*向右對(duì)齊*/
background-position : center; /*居中對(duì)齊*/
五、CSS連接屬性：
a /*所有超鏈接*/
a:link /*超鏈接文字格式*/
a:visited /*瀏覽過的鏈接文字格式*/
a:active /*按下鏈接的格式*/
a:hover /*鼠標(biāo)轉(zhuǎn)到鏈接*/
鼠標(biāo)光標(biāo)樣式：
鏈接手指 CURSOR: hand
十字體 cursor:crosshair
箭頭朝下 cursor:s-resize
十字箭頭 cursor:move
箭頭朝右 cursor:move
加一問號(hào) cursor:help
箭頭朝左 cursor:w-resize
箭頭朝上 cursor:n-resize
箭頭朝右上 cursor:ne-resize
箭頭朝左上 cursor:nw-resize
文字I型 cursor:text
箭頭斜右下 cursor:se-resize
箭頭斜左下 cursor:sw-resize
漏斗 cursor:wait
光標(biāo)圖案(IE6) p {cursor:url("光標(biāo)文件名.cur"),text;}
六拨拓、CSS框線一覽表：
border-top : 1px solid #6699cc; /*上框線*/
border-bottom : 1px solid #6699cc; /*下框線*/
border-left : 1px solid #6699cc; /*左框線*/
border-right : 1px solid #6699cc; /*右框線*/
border-top-color : #369 /*設(shè)置上框線top顏色*/
border-top-width :1px /*設(shè)置上框線top寬度*/
border-top-style : solid/*設(shè)置上框線top樣式*/
其他框線樣式
solid /*實(shí)線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內(nèi)凸框*/
ridge /*立體浮雕框*/
inset /*凹框*/
outset /*凸框*/
八肴颊、CSS邊界樣式：
margin-top:10px; /*上邊界*/
margin-right:10px; /*右邊界值*/
margin-bottom:10px; /*下邊界值*/
margin-left:10px; /*左邊界值*/
CSS 屬性： 字體樣式(Font Style)
1 字體樣式 {font:font-style font-variant font-weight font-size font-family}
2 字體類型 {font-family:"字體1","字體2","字體3",...}
3 字體大小 {font-size:數(shù)值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字體風(fēng)格 {font-style:inherit|italic|normal|oblique}
5 字體粗細(xì) {font-weight:100-900|bold|bolder|lighter|normal;}
6 字體顏色 {color:數(shù)值;}
7 陰影顏色 {text-shadow:16位色值}
8 字體行高 {line-height:數(shù)值|inherit|normal;}
9 字 間 距 {letter-spacing:數(shù)值|inherit|normal}
10 單詞間距 {word-spacing:數(shù)值|inherit|normal}
11 字體變形 {font-variant:inherit|normal|small-cps }
12 英文轉(zhuǎn)換 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字體變形 {font-size-adjust:inherit|none}
14 字體 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本樣式(Text Style)
1 行 間 距 {line-height:數(shù)值|inherit|normal;}
2 文本修飾 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:數(shù)值|inherit}
4 水平對(duì)齊 {text-align:left|right|center|justify}
5 垂直對(duì)齊 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 書寫方式 {writing-mode:lr-tb|tb-rl}
背景樣式
1 背景顏色 {background-color:數(shù)值}
2 背景圖片 {background-image: url(URL)|none}
3 背景重復(fù) {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:數(shù)值|top|bottom|left|right|center}
6 背影樣式 {background:背景顏色|背景圖象|背景重復(fù)|背景附件|背景位置}
框架樣式(Box Style)
1 邊界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 補(bǔ) 白 {padding:padding-top padding-right padding-bottom padding-left}
3 邊框?qū)挾?{border-width:border-top-width border-right-width border-bottom-width border-left-width}
寬度值： thin|medium|thick|數(shù)值
4 邊框顏色 {border-color:數(shù)值 數(shù)值 數(shù)值 數(shù)值} 數(shù)值：分別代表top、right渣磷、bottom苫昌、left顏色值
5 邊框風(fēng)格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}
6 邊 框 {border:border-width border-style color}
上 邊 框 {border-top:border-top-width border-style color}
右 邊 框 {border-right:border-right-width border-style color}
下 邊 框 {border-bottom:border-bottom-width border-style color}
左 邊 框 {border-left:border-left-width border-style color}
7 寬 度 {width:長(zhǎng)度|百分比| auto}
8 高 度 {height:數(shù)值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分類列表
1 控制顯示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符號(hào)列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 圖形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目錄列表 {list-style:目錄樣式類型|目錄樣式位置|url}
7 鼠標(biāo)形狀 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
CSS優(yōu)先級(jí)
- css樣式都有一個(gè)權(quán)值的概念，權(quán)值越高幸海，優(yōu)先級(jí)就越高祟身，優(yōu)先級(jí)高的樣式會(huì)覆蓋優(yōu)先級(jí)低的樣式：
內(nèi)聯(lián)樣式表的權(quán)值最高 1000；
ID 選擇器的權(quán)值為 100物独；
Class 類選擇器的權(quán)值為 10袜硫；
HTML 標(biāo)簽選擇器的權(quán)值為 1；
具體舉例可以看參考網(wǎng)站：CSS 的優(yōu)先級(jí)機(jī)制[總結(jié)]
CSS塊元素和選擇器的概念
- 塊級(jí)元素有寬和高的屬性挡篓，塊級(jí)元素都是單獨(dú)占一行婉陷；行內(nèi)元素沒有寬和高，顯示在同一行官研；具體參考：css塊級(jí)元素和行內(nèi)元素詳細(xì)解析
- 獲取要定義樣式的相應(yīng)的dom元素一般都是通過定義class來獲取秽澳，然而當(dāng)有很多相同的元素的時(shí)候，如果每一個(gè)元素都寫上class就會(huì)很麻煩戏羽，這時(shí)候可以通過子元素担神、兄弟元素等方法進(jìn)行獲取，具體參考：CSS選擇器詳解
