前端開發(fā)

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

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

前端開發(fā)

前端概述

一、什么是前端

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

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

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

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

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

HTML

1.超文本標(biāo)記語言 Hyper Text Markup Language

2.負(fù)責(zé)完成頁面的結(jié)構(gòu)

3.文件后綴： .html.html

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

CSS

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

2. 負(fù)責(zé)頁面的風(fēng)格設(shè)計，樣式、美觀

3.文件后綴：.css

JavaScript

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

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

3. 文件后綴.js

v_eg: big house , live people

前端三劍客

一、HTML

1、標(biāo)記語言

標(biāo)記語言為非標(biāo)記語言，不具備編程語言具備的程序邏輯

2、html 為前端頁面的主體，有標(biāo)簽、指令與轉(zhuǎn)義字符等組成。

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

v_hint：轉(zhuǎn)義字符

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

① html1：在1993年6?作為互聯(lián)??程?作?組（IETF）?作草案發(fā)布（并?標(biāo)準(zhǔn)）
② html2：1995年11?作為RFC 1866發(fā)布，在RFC 2854于2000年6?發(fā)布之后被宣布已經(jīng)過時
③ html3.2：1997年1?14?，W3C推薦標(biāo)準(zhǔn)
④ html4.0：1997年12?18?，W3C推薦標(biāo)準(zhǔn)
⑤ html4.01(微?改進(jìn))：1999年12?24?，W3C推薦標(biāo)準(zhǔn)
⑤ html5：2014年10?28?，W3C推薦標(biāo)準(zhǔn)(h5草案的前身名為Web Applications 1.0。于2004年被
WHATWG提出，于2007年被W3C接納，并成?了新的HTML?作團(tuán)隊。在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

標(biāo)記語言

標(biāo)記語言為非標(biāo)記語言，不具備編程語言具備的程序邏輯

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

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

三、JavaScript

1.編程語言

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

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

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

3.js框架

Angular,React與Vue等均是JavaScript

第一個頁面

一、基礎(chǔ)模板

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

二、模板的解讀

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

三、其他核心模塊標(biāo)簽

1、meta（元標(biāo)簽）

 ? ? ?

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

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

2、link(鏈接標(biāo)簽)

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

3、script(腳步標(biāo)簽)

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

html常用標(biāo)簽

1.無語義標(biāo)簽

<div>div>
<span>span>

2.常用語義標(biāo)簽

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

3.文本標(biāo)簽

<i>i> 斜體字
<em>em> 斜體字，表示強調(diào)
<b>b> 粗體字
<strong>strong> 粗體字，表示強調(diào)(語?更強)
<del>del> 刪除的?本
<ins>ins> 插?的?本
<sub>sub> 下標(biāo)字
<sup>sup> 上標(biāo)字
<ruby>
 拼?<rt>pinyinrt>
ruby> 中?注?，h5新增

4.其他標(biāo)簽

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

標(biāo)簽的分類

1.單|雙標(biāo)簽

單標(biāo)簽：在自身標(biāo)簽標(biāo)識結(jié)束，主要應(yīng)用場景為功能性標(biāo)簽

雙標(biāo)簽：有成對的結(jié)束標(biāo)識，主要應(yīng)用場景為內(nèi)容性標(biāo)簽

2.行|塊標(biāo)簽

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

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

3.單一|組合標(biāo)簽

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

CSS三種引入方式

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

1、行間式

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

2、內(nèi)聯(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)先級”

與樣式表的解析順序有關(guān)

樣式與長度顏色

1、基本樣式

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

2、長度

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

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：六個?六進(jìn)制位，每兩位?整體，分別代表Red、Green、Blue，可以簡寫#abc

常用樣式

1、字體樣式

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

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

2、文本樣式

color：文本顏色

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

vertical-align:縱向排列

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

normal：默認(rèn)換行規(guī)則

break-all:允許在單詞內(nèi)換行

3、背景樣式

background-color:顏色

background-image:圖片

background-image:url(bg.png);

background-repeat:重復(fù)

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

background-position:定位

top | bottom |left | right | center

v_hint:定位值可時為方位詞，百分比及固定值，值個數(shù)默認(rèn)為兩位（水平/垂直），一個值垂直默認(rèn)center

backgrount-attachment:滾動模式

background-attachment:fixed;

CSS選擇器

一、基礎(chǔ)選擇器

1、通配選擇器

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

2、標(biāo)簽選擇器

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

3、類選擇器

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

4、id選擇器

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

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

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

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

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

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

三、組合選擇器

1、群選擇器

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

一次性控制多個選擇器

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

2、子代（后代）選擇器

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

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

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

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

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

組合選擇器優(yōu)先級與權(quán)值相關(guān)，權(quán)值為權(quán)重和
權(quán)重對應(yīng)關(guān)系

選擇器	權(quán)重
通配	1
標(biāo)簽	10
類、屬性	100
id	1000
!important	10000

選擇器權(quán)值比較，只關(guān)心權(quán)重和，不更新選擇器位置

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

五、屬性選擇器

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

v_hint：屬性選擇器權(quán)重等價于類

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1783.html

發(fā)表評論

登陸后可評論

0條評論

SQC

男|高級講師

我要關(guān)注我要私信

TA的文章

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

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

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

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

閱讀 3565·2021-09-22 15:23
CSS圖形繪制總結(jié)

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

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

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

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

資訊專欄INFORMATION COLUMN

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

前端開發(fā)

前端開發(fā)

前端概述

一、什么是前端

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

HTML

CSS

JavaScript

前端三劍客

一、HTML

1、標(biāo)記語言

2、html 為前端頁面的主體，有標(biāo)簽、指令與轉(zhuǎn)義字符等組成。

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

4、文檔類型

二、CSS

標(biāo)記語言

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

三、JavaScript

1.編程語言

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

3.js框架

第一個頁面

一、基礎(chǔ)模板

二、模板的解讀

三、其他核心模塊標(biāo)簽

1、meta（元標(biāo)簽）

2、link(鏈接標(biāo)簽)

3、script(腳步標(biāo)簽)

html常用標(biāo)簽

1.無語義標(biāo)簽

2.常用語義標(biāo)簽

3.文本標(biāo)簽

4.其他標(biāo)簽

標(biāo)簽的分類

1.單|雙標(biāo)簽

2.行|塊標(biāo)簽

3.單一|組合標(biāo)簽

CSS三種引入方式

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

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

常用樣式

CSS選擇器

一、基礎(chǔ)選擇器

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

三、組合選擇器

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

五、屬性選擇器

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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

一、什么是前端

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

1、標(biāo)記語言

2、html 為前端頁面的主體，有標(biāo)簽、指令與轉(zhuǎn)義字符等組成。

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

4、文檔類型

二、CSS

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

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

一、基礎(chǔ)模板

三、其他核心模塊標(biāo)簽

1、meta（元標(biāo)簽）

2、link(鏈接標(biāo)簽)

3、script(腳步標(biāo)簽)

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

一、基礎(chǔ)選擇器

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