前端介紹-35

前端介紹-35 
# 前端

## 一、什么是前端

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

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

- 廣義前端：所有用戶可以直接看見并交互的界面
- 俠義前端：瀏覽器上運行的用戶交互界面

## 二、前端開發技術棧

### HTML

- 超文本標記語言  Hyper Text Markup Language
- 負責完成頁面的結構
- 文件后綴：.html  .htm

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

### CSS

- 級聯樣式表  Cascading Style Sheet
- 負責頁面的風格設計，樣式、美觀
- 文件后綴：.css

### JavaScript

- 瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序
- 負責編寫頁面特效、調用瀏覽器的API\(BOM\)、操作改變頁面內容\(DOM\)，從后端獲取數據\(Ajax\)，渲染頁面等
- 文件后綴：.js

###### v_eg：big house、live perple
# 前端三劍客

## 一、HTML

#### 1、標記語言

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

#### 2、html為前端頁面的主體，由標簽、指令與轉義字符（實體）等組成

```
標簽：被尖括號包裹，由字母開頭包含合法字符的，可以被瀏覽器解析的標記。eg:系統標簽，自定義標簽
指令：被尖括號包裹，由!開頭的標記。eg:<!doctype html> <!-- -->
轉義字符：被&與;包裹的特殊字母組合或#開頭的十進制數。eg:&#60; &#62; &nbsp;
```

###### v_hint：[轉義字符](http://tool.oschina.net/commons?type=2)

#### 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、文檔類型

```html
<!-- 標簽語法規范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/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連接語法的眾多樣式
```

#### 3、css發展史代表版本

```
① 1990年，Tim Berners-Lee和Robert Cailliau共同發明了Web。1994年，Web真正走出實驗室。
② 1994年哈坤·利提出了CSS的最初建議。而當時伯特·波斯（Bert Bos）正在設計一個名為Argo的瀏覽器，于是他們決定一起設計CSS。
③ 哈坤于1994年在芝加哥的一次會議上第一次提出了CSS的建議，1995年的www網絡會議上CSS又一次被提出，博斯演示了Argo瀏覽器支持CSS的例子，哈肯也展示了支持CSS的Arena瀏覽器。
④ 1997年初，W3C組織負責CSS的工作組開始討論第一版中沒有涉及到的問題。其討論結果組成了1998年5月出版的CSS規范第二版。
⑤ CSS3是CSS（層疊樣式表）技術的升級版本，于1999年開始制訂，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
```

## 三、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發展史

```
    它最初由Netscape的Brendan Eich設計。JavaScript是甲骨文公司的注冊商標。Ecma國際以JavaScript為基礎制定了ECMAScript標準。JavaScript也可以用于其他場合，如服務器端編程。完整的JavaScript實現包含三個部分：ECMAScript，文檔對象模型，瀏覽器對象模型。
    Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發而開始設計的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規范也借自Java。但JavaScript的主要設計原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當時Netscape為了營銷考慮與Sun微系統達成協議的結果。為了取得技術優勢，微軟推出了JScript來迎戰JavaScript的腳本語言。為了互用性，Ecma國際（前身為歐洲計算機制造商協會）創建了ECMA-262標準（ECMAScript）。兩者都屬于ECMAScript的實現。盡管JavaScript作為給非程序人員的腳本語言，而非作為給程序人員的腳本語言來推廣和宣傳，但是JavaScript具有非常豐富的特性。
    發展初期，JavaScript的標準并未確定，同期有Netscape的JavaScript，微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（歐洲計算機制造商協會）的協調下，由Netscape、Sun、微軟、Borland組成的工作組確定統一標準：ECMA-262。
```

#### 4、js框架

```
Angular、React與Vue等均是JavaScript主流框架
```

###### v_test：熟悉前端三劍客
# 第一個頁面

## 一、基礎模板

```html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>第一個頁面</title>
    </head>
    <body>

    </body>
</html>
```

## 二、模板解讀

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

###### v_hint：html標簽的lang屬性值 en | zh（zh-cn）

## 三、其他核心模板標簽

#### 1、meta（元標簽）

```html
字符編碼
<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="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
```

