🌈个人主页：羽晨同学
💫个人格言:“成为自己未来的主人~”
HTML基础
HTML结构
认识HTML标签
HTML代码是由“标签”构成的。
形如
<body>
hello
</body>- 标签名（body）放到<>中
- 大部分标签成对出现，<body>为开始标签 ,</body>为结束标签
- 少数标签只有开始标签，称为“单标签”
- 开始标签和结束标签之间，写的是标签的内容
- 开始标签中可能会带有“属性”，id属性相当于给这个标签设置了唯一的标识符（身份证号码）
<body id="myid">
hello
</body>HTML文件基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
hello world
</body>
</html>- html标签是整个html文件的根标签（最顶层标签）
- head标签中写页面的属性
- body标签中写的是页面上显示的内容
- title标签中写的是页面的标题
标签层次结构
- 父子关系
- 兄弟关系
<html>
<head>
<title>这是标题</title>
</head>
<body>
hello world
</body>
</html>- head和body是html的子标签（html就是head和body的父标签）
- title是head的子标签，head是title的父标签
- head和body之间是兄弟关系
标签之间的结构关系，构成了一个DOM树
DOM是Document Object Mode（文档对象模型）的缩写
快速生成代码框架
在vs studio中可以直接生成代码框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>直接输入！，按tab键，此时能自动生成代码的主体框架
- <!OCTYPE html>称为DTD（文档类型定义），描述当前的文件是一个HTML5的文件
- <html lang="en">其中lang属性表示当前页面是一个“英语页面”，这里暂时不用管（有些浏览器会根据此处的声明提示是否进行自动翻译）
- <meta charest="UTF-8">描述页面的字符编码方式，没有这一行可能会导致中文乱码
- <meta name="viewport" content=""width=device-width,initial-scale=1.0">
ame="viewport"其中viewport指的是设备的屏幕上能用来显示我们的网页的那一块区域
content=""width=device-width,initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。（这个属性对于移动端开发更重要一些）
