![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
学习前端开发，必须掌握html及CSS的相关知识，这里介绍一下HTML的基本文档结构与常用标签，以及CSS常见选择器，供大家参考学习。
下列代码，为示例代码。
<!DOCTYPE html> <!-- 声明，可换成xml/xhtml -->
<html>
<head> <!-- 网页头部 -->
<title>php学习-0810作业</title>
<meta charset="utf-8"> <!-- 字符集编码，必需 -->
<link rel="stylesheet" type="text/css" href="static/style.css"> <!-- link链接外部文件 --> <!-- 外部样式 -->
<link rel="shortcut icon" type="image/x-icon" href="icon/ball.png"> <!-- 链接外部图片，显示在网页头部 -->
<style type="text/css"> /*内部样式：只针对当前页面*/
body{background: red} /*标签/标记选择器*/ /*内部样式优先级大于外部样式*/
#box{width: 200px;height: 200px;background: pink} /*id选择器*/
.main{width: 300px;height: 300px;background: green} /*class类选择器*/
a{color: blue}
a[href="http://www.php.cn"]{color:pink } /*属性选择器*/
a[href="test2.html"]{color:yellow } /*属性选择器*/
div a{color: blue} /*派生选择器*/
#box a{color: red} /*派生选择器*/
</style>
</head>
<body>
<img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg">
<a href="http://www.baidu.cn">百度</a>
<a href="http://www.php.cn">PHP中文网</a>
<a href="test2.html">测试网页</a>
<div id="box">
<a href="">php</a>
</div>
<div class="main">
<a href="" style="color:yellow">php2</a> <!-- 内联样式，内联样式优先级大于内部样式 -->
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下为手抄代码：
