HTML5+CSS3[VSCode开发者工具、html标签、head标签、body标签、meta标签](一)-全面详解（学习总结---从入门到深化）

港控/mmm° 2023-09-23 23:48 69阅读 0赞

![e024499166a54eb6a1a051821a8ffaa6.png][]**目录**

编辑 第一个前端程序

学习效果反馈

前端工具的选择与安装

前端常见开发者工具

浏览器

VSCode中文语言包安装：

学习效果反馈

VSCode开发者工具快捷键

VSCode常用快捷键列表

学习效果反馈

HTML5简介与基础骨架

HTML5的DOCTYPE声明

HTML5基本骨架

html标签

head标签

body标签

meta标签

学习效果反馈

HTML注释

--------------------

# ![e024499166a54eb6a1a051821a8ffaa6.png][] 第一个前端程序 #

![ee1c105714654c8880c462e0b974fa0d.png][]

![e024499166a54eb6a1a051821a8ffaa6.png][] **两步完成一个网页程序**

![e024499166a54eb6a1a051821a8ffaa6.png][]**第一步：使用记事本，编写代码**

<html>
     <head>
     <title>我的网页</title>
     </head>
     <body>
     Hello，我的第一个网页
     </body>
    </html>

> 在E盘下保存路径 E:/qianduan/... , 文件名 Welcome.html

![ee74797a2ae4482fb4f0fc71c1ebfcf3.png][]

![d71ee9049eaf46aa844293ad5e6ee2a2.png][]

**第二步：以浏览器方式打开**

右键打开方式，以浏览器方式打开即可

![0bd1268c8ff14196ad2a05c4101bc4ab.png][]

## 学习效果反馈 ##

> 1. 网页文件是有其特殊的后缀名规则，以下正确的是：**后缀为 .html**
> 
> 2. 以下是编写的标签，符合规范的是 <html></html>

# 前端工具的选择与安装 #

![573e275feea5467a98daf19a790d36aa.png][]

## 前端常见开发者工具 ##

工欲善其事必先利其器

### 浏览器 ###

浏览器是我们最重要的合作伙伴

![bad2f59460b24bcb82dc223e1621dd41.png][]

>  **推荐选择**
> 
> 我们推荐谷歌浏览器，有两点原因：
> 
> 1、简洁大方，打开响应速度快
> 
> 2、开发者调试工具

![d3281f127913423c978df7df0c70abdf.png][]

**开发者工具**

开发者工具有效的提高了开发效率

![0785d753c0cf4a8fbbf10137ec45a0fb.png][]

![f2c7dde6040a4980a8c15289143a3ce6.png][]

## VSCode中文语言包安装： ##

扩展 → 搜索Chinese → 点击安装

## 学习效果反馈 ##

> 1. 如何安装VSCode中文语言包：**扩展 → 搜索Chinese → 点击安装**

# VSCode开发者工具快捷键 #

![c485f092f24b4e9cbcd06db0da567dcb.png][]

> VSCode打开文件夹与创建文件
> 
> 1、选择文件夹
> 
> 2、拖拽文件夹

生成浏览器文件 .html 的快捷方式

html:5 + Tab

为了更简单的生成，还可以配置vsCode

> 文件 -> 首选项 -> 设置 -> Emmet -> 勾选 Trigger Expansion On Tab 和 Use Inline Completions

![b982317dc54341d48f73bc97789d18ce.png][]

> ! + Tab

## VSCode常用快捷键列表 ##

> 1 代码格式化： **Shift+Alt+F**
> 
> 2 向上或向下移动一行： **Alt+Up 或 Alt+Down**
> 
> 3 快速复制一行代码： **Shift+Alt+Up 或 Shift+Alt+Down**
> 
> 4 快速保存： **Ctrl + S**
> 
> 5 快速查找： **Ctrl + F**
> 
> 6 快速替换： **Ctrl + H**

## 学习效果反馈 ##

> 1. VSCode快速复制一行代码的快捷键是：**Shift+Alt+Up 或 Shift+Alt+Down**
> 
> 2. VSCode快速移动一行代码快捷键: **Alt+Up 或 Alt+Down**

# HTML5简介与基础骨架 #

**HTML5介绍**

> HTML5是用来描述网页的一种语言，被称为超文本标记语言。用 HTML5编写的文件，后缀以 .html 结尾
> 
> HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括 号包围的关键字，例如：<html>

![833ff351d7d241ff93e64bdd1d27dcfc.png][]

## HTML5的DOCTYPE声明 ##

> DOCTYPE是 document type (文档类型) 的缩写。 是H5的声明位于文档的最前面，处于标签之前。 他是网页必备的组成部分，避免浏览器的怪异模式。

<!DOCTYPE html>

![56abf4c4dd064282a5b4beb4f44041ad.png][]

# HTML5基本骨架 #

![7f819d46864d469593b336e4bbaf525a.png][]

## html标签 ##

> 定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
    <html>
    </html>

## head标签 ##

> head标签用于定义文档的头部。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系 等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

<!DOCTYPE html>
    <html>
        <head>
        </head>
    </html>

