一使用CSS样式的方式
1 HTML <!DOCTYPE>声明标签
1.1 定义和用法:
<!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前。
<!DOCTYPE>声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
在HTML4.01中,<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGML。
DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。
HTML5不基于SGML,所以不需要引用DTD.
1.2 各版本的声明
1.2.1 HTML5
<!DOCTYPE html>
<meta charset="utf-8">
1.2.2 HTML4.01
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素(比如font),不允许框架集(Framesets)。
<meta http-equiv=Content-Typw content="text/html;charset=utf-8">
1.3 注意的规则
单标即必须闭合，比如<br>必须写为<br/> <input/>
单属性必须添加属性值 <input type="radio" checked>必须写为<input type="radio" checked="checked"/>
标记和属性必须使用小写 <Body><BODY>是错的必须写为<body>
属性的属性值必须使用 在HTML4.01之前可以使用<body bgcolor=red>,HTML4.01必须写为<body bgcolor="red">
2 内链样式表
<body style="background-color:green;margin:0;padding;"></body>
3 嵌入样式表
<style type="text/css"></style>
需要将样式放在<head></head>中
4 引入式样式表
<link rel=StyleSheet"type="text/css"href="style.css">
二定义样式表
2.1 HTML标记定义
<p>...</p>
p{属性:属性值；属性1：属性值1}
p可以叫做选择器，定义那个标记中的内容执行其中的样式
一个选择器可以控制若干个样式属性，他们之间需要用英语";"隔开，最后一个可以不应加
2.2 Class定义
<p class="p">...</p>
class定义是以"."开始
.p{属性:属性值；属性1：属性值1}
2.3 ID 定义
<p id="p">...</p>
ID定义是"#"开始的
#p{属性:属性值；属性1：属性值1}
2.4 优先级问题
ID>Class>HTML
同级时选择离元素最近的一个的,比如： #p{color:red} #p{color:#f60} 执行颜色为#f60
2.5 组合选择器（同时控制多个元素）
h1,h2,h3{font-size:14px;color:red;}
选择其组合可以使用","隔开
2.6 伪元素选择器
a:link 正常连接的样式
a:hover 鼠标放上去的样式
a:active 选择链接时的样式
a:visited 已经访问过的链接的样式