58 lines
2.1 KiB
Markdown
58 lines
2.1 KiB
Markdown
---
|
||
sidebar_position: 3
|
||
---
|
||
|
||
# 现代的网页
|
||
|
||
现代的网页并不复杂 —— 不只是文字 —— 有漂亮的外观，可以响应用户的操作。
|
||
|
||
## 漂亮的外观（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 的入门。
|