部分資源地址綠葉學習網

前端開發系統化學習，包括html、css、PC端及移動端佈局技巧、javascript、jquery、js特效製作、ajax前後臺互動等。

HTML

一個HTML文件由4個基本部分組成：

① 一個文件宣告：<!DOCTYPE HTML>
② 一個html標籤對：<html></html>
③ 一個head標籤對：<head></head>
④ 一個body標籤對：<body></body>

html5是向下相容的文件，用sublime text建立方法： html:5 + tab 或者 ! + tab

一般來說，只有6個標籤能放在<head>標籤內：

① <title>；② <meta>；keywords descriptionauthor copyright

③ <link>；④ <style>；⑤ <script>

meta標籤有兩個重要的屬性name和http-equiv。

實體：&nbsp; “<” 和 “>” 的字元實體為 &lt; 和 &gt;

空格“ ”，在前端界又稱為“牛逼SP”

語義化可以給我們帶來什麼樣的好處呢？

1. 更容易被搜尋引擎收錄。

2. 更容易讓螢幕閱讀器讀出網頁內容。

<hr>標籤，新增水平橫線 <br>換行

div，即division（分割槽）

HTML元素根據表現形式，可以分為2類：

（1）塊元素（block）；

（1）獨佔一行，排斥其他元素跟其位於同一行，包括塊元素和行內元素；
（2）塊元素內部可以容納其他塊元素或行元素；

（2）行內元素（inline）；行內元素預設顯示狀態可以與其他行內元素共存在同一行。

任何HTML元素都屬於這兩類中的其中一類。

ul元素內部的子元素只能是li元素，不能是其他元素，無序列表列表項符號由list-style-type屬性定義，到時候應該摒棄type屬性

網頁語義結構良好，對於搜尋引擎來說也是極為重要的一點。

title屬性的值往往都是跟alt屬性的值相同，一個是給讀者使用者看，一個是給搜尋引擎看。

<a href="連結地址" target="目標視窗的開啟方式">超連結文字</a> 一般情況下，target只用到“_self”和“_blank”這兩個屬性值

超連結根據連結物件的不同分為：

（1）外部連結

（2）內部連結：a.內部頁面連結（同域名下面）；b.錨點連結（目錄）；

表單元素不一定都要放在form標籤內。對於要與伺服器進行互動（也可以說是跟網站後臺進行互動）的表單元素就必須放在form標籤內才有效

焦點：<label for="male">男</label>

<input type="radio" name="gender" id="male" />

普通按鈕一般與JavaScript指令碼結合在一起來實現一些特效，提交按鈕主要用於把當前所在<form>標籤內部的表單輸入資訊提交給伺服器處理，而重置按鈕則是清除當前所在<form>標籤內部的表單元素的輸入資訊。
文字框有3種形式：單行文字框text、密碼文字框password和多行文字框，textarea。單行文字框和密碼文字框使用的是input標籤，而多行文字框使用的是textarea標籤。
<button>標籤與表單按鈕相比，<button>標籤開始符號與結束符號之間可以插入其他標籤或文字，因此它的功能更加強大。插入圖片
embed是HTML5新增的標籤。

<embed src="多媒體檔案地址" width="播放介面的寬度" height="播放介面的高度"></embed>

“ ./ ” 表示當前檔案所在目錄下,“ ../ ” 表示當前檔案所在目錄下的上一級目錄,比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images資料夾中的pic.jpg的圖片

CSS

在HTML中引入CSS共有3種方式：

（1）外部樣式表；<linkhref="index.css"rel="stylesheet"type="text/css"/>
（2）內部樣式表； <styletype="text/css"> p{color:Red;} </style>
（3）內聯樣式表；<pstyle="color:Red; ">綠葉學習網</p>

選擇器 { 屬性:值; 屬性:值; 屬性:值;}
height:auto，是指根據塊內內容自動調節高度。 height:100%，是指其相對父塊高度而定義的高度，也就是按照離它最近且有定義高度的父層的高度來定義高度。
p{color:red !important;} //設定具有最高權值

我們可以使用CSS的text-indent屬性來控制文字首行的縮排。 在CSS中，使用text-align屬性控制文字的水平方向的對齊方式：左對齊、居中對齊、右對齊。
邊框CSS樣式有一個簡潔的寫法： border:1px solid gray;
定義這四個偽類，必須按照“link、visited、hover、active”“love hate”

請記住，“:hover”偽類可以定義任何一個元素在滑鼠經過時的樣式！ 一般情況下，我們只需要採用瀏覽器預設的滑鼠樣式就可以了，如果實在特別需要的時候可以用“cursor:pointer;”。對於cursor的其他屬性值，我們一般用不上。因此大家無需花力氣去記憶這些沒用的屬性。
文字屬性：

line-height 設定文字的行高，如：line-height:24px;
text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px
text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居

盒子寬度 = width + padding左右 + border左右

margin相關技巧

1、設定元素水平居中： margin:x auto;

2、margin負值讓元素位移及邊框合併

外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。解決方法如下：

