以百度前端学院IFE2015为教程：
创建一个HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>IFE_part1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="IFE_CSS1.css">
</head>
<body>
<!-- 创建一个一级标题 -->
<h1>https://github.com/SGtee</h1>
<!-- 创建一个无序列表 -->
<ul>
<li><a href="IFE_part1.html">Home Page</a></li>
<li><a href="https://github.com/SGtee">My github</a></li>
</ul>
<!-- 创建一个二级标题 -->
<h2>二级标题</h2>
<!-- 创建一个段落 -->
<p>这是我HTML中的一个段落</p>
<!-- 插入一张图片，并用CSS给图片添加border并设定border大小和颜色 -->
<img src="Wayne-02.jpg" alt="">
</body>
</html>
通过外联CSS添加样式（<link rel="stylesheet" href="IFE_CSS1.css">）：
/* 设定一级标题的颜色 */
h1 {
color: blue;
}
/* 设定二级标题的颜色 */
h2 {
font-size: 12px;
}
/* 设定段落的字体大小和颜色、背景颜色 */
p {
font-size: 12px;
color: yellow;
background-color: black;
}
/* 设定图片的border大小及样式、颜色 */
img {
border:2px;
border-style: solid;
border-color: red;
}
通过教程学会：
- 了解什么是Web
- 了解什么是HTML
- 了解一些基本的HTML语法及标签
- 能够写出自己的第一个HTML
- 了解什么是CSS
- 了解HTML与CSS是如何一起工作的
- 了解基本的CSS语法
- 尝试使用几个简单的CSS属性
- 对于HTML及CSS的发展史有一个大概的了解
- 明白HTML5和之前的版本大概有什么区别
关于HTML以及CSS的基础知识可在MDN查阅文档