当前位置： 首页 > news >正文

一、HTML5简介

news 2026/3/27 22:07:53

一、简介

  • 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
  • 可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单示例</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p>
</body>
</html>

 运行结果：

二、HTML文档的后缀名

  • .html
  • .htm

三、实例解析 

  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
  • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
  • <h1> 元素定义一个大标题
  • <p> 元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。 

三、什么是HTML?

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言: HyperText Markup Language
  • HTML 不是一种编程语言，而是一种标记语言
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页
  • HTML 文档包含了HTML 标签及文本内容
  • HTML文档也叫做 web 页面

四、HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和 </b>
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签

         <标签>内容</标签>

五、HTML 元素

  • "HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思。
  • 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

        HTML 元素:

        <p>这是一个段落。</p>

六、Web 浏览器

  • Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。
  • 浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

七、HTML 网页结构

  • 下面是一个可视化的HTML页面结构：

  •  只有 <body> 区域 (白色部分)才会在浏览器中显示。

八、<!DOCTYPE> 声明

  • <!DOCTYPE>声明有助于浏览器中正确显示网页。
  • 网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。
  • doctype 声明是不区分大小写的，以下方式均可：
<!DOCTYPE html><!DOCTYPE HTML><!doctype html><!Doctype Html>

九、通用声明

HTML5

<!DOCTYPE html>

 十、中文编码

  • 目前在大部分浏览器中，直接白色区域输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

相关文章：

一、HTML5简介

一、简介 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点&#xff0c;HTML 运行在浏览器上&#xff0c;由浏览器来解析。 <!…...

编程日记 2024/1/8 7:23:49

视频云存储/视频智能分析平台EasyCVR在麒麟系统中无法启动该如何解决？

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…...

编程日记 2024/1/8 7:22:49

前端性能优化之图像优化

图像优化问题主要可以分为两方面&#xff1a;图像的选取和使用&#xff0c;图像的加载和显示。 图像基础 HTTP Archive上的数据显示&#xff0c;网站传输的数据中&#xff0c;60%的资源都是由各种图像文件组成的&#xff0c;当然这些是将各类型网站平均的结果&#xff0c;单独…...

编程日记 2024/1/8 7:21:48

微信小程序封装vant 下拉框select 单选组件

先上效果图&#xff1a; 主要是用vant 小程序组件封装的&#xff1a;vant 小程序ui网址&#xff1a;vant-weapp 主要代码如下: 先封装子组件&#xff1a; select-popup 放在 components 文件夹里面 select-popup.wxml: <!--pages/select-popup/select-popup.wxml--> &…...

编程日记 2024/1/8 7:20:47

c语言试卷

江西财经大学IT帮 2020&#xff0d;2021第一学期期末C语言模拟考试试卷 课程名称&#xff1a;C语言程序设计(软件)&#xff08;主干课程&#xff09; 适用对象&#xff1a;21级本科 试卷命题人 钟芳盛 游天悦 李俊贤 万军豪 张位 试卷审核人 钟芳盛 一、单项…...

编程日记 2024/1/8 7:19:46

文献阅读：Sparse Low-rank Adaptation of Pre-trained Language Models

文献阅读&#xff1a;Sparse Low-rank Adaptation of Pre-trained Language Models 1. 文章简介2. 具体方法介绍 1. SoRA具体结构2. 阈值选取考察 3. 实验 & 结论 1. 基础实验 1. 实验设置2. 结果分析 2. 细节讨论 1. 稀疏度分析2. rank分析3. 参数位置分析4. 效率考察 4.…...

编程日记 2024/1/8 7:18:45

NCC基础开发技能培训

YonBuilder for NCC 是一个带插件的eclipse工具&#xff0c;跟eclipse没什么区别 NC Cloud2021.11版本开发环境搭建改动 https://nccdev.yonyou.com/article/detail/495 不管是NC Cloud 新手还是老NC开发&#xff0c;在开发NC Cloud时开发环境搭建必看&#xff01;&#xff…...

编程日记 2024/1/8 7:17:45

Flink中的状态管理

一.Flink中的状态 1.1 概述 在Flink中&#xff0c;算子任务可以分为有状态和无状态两种状态。 无状态的算子任务只需要观察每个独立事件&#xff0c;根据当前输入的数据直接转换输出结果。例如Map、Filter、FlatMap都是属于无状态算子。 而有状态的算子任务&#xff0c;就…...

编程日记 2024/1/8 7:16:44

【linux】线程互斥

线程互斥 1.线程互斥2.可重入VS线程安全3.常见锁的概念 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 1.线程互斥 到目前为止我们学了线程概念&#xff0c;线程控制接下来我们进行下一个话题&#xff0c;线程互斥。 有没有考虑过这样的一个问题&#xff0c…...