1、使用這種特性

2、設定一邊的外邊距，一般設定margin-top

3、將元素浮動或者定位

margin-top 塌陷

在兩個盒子巢狀時候，內部的盒子設定的margin-top會加到外邊的盒子上，導致內部的盒子margin-top設定失敗，解決方法如下：

1、外部盒子設定一個邊框

2、外部盒子設定 overflow:hidden

3、使用偽元素類：

css的佈局模型（定位機制）：

我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下：

relative 生成相對定位元素，元素所佔據的文件流的位置不變，元素本身相對文件流的位置進行偏移
absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上一個設定了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。
static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性
inherit 從父元素繼承 position 屬性的值

background-color 設定背景顏色
background-image 設定背景圖片地址
background-repeat 設定背景圖片如何重複平鋪
background-position 設定背景圖片的位置
background-attachment 設定背景圖片是固定還是隨著頁面滾動條滾動

各種居中

文字、圖片等行內元素時，水平居中是通過給父元素設定 text-align:center來實現

定寬和塊狀兩個條件的元素是可以通過設定“左右margin”值為“auto”來實現居中

垂直居中

父元素高度確定的單行文字

height:100px;

line-height:100px; //上下引數一樣

隱性改變display型別

1. position : absolute

2. float : left 或 float:right

簡單來說，只要html程式碼中出現以上兩句之一，元素的display顯示型別就會自動變為以display:inline-block（塊狀元素）的方式顯示，當然就可以設定元素的 width和 height 了，且預設寬度不佔滿父元素。

看到一張頁面，先不要被絢麗的CSS效果所打擾，重點是看它的HTML結構和語義化少用div

讓CSS3樣式相容，需要將某些樣式加上瀏覽器字首：

-ms- 相容IE瀏覽器

-moz- 相容firefox

-o- 相容opera

-webkit- 相容chrome 和 safari

h5新增的主要語義化標籤如下：

1、header 頁面頭部、頁首

2、nav 頁面導航

3、article 一篇文章

4、section 文章中的章節

5、aside 側邊欄

6、footer 頁面底部、頁尾

JavaScript

js作用：

1、動態改變頁面內容
2、動態改變網頁的外觀
3、驗證表單資料
4、響應事件

什麼叫“指令碼語言”？

（1）它不需要編譯成二進位制，以文字形式存在；

（2）指令碼語言一般都需要其他語言的呼叫執行，不能獨立執行。
JavaScript在HTML的引用共有4種：
- （1）頁頭引入（head標籤內）；<script type="text/javascript">……</script>
- （2）頁中引入（body標籤內）；
- （3）元素事件中引入（標籤屬性中引入）；<input type="button"onClick="alert('綠葉學習網')"value="按鈕"/>
- （4）引入外部JS檔案；<script src="js/index.js" type="text/javascript"></script>

除錯程式的方法

1、alert

2、console.log

3、document.title

JavaScript資料型別有2大分類：一是“基本資料型別”，二是“特殊資料型別”。

其中，基本資料型別包括以下3種：

（1）數字型（Number型）：如整型84，浮點型3.14；
（2）字串型（String型）：如"綠葉學習網"；
（3）布林型（Boolean型）：true或fasle；

特殊資料型別有3種：

（1）空值（null型）；
（2）未定義值（undefined型）；
（3）轉義字元；
null不等同於空的字串（""）或0，因為空的字串（""）或0是存在的，但是null表示其不存在的。

根據個人的開發經驗中，只需要記憶\n、\'、\"這3個就已經夠初學者走很遠了

alert("歡迎您來到\"綠葉學習網\"！");

break語句與continue語句的主要區別是：break是徹底結束迴圈，而continue是結束本次迴圈

常用的函式呼叫方式有4種：

（1）簡單呼叫； alertSum();

（2）在表示式中呼叫； document.write(isLeapYear(2015));

（3）在事件響應中呼叫； <input type="button"onclick="alertMes()"value="提交"/>

（4）通過連結呼叫；<a href="javascript:函式名"></a>

建立日期物件

