前端入門

時間 2019-11-08

標籤前端入門简体版

原文原文鏈接

目錄javascript

一.前端概述

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

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

前端開發技術棧

HTML前端

HTML是超文本標記語言(Hypertext Markup Language，HTML)經過標籤語言來標記要顯示的網頁中的各個部分.一套瀏覽器認識的規則.
瀏覽器按順序渲染網頁文件，而後根據標記符解釋和顯示內容。但須要注意的是，對於不一樣的瀏覽器，對同一標籤可能會有不徹底相同的解釋(兼容性).
文件後綴:.html或.htm.

CSShtml5

CSS是級聯樣式表(Cascading Style Sheets).
樣式定義如何顯示HTML,樣式一般儲存在樣式表中,外部樣式表能夠極大提升工做效率,CSS主要負責頁面的風格設計,樣式,美觀.
文件後綴:.css

JavaScriptjava

JavaScript是瀏覽器腳本語言,是一種輕量級的編程語言,是可插入HTML頁面的編程代碼.
負責編寫頁面特效,調用瀏覽器API(BOM)、操做改變頁面內容(DOM)，從後端獲取數據(Ajax)，渲染頁面等
文件後綴:.js

二.前端三劍客

1.HTML

標記語言

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

html爲前端頁面的主題,由標籤.指令與轉義字符(實體)等組成

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

ps:轉義字符編程

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

2.CSS

標記語言

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

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

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

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的工做草案，主要包括盒子模型、列表模塊、超連接方式、語言模塊、背景和邊框、文字特效、多欄佈局等模塊。

3.JavaScript

編程語言

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

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 標準。

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。

js框架

Zepto.js、Angular、SUI Mobile、Node.Js、React與Vue等均是JavaScript主流框架

三.第一個頁面

1.基礎模板

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

2.模板解讀

html5語法特色後端

1.不區分大小寫
2.有不少系統標籤,通常都具備語義
3.能夠自定義標籤
4.html5內容不保留空白字符(製表符)
5.提倡小寫

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="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

link(連接標籤)

外聯樣式表
<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" />

style(樣式標籤)

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

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.其餘標籤

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

五.標籤分類

1.單|雙標籤

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

2.行|塊標籤

- 行標籤：又名內聯標籤，內聯標籤自身不具有寬高，一般同行顯示
- 塊標籤：又名塊級標籤，塊標籤擁有自身寬高，一般獨自佔據一行

3.單一|組合標籤

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

相關標籤/搜索

每日一句

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