前端開發(fā)

SQC 發(fā)布于2019-04-23 13:22 / 2412人閱讀

摘要：前端開發(fā)前端概述一什么是前端前端即網(wǎng)絡站前臺部分，運行在端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的頁面。文件后綴前端三劍客一標記語言標記語言為非標記語言，不具備編程語言具備的程序邏輯為前端頁面的主體，有標簽指令與轉義字符等組成。

前端開發(fā)

前端概述

一、什么是前端

前端即網(wǎng)絡站前臺部分，運行在pc端，移動端等瀏覽器上展現(xiàn)給用戶瀏覽的頁面。隨著互聯(lián)網(wǎng)技術的發(fā)展，HTML5,CSS3,前端框架的應用，跨平臺響應式網(wǎng)頁的設計能夠適應各種屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。

前端技術一般分為前端設計和前端開發(fā)，前端設計一般可以理解為網(wǎng)站的視覺設計，前端開發(fā)則是網(wǎng)站的前臺代碼實現(xiàn)，包括基本的HTML和CSS以及JavaScript

1.廣義前端：所有的用戶可以直接看見并交互的界面

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

二、前端開發(fā)技術棧

HTML

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

2.負責完成頁面的結構

3.文件后綴： .html.html

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

CSS

1.級聯(lián)樣式表 Cascading style Sheet

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

3.文件后綴：.css

JavaScript

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

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

3. 文件后綴.js

v_eg: big house , live people

前端三劍客

一、HTML

1、標記語言

標記語言為非標記語言，不具備編程語言具備的程序邏輯

2、html 為前端頁面的主體，有標簽、指令與轉義字符等組成。

標簽：被尖括號包裹，由字母開頭包含合法字符的，可以被瀏覽器解析的標記。eg:系統(tǒng)的標簽，自定義標簽
指令：別尖括號包裹，由！開頭的標記。 eg:< !doctype html>
轉義字符： 被&與；包裹的特殊字母組合或#開頭的十進制數(shù)。eg: <；>；&你不是怕；
?

v_hint：轉義字符

3、html 發(fā)展史代表版本

① html1：在1993年6?作為互聯(lián)??程?作?組（IETF）?作草案發(fā)布（并?標準）
② html2：1995年11?作為RFC 1866發(fā)布，在RFC 2854于2000年6?發(fā)布之后被宣布已經(jīng)過時
③ 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?，第?份正式草
案發(fā)布。)

4、文檔類型


"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/tp/html4/strict.dtd">
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、CSS

標記語言

標記語言為非標記語言，不具備編程語言具備的程序邏輯

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

選擇器：由標簽，類，id多帶帶或組合出現(xiàn)
作用域：一組大括號包含的區(qū)域
樣式塊：滿足css連接語法的眾多樣式

三、JavaScript

1.編程語言

實實在在的編程語言，完善的語法，可以完成復雜的程序邏輯

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

DOM：?檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標志語?的標準編程接
?。
BOM：瀏覽器對象模型(Browser Object Model)，是?于描述這種對象與對象之間層次關系的模型，
瀏覽器對象模型提供了獨?于內容的、可以與瀏覽器窗?進?互動的對象結構。BOM由多個對象組成，
其中代表瀏覽器窗?的Window對象是BOM的頂層對象，其他對象都是該對象的?對象。
ES：ES是?種開放的、國際上?為接受的腳本語?規(guī)范(ECMAScript)，正式名稱為 ECMA 262 和
ISO/IEC 16262，是宿主環(huán)境中腳本語?的國際 Web 標準。

3.js框架

Angular,React與Vue等均是JavaScript

第一個頁面

一、基礎模板

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

二、模板的解讀

DOCTYPE：指定?檔類型，規(guī)定html標簽語法
html：?檔根標簽，標注著?檔(??)的開始與結束
head：?檔頭標簽，可以引?腳步?件、指定樣式表、書寫代碼邏輯塊、提供元信息
body：?檔主體標簽，包含?檔所有?本與超?本內容
title：?檔tag標題標簽，設置?檔tag的標題內容

三、其他核心模塊標簽

1、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字以內的一段話，與網(wǎng)站內容無關">
移動適配
<meta name="viewport" content="with=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no" />

? ? ? ? ? ? ? ? ? ? ? ? ? ?

