前端開發

時間 2019-11-30

標籤前端開發简体版

原文原文鏈接

前端開發

前端概述

1、什麼是前端

前端即網絡站前臺部分，運行在pc端，移動端等瀏覽器上展示給用戶瀏覽的頁面。隨着互聯網技術的發展，HTML5,CSS3,前端框架的應用，跨平臺響應式網頁的設計可以適應各類屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。javascript

前端技術通常分爲前端設計和前端開發，前端設計通常能夠理解爲網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScriptcss

1.廣義前端：全部的用戶能夠直接看見並交互的界面html

2.俠義前端：瀏覽器上運行的用戶交互界面前端

2、前端開發技術棧

HTML

1.超文本標記語言 Hyper Text Markup Language

2.負責完成頁面的結構

3.文件後綴： .html.html

v_hint: "超文本"就是指頁面內能夠包含圖片、連接、甚至音樂、程序等非文字元素

CSS

1.級聯樣式表 Cascading style Sheet

2. 負責頁面的風格設計，樣式、美觀

3.文件後綴：.css

JavaScript

1. 瀏覽器腳本語言，能夠編寫運行在瀏覽器上的程序

2. 負責編寫頁面特效，調用瀏覽器上的API（BOM ),操做改變頁面內容（BOM），從後端獲取數據(Ajax) 渲染頁面等。

3. 文件後綴.js

v_eg: big house , live people

前端三劍客

1、HTML

一、標記語言

標記語言爲非標記語言，不具有編程語言具有的程序邏輯

二、html 爲前端頁面的主體，有標籤、指令與轉義字符等組成。

標籤：被尖括號包裹，由字母開頭包含合法字符的，能夠被瀏覽器解析的標記。eg:系統的標籤，自定義標籤
指令：別尖括號包裹，由！開頭的標記。 eg:< !doctype html><!-- -->
轉義字符： 被&與；包裹的特殊字母組合或#開頭的十進制數。eg: &#60；&#62；&你不是怕；

v_hint：轉義字符html5

三、html 發展史表明版本

① html1：在1993年6⽉做爲互聯⽹⼯程⼯做⼩組（IETF）⼯做草案發布（並⾮標準）
② html2：1995年11⽉做爲RFC 1866發佈，在RFC 2854於2000年6⽉發佈以後被宣佈已通過時
③ html3.2：1997年1⽉14⽇，W3C推薦標準
④ html4.0：1997年12⽉18⽇，W3C推薦標準
⑤ html4.01(微⼩改進)：1999年12⽉24⽇，W3C推薦標準
⑤ html5：2014年10⽉28⽇，W3C推薦標準(h5草案的前身名爲Web Applications 1.0。於2004年被
WHATWG提出，於2007年被W3C接納，併成⽴了新的HTML⼯做團隊。在2008年1⽉22⽇，第⼀份正式草
案發布。)

四、文檔類型

<!--標籤語法規範-->
<! DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/tp/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>

2、CSS

標記語言

標記語言爲非標記語言，不具有編程語言具有的程序邏輯

css爲前端頁面的樣式，由選擇器，做用域與樣式塊組成

選擇器：由標籤，類，id單獨或組合出現
做用域：一組大括號包含的區域
樣式塊：知足css鏈接語法的衆多樣式

3、JavaScript

1.編程語言

實實在在的編程語言，完善的語法，能夠完成複雜的程序邏輯

2.js爲前端頁面的腳步，由DOM，BOM與ES組成

DOM：⽂檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標誌語⾔的標準編程接
⼝。
BOM：瀏覽器對象模型(Browser Object Model)，是⽤於描述這種對象與對象之間層次關係的模型，
瀏覽器對象模型提供了獨⽴於內容的、能夠與瀏覽器窗⼝進⾏互動的對象結構。BOM由多個對象組成，
其中表明瀏覽器窗⼝的Window對象是BOM的頂層對象，其餘對象都是該對象的⼦對象。
ES：ES是⼀種開放的、國際上⼴爲接受的腳本語⾔規範(ECMAScript)，正式名稱爲 ECMA 262 和
ISO/IEC 16262，是宿主環境中腳本語⾔的國際 Web 標準。

3.js框架

Angular,React與Vue等均是JavaScript

第一個頁面

1、基礎模板

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf_8"/>
        <title>第一個頁面</title>
    </head>
    <body>
        
    </body>
</html>

2、模板的解讀

DOCTYPE：指定⽂檔類型，規定html標籤語法
html：⽂檔根標籤，標註着⽂檔(⻚⾯)的開始與結束
head：⽂檔頭標籤，能夠引⽤腳步⽂件、指定樣式表、書寫代碼邏輯塊、提供元信息
body：⽂檔主體標籤，包含⽂檔全部⽂本與超⽂本內容
title：⽂檔tag標題標籤，設置⽂檔tag的標題內容

