![[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
测试代码：
<!DOCTYPE html> <!-- 标注类型为html文档类型 还有xml xhtml -->
<html lang="en"> <!-- 英文页面 -->
<head> <!-- 头部文件 -->
<meta charset="UTF-8"><!-- 字符集中国UTF-8 -->
<title>PHP-学习第一天</title><!-- 网站标题 -->
<link rel="stylesheet" type="text/css" href="static/style.css"><!-- 引入外部样式 ，都可以调用(可共享)-->
<link rel="shortcut icon" type="image" href="image/ico.png"><!-- 网站图标 --> -->
<style type="text/css"> /*内部样式 只针对当前页面*/
body{background: yellow}/*tag标签选择器*/
#box{width:60px;height:50px;background: blue}/*id选择器 具有唯一性*/
.box1{width:60px;height:50px;background: green}/*类选择器*/
a{color: red;}
a[href="www.php.cn"]{color: cyan}/*属性选择器（多用于多个相同样式中单独样式的设置）*/
a[href="demo3.html"]{color: yellow}
div a{color: yellow} /*派生选择器*/
</style>
</head>
<body style="background: #fff"> <!-- 内联样式 -->
<a href="www.baidu.com">百度</a>
<a href="www.php.cn">php中文网</a>
<a href="demo3.html">demo3</a>
<div id="box">
<a href="">派生选择器</a>
</div>
<div></div>
<div></div>
</body>
</html>运行结果：
手写代码：
总结：这节课，灭绝老师主要讲解了html结构，以及一些css样式，sublime编辑器的安装，插件的安装。网页的标题的实现，网页图标的实现，引入外部样式（可共享），内部样式的编写，内联样式的编写。三者的优先级：内联>内部>外部。还介绍了几个属性选择器：tag标签选择器、id选择器（唯一性）、class类选择器、属性选择器、派生选择器等。
快速注释快捷键：ctrl+/
元素的概念：成对标签 即元素 单标签即空元素
