HTML代码简单介绍

HTML结构介绍

HTML文件基本结构

标签的层次结构

HTML结构介绍

HTML的代码由标签构成

例如：

<head>Hello</head>

标签名 body 放到 < > 中
大部分标签成对出现 <body> 为开始标签, </body> 为结束标签.
少数标签只有开始标签, 称为 "单标签"
开始标签和结束标签之间, 写的是标签的内容hello
开始标签中可能会带有 "属性" id 属性相当于给这个标签设置了一个唯一的标识符(身份证号码)

<body id="myId">hello</body>

HTML文件基本结构

<html><head><title>第一个页面</title></head><body>hello world</body>
</html>

在上面的代码中：

html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题

标签的层次结构

在HTML中，标签结构分为兄弟关系和父子关系

<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 (文档对象模型) 的缩写

下面的代码为VSCode中快速生成的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></body>
</html>

在VSCode中可以使用!+回车/Tab键键入上面的代码片段

代码片段细节解释：

<!DOCTYPE html> 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML 5 的文件
<html lang="en"> 其中 lang 属性表示当前页面是一个 "英语页面". 这里暂时不用管(部分浏览器会根据此处的声明提示是否进行自动翻译)
<meta charset="UTF-8"> 描述页面的字符解码方式，没有这一行可能会导致中文乱码
<meta name="viewport" content="width=device-width, initial-scale=1.0">，name="viewport" 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域
content="width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放(这个属性对于移动端开发更重要)