Preparation

安装VS Code
https://code.visualstudio.com/

安装一个插件
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

语言包
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans

HTML/CSS/JavaScript

打开VSCode，新建 index.html

右击 index.html ，选择”Open with Live Server”

HTML

使用Emmet快捷符号 ! 快速开始一张网页

浏览网页结构：

html
- head
- body

在body中添加一个tag div (“div” & tab)
打开chrome开发者工具，查看浏览器Elements。

<body>
    <div>我是div</div>
</body>

CSS

在head中添加tag style
添加CSS，改变 div 的大小和边框

...
    <style>
      /* I'm CSS */
      div {
        width: 300px;
        height: 200px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc;
      }
    </style>
</head>

div没有默认样式。而其他标签可能自带样式。

添加第二个 div tag，查看变化

可以只改变第一个吗?

为 div 添加一个属性：id

<body>
    <div id="mydiv">我是div</div>
    <div></div>
</body>

在CSS中指定它

/* 添加 */
#mydiv {
  width: 400px;
}

width被覆盖了，所以它叫“层叠样式表”

除了 # 代表id外，还有 . 代表 class 属性。
可以一层一层地选择目标，比如上面的就等于 body div。
这些叫“选择器”。

CSS就是用“选择器”来和HTML产生联系的

不用一下就搞懂。有目的，才去学对应的部分。

引入CSS的方式

外部引入 <link rel="stylesheet" href="style.css">
嵌入文档 style 标签
直接写在具体tag上（只对这一个生效） <div style="height: 200px"></div>

更多资料：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Introduction_to_CSS

JavaScript

开发者工具转到Console页

在body最后添加tag script
写一个hello world~

...
    <script>
      console.log('hello world');
    </script>
</body>

保存，看到Console回应

试试更多

var a = 1;
var b = 2;
console.log(a + b);

js和html怎样发生联系？

Web APIs
不用关心浏览器是如何做到的，我们只需要知道它能做什么。

js获取文档中的div对象

var div = document.getElementById('mydiv');
div.style.color = 'red';
console.log(div);

html也能主动调用js，例如在div上添加一个事件

<div id="mydiv" onclick="console.log(1)">我是div</div>

Web APIs: https://developer.mozilla.org/zh-CN/docs/Web/Guide/API Dom: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction

更多资料：https://developer.mozilla.org/zh-CN/docs/learn/JavaScript

Example

Todo

Review

HTML是内容。文字、图片等。
CSS是样式、排版。
JS是逻辑。可以操控整个网页。

更多资料： https://developer.mozilla.org/zh-CN/docs/Learn https://developer.mozilla.org/zh-CN/docs/Web/Reference