本WEB前端核心专栏分为三大板块：HTML、CSS、JavaScript，持续更新。
本专栏结合原理讲解+示例分析，快速打通基础核心知识。
- HTML (Hyper Text Markup Language，超文本标记语言) ：描述性的标记语言，不是编程语言。
- CSS (Cascading Style Sheets，层叠样式表)：修饰美化网页。
- JavaScript：轻量级，即时编译型的编程语言，嵌入网页让实现一些功能等。
目录
VSCode安装配置
1.安装VSCode：官方下载地址
- 推荐使用VSCode，免费，轻量，插件多。
2.安装常用插件：
- HTML CSS Support：CSS的智能感知。
- Live Server：可以跳转至浏览器实时预览网页。open in browser需要手动刷新，不推荐。
- HTML Preview：可以直接在VSCode内实时预览网页。
- Path Intellisense：自动补全图片引用路径。
- Image preview：编辑器右侧行标处预览缩略图。
常用的快捷操作(Emmet语法)
- 快速生成HTML骨架：敲入 html:5 或者 ! ，回车。
- 自动生成多个元素：敲入 div*5 回车；敲入 p*5 回车。
- 生成h1~h6标签：敲入 h$*6 回车。
HTML骨架分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- <html> 标签：包裹整个网页所以信息
- <head>标签：包裹一些对用户不可视的信息。
- <meta> 定义网页的基本信息，提供给搜索引擎。
- <title> 定义网页的标题。
- <style> 定义网页的CSS样式。
- <link> 链接外部CSS或脚本文件。
- <scripts> 定义脚本语言。
- <base> 定义网页所有链接的基础定位。
- <body> 标签 网页的主体展示的内容，我们用户能看到的信息内容。
- <head>标签：包裹一些对用户不可视的信息。
示例讲解：
<!DOCTYPE html>：告诉浏览器本网页是HTML5标准网页。
<html lang="en">：告诉浏览器或搜索引擎本网站是英语网站，不影响HTML本身的中文显示。中文网站可以设置成<html lang="zh">，避免浏览器提示是否翻译本网页。
<meta charset="UTF-8">：规定网页的字符集。UTF-8一个中文字符占3个字节，gb2312一个中文字符占2个字节，故中文网站设置成<meta charset="gb2312">。（gb意为国标）
<meta http-equiv="X-UA-Compatible" content="IE=edge">：网页的兼容性模式设置，告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：视图区域等配置，后面讲。
<title>Document</title>：网页标题。
<body> </body>：网页的主体内容，我们用户能看到的信息内容。
3767
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
