簡介

HTML (HyperTextMarkupLanguage 超文本標記語言)
是網頁呈現的骨幹，決定網頁的內容
意義:
Markup langauage 是定義如何呈現raw text的結構
HyperText 表示電腦可取用其他Text或links，類似Hyperlinks的概念
組成:
HTML由元素組成，而元素基本上是 opening tag , content , closing tag 的格式
tag 會決定此元素呈現的類型，content則是元素的內容
比如想呈現一個標題:
<h1> this is a title </h1>
則<h1>、</h1>是opening tag、 closing tag ，並表明這是一個標題
this is a title 是content，表明標題的文字內容
架構:
一個html文檔，基本上會遵循下列格式

<!DOCTYPE html> 表明此文件是html文檔
<head> 部分會放此網頁的meta data、 script、CSS 引入檔… <body> 部分則是放網頁的內容
(小知識: google chrome可以按下F12，觀察此網頁的html檔)

屬性

屬性加在opening tag 中，所有element都可以有屬性
屬性可以使element做更多事 (換style、註解、link ….)，提供額外資訊
屬性由 Name 和 value組成，格式為 Name = “value”
例如:

<div id="intro"> 
	<h1>Introduction</h1> 
</div>

常用屬性:

id: 幫助我們為同名但不同的元素做記號區分 (例如:最常使用於div)
class: 幫助CSS設定，可一次賦予多值
例如 <p class="gold green">...</p>
href: 連結標籤a的目的URL
顏色、大小

常用元素介紹

<h1> ~ <h6>
代表標題(heading)
<h1> 最大，通常用於主標題
大小隨數字遞減
<div> 代表分割(division)
可以封裝任何元素在其中
簡單來說就是分區塊的 (只對程式分區塊==>增加易讀性) (可以搭配CSS進行排版、或是加入id、class屬性方便分類)
<p>
paragraph
用來呈現文章內容
排版相關
<span>..</span>:類似一段文字內的div，可以讓這段文字獨立一組施加不同的效果
<em>…</em>:斜體強調
<strong>…</strong>:粗體強調
<br> 換行(link breaks)，注意沒有closing tag
清單相關

unorder list
由<ul>、<li> 所組成
order list
由<ol>、<li> 所組成

圖片 <img src=”URL” alt="xxx” >
image搭配sorce屬性，可以顯示sorce裡的圖片
沒有closing tag
alt 屬性:可以加上敘述，在URL掛掉時說明圖片是甚麼
影片
<video src=”URL” width=”xxx” height =”xxx” controls> …
類似圖片
需要closing tag
link <a href=”URL”> …
anchor element
超連結，通常搭配href 使用
content可以填超連結想要呈現的名字，如This Is A Link To Wikipedia
註1:可搭配 target屬性，target=”xxx” xxx有四種值
_blank(常用，開link於新網頁) 其他_self、 _parent、 _top() target決定超連結如何被開啟
註2:搭配img
Content的地方改成img tag可變為圖片連結
表格 <table>..</table>
簡單來說要設計tbody(table body)放表格主體，由tr(table row)元素產生一列，tr內由th(table header)與td(table data)填充表格內部
thead 通常用來放置<th scope=”col”> 的<tr>
(也就是表格用來放各行代表名的資料)
tbody用來放置剩下所有資料
tfooter 用來放總和之類的最後一行
基本格式為

<table>
	<thead>
		<tr>
			<th scope=”col”> … </th>   <!-- can add more th  here-->
		<tr>
	</thead>
	<tbody>
		<tr>
			<th scope=”row”>...</th>  <!-- one th for row heading  -->
			<td>..</td>
			<td>..</td> 			 <!-- can add more data here  -->
		<tr>

			 <!-- can add more tr just like above here  -->

	</tbody>

			<!-- optional below,if you have footer row can add below -->
	<tfooter>
		<tr>
			<th scope=”row”>...</th>  <!-- one th for row heading  -->
			<td>..</td>
			<td>..</td> 			 <!-- can add more data here  -->
		<tr>
	<tfooter>
</table>

form元素
10.1
<form>~</form>
表單，可用於接受資訊
要用屬性告訴browser 兩件事
(1).資訊要送去哪 (action)
通常要傳給php、js之類的動態語言才能接收，此例中html是無法接收的
參考JS如何接收表單:
https://pjchender.blogspot.com/2015/11/javascript.html
(2).用HTTP的甚麼方法(比如method=”POST”)
會在form中加入input，以達到接收使用者資料的目的
10.2
<input type="xxx” name="xxx” value="xxx">
輸入
沒有closing tag
有兩個重要屬性，一個常用屬性
(1).type
決定接受的data type或方式類型比如:
“text”:文字
“submit” :送出紐，value屬性可填入按鈕顯示名，預設為submit 還有其他GUI可以用，比如check box、拉杆 …
(2)name
一定要有此屬性，form送出(submmit)時才會送出此input
(3)value
可以預設input
例如:value="hello world”
則一開始input的box會預設hello world
*當form送出時，接收方會收到 name=value 的pair

關於forme更多的GUI，可以參考原始筆記pdf 點此

參考資料

https://www.codecademy.com/learn/learn-html

Little Cube`s box

關於HTML

簡介

屬性

常用元素介紹

參考資料

連結

分類