实例
<!DOCTYPE html><!-- 定义文档类型html，还有其他类型xml，xhtml -->
<html>
<head>
<title>day1-html学习</title><!-- 双标签 其实标签和结束标签 -->
<meta charset="utf-8"><!-- 定义编码格式 单标签-->
<link rel="stylesheet" type="text/css" href="style/basic.css"><!-- 引入css文件 css外部样式-->
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png"><!-- 引入icon图片 -->
<!--
rel:定义当前文档和链接文档的关系
type:引入样式类型
href:引入文件地址
-->
<style type="text/css">/*css内部样式，只针对当前界面*/
/*属性选择器: 标签名(标签名) id(#id名) class(.class名)*/
body{ /*标签名(标签名)*/
background: #ccc;
}
#box1{ /*id选择器(#id名)*/
width: 100px;
height: 100px;
background: #fff;
}
.box2{ /*class类选择器(.class名)*/
width: 200px;
height: 200px;
background: #eee;
}
a{
color: green;
}
a[href="http://baidu.com"]{ /* a标签的样式也可以直接把href=""拿过来直接使用*/
color: yellow;
}
#box1 a{
color: blue; /*显示蓝色，由此可见id>标签*/
}
div a{
color: red;
}
</style>
</head>
<body><!-- <body style="background:yellow;"> css内联样式 css优先级：内联>内部>外部 -->
<a href="http://baidu.com">百度</a>
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.php.cn">PHP中文网</a>
<div id="box1">
<a href="demo2.html">demo.html</a>
</div>
<div class="box2"></div>
<div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码：
