实例
<!DOCTYPE html><!-- 声明XML xhtml -->
<html>
<head><!-- 定义网页头部 -->
<title></title><!-- 标题标签 -->
<meta charset"=utf-8"><!-- 字符集编码 -->
<!-- link：定义文档与外部资源的关系 链接外部文件 -->
<link rel="stylesheet" type="text/css" href="static/style.css">
<!-- 链接外部CSS样式表 外部样式:为了共享 -->
<link rel="shortcut icon" type="image/x-icon" href="images/footlogo.png">
<!-- 在title内部放入图片 -->
<style type="text/css">/*内部样式:只针对当前页面
/*tag标签名.id名（名字前面加#).class..属性选择器/*/
body{}/*标记选择器*/
#box{width:100px;height:100px;background:pink;}/*ID选择器*/
.main{width:100px;height:100px;background: green;}/*class选择器 类*/
a{color: red;}
/*属性选择器*/
a[href="http://www.php.cn/"]{color:blue;}
a[href="demo.html"]{color:pink;}
/*派生选择器 根据文档上下文关系来定义样式*/
div a{color:#000;}
#box a{}
</style>
</head>
<body><!-- style="background :blue";内联样式 -->
<img src="">
<a href="https://www.baidu.com">百度<a>
<a href="http://www.php.cn/">PHP中文网<a>
<a href="demo2.html">demo2</a><a href="#">#</a><!-- 链接到外部文件 -->
<div id="box">
<a href="">php</a>
</div>
<div class="main"></div>
<div></div>
<div></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写图片
课后总结：
html是超文本标记语言，由标记标签组成通常是双标签（开始和结束）和单标签（开始就是结尾）的常态来定义网页的样式，元素和属性。
网页上的所有内容我们可以看作是HTML的元素；而属性写法name="value"属性名="属性值"通俗理解为（属性名：小明=17属性值，理解为小明17岁；）
样式：可以理解为人的样貌穿着和体格等直观形态，同理网页内容的段落和列表等都是通过样式来定义的，大部分外观我样式我们可以通过层叠样式表CSS来定义HTML.
CSS:
内联样式：写在html标签内部(开始标签内部 style="属性:属性值;")
内部样式：写在head内部 针对当前页面 <style type="text/css"></style>
外部样式：外部样式 为了共享 通常储存在css文件中
它们的优先级：内联样式优于内部样式，内部样式又优于外部样式；
选择器：
ID选择器：具有唯一性 用#标识
class选择器：可同时引用作为公用 ； 用.来标识
属性选择器：【】用中括号，还不大理解后期自己查资料
派生选择器：理解为衍生，有层级
标签定义：
<title>文档的头部</title>定义文档头部
<meta charset="utf-8">该文档定义HTML文档元信息
<link rel="stylesheet" type="text/css" href="">链接外部CSS文件
rel属性定义文档与被链接文档之间的关系
type属性定义被连接文档的类型
href属性定义被连接文档的url地址
<link rel="shortcut icon" type="image/x-icon"href="">设置标题内部的图片