3、其餘核心模塊標籤

一、meta（元標籤）

字符編碼
<meta charset="utf_8">
<meta http-equiv="content-type" content="text/html;charset=utf_8"/>
SEO
<meta name="keywords" content="8-12個以英文逗號隔開的單詞或詞語">
<meta name="description" content="80字之內的一段話，與網站內容無關">
移動適配
<meta name="viewport" content="with=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no" />

二、link(連接標籤)

外聯樣式表
<link rel="stylesheet" type="text/css" herf="style.css" />
文檔標籤
<link rel="shortcut icon" type="image/x-icon"
 herf="http"//www.baidu.com/favicon.ico />

三、script(腳步標籤)

<script type="text/javascript"></script>

html經常使用標籤

1.無語義標籤

<div></div>
<span></span>

2.經常使用語義標籤

<hn></hn> 標題
<p></p>  段落
<pre></pre> 原文本
<br /> 換行
<hr /> 分割線

3.文本標籤

<i></i> 斜體字
<em></em> 斜體字，表示強調
<b></b> 粗體字
<strong></strong> 粗體字，表示強調(語⽓更強)
<del></del> 刪除的⽂本
<ins></ins> 插⼊的⽂本
<sub></sub> 下標字
<sup></sup> 上標字
<ruby>
 拼⾳<rt>pinyin</rt>
</ruby> 中⽂注⾳，h5新增

4.其餘標籤

<setction></setction> 塊
<small></small>  小號字體

標籤的分類

1.單|雙標籤

單標籤：在自身標籤標識結束，主要應用場景爲功能性標籤java

雙標籤：有成對的結束標識，主要應用場景爲內容性標籤編程

2.行|塊標籤

行標籤：又名內聯標籤，內聯標籤自身不具有寬高，一般同行顯示後端

快標籤：又名塊級標籤，擁有自身寬高，一般獨自佔一行瀏覽器

3.單一|組合標籤

    單一標籤：單獨出現，表示具體的功能或展現具體的內容

    組合標籤：配合使用，才能產生相應的內容與效果

CSS三種引入方式

1、三種方式的書寫規範

一、行間式ruby

<div style="width:100px;heigth=100px; color: rgb(17, 119, 0);">
    
</div>

二、內聯式

<head>
    <style>
        div{
            width:100px;
            heigth:100px;
            background-color:red;
        }
    </style>
</head>

三、外聯式

file: zero.css
div {
 width: 100px;
 height: 100px;
 
}
file:zero.html
<head>
    <link rel="stylesheet" type="text/css" herf="css/zero.css" />
</head>

2、三種方式間的「優先級」

與樣式表的解析順序有關

樣式與長度顏色

一、基本樣式

<head>
    <style>
        div{
            width:100px;
            heigth:100px;
            background-color:red;      
        }
    </style>
</head>

二、長度

px:像素，屏膜上顯示的最小單位，用於網頁設計
mm:毫米
cm:釐米
in:英寸
pt:點（point），一個標準的長度單位，1pt=1/72 in,用於印刷業
em:至關長度，一般1em=16px,應用於流式佈局

三、顏色

rgb():三個值可爲[0-255]數值或百分比，以 ， 相隔（r:red g:green b:blue)
fgba():前三個值可爲像素或百分比，最後一個爲[0,1]數值，以  ，隔開 （a:Alpha)
hsl():第一個值爲[0-360]數值，後兩個值可爲百分比，以，隔開（h:Hue s:Saturation
l:Lightness）
hsla()：第⼀個值爲[0,360]數值，中間⼆個值可爲百分⽐，最後⼀個爲[0, 1]數值，以,相隔
（h:Hue s:Saturation l:Lightness a:Alpha）
#AABBCC：六個⼗六進制位，每兩位⼀總體，分別表明Red、Green、Blue，能夠簡寫#abc

經常使用樣式

一、字體樣式

font-family:字體族科，多值用於備用，以，隔開

font-family:"STSong","Arial";
font-size:字體的大小
font-style: 字體風格 normal | italic |oblique
font-weight:字體重量 normal | bold | lighter | 100-900
font-height:行高
font:字重 風格 大小/行高 字族

二、文本樣式

color：文本顏色

text-align:橫向排列 left 居左 | center 居中 | right 居右

vertical-align:縱向排列

baseline: 將支持valign特性的對象的內容與基線對齊
sub:垂直對齊文本的下標
super：垂直對齊文本的上標
top:將支持valign特性的對象的內容與對象頂端對齊
text-top:將支持valign特性的對象的文本與對象頂端對齊
middle：將支持valign特性的對象的內容與對象中部對齊
bottom：將支持valign特性的對象的文本與對象底端對齊
text-bottom：將支持valign特性的對象的文本與對象頂端對齊
text-indent：字體縮減 text-decoration：字劃線 letter-spacing：字間距 word-spacing：詞間距 word-break：⾃動換⾏