vardt1 =newDate(相關推薦黑馬程式設計師05-Web前端學習筆記部分資源地址綠葉學習網前端開發系統化學習，包括html、css、PC端及移動端佈局技巧、javascript、jquery、js特效製作、ajax前後臺互動等。 HTML 一個HTML文件由4個基本部分組成： ① 一個文件宣告：<!DOC 黑馬程式設計師_java基礎加強學習筆記之註解 ------- <a href="http://www.itheima.com" target="blank">android培訓</a>、<a href="http://www.itheima.com" target="blank">j 黑馬程式設計師之ADO.NET學習筆記：SqlParameter(Sql引數) -------------------------------------------------2345王牌技術員聯盟、2345王牌技術員聯盟、期待與您交流！-------------------- 黑馬程式設計師之專案開發學習筆記:酒店管理系統(HotelManager) --------------------------------------------2345王牌技術員聯盟、2345王牌技術員聯盟、期待與您交流！--------------------------------------------- 某酒店擬開發一套內部管理系統，基很多人轉行做程式設計師選擇web前端學習，前端簡單在哪裡？不管你是工人階層還是服務行業，是否想過轉行IT，轉行IT後肯定會選擇一門程式語言進行深入學習，很多轉行的人基礎都不是太好，不是科班 Web前端學習筆記之安裝和使用PhantomJS 0x00 安裝PhantomJS（linux環境安裝）將PhantomJS下載在/usr/local/src/packet/目錄下（這個看個人喜好）作業系統：CentOS 7 64-bit 1.下載地址：http://phantomjs.org/download.ht Web前端學習筆記，詳細的Web前端學習路線圖 3.3 小米教學視頻前端工程武漢 beyond 1.8 之前 1.5 前端就是後臺實現和視覺表現的橋梁，是貫穿在整個產品開發過程的紐帶，起到承上啟下的作用，一個好的前端工程師他能夠很好理解產品經理對用戶體驗的要求，也能夠很好地理解後臺工程師對數據邏輯，或者程序邏輯進行 Web前端學習筆記——構建前端自動化工作流環境目錄為什麼要有自動化的流程在我們的開發過程中有大量的重複操作 DRY Don't repeat yourself 開發人員的精力應放在哪？創造，新的一切前端開發的編譯操作 1. Web前端學習筆記——AngularJS之過濾器、服務、路由目錄過濾器自定義比較服務建立服務自定義服務路由過濾器 data 過濾器用於時間日期格式化 <span>{{'1288323623006' | Web前端學習筆記——VueJS之過濾器、生命週期、請求、動畫品牌管理案例新增新品牌刪除品牌 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo Web前端學習筆記——VueJS之元件、路由定義Vue元件什麼是元件：元件的出現，就是為了拆分Vue例項的程式碼量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可；元件化和模組化的不同：模組化：是從程式碼邏輯的角度進行劃分的；方便程式碼分層 Web前端學習筆記——Webpack 在網頁中會引用哪些常見的靜態資源？ JS .js .jsx .coffee .ts（TypeScript 類 C# 語言） CSS .css .less .sass .scss Images .jpg .png .g Web前端學習筆記——CSS顯示模式、特性、背景標籤顯示模式（display）非洲黑人：面板內黑色素含量高，以吸收陽光中的紫外線，保護面板內部結構免遭損害，頭髮象羊毛一樣捲曲，使每根捲髮周圍都有許多空隙，空隙充滿空氣，捲髮有隔熱作用。歐洲白人：生活寒帶或著是說常年溫度較低的地緣,加上年日照時間少， Web前端學習筆記——CSS之Photoshop切圖 Photoshop基本使用 PS介面組成： ctrl + r 顯示隱藏標尺右擊標尺 — 把裡面的單位一律改為畫素 ctrl+ d 取消選區選單欄、選項欄、工具欄、浮動面板（拖拽名稱，可單獨操作面板）、繪圖視窗視窗選單，可顯示隱藏所 Web前端學習筆記——CSS京東案例、BFC 京東專案(一) 京東專案介紹專案名稱：京東網專案描述：京東首頁公共部分的頭部和尾部製作，京東首頁中間部分。專案背景現階段電商類網站很流行，很多同學畢業之後會進入電商類企業工作，同時電商類網站需要的技術也是較為複雜的，這裡用京東電商網站複習、總結、提高前 Web前端學習筆記——JavaScript之陣列、函式、作用域陣列為什麼要學習陣列之前學習的資料型別，只能儲存一個值(比如：Number/String。我們想儲存班級中所有學生的姓名，此時該如何儲存？陣列的概念所謂陣列，就是將多個元素（通常是同一型別）按一定順序排列放到一個集合中，那麼這個集合我們就稱之為陣列 Web前端學習筆記——JavaScript之物件物件為什麼要有物件 function printPerson(name, age, sex....) { } // 函式的引數如果特別多的話，可以使用物件簡化 function printPerson(person) { console.log(perso Web前端學習筆記——VueJS-APP案例原始碼下載將專案原始碼託管到oschina中點選頭像 -> 修改資料 -> SSH公鑰如何生成SSH公鑰建立自己的空倉儲，使用 git config --global user.name "使用者名稱" 和 git config - Web前端學習筆記——JavaScript 之函式進階函式進階函式的定義方式函式宣告函式表示式 new Function 函式宣告 function foo () { } 函式表示式 var foo = function () { } 函式宣告與函式表示式的區別函式宣告必須有名字函式宣告會函 Web前端學習筆記——JavaScript之面向物件程式設計 JavaScript 高階基本概念複習由於 JavaScript 高階還是針對 JavaScript 語言本身的一個進階學習，所以在開始之前我們先對以前所學過的 JavaScript 相關知識點做一個快速複習總結。重新介紹 JavaScript J

黑馬程式設計師05-Web前端學習筆記

部分資源地址 綠葉學習網

HTML

<hr>標籤，新增水平橫線 <br>換行

隱性改變display型別

JavaScript

除錯程式的方法

相關推薦

部分資源地址綠葉學習網