编程日记 2024/1/8 7:14:42

机器学习原理到Python代码实现之LinearRegression

Linear Regression 线性回归模型 该文章作为机器学习的第一篇文章&#xff0c;主要介绍线性回归模型的原理和实现方法。 更多相关工作请参考&#xff1a;Github 算法介绍 线性回归模型是一种常见的机器学习模型&#xff0c;用于预测一个连续的目标变量&#xff08;也称为响应变…...

编程日记 2024/1/8 7:12:41

Hive SQL / SQL

1. 建表 & 拉取表2. 插入数据 insert select3. 查询3.1 查询语句语法/顺序3.2 关系操作符3.3 聚合函数3.4 where3.5 分组聚合3.6 having 筛选分组后结果3.7 显式类型转换 & select产生指定值的列 4. join 横向拼接4.1 等值连接 & 不等值连接4.2 两表连接4.2.1 内连…...

编程日记 2024/1/8 7:10:39

程序媛的mac修炼手册--MacOS系统更新升级史

啊&#xff0c;我这个口罩三年从未感染过新冠的天选免疫王&#xff0c;却被支原体击倒&#x1f637;大意了&#xff0c;前几天去医院体检&#xff0c;刚检查完出医院就摘口罩了&#x1f926;大伙儿还是要注意戴口罩&#xff0c;保重身体啊&#xff01;身体欠恙&#xff0c;就闲…...

编程日记 2024/1/8 7:08:36

【数据库原理】（9）SQL简介

一.SQL 的发展历史 起源&#xff1a;SQL 起源于 1970 年代&#xff0c;由 IBM 的研究员 Edgar F. Codd 提出的关系模型概念演化而来。初期&#xff1a;Boyce 和 Chamberlin 在 IBM 开发了 SQUARE 语言的原型&#xff0c;后发展成为 SQL。这是为了更好地利用和管理关系数据库。…...

编程日记 2024/1/8 7:06:35

第二百五十二回

文章目录 概念介绍实现方法示例代码 我们在上一章回中介绍了如何在页面中添加图片相关的内容&#xff0c;本章回中将介绍如何给组件添加阴影.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 我们在本章回中介绍的阴影类似影子&#xff0c;只是它不像影子那么明显&a…...

编程日记 2024/1/8 7:03:32

Leetcode 3701 · Find Nearest Right Node in Binary Tree (遍历和BFS好题)

3701 Find Nearest Right Node in Binary TreePRE Algorithms This topic is a pre-release topic. If you encounter any problems, please contact us via “Problem Correction”, and we will upgrade your account to VIP as a thank you. Description Given a binary t…...

编程日记 2024/1/8 7:02:31

网站被攻击了，接入CDN对比直接使用高防服务器有哪些优势

网站是互联网行业中经常被攻击的目标之一。攻击是许多站长最害怕遇到的情况。当用户访问一个网站&#xff0c;页面半天打不开&#xff0c;响应缓慢&#xff0c;或者直接打不开&#xff0c;多半是会直接走开&#xff0c;而不是等待继续等待相应。针对网站攻击的防护&#xff0c;…...

编程日记 2024/1/8 7:01:31

location常用属性和方法

目录 Location 对象 Location 对象属性 Location 对象方法 location.assign() location.replace() location.reload() Location 对象 Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分&#xff0c;可通过 window.location 属性来访问。 L…...

编程日记 2024/1/8 7:00:30

二分图

目录 二分图 染色法判定二分图 匈牙利算法 二分图 二分图&#xff0c;又叫二部图&#xff0c;将所有点分成两个集合&#xff0c;使得所有边只出现在集合之间的点之间&#xff0c;而集合内部的点之间没有边。二分图当且仅当图中没有奇数环。只要图中环的边数没奇数个数的&am…...

编程日记 2024/1/8 6:58:28

[VUE]3-路由

目录 路由 Vue-Router1、Vue-Router 介绍2、路由配置3、嵌套路由3.1、简介3.2、实现步骤3.3、⭐注意事项 4、⭐router-view标签详解 ​&#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅…...

编程日记 2024/1/8 6:56:25

Kafka（六）消费者

目录 Kafka消费者1 配置消费者bootstrap.serversgroup.idkey.deserializervalue.deserializergroup.instance.idfetch.min.bytes1fetch.max.wait.msfetch.max.bytes57671680 (55 mebibytes)max.poll.record500max.partition.fetch.bytessession.timeout.ms45000 (45 seconds)he…...

编程日记 2024/1/8 6:54:22

英飞凌AURIX TC3XX GPIO驱动配置与LED呼吸灯实现

