1. 程式人生 > >Python 44 前端概述 、三劍客 、常用標簽與分類

Python 44 前端概述 、三劍客 、常用標簽與分類

推薦 代碼塊 語義 row size 開發技術 刪除 字符 數據

一:前端概述

  前端指的就是頁面的設計和給用戶帶來極高的用戶體驗

  前端開發技術棧分為三大類:HTML 、CSS 、JavaScript

    HTML(Hyper Text Markup Language):

      1 超文本標記語言

      2 負責完成頁面的結構

      3 文件後綴:start.html

        v_hint:標註,一些要註意的點(“超文本”就 是指頁面內可以包含圖片,連接,音樂,程序等非文字元素)

    CSS(Cascading Style Sheet):

      1 級聯樣式表

      2 負責頁面的風格設計,樣式和美觀

      3 文件後綴:style.

css

    JS(JavaScript):

      1 瀏覽器腳本語言,可以編寫運行在瀏覽器上的程序 (腳本:比如遊戲裏面的角色,人物裝備等等,這些就相當於腳本;再比如說,就是自己寫的一個代碼塊,用相同他語言或不同他語言嵌套到別人的程序裏面,我們也稱之為腳本)

      2 負責編寫頁面特效 、調用瀏覽器的API(BOM) 、操作改變頁面內容(DOM),從後端獲取數據(Ajax),渲染頁面等

      3 文件後綴:cascade.js

   

二:前端三劍客

  HTML :

   1 標記語言:標記語言為非編程語言,不具備編程語言具備的程序邏輯

   2 HTML為前端頁面的主體,由標簽、指令與轉義字符(實體)等組成(v_hint:轉義字符)

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

   3 HTML發展史代表版本

   4 文檔類型

  CSS :

   1 標記語?言為?非編程語?言,不不具備編程語?言具備的程序邏輯

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

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

   3 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發展史

   4 JS框架:Angular、React與Vue等均是JavaScript主流框架

三:常用標簽

  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 單一 | 組合標簽

    單一標簽:單獨出現,表示具體的功能或展示具體的內容

    組合標簽:配合使用,才能產生相應的內容與效果

Python 44 前端概述 、三劍客 、常用標簽與分類