對於資料分析職務而言，學習HTML多半是為了培養撰寫爬蟲程式能力，因此是重要性比較次之的技能；但對於DevOps職務而言，HTML是基本能力之一。有鑑於目前工作有開發、架設網站的需求，因此我重新複習於BDSE進修時留下來的紙本講義，重新整理為筆記以方便日後查詢。
一、網頁撰寫設定
HTML、CSS瀏覽器支援狀態
VS Code設定
l Emmet快速產生HTML標籤與CSS樣式：
輸入「!」即可自動產生文件架構，全選後輸入「Alt+Shift+F」即可自動排版。
https://docs.emmet.io/cheat-sheet/
l 瀏覽網頁的方法一：
在VS Code安裝Live HTML Previewer後，在網頁上按下滑鼠右鍵Open in browser。
l 瀏覽網頁的方法二：
在VS Code安裝Preview on Web Server後，在網頁上按下滑鼠右鍵Launch on browser。
二、HyperText Markup Language (HTML)
標籤、元素與屬性
l 一個完整的HTML語法有開始標籤(Start Tag)、結束標籤(End Tag)，再加上標籤內容，也就是元素(Element)。
l 元素的屬性(Attribute)只可以加在開始標籤中，例如<h2 class="st2
st1">banana</h2>，多個屬性值以空格分開。
l HTML的標籤大部分都是成對的，但有些標籤是沒有結束標籤的，例如<br>、<hr>、<meta>、<img>等，可以在符號「>」前加上「/」，不加亦可。
HTML文件架構
l HTML文件架構：
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<meta
charset="utf-8"/>
<title>標題</title>
<style>CSS樣式表</style>
<script>JS程式碼</script>
</head>
<body>
</body>
</html>
l DOCTYPE放在網頁最上面，告知瀏覽器，此網頁所使用的HTML標籤是什麼版本，此為HTML5。
l head元素是用來放一些描述網頁的資料(Metadata)。
l body元素是用來呈現網頁的內容。
HTML基礎元素
l 註解：
<!-- -->
l meta元素：
<meta name="author" content="sherman">
<meta name="keywords" content="HTML,CSS,JavaScript">
最後修改日期
<meta name="date" content="2009/4/30">
搜尋出的結果
<meta name="description" content="HTML Teaching Website">
開發工具
<meta name="generator" content="Microsoft Expression
Web">
300秒後自動更新
<meta http-equiv="Refresh" content="300">
20秒後連至頁面
<meta http-equiv="Refresh" content="20;url=page4.html">
l 標題元素：
<h1></h1>
<h6></h6>
l 內容元素：
前後沒有空白的容器，屬於block元素
<div></div>
緊鄰前後元素的容器，屬於inline元素
<span></span>
內容段落元素，屬於block元素
<p></p>
l 換行元素：
<br>
l 分隔線元素：
<hr>
l 超連結元素，屬於inline元素：
連結到其它網頁
<a href="http://www.iiiedu.org.tw"></a>
連結到同一網頁特定位置
<a href="#bookmark"></a>
<p id="bookmark"></p>
l 圖片元素，屬於inline元素：
<img src="..." alt="..." title="..."
width="300">
l 內置框架元素：
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.031837678457!2d121.5414081150062!3d25.03299358397273!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abd3702839e1%3A0x1ec4809041d20108!2z5aSn5a6J56uZ!5e0!3m2!1szh-TW!2stw!4v1600676599202!5m2!1szh-TW!2stw"
width="400" height="300" frameborder="0"
style="border:0;" allowfullscreen=""
aria-hidden="false" tabindex="0"></iframe>
block元素與inline元素
l 比較block元素與inline元素：
如果容器是block元素，可以裝block元素、inline元素。
如果容器是inline元素，只可以裝inline元素；若裝block元素，容器屬性將不影響內層之block元素。
HTML清單元素結構
l 項目清單結構：
<ul>
<li></li>
</ul>
l 序號清單結構：
<ol>
<li></li>
</ol>
l 定義清單結構：
<dl>
<dt></dt>
<dd></dd>
</dl>
HTML圖文元素結構
l 圖文結構：
<figure>
<img src="..."
alt="..." title="..." width=400/>
<figcaption></figcaption>
</figure>
HTML表格元素結構
l 表格結構：
<table>
<caption></caption>
<thead>
<tr>
<th>column1</th><th>column2</th><th>column3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td
rowspan="2">text</td>
</tr>
<tr>
<td>1</td><td>2</td><!--
<td>3</td> -->
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
HTML表單元素結構
l 表單結構：
<form action="#" method="get" enctype="multipart/form-data">
<fieldset>
<legend>...<em>...</em></legend>
<div>
<label
for="pwd"></label>
<input type="password" name="..."
id="pwd"/>
</div>
<div>
<label
for="comment"></label>
<textarea name="..."
id="comment"></textarea>
</div>
<div>
<input type="submit"
value="..."/>
<input type="reset"
value="..."/>
</div>
</fieldset>
</form>
l form元素：
action屬性的值是伺服器上等待接收資料程式的URL。
method屬性的值是get或post。
enctype屬性的值，application/x-www-form-urlencoded是預設值，multipart/form-data是表單有上傳檔案時需要使用，text/plain是傳送純文字表單。
l input元素：
type屬性的值是text或password。
l label標籤for屬性值和input標籤id屬性值必須相同，為點擊文字後，游標可以進入輸入框。
l 表單元素控制項：
一般按鈕，讓開發人員透過JavaScript去自訂功能
<input type="button" name="..." value="..." disabled>
<button type="button" name="..." disabled >...</button>
單選控制項
<input type="radio" name="..." value="..."/>
複選控制項
<input type="checkbox" name="..." value="..."/>
下拉式選單控制項
<select name="..." multiple>
<option value="...">...</option>
<option value="...">...</option>
<option value="..."
selected>...</option>
</select>
檔案上傳控制項
<input type="file" name="..."/>
其它input元素type屬性值包含date、datetime-local、month、time、week、email、url、tel、search、color、range、number等
結構語義元素
l 早期以table來做à以frameset來做à以div來做à結構語義元素Structural Semantic Elements
l 結構語義元素：
<header></header>為頁首元素。
<nav></nav>為導覽列元素，常用清單元素來製作。
<article></article>為主要內容元素。
<aside></aside>為次要內容元素。
<section></section>為區段元素，裡面一定要緊接標題元素如<h1></h1>。
<footer></footer>為頁尾元素。
l 結構語義元素架構範例：
<header>
<hgroup></hgroup>
<nav></nav>
</header>
<article>
<section>
<h1></h1>
<header></header>
<figure></figure>
<footer></footer>
</section>
<section></section>
<nav></nav>
</article>
<aside>
<header></header>
<figure></figure>
<footer></footer>
</aside>
<footer>
<section></section>
<nav></nav>
<address></address>
</footer>
l 針對不支援HTML5結構語義元素的瀏覽器：
用JavaScript建立一個空元素，或將元素樣式新增display:block;屬性。
<script>
document.createElement("article");
</script>
三、Cascading Style Sheet (CSS)
CSS選擇器與屬性
l 直接加入樣式(Inline)：
<元素標籤 style="屬性:屬性值;屬性:屬性值;"></元素標籤>
l 自訂樣式表(Embedding)：
<style>
選擇器{
屬性: 屬性值;
}
</style>
l CSS選擇器符號：
「.」選擇class。
「#」選擇id。
「,」選擇多個元素標籤。
「
」選擇內層元素標籤。
「>」選擇下一層元素標籤。
「+」選擇相鄰元素標籤。
「*」選擇全部元素標籤。
l 超連結CSS選擇器符號：
「a:link」定義預設超連結樣式。
「a:visited」定義瀏覽過的超連結樣式。
「a:hover」定義滑鼠移至的超連結樣式。
「a:active」定義選取的超連結樣式。
l 表格CSS選擇器符號：
「tr:nth-child(2n)」定義偶數列表格樣式。
「tr:nth-child(2n+1)」定義奇數列表格樣式。
l 外掛樣式表(Linking)：
<head>
<link rel="stylesheet"
href=".css檔路徑">
</head>
CSS執行順序
l 同一層級中，先定義的會被後定義的覆蓋過去。
l 樣式優先權：
直接加入樣式(Inline) > 自訂樣式表(Embedding) >
外掛樣式表(Linking)
l 屬性優先權：
id > class > element
其它CSS選擇器符號－字型與字體
l @font-face提供伺服器字型供網頁下載使用：
@font-face{
src: url(.ttf檔路徑);
font-family:命名名稱一;
}
指定標籤套用
h1{
font-family:命名名稱一,若沒有命名名稱一則使用命名名稱二;
}
l @import使用外部字體方法一，較慢：
<style>
@import url(".ttf檔路徑");
</style>
l <link>使用外部字體方法二，較快：
<head>
<link rel="stylesheet"
href=".ttf檔路徑">
</head>
l 同理，載入CSS亦可如此操作，link.css包含@import url(st.css)與@import
url(font.css)，page.html直接引用link.css即可直接載入所有.css檔：
<head>
<link rel="stylesheet"
href="link.css檔路徑">
</head>
其它CSS選擇器符號－Media
Queries
l Media Queries：
媒體類型包含all所有裝置、screen螢幕裝置、print印刷裝置、speech讀出頁面設備等。
裝置特性包含width、height、orientation、aspect-ratio、color、resolution等。
l @media根據使用者的媒體類型及裝置特性，來選擇使用不同的樣式，方法一：
<style>
@media screen and (color){
CSS樣式表
}
</style>
l @import根據使用者的媒體類型及裝置特性，來選擇使用不同的樣式，方法二：
<style>
@import url(".css檔路徑" screen and (color));
</style>
l <link>根據使用者的媒體類型及裝置特性，來選擇使用不同的樣式，方法三：
<head>
<link rel="stylesheet" media="
screen and (color)" href=".css檔路徑">
</head>
CSS特殊字元使用
l 原始碼輸出：
<figure>
<code>原始碼輸出內容，需搭配特殊字元使用</code>
</figure>
l 特殊字元：
版權所有符號為©。
空白為 。
AND&為&。
大於>為>。
小於<為<。
雙引號"為"。
註冊商標符號為®。
商標符號為™。
沒有留言:
張貼留言