2、link(鏈接標簽)

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

3、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>pinyinrt>
ruby> 中?注?，h5新增

4.其他標簽

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

標簽的分類

1.單|雙標簽

單標簽：在自身標簽標識結束，主要應用場景為功能性標簽

雙標簽：有成對的結束標識，主要應用場景為內容性標簽

2.行|塊標簽

行標簽：又名內聯(lián)標簽，內聯(lián)標簽自身不具備寬高，通常同行顯示

快標簽：又名塊級標簽，擁有自身寬高，通常獨自占一行

3.單一|組合標簽

 ?  單一標簽：多帶帶出現(xiàn)，表示具體的功能或展示具體的內容
?
 ?  組合標簽：配合使用，才能產(chǎn)生相應的內容與效果

CSS三種引入方式

一、三種方式的書寫規(guī)范

1、行間式

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

2、內聯(lián)式

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

3、外聯(lián)式

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

二、三種方式間的“優(yōu)先級”

與樣式表的解析順序有關

樣式與長度顏色

1、基本樣式

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

2、長度

px:像素，屏膜上顯示的最小單位，用于網(wǎng)頁設計
mm:毫米
cm:厘米
in:英寸
pt:點（point），一個標準的長度單位，1pt=1/72 in,用于印刷業(yè)
em:相當長度，通常1em=16px,應用于流式布局

3、顏色

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

常用樣式

1、字體樣式

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

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

2、文本樣式

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：默認換行規(guī)則

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:定位值可時為方位詞，百分比及固定值，值個數(shù)默認為兩位（水平/垂直），一個值垂直默認center

backgrount-attachment:滾動模式

background-attachment:fixed;

CSS選擇器

一、基礎選擇器

1、通配選擇器

*{
    border:solid;
}
匹配文檔中所有標簽：通常指html、body及body中所有顯示類的標簽

2、標簽選擇器

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

3、類選擇器

.red{
 ?  color:red;
}
匹配文檔中所有擁有class屬性且屬性值為red的標簽：如<sup class="red">sup><sub class="red">sub> 均會被匹配

4、id選擇器

#div{
 ?  text-align:center;
}
匹配文檔中所有擁有id屬性值為div的標簽：如<div id="div">div> <section id="div">section>均會被匹配

二、基礎選擇器優(yōu)先級

1.基礎選擇器優(yōu)先級大致與選擇器匹配范圍成反比，匹配范圍越小，優(yōu)先級越高

2.與匹配精度成正比，精度越高，優(yōu)先級與潤膏

3.優(yōu)先級：id優(yōu)先級>類選擇器>標簽選擇器>通配選擇器

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

三、組合選擇器

1、群選擇器

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

一次性控制多個選擇器

選擇器之間以，隔開，每一個選擇器均可以為任意合法的選擇器或選擇器組合

2、子代（后代）選擇器

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

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

2.每一個選擇器位均可以為任意合法選擇器或選擇器組合

3.子代選擇器必須為一級父子嵌套關系，后代選擇器可以為子一級及多級父子嵌套關系

四、組合選擇器優(yōu)先級

組合選擇器優(yōu)先級與權值相關，權值為權重和
權重對應關系

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

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

不同級別的選擇器間不具備可比性：一個類選擇器優(yōu)先級高于n個標簽選擇器的任意組合

五、屬性選擇器

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

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

v_test：掌握所有選擇器，并熟知選擇器優(yōu)先級

GPU云服務器云服務器前端開發(fā)用什么前端開發(fā) 前端開發(fā)前端前端前端開發(fā) 前端前端開發(fā)教程

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/1783.html

前端開發(fā)者指南（2017）

摘要：第二部分學習前端開發(fā)第二部分指出了學習成為一個前端開發(fā)者所需的自學資源和教學資源譯者注教學資源包括有講師指導的付費課程計劃學院和訓練營。第三部分前端開發(fā)工具第三部分簡要地介紹和指出了一些前端圈內的工具。參與者（排名不分先后）：blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...

kviccn 2019-08-20 19:01 評論0 收藏0
前端開發(fā)者指南（2017）

