Try   HackMD

HTML CSS Javascript網頁三兄弟

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 →

HTML

===

  • HyperText Markup Language的縮寫

  • 中文：超文本標記語言

    • 標記式語言是什麼？
      -> 由很多個<標籤>所組成，
      用大小於< >包住你想要的HTML元素，結尾再用大小於包住斜線/+元素 
      ​​​​<xxx></xxx>

  • 構成網頁的組織架構並呈現網頁的內容（就像最上面的圖的骨頭一樣）

  • 網頁內容包括文字、圖片、段落、表格、清單…很多標籤可以使用

  • 範例寫法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first</title>
</head>
<body>
    <h1>fiest</h1>
    <p>this is my first html</p>
</body>
</html>

瀏覽器呈現結果：

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 →

寫法

  1. 一定要有<!DOCTYPE html>這行，因為這是告訴瀏覽器這是一個html檔
  2. <html></html>裡面包覆著<head>跟<body>這個標籤用來包覆整個html 的程式碼
  3. 在<head> 與 <body> 標籤裡面的內容詳述，請詳

CSS

  • Cascading Style Sheets的縮寫

  • 中文：層疊樣式表

  • 決定網頁的外觀長的怎樣。
    可以決定文字表格顏色、字體、編筐設定排版…等(就像最上面的圖他代表人的皮膚及外在的裝飾衣物)

  • 不可單獨使用需搭配html一同使用

  • 可以寫在html裡，也可以以link做連結，連到檔案外以.css做結尾的檔案

  • 內容：CSS由多組「規則」組成。每個規則由「選擇器」（selector）、 「屬性」（property）和「值」（value）組成：

    • 選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。
    • 屬性（property）：CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。
    • 值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。

屬性和值之間用半形冒號 : 隔開，屬性和值合稱為「特性」。
多個特性間用 ; 隔開，最后用 { } 括起來。

Javascipt

  • 簡稱JS，跟Java是不同的語言不要搞混
  • 是一種腳本語言，協助我們建立動態網頁，使我們能動態的更新內容、控制多媒體、動畫……等等等。
  • 可以寫在html 裡，也可以另外用一個css以link做連結
tags: html、css、javascript
Last changed by 
 
Ting Yu Lin
0
309

Read more

JS練習_音樂播放器

&#x5EFA;&#x7ACB;&#x4E00;&#x500B;&#x97F3;&#x6A02;&#x64AD;&#x653E;&#x5668;&#x4F7F;&#x4F7F;&#x7528;&#x8005;&#x80FD;&#x81EA;&#x7531;&#x64AD;&#x653E;&#x97F3;&#x6A02;&#xFF0C;&#x9078;&#x53D6;&#x60F3;&#x8981;&#x64AD;&#x653E;&#x7684;&#x97F3;&#x6A02;&#x4F4D;&#x7F6E;&#xFF0C;&#x8ABF;&#x6574;&#x97F3;&#x91CF;&#x53CA;&#x66F2;&#x76EE;&#x3002; &#x6210;&#x54C1;&#x9801;&#x9762; &#x6210;&#x54C1;&#x529F;&#x80FD; &#x64AD;&#x653E;/ &#x66AB;&#x505C;&#x97F3;&#x6A02; &#x9078;&#x64C7;&#x524D;&#x4E00;&#x9996;&#x6B4C;/ &#x4E0B;&#x4E00;&#x9996;&#x6B4C; &#x4F7F;&#x7528;&#x8005;&#x53EF;&#x4EE5;&#x8ABF;&#x6574;&#x6B4C;&#x66F2;&#x97F3;&#x91CF; &#x6839;&#x64DA;&#x7E3D;&#x66F2;&#x76EE;&#x6578;&#x91CF;&#xFF0C;&#x8A2D;&#x5B9A;&#x689D;&#x4EF6;&#x8B93;&#x6B4C;&#x66F2;&#x5FAA;&#x74B0;&#x64AD;&#x653E;

Jul 1, 2021
JS_觀念_Promise