1. 认识AURIX TC3XX的GPIO模块 第一次接触英飞凌AURIX TC3XX系列MCU时&#xff0c;我被它强大的GPIO功能惊艳到了。这不仅仅是一个简单的数字输入输出接口&#xff0c;而是集成了多种高级特性的硬件模块。在实际汽车电子项目中&#xff0c;比如氛围灯控制、状态指示灯等场景&a…...

编程新知 2026/3/27 21:48:00

医学图像分类实战：基于kvasir v2胃病数据集的深度卷积网络性能对比

1. 医学图像分类与KVASIR V2数据集简介 胃镜图像分类是计算机辅助诊断系统中的关键环节。KVASIR V2作为目前最全面的公开胃病数据集&#xff0c;包含8类常见胃部病变的8000张高清图像&#xff0c;每类1000张。这些图像由专业胃肠病专家标注&#xff0c;覆盖了从正常黏膜到早期…...

编程新知 2026/3/27 21:47:58

python基于微信小程序的方言文化传播平台的设计与开发

目录需求分析与规划技术选型与架构设计核心功能实现数据处理与优化测试与部署运营与迭代项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作需求分析与规划 明确平台的核心功能需求&#xff0c;包括方言内容展示、语音录制与分享、…...

编程新知 2026/3/27 20:45:38

SQLancer：自动化数据库测试的效能革命

SQLancer&#xff1a;自动化数据库测试的效能革命 【免费下载链接】sqlancer Automated testing to find logic and performance bugs in database systems 项目地址: https://gitcode.com/gh_mirrors/sq/sqlancer 在数据库系统的开发与维护中&#xff0c;逻辑缺陷和性能…...

编程新知 2026/3/27 19:16:51

5分钟搞定！用Docker Compose一键部署Penpot设计协作平台（含SMTP配置避坑指南）

5分钟极速部署Penpot&#xff1a;Docker Compose全流程指南与SMTP实战避坑 中小团队在设计协作工具选型时&#xff0c;往往陷入两难&#xff1a;商业软件成本高昂&#xff0c;开源方案部署复杂。Penpot作为Figma的开源替代品&#xff0c;凭借其完整的协作功能和零成本优势&…...

编程新知 2026/3/27 19:06:49

告别WoMic：用VB-Audio Virtual Cable和TCP Socket自建无线麦克风（含参数配置避坑指南）

无线音频传输方案重构&#xff1a;VB-Audio与TCP Socket的工程实践 在音频处理领域&#xff0c;虚拟麦克风技术一直是个既实用又有趣的话题。许多开发者最初接触这一领域是通过WoMic这样的解决方案&#xff0c;但随着项目复杂度提升&#xff0c;人们往往需要更灵活、更可控的自…...

编程新知 2026/3/27 18:10:09

NPU vs GPU：为什么你的AI项目需要专用神经网络处理器？

NPU vs GPU&#xff1a;为什么你的AI项目需要专用神经网络处理器&#xff1f; 当你在深夜调试一个实时人脸识别模型时&#xff0c;GPU风扇的轰鸣声是否让你担心电费账单&#xff1f;当部署在边缘设备的图像分类服务因为响应延迟被客户投诉时&#xff0c;是否考虑过硬件选型可能…...

编程新知 2026/3/27 17:37:58

AI赋能React开发：让快马智能助手帮你设计和优化复杂组件逻辑

AI赋能React开发&#xff1a;让快马智能助手帮你设计和优化复杂组件逻辑 最近在开发一个电商网站时&#xff0c;遇到了一个常见的需求&#xff1a;实现一个侧边栏商品筛选组件。这个组件需要包含价格区间滑块、多品牌复选框和分类下拉选择三个主要功能。刚开始觉得这个需求挺简…...

编程新知 2026/3/27 17:25:56

Souliss嵌入式状态同步框架：轻量级去中心化智能家居通信实践

1. Souliss 智能家居网络框架深度解析&#xff1a;面向嵌入式工程师的底层通信架构实践指南Souliss 是一个专为资源受限嵌入式节点设计的轻量级、去中心化智能家居网络框架。其核心目标并非构建通用物联网平台&#xff0c;而是解决真实家庭场景中多协议共存、低功耗节点协同、边…...

编程新知 2026/3/27 16:43:31

AtlasOS系统性能优化指南：从诊断到维护的全流程解决方案

AtlasOS系统性能优化指南&#xff1a;从诊断到维护的全流程解决方案 【免费下载链接】Atlas &#x1f680; An open and lightweight modification to Windows, designed to optimize performance, privacy and security. 项目地址: https://gitcode.com/GitHub_Trending/atl…...

编程新知 2026/3/27 16:15:21