摘要：第二部分學習前端開發(fā)第二部分指出了學習成為一個前端開發(fā)者所需的自學資源和教學資源譯者注教學資源包括有講師指導的付費課程計劃學院和訓練營。第三部分前端開發(fā)工具第三部分簡要地介紹和指出了一些前端圈內的工具。參與者（排名不分先后）：blueken; brucecham; cfanlife; DDU1222; LittlePineapple; MatildaJin; MAYDAY1993;...

Salamander 2019-08-29 13:16 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業(yè)務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
2017前端開發(fā)手冊三-前端職位描述

摘要：最常被大家稱呼的兩個職位名稱是前端開發(fā)者或者前端工程師。開發(fā)者描述具有和技能的開發(fā)人員的前端職位稱呼，不要求掌握和應用程序相關的知識。前端專家當一詞包含在職位名稱中時，這表示開發(fā)人員具有在前端技術中應用策略的豐富經(jīng)驗。以下是各種前端職稱的列表和說明。最常被大家稱呼的兩個職位名稱是前端開發(fā)者或者前端工程師。請記住，只要是稱呼中包含前端、client-side、web UI、HTML、C...

李增田 2019-08-01 17:21 評論0 收藏0
2017前端開發(fā)手冊三-前端職位描述

摘要：最常被大家稱呼的兩個職位名稱是前端開發(fā)者或者前端工程師。開發(fā)者描述具有和技能的開發(fā)人員的前端職位稱呼，不要求掌握和應用程序相關的知識。前端專家當一詞包含在職位名稱中時，這表示開發(fā)人員具有在前端技術中應用策略的豐富經(jīng)驗。以下是各種前端職稱的列表和說明。最常被大家稱呼的兩個職位名稱是前端開發(fā)者或者前端工程師。請記住，只要是稱呼中包含前端、client-side、web UI、HTML、C...

antyiwei 2019-08-20 18:35 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

SQC

男|高級講師

我要關注我要私信

TA的文章

#yyds干貨盤點#劍指 Offer 06. 從尾到頭打印鏈表

閱讀 2074·2021-11-23 09:51
多測師肖sir___app測試（新增001）

閱讀 2217·2021-09-29 09:34
怎么連接新網(wǎng)云主機-新睿云云主機怎么使用？

閱讀 3710·2021-09-22 15:50
云主機有什么好處-云主機有什么好處？

閱讀 3569·2021-09-22 15:23
CSS圖形繪制總結

閱讀 2600·2019-08-30 15:55
Vue項目中添加鎖屏功能

閱讀 713·2019-08-30 15:53
css手寫一個表頭固定

閱讀 3084·2019-08-29 17:09
SpringCloud+quartz 定時提醒系統(tǒng)

閱讀 2639·2019-08-29 13:57

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端開發(fā)

前端開發(fā)

前端概述

一、什么是前端

二、前端開發(fā)技術棧

HTML

CSS

JavaScript

前端三劍客

一、HTML

1、標記語言

2、html 為前端頁面的主體，有標簽、指令與轉義字符等組成。

3、html 發(fā)展史代表版本

4、文檔類型

二、CSS

標記語言

css為前端頁面的樣式，由選擇器，作用域與樣式塊組成

三、JavaScript

1.編程語言

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

3.js框架

第一個頁面

一、基礎模板

二、模板的解讀

三、其他核心模塊標簽

1、meta（元標簽）

2、link(鏈接標簽)

3、script(腳步標簽)

html常用標簽

1.無語義標簽

2.常用語義標簽

3.文本標簽

4.其他標簽

標簽的分類

1.單|雙標簽

2.行|塊標簽

3.單一|組合標簽

CSS三種引入方式

一、三種方式的書寫規(guī)范

二、三種方式間的“優(yōu)先級”

常用樣式

CSS選擇器

一、基礎選擇器

二、基礎選擇器優(yōu)先級

三、組合選擇器

四、組合選擇器優(yōu)先級

五、屬性選擇器

相關文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

二、前端開發(fā)技術棧

一、HTML

1、標記語言

2、html 為前端頁面的主體，有標簽、指令與轉義字符等組成。

3、html 發(fā)展史代表版本

二、CSS

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

三、JavaScript

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

二、模板的解讀

1、meta（元標簽）

2、link(鏈接標簽)

一、三種方式的書寫規(guī)范

二、三種方式間的“優(yōu)先級”

二、基礎選擇器優(yōu)先級

三、組合選擇器

五、屬性選擇器