Scribd Logo
Upload

Welcome to Scribd!

  • 網頁的構成

    Uploaded by

    Hio Leng Chan
    1 views27 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    1 views27 pages

    網頁的構成

    Uploaded by

    Hio Leng Chan

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 27

    網頁的構成

    網站前期需要的準備
    網頁的結構
    網
    頁
    的
    結
    構
    前端
    • 顧名思義是整個網頁架構的前端，是在使用者瀏覽器執行。

    → 網頁的呈現方式
    → 與使用者進行互動
    → 傳送額外的需求給後端
    • 簡而言之就是平常我們打開網頁所接觸到的就是前端，不論是在 Google 搜
    尋想要的資料或是在購物網站瀏覽商品到訂購，這些服務頁面都是由前端
    工程師打造出來的。
    常用的瀏覽器
    前端的程式語言
    前端的程式語言
    HTML 就像是人的”架構”，骨骼血液，有頭、身體、四肢、各種器官
    等。
    CSS 就像是人的”外觀”，膚色、身高、身材、髮色、衣物、飾品等等。
    JavaScript 就像是人的”行為”，唱歌、運動、思考等。
    HTML
    呈現器和 DOM 元素
    HTML5 的必要元素
    元素 描述
    <html> 表示一個 HTML 文檔的根（頂級元素），所以它也被稱為根元素。所有其
    他元素必須是此元素的後代。
    <head> 包含文檔相關的配置資訊（元數據），包括文檔的標題、腳本和樣式表等。

    <style> 包含文檔或者文檔部分內容的樣式資訊，它們會被應用於包含此元素的文檔。

    <title> 定義文檔的標題，顯示在瀏覽器的標題欄或標籤頁上。它只應該包含文本，
    若是包含有標籤，則它包含的任何標籤都將被忽略。

    <body> 表示文檔的內容。文檔中只能有一個該的元素。
    HTML5 的標籤類型。
    標題標籤 段落標籤
    標籤 語義 代碼 標籤 語義 代碼
    h1 一級標題 <h1> 內文 </h1> p 段落文字 <p> 內文 </p>

    h2 二級標題 <h2> 內文 </h2>

    h3 三級標題 <h3> 內文 </h3>

    h4 四級標題 <h4> 內文 </h4>

    h5 五級標題 <h5> 內文 </h5>

    h6 六級標題 <h6> 內文 </h6>


    HTML5 的標籤類型。
    CSS
    CSS 的作用
    • CSS 可以用在很基本文字樣式，
    像是改變標題和連結的顏色及尺
    寸。

    • 它可以用在建立布局，像是將原
    本單欄的文字內容加入布局，劃
    分出主要的內容以及包含相關資
    訊的側邊欄。

    • 它甚至可以用在建立動畫效果。

    • 舉例來說：「我要讓頁面裡的主
    標題，以紅色且大號的字體呈
    現」。
    JavaScript
    Javascript 的作用
    • JavaScript 是一種腳本，也能
    稱它為程式語言，可以讓你在網
    頁中實現出複雜的功能。

    • 當網頁不只呈現靜態的內容，另
    外提供了像是：內容即時更新、
    地圖交動、繪製 2D/3D 圖形，
    影片播放控制……等
    前端的程式語言
    後端
    • 整個網頁架構的後端，也就是使用者不會看到的，是在伺服器端執行的動作。

    → 掌管所有使用者的需求

    → 儲存資料

    → 傳送個人化的回應

    • 比方說搜尋 案 enter 之後的所有行為都是後端工程師的工作

    • 又好比說在購物網站 點選訂單確認之後，將所有資料進行 溝通及運算，還有資料庫也包含在其中。


    課堂作業
    • 建立起第一個網頁 , 使用 HTML 制作網頁
    • 使用 HTML5 標籤進行網頁創件

    例子
    瀏覽器內核

    • 瀏覽器內核，可以理解為瀏覽器的心臟，是指瀏覽器最核心的部
    分，瀏覽器內核主要包含兩部分：渲染引擎和 JS 引擎，但由於
    JS 引擎越來越獨立，瀏覽器內核就傾向於單指渲染引擎，所以我
    們常說的瀏覽器內核主要指的就是渲染引擎。
    • 瀏覽器內核的工作原理是將 HTML 、 CSS 和 JavaScript 等
    Web 標準解析並渲染成瀏覽器中展示的網頁內容。
    瀏覽器內核
    常見瀏覽器的使用內核有：

    • IE ： Trident 內核，也被稱作 IE 內核；

    • Chrome ：統稱 Chromium 內核或 Chrome 內核，目前應用的是 Blink 內核；

    • Firefox ： Gecko 內核，也被稱作 Firefox 內核；

    • Safari ： Webkit 內核；

    • Opera ：目前應用的是 Blink 內核。


    總結
    • 認識網頁的結構；
    • 三種程式語言構成網頁前端的作用和應用；
    • 分析網頁文件基本撰寫結構；
    • 認識 HTML5 的必要元素和標籤類型。
    感謝

    You might also like