在设计简单的web页面时，HTML和CSS的布局是必不可少的。其中不同标签和属性的使用方法及作用更是与网站页面紧密关联。本篇博文就HTML/CSS中相关基础标签和属性使用方法进行总结。
下面是一段实例及相关注释
实例
<!DOCTYPE html>
<!-- 声明 DOCTYPE是定义文档类型 这里定义为 HTML 还可以有XML 或者是 XHTML 这里表示下面的页面是一个 HTML页面 ctrl+/ 是注释的快捷键 -->
<html>
<head>
<!-- 定义网页的头部 -->
<title>PHP学习第一天</title>
<!-- CSS 等都是写在头部内容里，本标签用来定义网页头部 -->
<meta charset="utf-8">
<!-- charset="utf-8"是用来定义字符集编码，中国码是utf-8 -->
<link rel="seylesheet" type="text/css" href="static/style.css">
<!-- rel 定义当前文档和被链接文档的关系 type 定义被链接文档类型 href是定义被链接的文档的地址 -->
<link rel="shortcut icon" type="image/x-icon" href="images/">
<!-- 页面的头部引入图片-->
<style type="text/css">
/*tag标签名这里指body标签、id名这里指div的id id名字是唯一性、class名 class可以有多个*/
body{}
#box{width:100px;height:100px;background: pink; }
/* id选择器ID具有唯一性 选中 div名字为box的样式* width 是宽度的意思 100px是100像素的意思 height是高度的意思,background: pink;设置背景颜色为粉色*/
.main{width:100px;height:100px;background: green; }
/*class选择器,选中class名为main的div设置宽度100,高度100背景颜色为绿色*/
a{color: red;}
/*定义全局a标签中文字的字体颜色*/
a[href="http://www.php.cn"]{color: blue;}
/*可以给一组里面的单独一个链接进行定义,定义所有a标签内链接地址为http://www.php.cn的文字颜色为蓝色*/
a[href="demo2.html"]{color:pink;}
div a{color:pink;}
/*在div中找到a标签并且设置其颜色为粉色*/
</style>
<!-- style 为内部样式，只针对当前页面，而外部样式可以用于所有页面条件的调用 -->
</head>
<body >
<!-- style="background:blue;" 内联样式 只针对于当前标签 -->
<img src="">
<a href="http://www.baidu.com">百度网</a>
<a href="http://www.php.cn">PHP中文网</a>
<a href="demo2.html">demo2</a>
<div id="box">
<!-- 给div一个当前页面中唯一的id名叫box -->
<a href="http://www.php.cn">php</a>
</div>
<div class="main"></div>
<div>
<a href="">123</a>
</div>
<div>12345
<!-- 未定义文字内容为a标签所以字体颜色不对本段文字生效 -->
</div>
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例上述代码总结:
1、<!DOCTYPE html>
作为文档的开头应首先对文档类型进行声明<!DOCTYPE html>的意思是声明本文件的文本类型为html,除此之外还有xml和xthml。
2、HTML中选择器区别
body{} 指的是标记选择器 标签选择器
#box{} #指的是id选择器 id具有唯一性
.main{} .表示class选择器 类选择器（类名选择器的优先级要低于ID选择器）
a[]{} 表示属性选择器
div a{} 表示派生选择器
3、<head>中常用的标签：
<title> 定义网页文档标题
<meta> 定义网页信息，常用 charset="utf-8"定义字符集编码,如果不定义中文字符集编码可能会出现乱码.
<link>链接外部文件
1. 链接样式表 <link rel=“stylesheet” type=“text/css” href=“路径”>
2. 链接缩略图标<link rel = “shotcut-icon” type=“image/x-icon” href =“路径”>
rel 定义文档与文件的关系 stylsheet表示样式 shotcut-icon表示缩略图标 type 文件类型 href 文件路径
<style> 定义内部样式
3、<body>中常用的标签：
<a> 定义超链接
实例
<!DOCTYPE html>
<html>
<head>
<meta chraset="utf-8">
<title>用a标签定义超级链接</title>
<style type="text/css">
#acolr{color:green;}
#acolr:hover{color:pink;}/*还可以设置鼠标移动上去以后改变字体的颜色*/
</style>
</head>
<body>
<a href="http://www.php.cn">PHP中文网</a>
<a id="acolor" href="http://www.php.cn">使用内联样式的id选择器定义超级链接文字的颜色,id名称不能是纯数字</a>
<a style="color:black; href="http://www.php.cn">也可以在a标签内通过style样式定义超级链接的文字颜色</a>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、<div> 定义区块
实例
<!DOCTYPE html>
<html>
<head>
<title>定义div区模块</title>
<meta chraset="utf-8">
<style>
#div1{width:200px;height:200px;background:red;}
.main{width:100px;height:100px;background:green;}
</style>
</head>
<body>
<div style="background:pink;width:200px;height:200px;"></div>
<div id="div1">也可以用id选择器连接内联样式来定义div属性</div>
<div class="div2">也可以用class选择器连接内联样式来定义div属性</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5、<img>定义图片
实例
<!DOCTYPE html> <html> <head> <title></title> <meta chraset="utf-8> </head> <body> <img scr="images/top,jpg"> <img width="300px" scr="images/top.jpg"><!-- 也可以通过定义图片宽度来限制图片大小 --> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