normal：默認換行規則

break-all:容許在單詞內換行

3、背景樣式

background-color:顏色

background-image:圖片

background-image:url(bg.png);

background-repeat:重複

repeat | no-repeat | repeat-x | repeat-y

background-position:定位

top | bottom |left | right | center

v_hint:定位值可時爲方位詞，百分比及固定值，值個數默認爲兩位（水平/垂直），一個值垂直默認center

backgrount-attachment:滾動模式

background-attachment:fixed;

CSS選擇器

1、基礎選擇器

一、通配選擇器

*{
    border:solid;
}
匹配文檔中全部標籤：一般指html、body及body中全部顯示類的標籤

二、標籤選擇器

div{
    background-color:yellow;
}
匹配文檔中全部與標籤名匹配的標籤：如div{}匹配文檔中所有div,span{}會匹配文檔中全部的span

三、類選擇器

.red{
   color:red;
}
匹配文檔中全部擁有class屬性且屬性值爲red的標籤：如<sup class="red"></sup><sub class="red"></sub> 均會被匹配

四、id選擇器

#div{
   text-align:center;
}
匹配文檔中全部擁有id屬性值爲div的標籤：如<div id="div"></div> <section id="div"></section>均會被匹配

2、基礎選擇器優先級

1.基礎選擇器優先級大體與選擇器匹配範圍成反比，匹配範圍越小，優先級越高

2.與匹配精度成正比，精度越高，優先級與潤膏

3.優先級：id優先級>類選擇器>標籤選擇器>通配選擇器

v_hint:id選擇器必須保證單文檔的惟一性

3、組合選擇器

一、羣選擇器

div,span, .red, #div{
color:red;
}

一次性控制多個選擇器

選擇器之間以，隔開，每個選擇器都可覺得任意合法的選擇器或選擇器組合

二、子代（後代）選擇器

子代選擇器用>鏈接
body > div{
    color:red;
}
後代選擇器用空格鏈接
.sup.sub{
    color:red;
}

1.一次性控制一個選擇器（邏輯最後的那個選擇器），前置位的選擇器爲修飾性選擇器

2.每個選擇器位都可覺得任意合法選擇器或選擇器組合

3.子代選擇器必須爲一級父子嵌套關係，後代選擇器能夠爲子一級及多級父子嵌套關係

4、組合選擇器優先級

組合選擇器優先級與權值相關，權值爲權重和
權重對應關係

選擇器	權重
通配	1
標籤	10
類、屬性	100
id	1000
!important	10000

選擇器權值比較，只關心權重和，不更新選擇器位置

不一樣級別的選擇器間不具有可比性：一個類選擇器優先級高於n個標籤選擇器的任意組合

5、屬性選擇器

[attr]：匹配擁有attr屬性的標籤
[attr=val]：匹配擁有attr屬性，屬性值爲val的標籤
[attr^=val]：匹配擁有attr屬性，屬性值以val開頭的標籤
[attr$=val]：匹配擁有attr屬性，屬性值以val結尾的標籤
[attr*=val]：匹配擁有attr屬性，屬性值包含val的標籤

v_hint：屬性選擇器權重等價於類

v_test：掌握全部選擇器，並熟知選擇器優先級

1. 前端開發
2. 前端開發的前景
3. web前端開發前景
4. web前端開發
5. 前端開發—HTML
6. 前端開發篇
7. 前端開發：HTML
8. D8——前端開發
9. references-前端開發
10. 前端開發IDE
更多相關文章...
• WSDL 端口 - WSDL 教程
• Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
• PHP開發工具
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端開發

前端開發

前端概述

1、什麼是前端

2、前端開發技術棧

HTML

CSS

JavaScript

前端三劍客

1、HTML

一、標記語言

二、html 爲前端頁面的主體，有標籤、指令與轉義字符等組成。

三、html 發展史表明版本

四、文檔類型

2、CSS

標記語言

css爲前端頁面的樣式，由選擇器，做用域與樣式塊組成

3、JavaScript

1.編程語言

2.js爲前端頁面的腳步，由DOM，BOM與ES組成

3.js框架

第一個頁面

1、基礎模板

2、模板的解讀

3、其餘核心模塊標籤

一、meta（元標籤）

二、link(連接標籤)

三、script(腳步標籤)

html經常使用標籤

1.無語義標籤

2.經常使用語義標籤

3.文本標籤

4.其餘標籤

標籤的分類

1.單|雙標籤

2.行|塊標籤

3.單一|組合標籤

CSS三種引入方式

1、三種方式的書寫規範

2、三種方式間的「優先級」

經常使用樣式

CSS選擇器

1、基礎選擇器

2、基礎選擇器優先級

3、組合選擇器

4、組合選擇器優先級

5、屬性選擇器