## 学习目的
知识、能力、素养
- 理解HTML的基本概念
- 熟悉HTML文档结构
- 掌握常见HTML标签的使用
- 创建并预览HTML页面
- 培养良好的编码习惯
- 掌握代码编辑器代码快捷输入的使用

#第一节 初认html
# 一、HTML简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的基础语言。它通过各种标签定义网页的结构和内容，使浏览器能够正确解析和显示网页。HTML5 是最新的HTML标准，引入了许多新的语义化标签和功能，增强了网页的可读性和结构性。
# 二、超文本与标记语言的概念

## （一）超文本

超文本是指可以包含图片、音频、视频、动画等多媒体内容的文本。
它还可以通过超级链接从一个文件跳转到另一个文件，实现全球范围内的信息连接。
## （二 ）标记语言

HTML 不是一种编程语言，而是一种描述性的标记语言。
标记语言由一系列标签组成，每个标签都有特定的含义。例如、
```请在此输入代码块语言
<a>表示超链接，<img>表示图片，<h1>表示一级标题。
```
标记语言不需要编译过程，HTML标签直接由浏览器解析执行。

# 三、HTML的专有名词

网页 ：由各种标记组成的单个页面。
主页(首页) : 网站的起始或导航页面。
```请在此输入代码块语言
标记：如<p>称为开始标记，</p>称为结束标记。
元素：如<p>内容</p>称为元素。
```
属性：给标签添加的辅助信息。
HTTP：超文本传输协议，规定客户端和服务端交互的数据格式。
HTTPS：加密的HTTP协议。
SMTP：邮件传输协议，
FTP：文件传输协议。
# 四、HTML结构详解

## （一）HTML标签分类

### 1.双边标签

成对出现，如
```请在此输入代码块语言
<div>和</div>
```
### 2.单边标签

单独出现，如
```请在此输入代码块语言
<br />、<hr />
```
## （二）HTML骨架标签

- <html>：页面中最大的标签，根标签。
- <head>：文档的头部，包含元数据。
- <title>：文档的标题，显示在浏览器标签上。
- <body>：文档的主体，包含所有可见内容。

## （三）快速生成HTML骨架

在VS Code中新建HTML文件，输入html:5，然后按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>
```
## （四）文档声明头

任何标准的HTML页面第一行必须是文档声明头（DTD），HTML5简化了这一声明：
```
<!DOCTYPE html>
```
## （五）页面语言设置

指定页面的语言类型：
```
<html lang="zh-Hans">
```
常见的语言类型有：
- en：英语
- zh-CN：中文
- zh-Hans：简体中文

## （六）<head>标签内部配置

<head>标签内包含多个重要配置项：
```请在此输入代码块语言
- <meta charset="UTF-8">：设置字符集为UTF-8。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">：设置视口宽度等于屏幕宽度。
- <title>：设置网页标题。
- <link>：定义文档与外部资源的关系。
- <base>：规定页面上所有链接的默认地址。
```

# 四、计算机编码介绍

计算机存储的是二进制数据，为了处理不同语言的文字，需要使用不同的编码方式。
### 1.ASCII码

用1个字节（8位二进制）表示一个字符，共256个字符，主要用于英文字符。
### 2.ANSI编码

用2个字节（16位二进制）表示一个汉字，适用于中文等多字节字符集。
### 3.GBK编码

对GB2312进行了扩展，支持更多汉字。
### 4.Unicode编码

用4个字节表示一个字符，支持全球所有语言，但效率较低。
### 5.UTF-8编码

根据字符的不同选择其编码长度，如字母A用1个字节，汉字用3个字节，兼顾了兼容性和效率。
建议：开发中使用UTF-8编码，以支持全球各种语言并避免乱码问题。
# 五、HTML的规范

### 1.大小写敏感性

HTML不区分大小写，但建议统一使用小写字母。
### 2.标签嵌套

所有标记元素都要正确嵌套，不能交叉嵌套。
### 3.标签闭合
所有标签都必须闭合
```请在此输入代码块语言
双标签如<span></span>，单标签如<br />
```
### 4.属性值加引号

所有属性值必须加引号，如
```请在此输入代码块语言
<font color="red"></font>
```
### 5.属性必须有值

所有属性必须有值，如
```请在此输入代码块语言
<hr noshade="noshade">
```
### 6.XHTML文档

XHTML文档开头必须有DTD文档类型定义。

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的基础语言。它通过各种标签定义网页的结构和内容，使浏览器能够正确解析和显示网页。HTML5 是最新的HTML标准，引入了许多新的语义化标签和功能，增强了网页的可读性和结构性。

第三章 HTML

前端

HTML是创建网页的基础语言，通过标签定义网页结构和内容。学习HTML需掌握文档结构、常用标签、编码规范及HTML5新特性。了解超文本概念、标记语言特点及网页相关术语，熟悉HTML骨架标签和字符编码方式。遵循HTML规范，使用UTF-8编码，正确嵌套和闭合标签，提升网页兼容性和可读性。

HTML5

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

第三章 HTML-腾讯云开发者社区-腾讯云

第三章 HTML

第三章 HTML

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