HTML 5 技術體系 -- HTML 標記的進化與修改

HTML5技術

前言

目錄

過去

現在

未來

JavaScript

修改進化

儲存記憶

資料庫

網路連接

衛星定位

通知

拖拉

HTML

修改進化

新標記

影音物件

2D 繪圖

3D 動畫

CSS

修改進化

字體

特效

選擇器

開發工具

Node.js

Titanium

PhoneGap

Aptana Studio

應用工具

應用

工具

雲端網站

mugeda 動畫製作

訊息

相關網站

參考文獻

最新修改

簡體版

English

簡化：檔頭

簡化前：HTML4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

簡化後：HTML5

<!DOCTYPE html>

簡化：JavaScript 引用

簡化前：HTML4

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

簡化後：HTML5

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

修改：Small 標記的意義

Small 標記原來代表副標題，現在用來代表小字或邊註。

修改：屬性可以不加引號

<p class=myClass id=someId> Start the reactor.

新增：email 型態的輸入欄位

<input id="email" name="email" type="email" />

新增：Placeholder

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

新增：Required 屬性

<input type="text" name="someInput" required>

<input type="text" name="someInput" required="required">

新增：Autofocus

<input type="text" name="someInput" placeholder="Douglas Quaid" required autofocus>

新增：正則表達式

<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text" name="username" id="username" placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}" autofocus required>
<button type="submit">Go </button>
</form>

新增：Mark

Mark 用來標註那些需要凸顯的字詞，像是以下的 "Open Your Mind"

<h3> Search Results </h3>
<p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>

Facebook
page revision: 1, last edited: 06 Sep 2010 00:09
Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License