前期预告：与HTML、CSS的完美邂逅

基本术语

---

• Web
  互联网

• W3C
  万维网联盟(World Wide Weh)，一个非盈利的组织，为互联网提供各种标准。官网：万维网

• MDN
  Mozilla Development Network,Mozilla开发者社区，可以查询HTML和CSS相关元素的具体标准用法。官网:https://developer.mozilla.org/zh-CN/docs/Web

• HTML
  HTML是W3C组织定义的语言标准，用于描述页面结构的语言。
  HTML:(Hyper Text Markup Language)指的是超文本标记语言

我是标题

• CSS
  CSS也是W3C定义的语言标准，主要用于渲染页面(HTML标签)
  CSS:(Cascading Style Sheets)指的是层叠样式表

h1{
color:#f40
}

执行HTML CSS

• HTML、CSS -> 浏览器内核 -> 页面

浏览器

---

• shell:外壳
• core：内核(javaScript执行引擎、渲染引擎)，只有五大浏览器（见上期）才有自己的内核，国内的浏览器都是借鉴五大浏览器的内核。

常见浏览器及其内核

• IE：Trident
• Firfox：Gecko
• Chrome：Webkit / Blink
• Safari：Webkit
• Opera：Presto / Blink

开发环境的准备

---

• 将电脑的后缀名设为可见
• 安装浏览器
  建议使用Chrome浏览器，去谷歌官网进行下载，并设置为默认浏览器
• 安装代码编辑器
  webstorm(好用，占内存大，而且要付费，电脑性能的不好不建议)
  Sublime(占内存超小，界面简单，要安装插件)
  Dreamweaver
  Visual Studio Code (推荐，插件丰富，而且免费)

点击这里进行下载安装 Visual Studio Code

• 安装VS Code编译器的插件
  live Server：用于将代码运行到默认的浏览器上
  

  
  Chinese：汉化插件（安装完成要重启编译器）

  vscode-icons：各种漂亮图标

• 搜索安装

  
  

• 设置图标

  
  

• 选择vscode-icons

  
  

• 其他插件可上网搜索按步骤安装即可

• 编写第一个html代码

1.导入你的工作文件夹，并新建一个index.html文件，打开

2.在第一行输入!（英文）

3.然后将光标移动到 ！（提示）后

4.按下 Enter 键

补全代码如下

5.在body标签之间写入代码如下

    
Hello Web

6.点击右键 --> 点击 Open with Live Server
7.看到下面文字，代表代码运行成功了

END