何のを為に生きて行くのか: 12月 2018

2018年12月29日星期六

[Back To Basic] HTML5 - XHTML

XHTML比HTML更嚴謹
XHTML = XML + HTML
目的是為了解決，行動裝置上的瀏覽器在解讀HTML的容錯能力沒那麼好，所以希望從開發的時候就強制開發者遵循更嚴謹的規範，彌補容錯能力較差的瀏覽器。

相關規範如下

文件結構類

必須宣告doctype為XHTML，擇一版本即可
必須宣告xmlns
必須有這四個標籤 <html>, <head>, <title>, and <body>

HTML元素(elements)規範

必須遵循巢狀原則
必須有結尾
必須為小寫
必須有一個根元素

HTML屬性(attributes)規範

必須為小寫
必須用引號括住
必須寫完整，不可用簡寫 e.g.checked => checked ="checked "

2018年12月27日星期四

[Back To Basic] HTML5 - URL encode

統一資源定位 URL(Uniform Resource Locators)

藉由URL瀏覽器可以向伺服器請求頁面，HRL可以是

一個名稱(e.g. https://www.google.com/)
IP(e.g. 8.8.8.8)

URL規則: scheme://prefix.domain:port/path/filename

scheme: 定義網頁服務的類型(通常是http 或 https)
prefix: 網域的前綴(http預設是www)
domain: 網域名稱
port: port號(預設是80)

常見的scheme

http: 超文本傳輸協定(最常見、無加密)
https: 安全超文本傳輸協定(安全網頁、有加密)
ftp: 檔案傳輸協定(下載或上傳檔案)
file: 自己主機的檔案

URL編碼

URL在網路上只能使用ASCII字符集相互轉送，如果URL使用的字符超出ASCII，這個字元就會被轉換成另外一種方式呈現。

這個轉換的過程就被稱為URL編碼(URL encoding)

e.g. 空白會被轉換成+或%20

2018年12月26日星期三

[Back To Basic] HTML5 - Charset

為了正確顯示網頁，網頁瀏覽器必須知道HTML的檔案是用什麼方式編碼的。

字符編碼(Character Encoding)

ASCII是第一個字符編碼標準(character encoding standard)，亦稱為字符集(character set)，其定義了128個字母符號來表示數字、大小寫英文、特殊符號。

ANSI是Windows的字符集，支援了256種不同的字符。

ISO-8859-1是HTML4預設的字符集，它也支援256種不同的字符。

HTML5預設的字符集是UTF-8

*.HTML4也支援UTF-8

*.UTF-8 (Unicode) 幾乎涵蓋了全世界所有的字符和符號

在HTML檔案的<head></head>宣告如下:

HTML4

HTML5

*.如果瀏覽器發現網頁是ISO-8859-1，預設使用ANSI處理，因為ANSI涵蓋ISO-8859-1所有字符，ANSI還額外擁有32個字符。

*.css檔案中，設定用UTF-8的方法：加入@charset "UTF-8";

結論: HTML5 用UTF-8就對了。

2018年12月24日星期一

[Back To Basic] HTML5 - Entities & Symbols

字元實體(Character Entities)

HTML中有許多的保留字元，e.g. < 或 > ，想要顯示這些保留字，就是使用"Entities"的時機。舉例來說，想要顯示小於(<)這個符號時，可以寫成 < 或 < 來表示。
總言之，就是可以用以下兩種方式來表示特定的字元

&entity_name; (實體名稱) e.g. 小於: < lt=less than

優點－方便記憶(其實我覺得不好記)
缺點－有些entity_name(實體名稱)瀏覽器可能不支援
大小寫不可以打錯

&#entity_number; (實體編號)e.g.小於: <

最常用的特殊字元，一個不斷行的空白:   或  

小結: 要表達特殊字元，就用entity_number(實體編號)表達。

變音符號

其他語系可能會用一些符號代表，發音的方式。Entities也可以結合"字母"和"變音符號"，呈現出發音方法的字母。

e.g. 想顯示 à = ̀ 加上 a，寫法: à = a + ̀

source code

特殊符號(Symbols)

特殊符號一覽表

2018年12月23日星期日

[Back To Basic] HTML5 - Computer Code

Computer Code

這東西沒什麼用。

<kbd></kbd> 使用者輸入(keyboard input)，純粹改變顯示字型
<samp></samp> 程式或系統的輸出(output)，純粹改變顯示字型
<code></code> 計算的片段，純粹改變顯示字型
<pre></pre> 預先格式化的顯示方式，可以顯示寫在程式碼的原樣，e.g.有斷行就是有斷行
<var></var> 數學表達式中的'變數"\

Source Code

[Back To Basic] HTML5 - Responsive

響應式(Responsive)

所謂的響應式網站，意即透過自動縮放、隱藏/顯示，來讓一個網站在各種裝置上的版面、外觀，看起來都是好的。

Viewport

所有的響應式網站，在meta data中都需加入以下這行code，來引導瀏覽器用正確的尺寸和比例來呈現網站。

響應式圖片

圖片的處理如下:

max-width: 100% 用百分比來控制圖片寬度，用max-width比width的好處－圖片可以盡可能地放大，但是如果這張圖片原始檔案"沒那麼大"，就以原始檔案的寬度為主。
這篇文章中有說明的<picture></picture>，可以以螢幕解析度的不同來顯示不同圖片

響應式文字

文字的大小可用vw做為單位，1vw = 1%。所以假設，font-size:1vw，螢幕解析度為1024px，那font-size = 10.24px

Media Queries

用途：依據螢幕解析度不同，可以套用完全不同的樣式

Source Code

響應式網站的框架

這篇文章中，提到的css framework都有處理響應式的需求

2018年12月21日星期五

[Back To Basic] HTML5 - Layout

版面配置(Layout)

語意化的HTML5中為了版面配置，提供了幾個常見的標籤。

<header></header> 整個頁面的標頭
<nav></nav> 導覽列
<section></section> 文檔的一個部分
<article></article> 文章
<aside></aside> 側邊欄或任何在側邊的內容
<footer></footer> 頁尾
<details></details> 額外的詳細內容
<summary></summary> <details>的標題

*. details和summary Edge不支援，sample code

*.div、section、article的分辨可參考這篇文章

五種版面配置的技巧

HTML tables(不推薦)

不要用

css float

優: 很簡單，記兩個css屬性就好，float, clear

缺: 彈性很差，因為float跟文件內容有很大的關聯性，只要稍微修改就必須調整整體頁面

css flexbox

優: 考量各種裝置情境

缺: 不支援ie10之前的版本

css framework

bootstrap
w3.css
...

css grid

優: 跟flexbox帶來的好處非常類似，在處理不同螢幕解析度的需求上更為強大

缺: 不支援ie，不支援Edge15之前的版本

2018年12月20日星期四

<head></head>中會放入的資訊

<title></title> 共有三種作用

瀏覽器頁籤的文字
"加到我的最愛時"的文字
搜尋引擎搜尋出結果時的標題

<style></style> 定義單一個頁面的樣式
<link></link> 定義外部的連結(javascript, css, 等等)
<script></script> 加入client端的腳本(javascript)
<meta> 用來指定以下四種情況(如何顯示頁面、關鍵字及其他web服務)

使用的字元集
頁面描述
作者
關鍵字
其他中繼資料

HTML5提供了viewport的方法，目的是"讓web開發人員"控制視窗(隨著裝置的螢幕解析度大小)

width=device-width 隨著裝置的寬度設定寬度
initial-scale=1.0 當頁面第一次載入時，頁面縮放的比例

每個頁面強烈建議都要加上這一個中繼資料的設定

<base> 設定整個頁面連結預設的href、預設的target

附註: <meta http-equiv="refresh" content="30"> 這種寫法的延伸閱讀

http://www.wibibi.com/info.php?tid=416

2018年12月19日星期三

[Back To Basic] HTML5 - with Javascript, File Paths

Javascript

js可以賦予頁面行為及互動。

<script></script>

用來定義client端的腳本，亦即Javascript，以下為script的兩種使用方式

在標籤中，可撰寫自定義的javascript腳本
也可在標籤上使用屬性 - src，引用外部的javascript腳本

<noscript></noscript>

在瀏覽器不支援javascript，或使用者關閉javascript時，會顯示noscript標籤的內容

HTML檔案路徑

檔案路徑分為以下2種作法:

絕對路徑

src="整個路徑寫上來"

相對路徑(盡量使用這種)

src="資料夾名稱/檔案名稱.檔案副檔名"
src="/資料夾名稱/檔案名稱.檔案副檔名": 表示資料夾在根目錄底下
src="../檔案名稱.檔案副檔名": .. 表示上一層

無論是網頁連結、圖片、樣式表、腳本，檔案路徑的寫法都相同。

2018年12月18日星期二

[Back To Basic] HTML5 - Iframes

Iframes

可在頁面中嵌入其他頁面

語法: <iframe src="URL"></iframe>

*.屬性 - name，可以給定iframe名稱，搭配target使用

*.在頁面中嵌入不同網域的頁面時，會遇到一些安全性議題，詳見這篇文章

https://developer.mozilla.org/zh-TW/docs/Web/HTTP/X-Frame-Options

source code: https://github.com/ShawnTseng/HTML5-practice/commit/0a5b500b2a6599e12e85a715589df8904f370489

2018年12月17日星期一

[Back To Basic] HTML5 - span&div, id&class

span&div 顯示方式(display value)

絕大部分的HTML元素(elements)都有預設的顯示方式

直列(inline)

特性:

不會從新的一列開始
寬度會盡可能地只留必要的寬度

區塊(block)

特性:

從新的一行開始
寬度會盡可能的延展到最寬

id&class

class

群組的概念，HTML元素(elements)都可以套用class
只要套用同一個class就會有同樣的格式和外觀
同一個HTML元素(elements)可以有多個class
css用 .className來取得class群組
js用 document.getElementsByClassName("className")來取得class群組

唯一的概念，同一份HTML文件中id不可重複
css用 #id來取得指定的HTML元素(elements)
js用 document.getElementById("id")來取得指定的HTML元素(elements)
id不可以有空白
記得可以搭配書籤的概念使用 e.g.

2018年12月15日星期六

List

清單有三種

有順序

e.g.

<ol>

</ol>

屬性(attribute) - type: 可指定<ol>用什麼符號當作項目符號
屬性(attribute) - start: 可指定<ol>從第n個項目開始列表

無順序

e.g.

<ul>

</ul>

敘述型

<dl></dl> 描述清單(description list)
<dt></dt> 清單名稱(defined term/name)
<dd></dd> 一個項目的說明(description detail)

e.g.

<dl>

</dl>

source code: https://github.com/ShawnTseng/HTML5-practice/commit/b11c5d80ba0cfb892d6654b9b5c5270db82352e6

[Back To Basic] HTML5 - Tables

Table

Table常見相關元素(elements)

<table></table> 資料表
<caption></caption> 資料表標題，<table>和<caption>中間不要有其他HTML元素
<tr></tr> 資料列
<th></th> 資料表頭
<td></td> 資料表cell，是資料的容器(container)，可以包含任何類型的元素(elements)

e.g.

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Table常見相關屬性(attributes)

colspan 跨欄
rowspan 跨列

Table相關元素(elements)

紀錄關鍵字...不常用

<colgroup>, <col>

2018年12月14日星期五

Image

<Image>是空元素(empty element)
沒有結尾標籤
圖片來源用屬性(attribute) src 指定
屬性(attribute) src可指定相對位置、絕對位置、其他Server提供的圖片，也支援.gif
屬性(attribute) alt 提供替代文字，使用情境以下兩種

圖片無法顯示時，顯示alt
視障使用者瀏覽頁面時

屬性(attribute) alt 是必要的
強烈建議，一定要指定圖片的寬度和高度，避免載入時頁面閃爍，造成使用者體驗不佳
指定方式建議使用css控制，因為用屬性(attribute) width 和 height，都會被css覆蓋

綜合以上原則，寫法如下:

*.寬度和高度，可以指定img id或class後用外部的css檔案控制，對整個網頁可維護性會較好

Image Maps

image map是圖片延伸的功能，若想要在圖片上框選特定的區塊做一些互動可以使用此功能

Picture

<picture></picture> 搭配<source></source>，直接提供適應各種螢幕解析度圖片的解決方案

source code: https://github.com/ShawnTseng/HTML5-practice/commit/7df18342e958e8b38313dfd278e824d36b9ab897

Link

HTML的Link用<a></a>表示
href屬性，用來指定目的位址
<a href="https://www.google.com/">Visit Google</a>

*.請養成好習慣在url最後要加一個正斜線，如果沒有加，很多瀏覽器會自己加上去並且再送一次request

href可用絕對位置，也可用相對位置
link的樣式可自行調整

link 的 target 屬性(attribute)

target可設定如何開啟這個連結

_blank 在新分頁 / 新視窗開啟連結
_self 在自己這頁開啟連結(預設)
_parent 在父框架開啟連結
_top 視窗的body開啟連結
framename 在特定框架開啟連結

TODO: 補範例

link 的 title 屬性(attribute)

可以設定要顯示的tooltip

link 的書籤(bookmark) 屬性(attribute)

可以輔助使用者跳到網頁特定的地方

e.g.

<h1 id="test1">Title 1</h1>

<a href="#test1">Jump to Title 1</a>

也可跳到別頁去

2018年12月13日星期四

[Back To Basic] HTML5 - CSS和HTML關係建立

層疊樣式表 CSS(Cascading Style Sheets)

CSS加入HTML元素(elements)的三種方式

內嵌(Inline) 用屬性(attribute)－Style直接針對某個元素(element)加入

e.g.

<h1 style="color:blue;">Blue Heading</h1>

內部(Internal) 在<head></head>中使用<style></style>的元素加入

e.g.

<head>

<style>

h1 {color: blue;}

</style>

</head>

外部(External) 使用外部CSS檔案

e.g.

<head>

</head>

建議使用外部(External)加入CSS，可維護性會較好

[Back To Basic] HTML5 - Styles, Colors

Styles

HTML中提供"Styles"這個屬性(Attributes)，賦予HTML元素(Elements)樣式。但在可維護性的考量上，CSS盡量不要用這種方式撰寫。CSS和HTML應該拆成兩個檔案來維護，才符合關注點分離的原則。

Colors

顏色有6種表現方式

預先定義好的顏色名字 e.g. Orange, Red...
RGB

三原色光模式，寫法: rgb(red, green, blue)，值為0~255，e.g. rgb(180,180,180)

三原色光模式改成十六進制表示，寫法: #ffffff

色相(hue), 飽和(saturation), 亮度(lightness)表示方式，寫法: hsl(hue, saturation, lightness)

色相(hue)範圍 0~360

飽和(saturation) 範圍 0%~100%

亮度(lightness) 範圍 0%~100%

延伸學習: http://csscoke.com/2015/01/01/rgb-hsl-hex/

RGBA

三原色光模式+透明度，寫法: rgba(red, green, blue, alpha)

alpha的範圍:0.0~1.0

HSLA

概念同上，寫法: hsla(hue, saturation, lightness, alpha)

2018年12月12日星期三

[Back To Basic] HTML5 - 標籤重點摘要

HTML 標題(Headings)

標題(headings)包含h1~h6
搜尋引擎會透過標題(headings)來索引整個網頁的內容
不要用標題(headings)，來放大字體或粗體，請用css做

The HTML <head> 元素

<head>跟headings一點關係都沒有
<head>的職責在於中繼資料(metadata)的宣告，中繼資料(metadata)並不會顯示在畫面上，但是是跟HTML文件有關的資料

中繼資料(metadata)

中繼資料(metadata)包含以下幾種資訊:

文件標題<title>
字元集/字元編碼(character set)
樣式(style)
外部連結(links)
腳本(scripts)\
其他

<p>、<br>、<pre>

<p></p> 段落
<br> 換行
<pre></pre> 保留原本一段文字的換行

格式設置(formatting)

word中可以對文字做的格式配置，HTML都有相對應的標籤

<b></b> 粗體(bold) = <strong></strong> 功能與粗體相同，多了"重要"的概念
<i></i> 斜體 (italic) = <em></em> 功能與斜體相同，多了"重要"的概念
<mark></mark> 標記(黃底標記)
<small></small> 相對於旁邊較小
<del></del> 刪除線
<ins></ins> 底線
<sub></sub> 下標字
<sup></sup> 上標字

罕見的標籤(沒什麼用處)

<q></q> 用於較短的引言，瀏覽器通常會在文字前後加上引號
<blockquote></blockquote> 一個區塊的引言，通常是來自另一個來源
<abbr></abbr> 縮寫，可以幫助搜尋引擎及翻譯系統功能更齊全
<address></address> 網站的作者或擁有者聯絡資訊
<cite></cite> 通常用於"作品"的標題
<bdo></bdo> 可以改變文字的方向，由左至右 / 由右至左

注釋(comments)

HTML註解的寫法

source code: https://github.com/ShawnTseng/HTML5-practice/commit/a825251a5d3e6637e18f7012a9a39546683d5ec5

2018年12月10日星期一

[Back To Basic] HTML5 - 屬性(Attributes)

屬性(Attributes)

提供元素(Elements)額外的資訊

所有的元素(Elements)都有屬性(Attributes)
屬性(Attributes)都被寫在起始標籤中
屬性(Attributes)通常伴隨著屬性名稱(name)和屬性值(value), e.g.name="value"

常見的屬性

href

"href"和"元素<a>"一起使用，提供特定的連結

e.g. <a href="https://www.google.com/">link</a>

"src"和"元素<img>"一起使用，提供圖片的名稱

e.g. <img src="https://pbs.twimg.com/profile_images/927645314630193158/ufoYTbbi_400x400.jpg">

width, height

可以元素(elements)的寬度、高度

兩個主要功能

圖片無法顯示時，可以顯示替代的文字
視障的使用者可以透過輔助器，聽到這些文字訊息

style

用來設定元素(elements)的外觀，e.g. 顏色、字體...

lang

用來設定整份html的語言，對無障礙環境和搜尋引擎而言特別重要

e.g. <html lang="en-US">

前面兩個字母是語言，後面兩個字母是方言(可省略)

延伸學習(關於lang)

https://www.injerry.com/blog-view.php?PID=5&sn=125

title

滑鼠移過該元素(elements)時，會顯示的提示文字

e.g. <p title="tooltip"></p>

屬性建議用小寫(lowercase attributes)

理由和標籤一樣，W3C建議屬性都用小寫，其他格式e.g.XHTML，可能會嚴格強制小寫，所以就保持好習慣吧

屬性建議用引號把屬性值框住

e.g. <a href="https://www.google.com/">

雖然 <a href=https://www.google.com/> 也會正常執行，但有可能會有預期之外的錯誤，強烈建議要加引號，保持好習慣

單引號和雙引號的抉擇

雙引號是最為常見的，單引號也可以正常執行。但有時候屬性值(attribute value)本身帶有引號

e.g. <p title='Shawn "Awesome" Tseng'> 或 <p title="Shawn 'Awesome' Tseng">

此時便可交錯使用。

[Back To Basic] HTML5 - 元素(Elements)

HTML元素(elements)

HTML元素(elements)有兩種

1. 一般元素(element)

開始標籤內容結尾標籤

e.g. <h1></h1>

2.空元素(empty element)

只有單一標籤，沒有內容也沒有結尾標籤

e.g. <br> 換行

巢狀HTML元素

HTML元素可以是巢狀的，也就是說，HTML元素可以包含HTML元素

別忘了結尾標籤(end tag)

有些標籤(tag)，就算忘記結尾標籤(end tag)，還是可以正常顯示

e.g. <p>This is a paragraph

但是這種習慣非常不好，絕對不要這樣做，有可能會造成意想不到的錯誤

標籤建議用小寫(lowercase tags)

W3C建議標籤都用小寫，其他格式e.g.XHTML，可能會嚴格強制小寫，所以就保持好習慣吧

[Back To Basic] HTML5 - 常用的功能(簡介)

常見標籤(tags)

標題

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落

<p></p>

連結

<a href="https://www.google.com">google</a>

*.href是一種屬性(attribute)，屬性(attribute)可以提供標籤(tags)額外的資訊，之後再精讀。

圖片

<img src="https://pbs.twimg.com/profile_images/927645314630193158/ufoYTbbi_400x400.jpg" alt="ninja" width="104" height="142">

*.alt: 圖片還沒載入完成時，顯示的文字

*.src: 圖片來源

*. height: 圖片高度

*. width: 圖片寬度

按鈕

<button>Click </button>

清單

無順序清單

<ul>

</ul>

有順序清單

<ol>

</ol>

*.ul: unordered list / bullet list

*.ol: ordered list / numbered list

source code: https://github.com/ShawnTseng/HTML5-practice/commit/fe824c0711ae2b9aef5eb10fadf0dc5a1e13d83c

[Back To Basic] HTML5 - Editor

編輯器

我們通常會使用文字編輯器來開發網頁，加速開發的效率。
我個人習慣使用Visual Studio Code

Step1 安裝 VS Code

https://code.visualstudio.com/

Step2 安裝HTML snippet

https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

Step3 新增一個檔案，檔名為index.html

3-1 VS Code開啟這個檔案

3-2 在這個檔案裡面輸入'doc'

3-3 按下tab鍵，便可快速完成一個網頁基本的程式碼

註:

*.其他標籤(tags)也可快速輸入，可以自己試試

*.跑出來看不懂的程式碼可以自己查查看其用意

[Back To Basic] HTML5 - Introduction

什麼是HTML?

HTML是建立網頁的標準標記語言

HTML文件說明

source code: https://github.com/ShawnTseng/HTML5-practice/commit/77c636afbc76e1d9c6555a5b89fdc64346f8a1b7

<!DOCTYPE html> 通常寫在第一行，宣告這份檔案的HTML版本，這樣寫代表HTML5
<html></html> 頁面的根元素(root element)
<head></head> 包含的中繼資料(meta data)
<title></title> 頁面的標題，會顯示在瀏覽器的頁籤上
<body></body> 真正會呈現的內容'

HTML標籤(tags)說明

標籤名稱(tagname)
標籤有開始標籤(start tag/opening tag)、結尾標籤(end tag/closing tag)
開始和結尾標籤類似，但是多一個斜線符號(/)在標前名稱前方

瀏覽器

瀏覽器(e.g. IE, Chrome, Firefox)會讀取HTML文件，並且展現它。雖然這些標籤(tags)不會被展現出來，但是會透過這些標籤(tags)決定如何呈現。

HTML頁面結構

這是整個HTML頁面的結構，只有白色的部分會顯示在瀏覽器上。

<!DOCTYPE>的宣告

<!DOCTYPE>是幫助瀏覽器判斷文件的類型(type)，瀏覽器才能正確地顯示網頁。這個宣告只能出現一次，而且必須在整個檔案的最上方。

早期有很多種版本，不過之後都用HTML5，宣告方式如下

<!DOCTYPE html>

2018年12月4日星期二

這幾天面試了很多間公司，每間要求的資料都很多，常常搞到12點都沒時間寫日記，今天早上花2小時來了解React Native的文件吧

Step1
安裝Expo到自己的電腦裡面, command: npm install -g expo-cli

Step2
用Expo建立一個React Native的專案, command: expo init ProjectName
功能等同於 angular cli command: ng new ProjectName

Step3
接著就用熟悉的開發工具打開,npm start就可以模擬上線的結果, 要模擬系統執行在android或ios的裝置上的話，必須做以下這N件事情:
3-1. 安裝Expo client在要模擬的手機上(android&ios的client端)
3-2. 讓這支手機和電腦連到同一個網域
3-3. 用這支手機直接掃描Server提供的QR code, 即可看到執行結果

2018年12月2日星期日

舞蹈培訓-派對舞蹈(DoublePop) Day-2

連續上了兩天的培訓課程，對於有氧舞蹈老師(一對多的團體課程)總算有些認識，當一個老師確實不容易。

一堂派對舞蹈課程需準備的事項如下:
14首的編舞(動作及口指令)
熟悉課程臨場感
互動、指導、表演一體到位
包括課程的安全、課程的經營等等，確實比預期還要來得複雜，謝謝九折學長讓我初步的了解這個產業，未來還有很長的路要走，很多東西可以學習，加油加油，全身痠痛中...

2018年12月1日星期六

舞蹈培訓-派對舞蹈(DoublePop)

今天去參加派對舞蹈的培訓課程，一堂授課中，含14首歌曲及編舞，並且嘗試了平時不擅長的舞風－MV、拉丁。

明天要交作業...暫停寫blog一天。

https://www.facebook.com/DoublePopTaiwan/

訂閱：文章 (Atom)

2018年12月29日 星期六

2018年12月27日 星期四

統一資源定位 URL(Uniform Resource Locators)

常見的scheme

URL編碼

2018年12月26日 星期三

字符編碼(Character Encoding)

2018年12月24日 星期一

字元實體(Character Entities)

變音符號

特殊符號(Symbols)

2018年12月23日 星期日

Computer Code

響應式(Responsive)

Viewport

響應式圖片

響應式文字

Media Queries

響應式網站的框架

2018年12月21日 星期五

版面配置(Layout)

五種版面配置的技巧

2018年12月20日 星期四

<head></head>中會放入的資訊

2018年12月19日 星期三

Javascript

<script></script>

<noscript></noscript>

HTML檔案路徑

2018年12月18日 星期二

Iframes

2018年12月17日 星期一

span&div 顯示方式(display value)

id&class

2018年12月15日 星期六

List

Table

Table常見相關元素(elements)

Table常見相關屬性(attributes)

Table相關元素(elements)

2018年12月14日 星期五

Image

Image Maps

Picture

Link

link 的 target 屬性(attribute)

link 的 title 屬性(attribute)

link 的 書籤(bookmark) 屬性(attribute)

2018年12月13日 星期四

層疊樣式表 CSS(Cascading Style Sheets)

Styles

Colors

2018年12月12日 星期三

HTML 標題(Headings)

The HTML <head> 元素

中繼資料(metadata)

<p>、<br>、<pre>

格式設置(formatting)

罕見的標籤(沒什麼用處)

注釋(comments)

2018年12月10日 星期一

屬性(Attributes)

常見的屬性

延伸學習(關於lang)

屬性建議用小寫(lowercase attributes)

屬性建議用引號把屬性值框住

單引號和雙引號的抉擇

HTML元素(elements)

1. 一般元素(element)

2.空元素(empty element)

巢狀HTML元素

別忘了結尾標籤(end tag)

標籤建議用小寫(lowercase tags)

常見標籤(tags)

標題

段落

連結

圖片

按鈕

清單

2018年12月29日星期六

2018年12月27日星期四

2018年12月26日星期三

2018年12月24日星期一

2018年12月23日星期日

2018年12月21日星期五

2018年12月20日星期四

2018年12月19日星期三

2018年12月18日星期二

2018年12月17日星期一

2018年12月15日星期六

2018年12月14日星期五

link 的書籤(bookmark) 屬性(attribute)

2018年12月13日星期四

2018年12月12日星期三

2018年12月10日星期一

2018年12月4日星期二

2018年12月2日星期日

2018年12月1日星期六