因为我们没有对显示样式进行修改，那是 CSS 的事。HTML 主要管内容的组织结构。
这里有一点针对学习的小建议，本课程中给到的全部代码请手动输入，忘记复制和粘贴快捷键。
而且最好不要机械的一个字符一个字符照着抄，尽量看过一行或一小段代码之后，靠短暂的印象去输出，别怕出错，只有过脑子并输出实践，才是最快掌握一项技能的捷径。
以上两句话是本课程中最有价值内容之一。
下面我们接着修改刚才的代码，再给 body 中添加几个常用标签。每次修改和保存之后记得到预览页看看样式的变化。
<h4>4 级标题</h4>
<ul>
<li>
HTML
</li>
<li>
CSS
</li>
<li>
JavaScript
</li>
</ul>
<div>
<a href="https://www.shiyanlou.com" target="_blank"
>点击超链接跳转至实验楼首页</a
>
</div>
<div>
<img
src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg"
alt=""
width="200"
/>
</div>
最后的链接标签 a 和图片标签 img 出现了标签属性，属性为 attr="value" 格式，可以给标签增加更丰富的信息。
同时 img 标签还是一个单标签，不需要在后面添加 </img> 配合使用。
至此对 HTML 的简要介绍告一段落。
互联网上看到的各种五彩缤纷网页都是由这些 HTML 组成的，但是为什么我们写的这么难看？下一节我们就要学习一下如何用 CSS 美化页面。
CSSCSS 全称层叠样式表，是专门用来修饰 HTML 样式的一种语言。我们修改一下上节的 hello.html 文件来直观感受一下。
内部代码块引入
在 head 标签内部增加以下 style 代码块：
<head>
<meta charset="UTF-8" />
<title>标题</title>
<style type="text/css">
div {
border: 1px solid blue;
padding: 2px;
margin: 10px;
}
</style>
</head>
这是再切换到预览页，发现没那么平铺直叙了。
这就是 CSS 的第一种引入方式，HTML 内置代码块。
大括号外面的 div 是标签选择器，这里选中了本页面中的所有 div 元素。大括号里面是属性名与赋值，属性名都是固定的关键字，并已规定好了值的类型和可选范围。
读代码也就大概知道了，我们将 div 的边框设置为 1 像素宽、固体（单线型）、蓝色，填充（内边距）2 像素，边缘空白（外边距）10 像素。现在可以练习调整一下各个数字，预览看看发生了什么？
再说点题外话，懂一些英文对程序员来说非常必要，除了可以凭感觉就读懂没学过的代码，还可以在面向 Google 编程、面向 Stack Overflow 编程、面向 Github Issues 编程时游刃有余。
外部文件引入
然后我们再试一下外部文件引入，在 hello.html 的同级目录新建 hello.css，输入以下内容保存：
div {
color: green;
border: 2px dotted red;
}
然后修改 hello.html，在 style 标签后面增加一行 link 标签，添加引入类型和地址：
<style type="text/css">
div {
border: 1px solid blue;
padding: 2px;
margin: 10px;
}
</style>
<link rel="stylesheet" href="hello.css" />
预览看看，文字颜色变为绿色，边框的样式也被更新为 2 像素宽、点线型红色。
同样是 div 选择器，为什么边框的样式被覆盖了呢？注意 CSS 在同样条件下会后面代码覆盖前面，可以尝试交换 link 标签和 style 标签块的顺序看看。
行间样式
最后一种叫行间样式，这个结构更简单。修改 hello.html 中的 <div>内部第一个</div> 为
<div style="margin: 60px 0 10px 30px ;color:purple;">内部第一个</div>
样式覆盖前两种方式了，因为行间样式的优先级较高。这里涉及到选择器权重，先给一个简单公式了解一下。
!important > 行间样式 > ID > class | 伪类 | 属性选择 > 标签 > 继承 | 通配符。
多个选择器作用时权重相加。这里算 CSS 里有点复杂的部分，暂时不展开。
这里还有个小知识点是内外边距 margin 和 padding 接受的完整的值是四个，顺序固定为“上 右 下 左”。如果省略参数则从末尾计算对向合并。比如：
- margin:40px 20px 50px; 三个参数时，左右同为 20px。
- margin:40px 20px; 两个参数时 上下同为 40px, 左右同为 20px。
- margin:40px; 一个参数时呢？请自行尝试理解。
CSS 先讲这么多，虽然没有把我们的页面变多好看，但最起码知道努力的方向了。
JavaScript制作 JavaScript 的快速入门简直非常伤脑筋。比起前两种技术 HTML 和 CSS，这是货真价实的编程语言了。
也是我们后面要用到的 Vue.js 和 Node.js 中的根基，一下子又很难讲很多，所以还是希望同学们能重视起来系统学习一下，最起码读到后面的代码时不至于陷入“这是啥这又是啥”的窘境。
来段代码直观认知一下，还是先内部代码块引入。
在 hello.html 的 head 标签内增加一个代码块：
<link rel="stylesheet" href="./hello.css">
<script>
let message = "字符串提示";
function showMSG(msg) {
alert(msg);
}
</script>
修改 hello.html 的 h1 标签为：
<h1 onclick="showMSG(message)">页面标题</h1>
保存预览，点击“页面标题”，会弹出提示框。
