前言
- 系列文章目录：
- 根据视频和PPT整理
- 视频及对应资料：
- HTML CSS
0. 编辑器 vs code
官网：
https://code.visualstudio.com/
1. HTML语法规范
1.1. 基本语法概述
- HTML标签是由尖括号包围的关键词，例如。
- HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签（极少情况），例
，我们称为单标签。
1.2. 标签关系
双标签关系可以分为：
- 包含关系(父子关系)
- 并列关系(兄弟关系)
<html lang="en"> <head> <title>Document</title> </head> <body></body> </html>
head 标签和 html 标签与body 标签和html 标签为父子关系，html 标签包含 head 标签和 body 标签，html 标签是 head 标签和 body 标签的父亲。
head 标签和 body 标签是兄弟关系。
2. HTML基本结构标签
2.1. 第一个HTML
每个网页都会有一个基本的结构标签(也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
| 标签名 | 定义 | 说明 |
<html></html> |
HTML标签 | 页面中最大的标签，我们称为根标签 |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<titile></title> |
文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> |
文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
HTML文档的的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。
<html lang="en"> <head> <title>页面标题</title> </head> <body> 页面的主体 </body> </html>
3. vs code
3.1. 快速生成骨架代码
输入 “ ! ”，选择第一个提示，回车或tab
<!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>
3.2. 快捷键
- Ctrl + 加号 字体变大
- Ctrl + 减号 字体变小
- ctrl + N 新建文件
3.3. 设置
