黑暗時代網頁程式設計 - HTML

HTML 黑暗時代網頁程式設計 @qcl

HTML HyperText Markup Language 超文件標示語言 http://www.w3.org/TR/html5/

這是一個網頁

這是一個網頁瀏覽器 URL

網頁 • 使用「瀏覽器」進行一個瀏覽網頁的動作 ◦ 像是等軟體 • 使用「URL」描述網頁在哪裡 ◦ Uniform
Resource Locator，統一資源定位符 ◦ 大抵上就是一種網頁的門牌的概念 ◦ 協定://伺服器:埠口/路徑?查詢 ▪ http://qcl.github.io/QCLean/ • 使用HTML撰寫網頁 ◦ 用任何純文字編輯器都可以寫網頁 ◦ 副檔名：html

一個簡單的網頁 <!DOCTYPE html> <html> <head> <title>YOOOOOOO</title> </head> <body>  <p>THREEEEEEEEEEEEE</p> </body> </html>

其實這是一顆樹的概念 <!DOCTYPE html> <html> <head> <title>YOOOOOOO</title> </head> <body>  <p>THREEEEEEEEEEEEE</p> </body> </html> html head body title p #comment

DOM Tree • 這棵樹的名字叫DOM Tree • DOM ◦ Document Object
Model • 樹上的節點便是一個DOM • 樹根是html節點 ◦ 依序包含head和body ◦ head內放網頁的metadata ◦ body內放顯示出來的內容 html head body title p #comment

Element, tag, attribute • 大部份的element的形式 ◦ <elementName>為start tag，開始這個node ◦ element可以屬性，屬性是跟著start
tag一起寫，像是這樣<elementName attribute=”value”> ◦ </elementName>為end tag，結束這個node ◦ e.g. <a href=”http://tw.yahoo.com/”>Yahoo!</a> • 也有一些Element是不需要end tag的 ◦ <img src=”worship.png”>

Element Definitions • Categories ◦ A list of categories to
which the element belongs. ◦ There are use when defining the content model • Contexts in which this element can be used • Content model ◦ A normative description of what content must be included as children and descendants of the element. • Tag omission in text/html • Content attributes • DOM interface

Kinds of content http://www.w3.org/TR/html5/dom. html#content-categories

Attributes • Global attributes ◦ accesskey ◦ class ◦ contenteditable
◦ dir ◦ hidden ◦ id ◦ lang ◦ spellcheck ◦ style ◦ tabindex ◦ title ◦ translate

References & Resources • W3C HTML5 Spec ◦ http://www.w3.org/TR/html5/ •
W3School HTML Tutorial ◦ http://www.w3schools. com/html/default.asp • NTU CCSP Slides ◦ http://ccsp.ntumobile. org/webdev/html.html • MDN HTML ◦ https://developer.mozilla.org/en- US/docs/Web/HTML

黑暗時代網頁程式設計 - HTML

黑暗時代網頁程式設計 - HTML

Qing-Cheng Li

More Decks by Qing-Cheng Li

Other Decks in Programming

Featured

Transcript

HTML 黑暗時代網頁程式設計 @qcl

HTML HyperText Markup Language 超文件標示語言 http://www.w3.org/TR/html5/

這是一個網頁

這是一個網頁瀏覽器 URL

網頁 • 使用「瀏覽器」進行一個瀏覽網頁的動作 ◦ 像是等軟體 • 使用「URL」描述網頁在哪裡 ◦ Uniform

一個簡單的網頁 <!DOCTYPE html> <html> <head> <title>YOOOOOOO</title> </head> <body> <!-- yo!

其實這是一顆樹的概念 <!DOCTYPE html> <html> <head> <title>YOOOOOOO</title> </head> <body> <!-- NOOOOOO

DOM Tree • 這棵樹的名字叫DOM Tree • DOM ◦ Document Object

Element, tag, attribute • 大部份的element的形式 ◦ <elementName>為start tag，開始這個node ◦ element可以屬性，屬性是跟著start

Element Definitions • Categories ◦ A list of categories to

Kinds of content http://www.w3.org/TR/html5/dom. html#content-categories

Attributes • Global attributes ◦ accesskey ◦ class ◦ contenteditable

References & Resources • W3C HTML5 Spec ◦ http://www.w3.org/TR/html5/ •