# 现代的网页

现代的网页并不复杂 —— 不只是文字 —— 有漂亮的外观，可以响应用户的操作。

## 漂亮的外观（CSS3）

组成一个漂亮的外观，首先需要骨架 —— HTML5，然后是化妆 —— CSS3

HTML5 中有一些默认的规则，可以让文字变得有层级结构，像是 Word 中的标题，独占一行，并行显示。学会这些规则，就可以进行简单的排版了。

CSS3 像是 Word 样式。颜色，背景颜色，行间距。学会 CSS3 的规则，不仅可以让排版更炫酷，还可以做动画效果，以及各种特殊的交互效果。

> 学会 HTML5 + CSS 可以不用 Word 了呢。—— 只是编辑体验有点糟糕。所以我还是喜欢用 Markdown 编辑文档，还可以使用 HTML 增强

## 有趣的灵魂（JS）

有趣的灵魂应该是 200 多斤吧。—— 我是说我自己。

网页的作用不仅仅是展示，也会响应用户的操作。也可以根据不同的用户给出不同的响应 —— 动态网页。不能区分用户给出不同反应的，叫做静态网页

响应用户的操作，则需要软件工程师编写一些逻辑，编写这个逻辑的语言，叫做 JavaScript（简称 JS）。

### JS 在网页中如何运行

回到代码的本质，其实是在规则下描述一段事情。

浏览器中有一个用于解释执行 JS 的引擎。

在浏览器打开网页时，把各种 JS 脚本（文件形式的，或者文字形式的）丢给 JS 引擎，由引擎解释执行。

下面这个代码片段就是一个 Hello World

```
<script>
function sayHello() {
    alert("Hello World");
}
</script>

<button onClick="sayHello()">点击<button>
```

`<script></script>` 标签中的代码，就是 JS 代码。它定义了一个 sayHello 函数。

JS 引擎会记住这个函数。

`<button></button>` 是 H5 的一个标签，表示这里显示一个按钮。

`onClick="sayHello()"` 表示，这个按钮被点击时，会让 JS 引擎执行一段代码 —— `sayHello()`

## 下一节

下一节开始我们会完整的写一个 Hello World 网页。并开始 HTML5 CSS3 JS 的入门。