tags: 前端概要
前端學(xué)習(xí)
- 從B/S模型說起： 從C/S模型發(fā)展而來 在客戶端統(tǒng)一成瀏覽器，不用每一個(gè)都在電腦上安裝一個(gè)客戶端（智能手機(jī)好像又不一樣）
- web的組成：
- ①Web服務(wù)器：監(jiān)聽客戶端連接請(qǐng)求、接收請(qǐng)求，返回響應(yīng)內(nèi)容。軟件： Httpd（httpd是Apache早期的軟件初衷 早期的apache小組，現(xiàn)在已經(jīng)成為一個(gè)擁有巨大力量的apache基金會(huì)。 他們把起家的apache更名為httpd，也更符合其http server的特性。而apache現(xiàn)在成為 apache基金會(huì)下幾十種開源項(xiàng)目的標(biāo)識(shí)。 ）
- ②web客戶端：各種瀏覽器
- ③傳輸協(xié)議：http協(xié)議（定義Web服務(wù)器和客戶端的通訊細(xì)節(jié)）
HTML
HTML(Hyper Text Markup Language) 超文本標(biāo)記語言
從名字說起：
- 內(nèi)容-->文本，超文本（圖片，音頻，超鏈接等）
- 標(biāo)記——>可以用瀏覽器解釋的的格式 一共52個(gè)標(biāo)記
- 語言 -->既然是語言就有語法 ——--標(biāo)簽之間的關(guān)系和標(biāo)簽的類型及屬性
1.關(guān)于內(nèi)容
有時(shí)候文本的內(nèi)容可能是標(biāo)簽的關(guān)鍵字或空格（ ） 這時(shí)就需要轉(zhuǎn)義字符了
2.關(guān)于標(biāo)簽
標(biāo)簽的初衷是設(shè)計(jì)為用于定義文檔內(nèi)容 如：
<h>、<p>、<table> 這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類的信息 但也有<font> <b> 這樣用于改變文本的屬性（顏色，大小等） 不推存使用（css代替）
標(biāo)簽的類型
?區(qū)塊元素(block)：必須處于獨(dú)立的一行中 如：<div> 會(huì)換行
?內(nèi)聯(lián)元素(inline)：可以與其他內(nèi)容處在一行中
標(biāo)簽的屬性
不同的標(biāo)簽具有不同的屬性，所有的標(biāo)簽都具備下列四個(gè)屬性：
?id：整個(gè)文檔每個(gè)標(biāo)簽可以聲明一個(gè)唯一的id號(hào)
?style：為元素指定CSS樣式
?class：指定元素所屬的類型
?title：指定標(biāo)簽的彈出式提示語
重點(diǎn)的標(biāo)簽
有一些標(biāo)簽需要交互（和服務(wù)器）
3.頁(yè)面的布局
?TABLE布局：過時(shí)
?DIV+CSS：當(dāng)前主流，表達(dá)的語義不清
?HTML5布局標(biāo)簽：未來趨勢(shì)
CSS(Cascading Style Sheets)
CSS(Cascading Style Sheets)層疊樣式表
樣式從 HTML 4.0開始使用 （XTHML1.0加強(qiáng)規(guī)范），為了解決內(nèi)容與表現(xiàn)分離的問題
還是從名字說起：這個(gè)可能比W3C上的好一點(diǎn)
-
樣式：
- 瀏覽器缺省設(shè)置樣式 //其實(shí)不屬于樣式 - 外部樣式表 //推存使用（不要太多）<link rel="stylesheet" href="*.css" /> - 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部） //<head><style type=”text/css”>...</style></head頁(yè)面統(tǒng)一的樣式最好放在這 - 內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部） //<div style=””></div>推存少用 因?yàn)楸举|(zhì)上沒有解決內(nèi)容與表現(xiàn)分離的問題 層疊：樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表
格式：
選擇器{屬性1:值1+單位;屬性2：值2+單位；}
1.選擇器
給不同的標(biāo)簽添加樣式 詳細(xì)選擇器見
(1)通用選擇器： *{...} 選擇頁(yè)面中的所有元素
(2)元素選擇器：標(biāo)簽名{...} 選擇指定的元素 如 div{...}
(3)ID選擇器：#ID值{...} 僅選擇具有指定ID的元素 如 #p2{...}
(4)類別選擇器（加強(qiáng)版ID選擇器）： .類名{...}選擇具有指定class的所有元素 如 .mark{}
//下面選擇器有嵌套（上面提到的單個(gè)選擇器的嵌套）
(6)子元素選擇器（加空格）：選擇器1 選擇器2{...} 選擇可被選擇器1選擇的元素下的所有子元素中可被選擇器2選中的元素 如 div span{...} .product .mark{...}
(7)直接子元素選擇器 選擇器1>選擇器2{...} 選中選擇器1中的直接子元素中可被選擇器2選中的 如div > span{...} IE6不支持
(8)多選/群組選擇器：選擇器1,選擇器2,...選擇器n{...} 選擇可被任何一個(gè)選擇器選中的元素 h2,#main,.mark{...}
(9)偽類選擇器： :偽類名{...} //用于有動(dòng)作的選擇器（有交互性）
選擇器的優(yōu)先級(jí)：
!important > 內(nèi)聯(lián)樣式（style屬性） > #ID選擇器（id屬性） > 類選擇器/偽類選擇器（class屬性） > 元素選擇器（標(biāo)簽） > 瀏覽器預(yù)定義樣式
2.css中的屬性
css是用于顯示樣式 所以其中的所有屬性都僅僅是改變外觀（使其賞心悅目） 屬性按照改變誰的外觀（文本，文本周圍）可以分為兩種 用盒子模型可以較好的描述出來
與元素（element）有關(guān)
定位（Positioning）
顏色（color）
背景（background）
字體（font）
等等 ......
與元素周圍有關(guān)
padding
border
margin
等等 .......
當(dāng)然和HTML一樣列表（list）和表格（table）用的較多，所以單獨(dú)有屬性
3.css中的單位（value）
布局是一個(gè)和考驗(yàn)技術(shù)和耐心的活 可能你花了很長(zhǎng)的時(shí)間但看到的頁(yè)面布局并不是你想要的效果，并且里面的不同屬性可以顯示相同的效果 --》解決辦法:多積累，不然還能怎么辦
Javascript
學(xué)習(xí)路線：js【 一門語言 很神奇 沒有class 但可以創(chuàng)建對(duì)象,在客戶端使用 服務(wù)器也行Node.js（但我沒看到過 php做了）】 ――>ajax【異步刷新--請(qǐng)求服務(wù)器卻不重新加載頁(yè)面】――>jquery【類庫(kù)--很多方法 也有人說框架但覺得還是有區(qū)別】
JS在瀏覽器端負(fù)責(zé)“行為” ，所以他可以和css一樣嵌入html之中。
通常說的javascript包含三個(gè)層次：
?核心——由ECMAScript（最新版ecmascript6）標(biāo)準(zhǔn)制定，可以運(yùn)行在任何js引擎中，不光可以編寫客戶端腳本，還可以編寫服務(wù)器端腳本(NodeJS)、編寫桌面應(yīng)用程序、網(wǎng)絡(luò)程序
?DOM——將JS嵌入在網(wǎng)頁(yè)中操作HTML標(biāo)簽
?BOM——使用JS與瀏覽器進(jìn)行交互
由于以前學(xué)過c，c++，java等語言所以學(xué)習(xí)其他 的語言時(shí)都是從找和以前學(xué)過的語言不同時(shí)入手 總的來說JS吸收了很多用起來方便的東西（還省去了這些東西繁瑣的語法） 但好像沒有嚴(yán)格的語法 但語言說到底還是為了解決問題 有不有嚴(yán)格的語言在應(yīng)用方面就不要討論了
