实例
<!doctype html><!-- 声明这个页面是html页面 -->
<html>
<head><!-- 网页的头部 -->
<meta charset="UTF-8"> <!-- 页面的编码格式 -->
<title>网站标题</title> <!-- 网站的标题 -->
<!-- rel="当前文档与被链接文档的关系" type="文档的类型" -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- 引入外部css文件 -->
<link rel="shortcut icon" type="image/x-icon" href="图片的路径"><!-- 引入网站图标 -->
<style> /* 内部样式，只针对当前的页面 */
body{background:red;} /* 标签选择器 */
#box{width:200px;height:200px;background:#6600cc;} /* 选中标签 id为 box名字 */
.box{width:200px;height:200px;background:#ff33ff;} /* 选中标签 class 为 box名字 */
a[href="demo1.html"]{color:#ff0000;} /* 属性选择器 */
.box1 a{color:#330000;} /* 选中标签 class 为 box1名字里面的所有a标签。 */
</style>
</head>
<body style="background:blue;"><!-- 内联样式只针对于当前的标签 -->
<div id="box">id类名</div><!-- class命名可以有多个 -->
<div class="box">class类名</div><!-- id命名一个页面只能有一个 -->
<img src="https://img.php.cn/upload/course/000/000/001/5b583eacc384e927.jpg"> <!-- 图片标签-->
<div class="box1">
<a href="http://www.php.cn">php中文网</a><!-- 页面跳转-->
</div>
<a href="demo1.html">本地html文件</a><!-- 页面跳转-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、html页面的编码格式定义为：UTF-8，不然部分的浏览器会出现乱码情况
2、单标签没有结束标签。双标签成对出现 以 / 为结束，如：双标签<div></div> 单标签：<img src="">
3、样式优先级：内联样式>内部样式>外部样式
4、标签优先级：id选择器>class选择器>标签选择器
5、css属性：width 宽度 height 高度 background 背影色 color 字体颜色
手写代码：
