What is HTML?
HTML is a markup language for describing web documents (web pages).
HTML功能: 類似word文件裡面編寫文章的架構一下使內容可以更好的被閱讀.
- HTML stands for Hyper Text Markup Language
- A markup language is a set of markup tags
- HTML documents are described by HTML tags
- Each HTML tag describes different document content
基本架構與語法:
- HTML tags normally come in pairs like
<p>and</p> - The first tag in a pair is the start tag, the second tag is the end tag
HTML元素(element): 是建構HTML網頁的基本要素，指的就是開始與結束標籤(tags)與所包夾的內容(content).
結束的tag通常都會有”/”.
<標籤>內容</標籤>
屬性(attributes):
a. 屬性名: 表明要提供元素內什麼類型的額外資訊(必須是小寫).
b. 屬性值: 屬性的資訊或是設定值，必須在雙引號之間.
ex. <p lang="en-us">Paragraph in English</p>
id屬性: 每個HTML元素都可以使用，作用是在將頁面內的所有元素當中，將某個元素獨立出來. 全域屬性
class屬性: 每個HTML元素都可以使用，作用是在將頁面內的所有元素當中，將幾個元素從其他元素中獨立出來.
<div></div> 將一組元素群組起來，讓管理code的工作更容易
HTML Page Structure
The declaration helps the browser to display a web page correctly.
<!DOCTYPE html>是一種文件類別宣告(document type declaration)而非元素喔，是用來宣告(定義)目前HTML文件是使用那一個版本
<!DOCTYPE html> (告訴瀏覽器 我們使用的HTML版本)
<!-- --> (註解)
<html>
<head>
在這裡面包含了這個頁面的相關資訊.
<title>在這裡面的內容會出現在瀏覽器的標題上.</title>
</head>
<body>
在這裏面的所有東西都會出現在網頁視窗上.
</body>
</html>HTML頁面中文亂碼問題:
解決辦法: 在<head> </head>中間新增
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">PS. <meta> 用來存放頁面的描述資料，關鍵字、描述…等
a) 常見標籤介紹
<h1></h1>...<h6></h6> 標題(數字越小權重越高)
<p></p> 段落
<br> 跳行
<br /> 斷行
<hr /> 水平線(分段的)
<b></b> or <strong></strong> 粗體字
<i></i> or <em></em> 斜體字
<sup></sup> 上標
<sub></sub> 下標
<abbr></abbr> 縮寫字 (搭配title) ex. <abbr title="Professor">Prof</abbr>
<cite></cite> 標示註解 (瀏覽器會顯示斜體字)
<dfn></dfn> 定義 (defining instance) 用途是標示出一個新術語的定義
<ins></ins> 顯示被插入文件的內容 (通常是顯示"底線")
<del></del> 顯是被刪除的內容(顯示刪節線)
<s></s> 標示不再正確的內容(顯示刪節線)
PS. 當瀏覽器遇到兩個以上的空白時，它只會顯示一個.
<a></a> 超連結
ex.
<a href="http://www.imdb.com">IMDB</a>
<a mailto:""></a> EMAIL連結
<a href="..." target="_blank"></a> 在新視窗開啟連結連結到同網頁的某個部分: 要做到這件事情需要使用 “id” 這個屬性，id的值必須為字母或是下滑線為開頭，另外在同一個網頁中兩個id屬性不能有相同的值. 要連結到id屬性的元素時，使用<a>，但是href的值要以 “#” 為開頭.
ex.
<a href="#prologue"> Prologue</a>
<h2 id="prologue">Prologue</h2>b) 清單類型：HTML有三種不同類型的”清單”
a. 編號清單
<ol></ol> 編號清單
<li></li> 清單中的”每一項”都要在這之間
b. 項目清單
<ul></ul> 項目清單
c. 定義清單
<dl></dl> 定義清單
<dt></dt> 被定義的名詞
<dd></dd> 容納其定義
ex.
<dl>
<dt>Sashimi</dt>
<dd>
QWEQWEQWRQRETWERWETEW
</dd>
</dl>巢狀清單 (清單裡面包含清單)
ex.
<ul>
<li>apple</li>
<li>city</li>
<ul>
<li>Taipei</li>
<li>Taichung</li>
</ul>
<li>IPhone</li>
</ul>c) 表格
<table></table>
<tr></tr> 表格列(table row)
<td></td> 表格資料(table data)
colspan 可以用在<th>或<td>元素上，並指示該儲存格應該跨越多少欄
rowspan 可以用在<th>或<td>元素上，並指示該儲存格應該跨越多少列
ex.
<td colspan="2">test </td><th></th> 功能跟<td>相同，不過此用途為呈現欄或列的標題(table heading 字體加粗並且會在儲存格中央)
ex.
<th scope="row"> test</th> (or you can use "col")row代表行的標題，col代表欄的標題
d) 圖片 (擺放的位置利用CSS來設定)
<img>
ex.
<img src="imges/quokka.jpg" alt=" test " title="test" width="600" height="450">alt: 當看不到影像時會顯示的敘述
title: 當滑鼠移到影像上方時會出現此屬性內容
width, height: 單位為項訴
e) 表單(form)
<form action="http://www.test.com.test.php" method="get"></form> 表單
action 值為伺服器上等待接收送出資訊的網頁URL
method 表單送出的方式 get & post
get的使用情況: 表單的值會被加到action屬性所指定的URL後端，適用於短表單、當只是想從網路伺服器取得資料(非新增或刪除資料庫的資訊).
post的情況: 透過HTTP標頭傳送，適用於使用者上傳檔案、表單很長、新增移除資料.
<input /> 製作不同的表單控制選項
type=”text” 文字輸入欄為
ex.
<input type="text" name="username" maxlength="30" />type=”password” 密碼輸入
type=”radio” 單選紐
ex.
<input type="radio" name="test" value="rock" checked="checked" /> Rock
<input type="radio" name="test" value="pop" /> POP[value: 該選項要傳到伺服器的值, 同一組選項中要有不同的值。 checked:標示說當頁面再載入時應該預先選好的值]
type=”checkbox” 勾選紐(設定同radio)
type=”file” 檔案輸入區塊 (會自動出現瀏覽按鈕)
type=”submit” 功能: 產生按鈕將表單送到伺服器
ex.
<input type="summit" name="subscribe" value="Subsscribe"> value: 控制出現在按鈕上的文字
type=”image” 功能: 上傳影像, 屬性跟依樣
ex.
<input type="summit" name="subscribe" value="Subsscribe"> value: 控制出現在按鈕上的文字<textarea></textarea> 文字區塊
ex.
<textarea name="comments" cols="20" rows="4">text</textarea> <select></select> 下拉式選單欄位
ex.
<select name="test" multiple="multiple">
<option value="test1" selected="selected">test1</option>
<option value="test2">test2</option>
</select>[name: 要和使用者所選取的值一起送到伺服器的表個名稱。multiple: 開放多選。option: 在這裏面的文字會顯示在下拉選單中]
<fieldset></fieldset> 將表單群組起來 (再加範例)
<legend></legend> 群組起來之後 設定標題用
HTML5 新增功能
<required="required"> 表單驗證 (驗證有無填寫)
type=”date” 日期輸入
type=”email” email 輸入(會順便檢查格式是否正確)
type=”url” 同上
placeholder=”Enter keyword” 在資料輸入欄位之前 顯示的文字
<iframe></iframe> 在網頁中切出一個小視窗，在這個視窗內你可以看到其他網頁的內容
ex.
<iframe width="450" height="350" src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed"
frameborder="0" <!-- 是否顯示編框 0 or 1-->
scrolling="no" <!-- 此屬性在HTML5不支援 yes, no, auto --> > </frame><video></video> 新增視訊到網站
內建屬性: poster=”images/…jpg” 當影片正在下載時會顯示的圖片, controls, autoplay, loop.
<audio></audio> 音源
內建屬性: controls, autoplay preload, loop
沒有留言:
張貼留言