## body标签 ##

> body 元素定义文档的主体。
> 
> body 元素包含文档的所有内容（比如文本、超链接、图像、表格和 列表等等。）
> 
> 它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
    <html>
        <head>
        </head>
        <body>
           我会显示在浏览器中
        </body>
    </html>

![caff5734957a4bb99af4779ce2c55ba3.png][]

![dfb5c78e87024284a6a126eb1ef40d1d.png][]

<!DOCTYPE html>
    <html>
        <head>
            <title>第一个页面</title>
        </head>
        <body>
           我会显示在浏览器中
        </body>
    </html>

## meta标签 ##

> meta标签用来描述一个HTML网页文档的属性，关键词等，例如： **charset="utf-8"** 是说当前使用的是 **utf-8** 编码格式，在开发中我们经常会看 到 **utf-8** ，或是 **gbk** ，这些都是编码格式，通常使用 **utf-8** 。

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>itbaizhan</title>
        </head>
        <body>
        </body>
    </html>

## 学习效果反馈 ##

> 1. 下列哪些标签书写格式是正确的是：**<html>**
> 
> 2. 以下组成HTML5基础骨架标签正确的是: ![560060de52a34fbebc10d7cdfbca3a1a.png][]

# HTML注释 #

![b0549228a47c4c97b7a04a9f8a2f2aa5.png][]

浏览器不会显示注释

![30c4573689014d9caa85f9d72c966f08.png][]

![e1408883c5b64c11a96d60a56e5d6d3a.png][]

[e024499166a54eb6a1a051821a8ffaa6.png]: https://img-blog.csdnimg.cn/e024499166a54eb6a1a051821a8ffaa6.png
[ee1c105714654c8880c462e0b974fa0d.png]: https://img-blog.csdnimg.cn/ee1c105714654c8880c462e0b974fa0d.png
[ee74797a2ae4482fb4f0fc71c1ebfcf3.png]: https://img-blog.csdnimg.cn/ee74797a2ae4482fb4f0fc71c1ebfcf3.png
[d71ee9049eaf46aa844293ad5e6ee2a2.png]: https://img-blog.csdnimg.cn/d71ee9049eaf46aa844293ad5e6ee2a2.png
[0bd1268c8ff14196ad2a05c4101bc4ab.png]: https://img-blog.csdnimg.cn/0bd1268c8ff14196ad2a05c4101bc4ab.png
[573e275feea5467a98daf19a790d36aa.png]: https://img-blog.csdnimg.cn/573e275feea5467a98daf19a790d36aa.png
[bad2f59460b24bcb82dc223e1621dd41.png]: https://img-blog.csdnimg.cn/bad2f59460b24bcb82dc223e1621dd41.png
[d3281f127913423c978df7df0c70abdf.png]: https://img-blog.csdnimg.cn/d3281f127913423c978df7df0c70abdf.png
[0785d753c0cf4a8fbbf10137ec45a0fb.png]: https://img-blog.csdnimg.cn/0785d753c0cf4a8fbbf10137ec45a0fb.png
[f2c7dde6040a4980a8c15289143a3ce6.png]: https://img-blog.csdnimg.cn/f2c7dde6040a4980a8c15289143a3ce6.png
[c485f092f24b4e9cbcd06db0da567dcb.png]: https://img-blog.csdnimg.cn/c485f092f24b4e9cbcd06db0da567dcb.png
[b982317dc54341d48f73bc97789d18ce.png]: https://img-blog.csdnimg.cn/b982317dc54341d48f73bc97789d18ce.png
[833ff351d7d241ff93e64bdd1d27dcfc.png]: https://img-blog.csdnimg.cn/833ff351d7d241ff93e64bdd1d27dcfc.png
[56abf4c4dd064282a5b4beb4f44041ad.png]: https://img-blog.csdnimg.cn/56abf4c4dd064282a5b4beb4f44041ad.png
[7f819d46864d469593b336e4bbaf525a.png]: https://img-blog.csdnimg.cn/7f819d46864d469593b336e4bbaf525a.png
[caff5734957a4bb99af4779ce2c55ba3.png]: https://img-blog.csdnimg.cn/caff5734957a4bb99af4779ce2c55ba3.png
[dfb5c78e87024284a6a126eb1ef40d1d.png]: https://img-blog.csdnimg.cn/dfb5c78e87024284a6a126eb1ef40d1d.png
[560060de52a34fbebc10d7cdfbca3a1a.png]: https://img-blog.csdnimg.cn/560060de52a34fbebc10d7cdfbca3a1a.png
[b0549228a47c4c97b7a04a9f8a2f2aa5.png]: https://img-blog.csdnimg.cn/b0549228a47c4c97b7a04a9f8a2f2aa5.png
[30c4573689014d9caa85f9d72c966f08.png]: https://img-blog.csdnimg.cn/30c4573689014d9caa85f9d72c966f08.png
[e1408883c5b64c11a96d60a56e5d6d3a.png]: https://img-blog.csdnimg.cn/e1408883c5b64c11a96d60a56e5d6d3a.png