前端概述及网页入门
目錄
- 一、前端簡介
- 二、前端開發技術棧
- HTML（超文本標記語言 Hyper Text Markup Language）
- CSS（層疊樣式表 Cascading Style Sheet）
- JavaScript
- 三、第一個頁面
- (一)、基礎模板
- (二)、模板解讀
- (三)、其它模板標簽
一、前端簡介
前端是什么？
前端就是網站的前臺，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。 - 廣義前端：所有用戶可以直接看見并交互的界面 - 俠義前端：瀏覽器上運行的用戶交互界面隨著互聯網技術的發展，前端領域的技術發展也越來越快，各種新的思想、設計模式、工具和平臺都快速發展，對前端工程師的技能要求也越來越高。JavaScript的應用也越來越廣泛，在各個端，各個領域，前端也在慢慢地滲入與腐蝕其他開發語言的領地，行業對前端程序員的熱度需求并沒有下降，未來還是有很好的前景的。二、前端開發技術棧
前端工程師需要學習哪些技能呢？
首先你需要掌握前端三劍客，再去學習一些框架就可以去上班啦！
HTML（超文本標記語言 Hyper Text Markup Language）
html為標記語言，非編程語言，不具備編程語言具備的程序邏輯。文件后綴名（.html/.htm）html是一個網頁的骨架，無論是靜態網頁還是動態網頁，最終返回到瀏覽器端的都是HTML代碼，瀏覽器將HTML代碼解釋渲染后呈現給用戶。因此，我們必須掌握HTML的基本結構和常用標記及屬性。有人將html比做建房子的框架（地基，架子），我覺得很好，這里就借鑒一下。1.html組成（標簽、指令、轉義字符）
標簽：被尖括號包裹，由字母開頭包含合法字符的，可以被瀏覽器解析的標記。eg:系統標簽，自定義標簽 指令：被尖括號包裹，由!開頭的標記。eg:<!doctype html> <!-- --> 轉義字符：被&與;包裹的特殊字母組合或#開頭的十進制數。eg:< > v_hint：轉義字符
2.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日，第一份正式草案發布。)3.文檔類型
<!-- 標簽語法規范 --> <!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（層疊樣式表 Cascading Style Sheet）
css也是標記語言，非編程語言。文件后綴名（.css）CSS能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，真正做到網頁表現與內容分離的一種樣式設計語言。相對于傳統HTML的表現而言其樣式是可以復用的，這樣就極大地提高了我們開發的速度，降低了維護的成本。負責頁面的風格設計，樣式、美觀。把html比作建房子的架子，那么css就是對房子的裝修，粉刷墻壁顏色等。1.css組成（選擇器、作用域、樣式塊）
選擇器：由標簽、類、id單獨或組合出現 作用域：一組大括號包含的區域 樣式塊：滿足css連接語法的眾多樣式2.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
不同于html和css，它是一門實實在在的編程語言，有完善的語法，可以完成復雜的程序邏輯。 文件后綴名（.js）JavaScript是瀏覽器腳本語言，可以編寫運行在瀏覽器上的程序，實現更多地動態功能，表現出更加豐富的視覺效果。主要負責編寫頁面特效、調用瀏覽器的API\(BOM\)、操作改變頁面內容\(DOM\)，從后端獲取數據\(Ajax\)，渲染頁面等。JavaScript就好比房子過程中的人，房子通過打地基建造（html），裝修（css），最后住人（js）。有了JavaScript網頁才有靈魂。1.JavaScript的組成（DOM、BOM、ES）
DOM：文檔對象模型(Document Object Model)，是W3C組織推薦的處理可擴展標志語言的標準編程接口。 BOM：瀏覽器對象模型(Browser Object Model)，是用于描述這種對象與對象之間層次關系的模型，瀏覽器對象模型提供了獨立于內容的、可以與瀏覽器窗口進行互動的對象結構。BOM由多個對象組成，其中代表瀏覽器窗口的Window對象是BOM的頂層對象，其他對象都是該對象的子對象。 ES：ES是一種開放的、國際上廣為接受的腳本語言規范(ECMAScript)，正式名稱為 ECMA 262 和 ISO/IEC 16262，是宿主環境中腳本語言的國際 Web 標準。2.JavaScript發展史
它最初由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。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="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>轉載于:https://www.cnblogs.com/mangM/p/9675590.html
總結
- 上一篇： linux mariadb
- 下一篇： 自己封装的ajax