HTML开篇之安装VSvode(用记事本编辑HTML)

news2025/1/14 20:51:30

文章目录

前端开篇开篇知识点讲解
1.HTML 结构
- 1.1认识 HTML 标签
- 1.2HTML 文件基本结构
- 1.3标签层次结构
- 1.4快速生成代码框架
- 1.5用记事本写HTML
- 1.6前端开发工具
- 1.7下载vscode 及使用教学

大家好，我是晓星航。今天为大家带来的是 HTML 相关的讲解！😀

前端开篇开篇知识点讲解

网页三剑客：HTML CSS JavaScript

HTML 描述了用户的骨架。(页面里面有啥没啥) 骨静态的

CSS 描述了网页的样式。(形容词) 皮静态的

JS 描述了网络的行为。(如何和用户交互) 魂动态的

1.HTML 结构

1.1认识 HTML 标签

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

形如:

<body>hello</body>

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

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

1.2HTML 文件基本结构

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

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

1.3标签层次结构

父子关系
兄弟关系

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

其中:

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

可以使用 chrome 的开发者工具查看页面的结构.

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

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

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

1.4快速生成代码框架

在 IDEA 中创建文件 xxx.html , 直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

<!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>

细节解释: (了解即可, 不必深究)

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