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

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (10)

Semelhante a Web basic

Semelhante a Web basic (20)

Mais de DesBear Li

Mais de DesBear Li (8)

Último

Último (20)

Web basic