HTML详解1

2024-01-19 14:20:20

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>

上述代码的关系如下:

head 和 body 是 html 的子标签(html 就是 head 和 body 的父标签)
title 是 head 的子标签.
head 是 title 的父标签.
head 和 body 之间是兄弟关系.

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

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

DOM 是 Document Object Mode (文档对象模型) 的缩写.

快速生成代码框架

在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">

name=“viewport” 其中 viewport 指的是设备的屏幕上能用来显示我们的网页的那一块区域.
content=“width=device-width, initial-scale=1.0” 在设置可视区和设备宽度等宽,
并设置初始缩放为不缩放. (这个属性对于移动端开发更重要一些).

码农公寓