HTML简介

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML 结构

认识 HTML 标签

HTML 代码是由 “标签” 构成的.

形如：

<body>hello</body>

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

HTML 文件基本结构

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

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

展示效果：
在这里插入图片描述

标签层次结构

<html>
    <head>
        <title>这是第一个HTML页面</title>
        <body>
            hello html
        </body>
    </head>
</html>

上述代码的关系如下:

可以使用 chrome 的开发者工具查看页面的结构.
F12 或者右键审查元素, 开启开发者工具, 切换到 Elements 标签, 就可以看到页面结构细节.

在这里插入图片描述

标签之间的结构关系, 构成了一个 DOM 树

快速生成代码框架

在VS Code中创建文件 xxx.html , 直接输入 ! , 按 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>

主体框架的细节解释: (了解即可, 不必深究)

称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.
<html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”. 这里暂时不用管. (有些浏览器会根据此处的声明提示是否进行自动翻译).
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML详解1