DAY44——前端概述及網頁入門
阿新 • • 發佈：2018-09-19
key eas 網絡會議 交互界面 類型 commons short utf-8 甲骨文
1、HTML
今日內容：
1、前端概述
2、前端三劍客
3、第一個頁面（基礎模板解讀）
4、html常用標簽
5、標簽分類
1、什麽是前端
前端即網站前臺部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。隨著互聯網技術的發展，HTML5，CSS3，前端框架的應用，跨平臺響應式網頁設計能夠適應各種屏幕分辨率，完美的動效設計，給用戶帶來極高的用戶體驗。
前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前臺代碼實現，包括基本的HTML和CSS以及JavaScript
-
廣義前端：所有用戶可以直接看見並交互的界面
-
俠義前端：瀏覽器上運行的用戶交互界面
2、前端開發技術棧
HTML
超文本標記語言 Hyper Text Markup Language
負責完成頁面的結構
文件後綴：.html .htm
ps：“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素
CSS
級聯樣式表 Cascading Style Sheet
負責頁面的風格設計，樣式、美觀
文件後綴：.css
JavaScript
瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序
負責編寫頁面特效、調用瀏覽器的API(BOM)、操作改變頁面內容(DOM)，從後端獲取數據(Ajax)，渲染頁面等
文件後綴：.js
1、HTML
1、標記語言
標記語言為非編程語言，不具備編程語言具備的程序邏輯
2、html為前端頁面的主體，由標簽、指令與轉義字符（實體）等組成
標簽：被尖括號包裹，由字母開頭包含合法字符的，可以被瀏覽器解析的標記。eg:系統標簽，自定義標簽 指令：被尖括號包裹，由!開頭的標記。eg:<!doctype html> <!-- --> 轉義字符：被&與;包裹的特殊字母組合或#開頭的十進制數。eg:< >
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/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
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的工作草案，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
3、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主流框架
1、基礎模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第一個頁面</title> </head> <body> </body> </html>
2、模板解讀
-
DOCTYPE：指定文檔類型，規定html標簽語法
-
html：文檔根標簽，標註著文檔(頁面)的開始與結束
-
head：文檔頭標簽，可以引用腳步文件、指定樣式表、書寫代碼邏輯塊、提供元信息
-
body：文檔主體標簽，包含文檔所有文本與超文本內容
-
title：文檔tag標題標簽，設置文檔tag的標題內容
v_hint：html標簽的lang屬性值 en | zh（zh-cn）
3、其他核心模板標簽
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="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2、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" />
3、style（樣式標簽）
內聯樣式表 <style></style>
4、script（腳步標簽）
<script type="text/javascript"></script>
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、單一|組合標簽
單一標簽：單獨出現，表示具體的功能或展示具體的內容
組合標簽：配合使用，才能產生相應的內容與效果
DAY44——前端概述及網頁入門