Promise&#x662F;ES_6&#x7684;&#x8A9E;&#x6CD5;&#xFF0C;&#x91DD;&#x5C0D;JS&#x505A;&#x975E;&#x540C;&#x6B65;&#x7684;&#x8655;&#x7406;&#x3002; &#x975E;&#x540C;&#x6B65;&#x5C31;&#x662F;&#x4E0D;&#x7528;&#x7B49;&#x4E0A;&#x4E00;&#x90E8;&#x57F7;&#x884C;&#x5B8C;&#x6210;&#xFF0C;&#x624D;&#x505A;&#x4E0B;&#x4E00;&#x6B65;&#xFF0C;&#x6BCF;&#x500B;&#x6B65;&#x9A5F;&#x662F;&#x53EF;&#x4EE5;&#x540C;&#x6B65;&#x57F7;&#x884C;&#x7684;&#x3002; &#x4E00;&#x500B;Promise&#x5EFA;&#x69CB;&#x5F0F;&#x5728;&#x88AB;&#x5275;&#x9020;&#x6642;&#xFF0C;&#x5FC5;&#x9808;&#x50B3;&#x5165;&#x4E00;&#x500B;&#x51FD;&#x5F0F;&#x4F5C;&#x70BA;&#x53C3;&#x6578;&#xFF0C;&#x9019;&#x51FD;&#x5F0F;&#x6703;&#x5E36;&#x6709;&#x5169;&#x500B;&#x53C3;&#x6578;-resolve&#x6210;&#x529F; or reject&#x5931;&#x6557;&#xFF0C;&#x5176;&#x4E2D;&#x53EA;&#x80FD;&#x56DE;&#x50B3;&#x9019;&#x5169;&#x7D50;&#x679C;&#x5176;&#x4E2D;&#x4E4B;&#x4E00;&#x4E5F;&#x53EA;&#x80FD;&#x56DE;&#x50B3;&#x4E00;&#x6B21;&#xFF0C;&#x56DE;&#x50B3;&#x5F8C;&#x4FBF;&#x7D50;&#x675F;Promise&#x4E8B;&#x4EF6;&#x3002; &#x8A9E;&#x6CD5; Promise&#x672C;&#x8EAB;&#x662F;&#x500B;&#x5EFA;&#x69CB;&#x51FD;&#x5F0F;&#xFF0C;&#x51FD;&#x5F0F;&#x4E5F;&#x662F;&#x7269;&#x4EF6;&#x7684;&#x4E00;&#x7A2E;&#xFF0C;&#x6240;&#x4EE5;&#x53EF;&#x4EE5;&#x6DFB;&#x52A0;&#x5C6C;&#x6027;&#xFF0C;&#x50CF;&#x662F;all/ race/ resolve/ reject&#xFF0C;&#x4E26;&#x4E14;&#x6709;then/ catch/ finally&#x9019;&#x4E9B;&#x65B9;&#x6CD5;&#x3002; &#x9019;&#x4E9B;&#x65B9;&#x6CD5;&#x5FC5;&#x9808;&#x5728;&#x7522;&#x751F;&#x65B0;&#x7269;&#x4EF6;&#x4E0B;&#x624D;&#x80FD;&#x547C;&#x53EB;&#x3002; const creatPromise = new Promise((resolve, reject)=&gt;{

Jun 22, 2021
CSS Note

weight:100% &#x82E5;&#x6C92;&#x6709;&#x7D66;&#x9810;&#x8A2D;&#x503C;&#xFF0C;&#x6703;&#x81EA;&#x52D5;&#x586B;&#x6EFF;&#x6574;&#x500B;&#x700F;&#x89BD;&#x5668;&#x7684;&#x9801;&#x9762;&#x5BEC; height:100% &#x6C92;&#x6709;&#x9810;&#x8A2D;&#x503C;&#xFF0C;&#x6C92;&#x5BEB;&#x5C31;&#x662F;null height&#x7684;&#x767E;&#x5206;&#x6BD4;&#x503C;&#x9700;&#x8981;&#x7236;&#x5143;&#x7D20;&#x6709;&#x4E00;&#x500B;&#x6709;&#x6548;&#x7684;&#x9AD8;&#x5EA6;&#x503C;&#x624D;&#x80FD;&#x8D77;&#x4F5C;&#x7528; -ex.height: 100%; margin: 0; padding: 0; }

Jun 20, 2021
HTML tag標籤介紹

&#x5340;&#x584A;&#x5143;&#x7D20;(display: block)&#xFF0C; &#x76E1;&#x53EF;&#x80FD;&#x4F54;&#x6EFF;&#x6574;&#x500B;&#x7248;&#x9762;&#x7684;&#x5143;&#x7D20; &#x5C31;&#x7B97;&#x6539;&#x8B8A;&#x7B2C;&#x4E00;&#x500B;&#x5143;&#x7D20;&#x7684;&#x5BEC;&#x5EA6;&#xFF0C;&#x7B2C;&#x4E8C;&#x500B;&#x5143;&#x7D20;&#x4E0D;&#x6703;&#x63A5;&#x5728;&#x7B2C;&#x4E00;&#x500B;&#x5143;&#x7D20;&#x5F8C;&#xFF0C;&#x6703;&#x53E6;&#x8D77;&#x4E00;&#x884C;&#x9032;&#x884C;&#x5448;&#x73FE;&#x3002; &#x53EF;&#x4EE5;&#x4EE5; display:inline&#x8B8A;&#x6210;&#x884C;&#x5167;&#x5143;&#x7D20; &#x5E38;&#x898B;&#x6A19;&#x7C64;&lt;h1 ~ h6&gt;&#x3001;&lt;div&gt;&#x3001;&lt;p&gt; &#x884C;&#x5167;&#x5143;&#x7D20;(display:inline) &#x5E38;&#x7528;&#x5728;&#x6BB5;&#x843D;&#x88E1;

Jun 2, 2021
Read more from Ting Yu Lin
Published on HackMD