--- title: HTML5 for Stat Class01 tags: HTML5 --- > 【目次】 > [TOC] > > Reference Website： > 1. [MDN Web Doc](https://developer.mozilla.org/zh-TW/) > 2. [W3school](https://www.w3schools.com/) > 3. [freecodecamp](https://www.freecodecamp.org/) > 4. [放棄當世界首富！不申請專利的 HTTP、HTML 發明者，要為你奪回數據自主權](https://buzzorange.com/techorange/2018/10/29/www-inventor/?utm_source=TOLINEING_1029_wwwinventor) --- # **11/13 Class01 HTML5** --- With HTML you can create your own Website. ## What is HTML？ * **["HyperText"](https://techterms.com/definition/hypertext) ["Markup Language"](https://techterms.com/definition/markup_language)** 超文件標示語言 * 標記語言的一種 <img src="https://wordpress.susqu.edu/engl390/wp-content/uploads/sites/51/2018/04/HTMLDEMO.png"> ## 偷窺別人的網頁 --- 開發人員工具 * ==Ctrl+U：檢視網頁原始碼== * ==Ctrl+Shift+I 或 F12：檢查== ## LAB 1 -- HTML 基本架構 * HTML tag ==<標籤 屬性="value"> 內容放在這裡 </標籤>== <img src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png"> <img src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png"> * 存檔 index.html ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--若要打中文，補上此行--> <title>我顯示在瀏覽器的分頁上！</title> </head> <body> <p>這是我的第一個網頁</p> </body> </html> ``` * ```<!DOCTYPE html>``` * defines this document to be HTML5 * DOCTYPE 「文件類型」對 CSS 是==必要的宣告==。 * 如果 HTML 缺少 DOCTYPE 設定，將使得瀏覽器無法在「標準模式」下顯示 CSS 效果！ * ```<html></html>``` * root element of an HTML page * ```<head>這裡放網頁所需要用的功能</head>``` * meta information about the document * [網頁設計-SEO網頁優化必備的meta標籤你設對了嗎？](https://www.minwt.com/webdesign-dev/html/870.html) * [The HTML \<head> Element](https://www.w3schools.com/html/html_head.asp) * title：網頁標題。(For searching) * meta：Metadata，描述資料的資料。(For searching) * link：Defines the relationship between a document and an external resource. * style：導入CSS網頁樣式。 * script：導入 javascript, jQuery...。 * ```<body></body>``` * visible page content ## HTML 常用標籤 > 註解：```<!-- 我是註解 -->```[color=#907bf7] * 文字標籤：```<h1> ~ <h6>``` -> 字體由大到小 ```htmlmixed= <h1>This is a h1 Heading</h1> Title 屬性： mouse over -> title will be displayed as a tooltip <h2 title="I'm a header">The title Attribute</h2> ``` * 段落：```<p>我是文字段落</p>``` * 清單： * ```<ul></ul>``` : unordered list * ```<ol></ol>``` : ordered list * ```<li></li>``` : a list item (放在ul/ol裡) * 其他文字標籤： * ```<br>```：換行 * ```<hr>```：水平線 * ```<u></u>```：底線 * ```<i></i>, <em></em>```：斜體 * ```<b></b>, <strong></strong>```：粗體 * 圖片標籤：```<img src="圖片來源 (file path、url)">``` * file path：```<img src="pictures/chocolate.png">``` * url：```<img src="https://cdn.pixabay.com/photo/2016/04/01/10/16/bar-1299829_960_720.png">``` ```htmlmixed= Alt 屬性： image can't be displayed -> show an alternative text <img src="w3schools.jpg" alt="W3Schools.com" > Height、Width 屬性： <img src="..." width="300px" height="200px"> <!--html的味道--> <img src="..." style="width:300px; height:200px;"> <!--css Inline style的味道--> ``` * 連結標籤：```<a href="連結前往的網址"> 名稱 </a>``` * href -- Hypertext REFerence * 點擊圖片，連結至其他網頁：```<a href=""> <img src=""> </a>``` ```htmlmixed= Target 屬性： The target attribute specifies where to open the linked document. "_blank" -> 開新分頁 "_self" -> 直接在本頁跳轉 (default) <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> ``` * 區塊標籤：```<div></div>``` * CSS +DIV 排板 * 獨立的區塊，會獨自佔用一整行。 * vs. ```<span></span>``` * div與span皆是Block element，皆用來切割網頁區塊。 * 不同處：span不會獨自佔用一整行。 ```htmlmixed= <p>這裡是<div style="border: 3px solid red;">紅色</div>的</p> <p>這裡是<span style="border: 3px solid red;">紅色</span>的</p> ``` * 按鈕：```<button>Click me</button>``` ```htmlmixed= <script language="javascript"> function ShowMeDate() { 　var Today=new Date(); 　alert("今天日期是 " + Today.getFullYear()+ " 年 " + (Today.getMonth()+1) + " 月 " + Today.getDate() + " 日"); } </script> <button onclick="ShowMeDate()">告訴我今天日期</button> ``` ## LAB 2 – Pchome 商品頁 ![](https://i.imgur.com/4Sf1jyJ.png) ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pchome 商品頁</title> <script language="javascript"> function ShowMeDate() { 　var Today=new Date(); 　alert("今天日期是 " + Today.getFullYear()+ " 年 " + (Today.getMonth()+1) + " 月 " + Today.getDate() + " 日"); } </script> </head> <body> <a target="_blank" href="https://24h.pchome.com.tw/prod/DHAEDE-A9009F9IS"> <img alt="Show this while image can't be displayed" src="https://c.ecimg.tw/items/DHAEDEA9009F9IS/000001_1538633404.jpg" height="200px;"/> </a> <button onclick="ShowMeDate()">告訴我今天日期</button> <h1 title="ACER 筆電">ACER SF514-52T-85PC蜂蜜金</h1> <h2>特色</h2> <ul> <li>LCD尺寸：14’’ FHD IPS/鏡面/觸控/LED背光</li> <li>處理器：i7-8550U (1.8GHz/4.0GHz) </li> <li>顯示晶片：Intel® UHD Graphics 620 </li> <li>記憶體：16GB LPDDR3</li> <li>硬碟：512GB SSD</li> </ul> <p>其他贈品：<span style="color: pink;">TESCOM大風量負離子吹風機TID450(玫瑰桃)</span></p> <h2>價錢：<span style="background-color: yellow;">$41900</span></h2> <!--另一種方法:使用 mark <h2>價錢：<mark>$41900</mark></h2> --> <div style="background-color:pink; height:110px;"> <h2>付款方式：</h2> <ol> <li>信用卡 ATM 貨到付款</li> <li>信用卡紅利折抵刷卡金<a href="https://24h.pchome.com.tw/edm/card/redeem.htm"> 多家銀行</a></li> <li>PChome儲值</li> </ol> </div> </body> </html> ``` --- ## bonus * Web Server for Chrome：https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related ![](https://i.imgur.com/iAnRm63.png) * [favicon.ico](https://blog.miniasp.com/post/2007/12/17/Introduce-faviconico-and-important-concept.aspx) * http://tw.faviconico.org/ ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我顯示在瀏覽器的分頁上！</title> <link href="C:\Users\pcsh1\Pictures\Saved Pictures\favicon.ico" rel="icon" type="image/x-icon"> </head> <body> <p>我的第一個網頁</p> </body> </html> ```