实例一（第一段）：
<!DOCTYPE html> <html> <head> <title>php中文网——视频教程</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="static/style.css"> <link rel="shortcut icon" type="image/x-icon" href="images/shui.png"> </head> <body> </body> </html>
运行实例 »
知识点：
1、!doctype html 是声明该文档是html的形式，另外还有xml以及xhtml两种形式；
2、一个完整的html主要是有head（头部）和body（身体）组成，head和body均为双标签，称之为元素；
3、那么与之对应的则成为单标签，就是空元素，一般用来描述一个元素，即属性！
4、head包含了“网页名称”、“网页头部logo”、“字体规则”等实际元素；
5、head中还可以引用和描述body中的元素和元素属性；
以上为个人理解！
实例一（完整）：
<!DOCTYPE html>
<html>
<head>
<title>php中文网——视频教程</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="static/style.css">
<link rel="shortcut icon" type="image/x-icon" href="images/shui.png">
<style type="text/css">
body{background:green;}
#box{width:100px;height:100px;background:yellow;}
.main{width:100px;height:100px;background:green;}
a{color:red;}
a[href="http://www.php.cn/"]{color:blue;}
a[href="demo2.html"]{color:black;}
</style>
</head>
<body style="background:pink;">
<a href="https://www.baidu.com/">百度</a>
<a href="http://www.php.cn/">PHP中文网</a>
<a href="demo2.html">demo2</a>
<div id="box"></div>
<div class="main"></div>
</body>
</html>运行实例 »
知识点：
1、内部样式：style type 至针对当前页面属性；
2、外部样式：head下面的body表示外部样式；
3、内联样式：body中body style背景色是内联样式；
4、内联样式优先级最高，其次是外部样式，最后才是内部样式，灭绝老师说这对以后的布局有重大意义；
5、body中用div双标签布局相关需要的元素，head中用单标签引用并描述该元素的属性，比如：宽度、高度、颜色；
6、引用的方式分为：tag标签名、id名和class名，灭绝老师说以后还会讲到属性选择器，有点儿懵~
7、第一节课最后讲到了a链接，分为内部链接和外部链接，即本地和外网；
8、a加{}是全部选择，a加【】是单个选择（【】后面加{}描述元素属性），这是灭绝老师的独门绝技，一定要牢牢掌握！
上传一个手写的：
第一节课朱老师讲了本期教学的项目流程，灭绝老师带我们了解了sublime编辑器和html/css的起始招式，老师的自信感染了我，深入浅出的教学方式让我很有收获，即便快40岁高龄了，朱老师也鼓励我说我也快40了，学习php没有问题的，谢谢朱老师，我会努力！