HTML & CSS Basics

HTML & CSS basics @ 巩守强 http:/ /stupig.me 12年8月28⽇日星期⼆二

HTML (HyperText Markup Language) 12年8月28⽇日星期⼆二

HTML history 12年8月28⽇日星期⼆二

HTML history HTML2.0 12年8月28⽇日星期⼆二

HTML history HTML2.0 HTML4.0.1 12年8月28⽇日星期⼆二

HTML history HTML2.0 HTML4.0.1 XHTML1.0 12年8月28⽇日星期⼆二

HTML history HTML2.0 HTML4.0.1 XHTML1.0 XHTML1.1 12年8月28⽇日星期⼆二

HTML history HTML2.0 HTML4.0.1 XHTML1.0 XHTML1.1 XHTML2.0 12年8月28⽇日星期⼆二

HTML history HTML2.0 HTML4.0.1 XHTML1.0 XHTML1.1 XHTML2.0 HTML 5 12年8月28⽇日星期⼆二

sample.html 12年8月28⽇日星期⼆二

<!DOCTYPE> 12年8月28⽇日星期⼆二

<!DOCTYPE> html4.0 & xhtml1.1 12年8月28⽇日星期⼆二

<!DOCTYPE> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
html4.0 & xhtml1.1 12年8月28⽇日星期⼆二

strict , transitional , frameset html4.0 & xhtml1.1 12年8月28⽇日星期⼆二

strict , transitional , frameset html4.0 & xhtml1.1 html4.0 ~ 12年8月28⽇日星期⼆二

strict , transitional , frameset <!DOCTYPE html> html4.0 & xhtml1.1 html4.0 ~ 12年8月28⽇日星期⼆二

strict , transitional , frameset <!DOCTYPE html> backward compatibility html4.0 & xhtml1.1 html4.0 ~ 12年8月28⽇日星期⼆二

<head> 12年8月28⽇日星期⼆二

<head> title 12年8月28⽇日星期⼆二

<head> title meta 12年8月28⽇日星期⼆二

<head> title meta link 12年8月28⽇日星期⼆二

<head> title meta link script 12年8月28⽇日星期⼆二

<body> 12年8月28⽇日星期⼆二

<body> block element 12年8月28⽇日星期⼆二

<body> block element inline element 12年8月28⽇日星期⼆二

<body> block element inline element <div>block0</div> <div>block1</div> 12年8月28⽇日星期⼆二

<body> block element inline element <div>block0</div> <div>block1</div> <span>inline0</span> <span>inline1</span> 12年8月28⽇日星期⼆二

HTML elements 12年8月28⽇日星期⼆二

HTML elements block element 12年8月28⽇日星期⼆二

HTML elements block element div, p, h1~h6, ol, ul, li,
dl, dt, dd, form, table, caption, thead, tbody, tfoot, tr, th, td, ﬁeldset, legend, address, blockquato, pre, hr 12年8月28⽇日星期⼆二

HTML elements block element inline element div, p, h1~h6, ol,
ul, li, dl, dt, dd, form, table, caption, thead, tbody, tfoot, tr, th, td, ﬁeldset, legend, address, blockquato, pre, hr 12年8月28⽇日星期⼆二

HTML elements block element inline element div, p, h1~h6, ol,
ul, li, dl, dt, dd, form, table, caption, thead, tbody, tfoot, tr, th, td, ﬁeldset, legend, address, blockquato, pre, hr a, abbr, span, br, code, em, i, label, input, img, q, del, select, strong, sub, sup, textarea, input, button, select 12年8月28⽇日星期⼆二

Global Attributes 12年8月28⽇日星期⼆二

Global Attributes core attributes 12年8月28⽇日星期⼆二

Global Attributes core attributes accesskey, class, dir, hidden, id, lang,
style, tabindex, title 12年8月28⽇日星期⼆二

style, tabindex, title event-handler attributes 12年8月28⽇日星期⼆二

style, tabindex, title event-handler attributes onfocus, onchange, onclick, onblur, onload, onkeydown... 12年8月28⽇日星期⼆二

style, tabindex, title event-handler attributes onfocus, onchange, onclick, onblur, onload, onkeydown... xml attributes 12年8月28⽇日星期⼆二

style, tabindex, title event-handler attributes onfocus, onchange, onclick, onblur, onload, onkeydown... xml attributes xml:lang, xml:space, xml:base 12年8月28⽇日星期⼆二

Semantic HTML 12年8月28⽇日星期⼆二

Semantic HTML what’s semantic HTML? 12年8月28⽇日星期⼆二

Semantic HTML what’s semantic HTML? Semantic HTML is the use
of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to deﬁne its presentation (look) -----------from http://en.wikipedia.org/wiki/Semantic_HTML 12年8月28⽇日星期⼆二

Semantic HTML the good for semantic HTML 12年8月28⽇日星期⼆二

Semantic HTML the good for semantic HTML lighter code 12年8月28⽇日星期⼆二

Semantic HTML the good for semantic HTML lighter code accessibility
12年8月28⽇日星期⼆二

search engine optimization 12年8月28⽇日星期⼆二

search engine optimization repurposing 12年8月28⽇日星期⼆二

search engine optimization repurposing developer comprehension 12年8月28⽇日星期⼆二

Semantic HTML how to write semantic HTML? 12年8月28⽇日星期⼆二

Semantic HTML how to write semantic HTML? back to nature

Semantic HTML structure: body, head, html, title 12年8月28⽇日星期⼆二

