1-5、头部+CSS
（1）HTML<head>
使用<title>标签定义HTML文档的标题,<title>在 HTML/XHTML文档中是必须的。
定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>这里可以改标题</title>
</head>
<body>
<h1>Hello word！</h1>
</body>
</html>
效果：
（2）HTML<base>
使用<base>定义页面中所有链接默认的链接目标地址。
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端</title>
<base href="https://www.ictliuxiao.com" target="_blank">
</head>
<body>
<a href="">默认链接</a>
</body>
</html>
效果：
（3）HTML<link>
<link>标签定义了文档与外部资源之间的关系。
<link>标签通常用于链接到样式表。俗称外链样式表。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<p>CSS的测试段落1</p>
<a href="https://www.ictliuxiao.com">CSS的测试段落2，链接</a>
</body>
</html>
CSS代码：
p{
font-size: 100px; /*字体大小100px*/
font-family: "微软雅黑"; /*字体为微软雅黑*/
color: red; /*颜色为红色*/
}
a{
text-decoration: none; /*链接去掉下划线*/
}
效果：
（4）HTML<style>
<style>标签定义了HTML文档的样式文件引用地址。
在<style>元素中你也可以直接添加样式来渲染 HTML 文档。俗称内联样式表。
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端</title>
<style type="text/css">
p{
font-size: 100px; /*字体大小100px*/
font-family: "微软雅黑"; /*字体为微软雅黑*/
color:aqua; /*颜色为青色*/
}
a{
text-decoration: none; /*链接去掉下划线*/
color: red; /*颜色为红色*/
}
</style>
</head>
<body>
<p>CSS的测试段落1</p>
<a href="https://www.ictliuxiao.com">CSS的测试段落2，链接</a>
</body>
</html>
效果：
（5）HTML CSS
CSS 可以通过以下方式添加到HTML中，最好的方式是通过外部引用CSS文件。
内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head>区域使用<style>元素 来包含CSS
外部引用 - 使用外部 CSS 文件
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端</title>
</head>
<body style="background-color:yellow;">
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>
</html>