owned this note   changed 3 years ago  
Published Linked with GitHub

網頁設計社 課前預習 DAY4 (110上)

講師：

  • Young#0001

網頁前端基本介紹

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
以上都是會教的東西，那大家也可以先上網查，先預習，這樣對於之後教學時，可以更快的了解講師在講什麼。

學習：W3C School
練習：html cafe

HTML是甚麼?

超文本標記語言 (Hypertext Markup Language, HTML)

使用標籤來排序要顯示的內容

<標籤> 為開頭
</標籤> 為結尾











<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>This is title</title>
  </head>
  <body>
    <p>hello, world</p>
  </body>
</html>

HTML 常見標籤

  • <h1~h6> - 標題 (由h1最大到h6最小)
  • <ul> - 列表
  • <div> - 定義一個區域 (div在隔離出部分可含段落、標題、表格等)
  • <section> - 定義一個區域 (章節，表示相關但是不同的段落)
  • <a> - 超連結
  • <span> - 行內元素
  • <p> - 文字段落
  • <img> - 圖片
  • <br> - 換行

HTML 常見標籤 字體修改

語法 描述 呈現樣子
<b> 粗體 abc
<strong> 粗體 abc
<i> 斜體 abc
<em> 斜體 abc
<mark> 螢光筆 abc
<small> 小字 abc
<del> 刪除線 abc
<ins> 底線 abc
<sub> 下標 abcabc
<sup> 上標 abcabc

CSS是甚麼?

階層式樣式表(Cascading Style Sheets,CSS)

是用來輔助HTML加上不同的樣式













<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8">
    <title>This is title</title>
    <style>h1 {color:blue;}</style>           <!-- here -->
  </head>
  <body>
    <h1>Hello world!</h1>
    <p style=”color:green;”>hello, world</p>  <!-- here -->
  </body>
</html>

CSS使用方法

  • 寫在HTML<style>標籤裡面的CSS
  • 在要使用CSS的標籤內直接加入style=


<style>h1 {color:blue;}</style>              <!-- 寫在HTML的<style>標籤內 -->
<p style=”color:green;”>hello, world</p>     <!-- 在要使用CSS的標籤內加入CSS -->

CSS常見標籤









body  {background-color: powderblue;}        <!-- 背景顏色: -->
h1   {color: blue;}                          <!-- 文字顏色: -->

p {
color: red;                                  <!-- 文字顏色: -->
font-family: courier;                        <!-- 文字字體: -->
font-size: 160%;                             <!-- 文字大小: -->
}

顏色進階介紹

從RGB三原色或是十六進位或是其他方法來調整顏色

  • 三原色用法: (0~255,0~255,0~255)

  • 十六進位的用法: #000000 (原理和RGB一樣)

JavaScript是甚麼?

JavaScript是一種進階的、直譯的程式語言

在HTML中使用JavaScript








<!--  直接寫在HTML裡的JavaScript  -->
<script>
    console.log("Hello World!");
</script>

<!-- 寫在另外的js檔案  -->
<script src="/main.js"></script>

JavaScript在前端(FrontEnd)的功用

  • 與用戶互動
  • 做動畫

JavaScript的其他功用

– Node.js的出現讓JS可以在瀏覽器以外的地方運行

  • 後端(BackEnd)
  • 軟體
  • 遊戲

目前主流三大前端框架

使用框架原因能夠快速開發

  • Vue
  • React
  • Angular

Node.js的出現

  • 原本的前端工程師能夠轉行成全端工程師
  • 可以用JavaScript做更多事情

最後補充

前面你們聽到的前端、後端、全端是甚麼?

  • FrontEnd(前端)一個網頁畫面呈現的地方就是你在看YouTube時所看到的頁面就叫前端

  • BackEnd(後端)一個網頁處理資料的地方就是你看YouTube時你影片來源的地方，一般人可能會說伺服器(Server)

  • FullStack(全端)就是FrontEnd+BackEnd(前端加後端)
    [補充]

Select a repo