Semantic HTML structure: body, head, html, title text: abbr, acronym,
address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var 12年8月28⽇日星期⼆二

address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 12年8月28⽇日星期⼆二

address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a 12年8月28⽇日星期⼆二

address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p 12年8月28⽇日星期⼆二

address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p form: form, input label, select, option, textarea 12年8月28⽇日星期⼆二

address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p form: form, input label, select, option, textarea table: caption, table, td, th, tr 12年8月28⽇日星期⼆二

address, blockquote, br, cite, code, dfn, div, em, kbd, p, pre, q, samp, span, strong, var topic: h1 ~ h6 link: a paragraph: p form: form, input label, select, option, textarea table: caption, table, td, th, tr image: img 12年8月28⽇日星期⼆二

Semantic HTML snippets 12年8月28⽇日星期⼆二

Deprecation 12年8月28⽇日星期⼆二

Deprecation elements font, base, u, center, s, strike, isindex, menu,
basefont, applet, acronym, big, tt, xmp, listing, plaintext, frame, frameset, noframe 12年8月28⽇日星期⼆二

Deprecation elements font, base, u, center, s, strike, isindex, menu,
basefont, applet, acronym, big, tt, xmp, listing, plaintext, frame, frameset, noframe attributes align, bgcolor, height, width, background... 12年8月28⽇日星期⼆二

CSS (Cascading Style Sheets) 12年8月28⽇日星期⼆二

CSS history 12年8月28⽇日星期⼆二

CSS history CSS 1.0 12年8月28⽇日星期⼆二

CSS history CSS 1.0 CSS 2.0 12年8月28⽇日星期⼆二

CSS history CSS 1.0 CSS 2.0 CSS 2.1 12年8月28⽇日星期⼆二

CSS history CSS 1.0 CSS 2.0 CSS 2.1 CSS 3

Box model 12年8月28⽇日星期⼆二

Box model non-replaced inline element have no margin-top or margin-bottom

Selector 12年8月28⽇日星期⼆二

Selector priority 12年8月28⽇日星期⼆二

Selector priority selector style id class attribute priority 12年8月28⽇日星期⼆二

Selector priority selector style id class attribute priority * 0
0 0 0 0 12年8月28⽇日星期⼆二

0 0 0 0 p 0 0 0 1 1 12年8月28⽇日星期⼆二

0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 12年8月28⽇日星期⼆二

0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 12年8月28⽇日星期⼆二

0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 12年8月28⽇日星期⼆二

0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 div .color p #news 0 1 1 2 112 12年8月28⽇日星期⼆二

0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 div .color p #news 0 1 1 2 112 style=”” 1 0 0 0 1000 12年8月28⽇日星期⼆二

Demo <div> <span>StuPig</span> </div> <style> div { color:green; } span
{ color:blue; } </style> 12年8月28⽇日星期⼆二

Demo <div id="meituan" class="b a"> <span>StuPig</span> </div> <style> .a {
color:green; } .b { color:blue; } </style> 12年8月28⽇日星期⼆二

Demo <div id="meituan" class="b a"> <span>StuPig</span> </div> <style> div {
color:green!important; } #meituan { color:blue; } </style> 12年8月28⽇日星期⼆二

Demo <div id="meituan" class="b a"> <span>StuPig</span> </div> <style> div span
{ color:green; } span { color:blue; } </style> 12年8月28⽇日星期⼆二

Positioning schemes 12年8月28⽇日星期⼆二

Positioning schemes position: 12年8月28⽇日星期⼆二

Positioning schemes position: static(default) 12年8月28⽇日星期⼆二

Positioning schemes position: static(default) relative 12年8月28⽇日星期⼆二

Positioning schemes position: static(default) relative absolute 12年8月28⽇日星期⼆二

Positioning schemes position: static(default) relative absolute fixed 12年8月28⽇日星期⼆二

Positioning schemes static: 12年8月28⽇日星期⼆二

Positioning schemes relative: 12年8月28⽇日星期⼆二

Positioning schemes absolute: 12年8月28⽇日星期⼆二

Positioning schemes fixed: 12年8月28⽇日星期⼆二

Positioning schemes principle: 12年8月28⽇日星期⼆二

Positioning schemes principle: based on non-static parent element 12年8月28⽇日星期⼆二

Positioning schemes principle: based on non-static parent element ‘fixed’: based
on client screen 12年8月28⽇日星期⼆二

Floats 12年8月28⽇日星期⼆二

Floats fload: 12年8月28⽇日星期⼆二

Floats fload: none(default) 12年8月28⽇日星期⼆二

Floats fload: none(default) left 12年8月28⽇日星期⼆二

Floats fload: none(default) left right 12年8月28⽇日星期⼆二

Floats none: 12年8月28⽇日星期⼆二

Floats right: 12年8月28⽇日星期⼆二

Floats left: 12年8月28⽇日星期⼆二

Clear ﬂoat 12年8月28⽇日星期⼆二

Clear ﬂoat clear: left | right | both | none

clearfix: 12年8月28⽇日星期⼆二

clearfix: .clearﬁx:after { content: ’ ’; visibility: hidden; display: block; font-size: 0; clear: both; height: 0; } 12年8月28⽇日星期⼆二

Q&A 12年8月28⽇日星期⼆二

!anks 12年8月28⽇日星期⼆二

HTML & CSS Basics

HTML & CSS Basics

Other Decks in Programming

Featured

Transcript