#### 2、link（鏈接標簽）

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

#### 3、style（樣式標簽）

```html
內聯樣式表
<style></style>
```

#### 4、script（腳步標簽）

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

###### v_test：設置簡單的新浪模板
# html常用標簽

#### 1、無語義標簽

```html
<div></div>
<span></span>
```

#### 2、常用語義標簽

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

#### 3、文本標簽

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

#### 4、其他標簽

```html
<section></section> 塊
<small></small> 小號字體
```

###### v_test：熟悉常用標簽
# 樣式與長度顏色

#### 1、基本樣式

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

#### 2、長度

- px：像素(pixel)，屏幕上顯示的最小單位，用于網頁設計，直觀方便
- mm：毫米
- cm：厘米
- in：英寸
- pt：點(point)，一個標準的長度單位，1pt＝1/72in，用于印刷業，非常簡單易用；
- em：相當長度，通常1em=16px，應用于流式布局

#### 3、顏色

- rgb()：三個值可為[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue）
- rgba()：前三個值可為像素或是百分比，最后一個為[0, 1]數值，以,相隔（r:Red g:Green b:Blue 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

###### v_test：熟悉所有的長度單位與顏色表示方式
# 常用樣式

#### 1、字體樣式

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

```css
font-family: "STSong", "Arial";
```

- font-size：字體大小
- font-style： 字體風格  normal \| italic \| oblique
- font-weight：字體重量 normal \| bold \| lighter \| 100~900
- line-height：行高
- font：字重 風格 大小/行高 字族

#### 2、文本樣式

- color：文本顏色
- text-align：橫向排列

```css
left 居左 | center 居中 | right 居右
```

- vertical-align：縱向排列

```css
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：自動換行

```css
normal：默認換行規則
break-all：允許在單詞內換行
```

#### 3、背景樣式

- background-color：顏色
- background-image：圖片

```css
background-image: url(bg.png);
```

- background-repeat：重復

```css
repeat | no-repeat | repeat-x | repeat-y
```

- background-position：定位

```css
top | bottom | left | right | center
```

###### v_hint：定位值可為方位詞、百分比及固定值，值個數默認為兩位(水平/垂直)，一個值時垂直默認center

- background-attachment：滾動模式

```css
background-attachment: fixed;
```

###### v_eg：父級設置屬性，子集內容超出父級范圍

###### v_hint：掌握基本屬性
# 標簽分類

#### 1、單|雙標簽

- 單標簽：單標簽在自身標簽標識結束，主要應用場景為功能性標簽
- 雙標簽：雙標簽有成對的結束標識，主要應用場景為內容性標簽

#### 2、行|塊標簽

- 行標簽：又名內聯標簽，內聯標簽自身不具備寬高，通常同行顯示
- 塊標簽：又名塊級標簽，塊標簽擁有自身寬高，通常獨自占據一行

#### 3、單一|組合標簽

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

###### v_test：熟悉標簽的分類
# CSS三種引入方式

## 一、三種方式的書寫規范

#### 1、行間式

```html
<div style="width: 100px; height: 100px; </div>
```

#### 2、內聯式

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

#### 3、外聯式

```css
file: zero.css
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
```

```css
file: zero.html
<head>
    <link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```

## 二、三種方式間的"優先級"

- 與樣式表的解析順序有關

###### v_test：掌握三種CSS引入方式方式
posted on 2018-12-27 20:00 漫天飛雪世情難卻 閱讀(...) 評論(...) ?編輯 收藏

轉載于:https://www.cnblogs.com/jokezl/articles/10187013.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/388745.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/388745.shtml
英文地址，請注明出處：http://en.pswp.cn/news/388745.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

spring的幾個通知（前置、后置、環繞、異常、最終）

spring的幾個通知（前置、后置、環繞、異常、最終）

1、沒有異常的 2、有異常的 1、被代理類接口Person.java 1 package com.xiaostudy;2 3 /**4 * desc 被代理類接口5 * 6 * author xiaostudy7 *8 */9 public interface Person { 10 11 public void add(); 12 public void update(); 13 public void delete();…
閱讀更多...
每個Power BI開發人員的Power Query提示

每個Power BI開發人員的Power Query提示

If someone asks you to define the Power Query, what should you say? If you’ve ever worked with Power BI, there is no chance that you haven’t used Power Query, even if you weren’t aware of it. Therefore, one could easily say that Power Query is the “he…
閱讀更多...
c# PDF 轉換成圖片

c# PDF 轉換成圖片

1.新建項目 2.新增一個新文件夾“lib”&#xff08;主要是為了存放引用的dll&#xff09; 3.將“gsdll32.dll 、PDFLibNet.dll 、PDFView.dll”3個dll添加到文件夾中 4.項目添加“PDFLibNet.dll 、PDFView.dll”2個類庫的引用&#xff0c;并將gsdll32.dll 拷貝到項目生產根…
閱讀更多...
java finally在return_Java finally語句到底是在return之前還是之后執行？

java finally在return_Java finally語句到底是在return之前還是之后執行？

點擊上方“方志朋”&#xff0c;選擇“置頂或者星標”你的關注意義重大&#xff01;網上有很多人探討Java中異常捕獲機制try...catch...finally塊中的finally語句是不是一定會被執行&#xff1f;很多人都說不是&#xff0c;當然他們的回答是正確的&#xff0c;經過我試驗&#…
閱讀更多...
oracle 死鎖

oracle 死鎖

為什么80%的碼農都做不了架構師&#xff1f;>>> ORA-01013: user requested cancel of current operation 轉載于:https://my.oschina.net/8808/blog/2994537
閱讀更多...
面試題：二叉樹的深度

面試題：二叉樹的深度

題目描述&#xff1a;輸入一棵二叉樹&#xff0c;求該樹的深度。從根結點到葉結點依次經過的結點&#xff08;含根、葉結點&#xff09;形成樹的一條路徑&#xff0c;最長路徑的長度為樹的深度。 思路&#xff1a;遞歸 //遞歸 public class Solution {public int TreeDepth(Tre…
閱讀更多...
a/b測試_如何進行A / B測試？

a/b測試_如何進行A / B測試？

a/b測試The idea of A/B testing is to present different content to different variants (user groups), gather their reactions and user behaviour and use the results to build product or marketing strategies in the future.A / B測試的想法是將不同的內容呈現給不同…
閱讀更多...
hibernate h2變mysql_struts2-hibernate-mysql開發案例 -解道Jdon

hibernate h2變mysql_struts2-hibernate-mysql開發案例 -解道Jdon

Hibernate專題struts2-hibernate-mysql開發案例與源碼源碼下載本案例展示使用Struts2&#xff0c;Hibernate和MySQL數據庫開發一個個人音樂管理器Web應用程序。&#xff0c;可將您的音樂收藏添加到數據庫中。功能有&#xff1a;顯示一個添加記錄的表單和所有的音樂收藏的列表。…
閱讀更多...
P5024 保衛王國

P5024 保衛王國

傳送門 我現在還是不明白為什么NOIPd2t3會是一道動態dp…… 首先關于動態dp可以看這里 然后這里就是把把矩陣給改一改&#xff0c;改成這個形式\[\left[dp_{i-1,0},dp_{i-1,1}\right]\times \left[\begin{matrix}\infty&ldp_{i,1}\\ldp_{i,0}&ldp_{i,1}\end{matrix}\ri…
閱讀更多...
提取圖像感興趣區域_從圖像中提取感興趣區域

提取圖像感興趣區域_從圖像中提取感興趣區域

提取圖像感興趣區域Welcome to the second post in this series where we talk about extracting regions of interest (ROI) from images using OpenCV and Python.歡迎來到本系列的第二篇文章&#xff0c;我們討論使用OpenCV和Python從圖像中提取感興趣區域(ROI)。 As a rec…
閱讀更多...
解決java compiler level does not match the version of the installed java project facet

解決java compiler level does not match the version of the installed java project facet

ava compiler level does not match the version of the installed java project facet錯誤的解決 因工作的關系&#xff0c;Eclipse開發的Java項目拷來拷去&#xff0c;有時候會報一個很奇怪的錯誤。明明源碼一模一樣&#xff0c;為什么項目復制到另一臺機器上&#xff0c;就會…
閱讀更多...
php模板如何使用,ThinkPHP如何使用模板

php模板如何使用,ThinkPHP如何使用模板

到目前為止&#xff0c;我們只是使用了控制器和模型&#xff0c;還沒有接觸視圖&#xff0c;下面來給上面的應用添加視圖模板。首先我們修改下 Action 的 index 操作方法&#xff0c;添加模板賦值和渲染模板操作。PHP代碼classIndexActionextendsAction{publicfunctionindex(){…
閱讀更多...
理解Windows窗體和WPF中的跨線程調用

理解Windows窗體和WPF中的跨線程調用

你曾開發過Windows窗體程序&#xff0c;可能會注意到有時事件處理程序將拋出InvalidOperationException異常&#xff0c;信息為“ 跨線程調用非法&#xff1a;在非創建控件的線程上訪問該控件”。這種Windows窗體應用程序中 跨線程調用時的一個最為奇怪的行為就是&#xff0c;有…
閱讀更多...
什么是嵌入式系統

什么是嵌入式系統

在我們的日常生活中&#xff0c;我們經常使用許多使用嵌入式系統技術設計的電氣和電子電路和套件。計算機&#xff0c;手機&#xff0c;平板&#xff0c;筆記本電腦&#xff0c;數字電子系統以及其他電子和電子設備都是使用嵌入式系統設計的。 什么是嵌入式系統&#xff1f;將硬…
閱讀更多...
面向數據科學家的實用統計學_數據科學家必知的統計數據

面向數據科學家的實用統計學_數據科學家必知的統計數據

面向數據科學家的實用統計學Beginners usually ignore most foundational statistical knowledge. To understand different models, and various techniques better, these concepts are essential. These work as baseline knowledge for various concepts involved in data …
閱讀更多...
字符串、指針、引用、數組基礎

字符串、指針、引用、數組基礎

1.字符串&#xff1a;字符是由單引號所括住的單個字母、數字或符號。若將單引號改為雙引號&#xff0c;該字符就會變成字符串。它們之間主要的差別是&#xff1a;雙引號的字符串“A”會比單引號的字符串’A’在字符串的最后補上一個結束符’\0’&#xff08;Null字符&#xff0…
閱讀更多...
suse安裝php,SUSE下安裝LAMP

suse安裝php,SUSE下安裝LAMP

安裝Apache可以看到編譯安裝Apache出錯&#xff0c;rpm包安裝gcc (首先要安裝GCC)makemake install修改apache端口cd /home/sxit/apache2vi conf/httpd.confListen 8000啟動 apache/home/root/apache2/bin/apachectl start(stop restart)http://localhost:8000安裝一下PHP開發…
閱讀更多...
自己動手寫事件總線(EventBus)

自己動手寫事件總線(EventBus)

2019獨角獸企業重金招聘Python工程師標準>>> 本文由云社區發表 事件總線核心邏輯的實現。 <!--more--> EventBus的作用 Android中存在各種通信場景&#xff0c;如Activity之間的跳轉&#xff0c;Activity與Fragment以及其他組件之間的交互&#xff0c;以及在某…
閱讀更多...
viz::viz3d報錯_我可以在Excel中獲得該Viz嗎？

viz::viz3d報錯_我可以在Excel中獲得該Viz嗎？

viz::viz3d報錯Have you ever found yourself in the following situation?您是否遇到以下情況&#xff1f; Your team has been preparing and working tireless hours to create and showcase the end product — an interactive visual dashboard. It’s a culmination of…
閱讀更多...
php 數組合并字符,PHP將字符串或數組合并到一個數組內方法

php 數組合并字符,PHP將字符串或數組合并到一個數組內方法

本文主要和大家分享PHP將字符串或數組合并到一個數組內方法&#xff0c;有兩種方法&#xff0c;希望希望能幫助到大家。一般寫法&#xff1a;<?php /*** add a string or an array to another array** param array|string $val* param array $array*/function add_val_to_a…
閱讀更多...
最新文章

Copyright @ 2022~2023