Web basic

•
•
•
•
•

PX
RGBA

PT em
CMYK

% /

cm

mm

!
ASP.net!
PHP!
jsp!
!

MySQL!
SQL Server!
SQLlit!
any DB!

!
HTML!
CSS!
javascript!
canvas webGL!
SVG!

<!DOCTYPE html PUBLIC "-/
/W3C/
/DTD XHTML 1.0 Transitional/
/EN" "http:/
/
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> !
!
<html xmlns="http:/
/www.w3.org/1999/xhtml"> !
<head>!
!
!
! <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
!! <meta name="robots" content="index, follow" />!
!! <meta name="keywords" content="
" />!
!! <meta name="description" content="
" />
!!
<title>
</title>
!!
!! <link rel="stylesheet" href="css/style.css" type="text/css" />
!! <script type="text/javascript" src="js/javascriptname.js"></script>
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

/W3C/
/EN" "http:/
/
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> !
!
<html xmlns="
<head>!
!
!
!!
<title>
!!
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

/W3C/
/EN" "
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
!
<html xmlns="http:/
/www.w3.org/1999/xhtml"> !
<head>!
!
!
!!
<title>
!!
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

/W3C/
/EN" "
!
<html xmlns="
<head>!
!
!
!!
<title>
!!
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

/W3C/
/EN" "
!
<html xmlns="
<head>!
!
!
" />!
" />
!!
<title>
!!
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

/W3C/
/EN" "
!
<html xmlns="
<head>!
!
!
!!
<title>
</title>
!!
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

/W3C/
/EN" "
!
<html xmlns="
<head>!
!
!
!!
<title>
!!
<script type="text/javascript" src="js/javascriptname.js"></script>
!!
!</head>!
!
! <body>!
!
!!
!! !
! !
! !
! </body>!
</html>!

<ol> <li></li> </ol>
<ul> <li></li> </ul>
<li>
*<ul>

<ol>
<li>
<ul><ol><li>

!
!
!
!

<li>!

<dl> !
<dt></dt>!
<dd><dd>!
</dl>

dl
dt
dd

!

!
!

<a href=”url” title=”
<a>
href=”XX”

”>
XX

<img src=”
alt=”

url” !
”>
src
alt

<table>!
<tr>!
<td>(^(
</tr>!
</table>

)^)</td>!

table
tr

td

!
!

!

<thead>
<tbody>
<tfoot>

!
!
!
!

<th>

<td>

!

<table summary="a summary of recent major volcanic eruptions in the Pacific Northwest">
<caption>Recent Major Volcanic Eruptions in the Pacific Northwest</caption>
<thead>
<tr>
<th scope="col">Volcano Name</th>
<th scope="col">Location</th>
<th scope="col">Last Major Eruption</th>
<th scope="col">Type of Eruption</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Compiled in 2008 by Ms Jen</td>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row">Mt. Lassen</th>
<td>California</td>
<td>1914-17</td>
<td>Explosive Eruption</td>
</tr>
<tr>
<th scope="row">Mt. Hood</th>
<td>Oregon</td>
<td>1790s</td>
<td>Pyroclastic flows and Mudflows</td>
</tr>
<tr>
<th scope="row">Mt. St. Helens</th>
<td>Washington</td>
<td>1980</td>
<td>Explosive Eruption</td>
</tr>
</tbody>
</table>

summary=” (^( )^)”!
<caption> (^( )^) </caption>

HTML

!
!

W3C School!
http:/
/www.w3cschool.cn/!

menu

aside hgroup audio ﬁgure

nav SECTION ARTICLE
Footer HTML5 Video
canvas source HEADER
calendar email search
time url date
keygen

<SECTION>
div

section
article

<ARTICLE>
article

!
<header> !
<footer>
<div><section><article>

!
!

<nav>!
<aside>!
<menu>
nav

!
aside
menu

!
toolbar

Use HTML5 New tags?
ie6.7.8
html5 SEO

html5

!
!

!

!

!
HTML

!

CSS

!

!
IE TEST

HTML
<div id=”mystyle”>!
<div class=”mystyle”>

HTML
<div id=”mystyle”>!
<div class=”mystyle”>

#mystyle{
.mystyle{

}!
}

css
!
<style type=”text/css”>!
</style>!
!
CSS
!
<div style=”
”></div>!

!

/* Suggested order:!
* display!
* list-style / table-layout!
* position / ﬂoat / z-index / top right bottom left / clear!
* visibility / overﬂow / clip!
* width / height!
* margin / padding / border / outline!
* background!
* color!
* font!
* text-decoration / text-align / vertical-align / white-space!
* content / cursor!
* other!
*/!

#mystyle{!
width: 300px;!
height: 250px;!
border: 1px solid #333;!
background: url(../images/bear.png) !
no-repeat left top #444;!
color:#ff0044;!
font-size:95%;!
font-weight:normal;!
text-decoration: none;!
letter-spacing: 0.1em;!
line-height: 160%;!
}

border
border-left:
border-bottom
!

border:

!
border-right
!
!

border-top

background

X

!

url(
)
!
no-repeat repeat-x repeat-y!
left right y
top bottom!

!
css

#000000 16
16

!
ex:white black red green

!

CSS3

RGBA

!

A
!
color:rgba(255,255,255,0.5);

!
!

<ul class=”mystyle color”>!
<li>!
<a href=”#”> XX </a>!
</li>!
</ul>
class

!

<ul id=”mystyle”>!
<li>!
<a href=”#”> XX </a>!
</li>!
</ul>
#Mystyle{ }

ul#Mystyle{ }!
ul#Mystyle

<li>!
<a href=”#”> XX </a>!
</li>!
</ul>
ul
#Mystyle li a{
!

a
}

Mystyle
!

!

a

!

<li>!
<a href=”#”> XX </a>!
<ul>!
<li><a href=”#”></a></li>!
</ul>!
</li>!
</ul>
#Mystyle li a{ color:#ﬀ0000;}

#Mystyle li ul li a{color:#000;}

<li>!
<a href=”#”> XX </a>!
</li>!
</ul>!
<a class=”bear”>XXXXXXX</a>

#Mystyle li a

.bear

!

#Mystyle li a, .bear{color:red;}

!

css

” ”

!
!

.bear{

margin: 0 auto 0 auto;

}

!

block

display:block;

<div><h1~6><ul><ol><li>

ﬂoat

position

margin

!

inline

display:inline;

<span><input><a><img>

inline
text-align

ﬂoat

position

margin-top margin-bottom

padding

inline-block

display:inline-block;

block

inline

margin

ie6....

div {display:inline; zoom:1;...}

zoom:1 IE

haslayout

Web basic

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Web basic

Similar to Web basic (20)

More from DesBear Li

More from DesBear Li (8)

Recently uploaded

Recently uploaded (20)

Web basic