![[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
今天是第一天在PHP中文网学习
代码:
<!DOCTYPE html><!-- 声明文档类型的作用 -->
<html >
<head><!-- 定义网页头部 -->
<meta charset="UTF-8"><!-- 编码格式 -->
<title>第一节课的标题</title><!-- 标题 -->
<link rel="stylesheet" type="text/css" href=""> <!-- 外部样式:为了共享 -->
<!-- rel 当前文档与被链接文档的关系 -->
<!-- type 引入样式类型 -->
<!-- href 引入样式地址(文件要在同级目录) -->
<link rel="shortcut icon" type="image/x-icon" href="images/timg.jpg">
<!-- 引入图标 -->
<style type="text/css">/*内部样式:只针对当前页面*/
/*命名类型* tag标签名 id名(名字前面加#) class名(名字前面加.) 属性选择器*/
body{width:100px; height:100px;background:blue;}/*标签选择器*/
/*标签名body,宽度为100像素,高度为100像素,背景为蓝色*/
#box{width:200px; height:200px; background:pink;} /*id选择器*/
/*id名box,宽度为200像素,高度为200像素,背景为蓝色*/
.main{width:300px;height:300px;background:green;} /*class(类)选择器 */
/*类名main,宽度为300像素,高度为300像素,背景为蓝色*/
a[href="http://www.baidu.com"]{width: 500px; height: 500px; background: yellow;} /*属性选择器*/
.box a{ width: 500px; height: 500px; background: pink; } /*子父级选择器 PS 表示选择 box类下面的所有a标签元素样式*/
</style>
<!-- <单标签 开头无结尾 双标签 开头加结尾 > -->
</head>
<body style="background: pink;"> <!--内联样式--> <!--基本顺序 外部<内部<内联-->
<!-- 选择器的应用 -->
<a href="http://www.baidu.com">百度</a>
<div id="box">
<a href="http://www.php.cn">php中文网</a><!-- 点击中文网可打开链接 -->
</div>
<div class=main>
<a href="demo2.html">demo2</a><!-- 点击demo2可打开demo2.html(文件要在同级目录) -->
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码:
说明:手写过一遍,加深了记忆,注意符号不漏写
总结：
1、要定义页面编码 utf-8，否则部分浏览器会造成乱码编写,代码一定规范,不让容易造成bug,。
2、样式优先级：内联样式（>内部样式>外部样式
3、选择器分为：标记选择器、id选择器、class选择器；当前页面只允许一个id命名，class类选择器，则不限制,id选择器优于类选择器。
4、单标签一般用于：图片、样式、文件等引入。
5、双标签：有开头（<div>）有结尾（</div>）,闭合标签。
6.写代码注意写注释,方便看代码和理解代码的作用
