# 笔记：web 前端开发入门
[](demo/demo.html ':include :type=code')
[](demo/demo.html ':include height=95px')
## 资源
[2022 年前端学习路线图](https://www.bilibili.com/read/cv10431130)
[黑马程序员 web 前端开发入门教程，前端零基础 html5+css3+前端项目视频教程](https://www.bilibili.com/video/BV1Kg411T7t9)
[菜鸟教程-HTML 教程- (HTML5 标准)](https://www.runoob.com/html/html-tutorial.html)
## HTML 认知
1、常见 5 大浏览器
- IE
- 火狐 FireFox
- 谷歌 Chrome
- Safari
- 欧朋 Opera
2、渲染引擎
| 浏览器 | 内核 |
| ------------ | ------- |
| IE | Trident |
| FireFox | Gecko |
| Safari | Webkit |
| Chrome/Opera | Blink |
3、Web 标准
保证不同浏览器打开页面显示效果一样
| 构成 | 语言 | 说明 |
| ---- | ---------- | -------- |
| 结构 | HTML | 页面元素 |
| 表现 | CSS | 页面样式 |
| 行为 | JavaScript | 页面交互 |
4、HTML
Hyper Text Markup Language 超文本标记语言
5、hello world
需要设置显示`文件扩展名`
文件扩展名：`.html`
index.html
```html
hello world
```
6、HTML 骨架
```html
```
- html 最外层标签
- head 头部
- title 标题
- body 主体
7、开发工具
- Visual Studio Code （首选）
- WebStorm
- Sublime Text
- DreamWeaver
- HBuilder
8、VS Code 使用
快速生成 html 网页结构：
- `! + Tab` 多了一行代码``
- `doc + Tab`
快捷键
- 浏览器打开：`Alt + B` / `option⌥ + B`
- ÏLive Server 打开：`[command⌘ + L, command⌘ + O]`
9、注释
```html
```
- 浏览器中不显示注释内容
- 添加和取消注释快捷键：`command + /`
10、标签结构
- 双标签 `<开始标签>内容`, 例如：`内容`
- 单标签 `<标签 />`, 例如：`
`
11、标签关系
- 父子关系（嵌套关系）
```html
```
- 兄弟关系（并列关系）
```html
```
12、标题标签 Heading
`h1~h6`
```html
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
```
同时选中下一个相同字符：`command + D`
特点：
- 独占一行
- 文字加粗
- 文字变大，h1->h6 文字逐渐变小
13、段落标签 paragraph
```html
内容
```
特点：
- 段落之间存在间隙
- 独占一行