前端開發

来源:https://www.cnblogs.com/xuecaichang/archive/2018/09/19/9677302.html
-Advertisement-
Play Games

前端開發 前端開發前端概述一、什麼是前端二、前端開發技術棧HTMLCSSJavaScript前端三劍客一、HTML1、標記語言2、html 為前端頁面的主體，有標簽、指令與轉義字元等組成。3、html 發展史代表版本4、文檔類型二、CSS三、JavaScript1.編程語言2.js為前端頁面的腳步， ...


前端開發

前端概述

一、什麼是前端

前端即網路站前臺部分，運行在pc端，移動端等瀏覽器上展現給用戶瀏覽的頁面。隨著互聯網技術的發展，HTML5,CSS3,前端框架的應用，跨平臺響應式網頁的設計能夠適應各種屏幕解析度，完美的動效設計，給用戶帶來極高的用戶體驗。

前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript

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

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

 

 

 

前端三劍客

一、HTML

1、標記語言

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

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

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

 

 

v_hint：轉義字元

3、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⽇，第⼀份正式草
案發佈。)

 

 

4、文檔類型

<!--標簽語法規範-->
<! 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>

 

 

二、CSS

  1. 標記語言

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

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

選擇器：由標簽，類，id單獨或組合出現
作用域：一組大括弧包含的區域
樣式塊：滿足css連接語法的眾多樣式

三、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

 

第一個頁面

一、基礎模板

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

 

 

二、模板的解讀

DOCTYPE：指定⽂檔類型，規定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字以內的一段話，與網站內容無關">
移動適配
<meta name="viewport" content="with=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no" />

 

                           

2、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 />

 

 

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>pinyin</rt>
</ruby> 中⽂註⾳，h5新增

 

 

 

4.其他標簽

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

 

 

標簽的分類

1.單|雙標簽

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

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

2.行|塊標簽

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

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

3.單一|組合標簽

    單一標簽：單獨出現，表示具體的功能或展示具體的內容
​
    組合標簽：配合使用，才能產生相應的內容與效果

 

CSS三種引入方式

一、三種方式的書寫規範

1、行間式

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

 

 

2、內聯式

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

 

 

3、外聯式

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

 

 

二、三種方式間的“優先順序”

與樣式表的解析順序有關

樣式與長度顏色

1、基本樣式

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

 

 

2、長度

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

 

 

3、顏色

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

 

 

常用樣式

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：預設換行規則

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中所有顯示類的標簽

 

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>均會被匹配

二、基礎選擇器優先順序

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

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

3.優先順序：id優先順序>類選擇器>標簽選擇器>通配選擇器

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

三、組合選擇器

1、群選擇器

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

 

 

一次性控制多個選擇器

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

2、子代（後代）選擇器

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

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

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

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

四、組合選擇器優先順序

  • 組合選擇器優先順序與權值相關，權值為權重和

  • 權重對應關係

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

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

不同級別的選擇器間不具備可比性：一個類選擇器優先順序高於n個標簽選擇器的任意組合

五、屬性選擇器

  • [attr]：匹配擁有attr屬性的標簽

  • [attr=val]：匹配擁有attr屬性，屬性值為val的標簽

  • [attr^=val]：匹配擁有attr屬性，屬性值以val開頭的標簽

  • [attr$=val]：匹配擁有attr屬性，屬性值以val結尾的標簽

  • [attr*=val]：匹配擁有attr屬性，屬性值包含val的標簽

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

v_test：掌握所有選擇器，並熟知選擇器優先順序

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 雲卡門禁蘋果SDK_BLEDOOR_SDK_IOS_2016_12_15
    // // BLElib.h // BLElib // // Created by szbosk on 16/8/16. // Copyright © 2016年 szbosk. All rights reserved. // #import @interface BLElib : NSObject... ...
  • 雲卡門禁安卓SDK_BLEDOOR_SDK_ANDROID_2016_12_15
    package com.bosk.bledoor.sdk; //sdk包的開門服務類，AndroidManifest.xml 必須註冊 // // //AppUserWX必須位於package com.bosk.bledoor.sdk; //這個AppUserWX類的數組就是多張卡的卡包，一個App... ...
  • CSS 小結筆記之變形、過渡與動畫
    1、過渡 transition 過渡屬性用法： transition :ransition-property transition-duration transition-timing-function transition-delay 可以一起指定也可以分別單獨指定 transition-prop ...
  • 簡單的抖動運動 主要利用offset left 和 setTimeout
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 100px; height: 100px; position: absolute; left:300.5 ...
  • Cookie的HttpOnly、secure、domain屬性
    Cookie主要屬性 Cookie主要屬性： path domain max age expires:是expires的補充，現階段有相容性問題：IE低版本不支持，所以一般不單獨使用 secure httponly JS不能讀寫HttpOnly Cookie 屬性之間使用英文分號和空格（"; "）連 ...
  • Vue2.x 的筆記：第一次的感受 Vue 開篇
    在互聯網高速發現的今天，可以說每天都在變化著一不留神你就會錯過一個億，所以你不得不時刻的保持著高度的專註。 互聯網的信息是多元的，大量的，在海量的信息中很容易就會迷失自己，沉浸在互聯網給我們帶來的快樂當中。 所以不管你做的什麼行業，時刻都要保持關註，因為我是做技術的，所以我們今天就來說說技術把。 談 ...
  • js運算符
    算術運算符：+，-，*，/字元運算符 ：+（字元串連接），+=(字元串連接複合)；布爾運算符：！，&&，||；一元操作符：++，—，+，-；關係比較運算符： ,=,=,!=,==,====,!==;按位運算符： ~，&，，|，^,>,>>>賦值運算符：=，複合賦值（+=，-=，*=，/=）複合按位賦... ...
  • 前端性能優化的方法
    老鐵們，我胡漢三又回來了，最近掃黃比較嚴，然後我就出去避了避風頭， 今天我們來總結總結對前端進行性能優化的方法吧，這篇隨筆沒啥代碼，但是我總結了總結，看一下總歸是有點用的 1.減少http請求 a.CSS sprites(精靈圖)，即合併圖片，減少圖片請求次數 b.CSS，JS源碼壓縮。 c.cdn ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類