HTML 简介

HTML（HyperText Markup Language，中文：超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性，开发人员可以定义文本、图像、链接、表格、表单等元素，并控制它们的外观和行为。本文主要介绍HTML的基本概念、历史背景和用途。

参考文档：https://www.cjavapy.com/article/3297/

HTML实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML文档的后缀名可以是.html或.htm，都可以使用，没有区别。

注意：对于中文网页需要使用<meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为<meta charset="gbk"> 。

1、HTML的基本概念

1）标签（Tag）

HTML使用标签来定义网页中的各个元素。标签通常以尖括号< >的形式出现，如<p>表示段落，<img>表示图像等。标签可以包含属性，用于提供额外的信息或控制元素的行为。

2）元素（Element）

一个完整的HTML元素由开始标签、内容和结束标签组成。例如，<p>这是一个段落</p>就是一个完整的段落元素。

3）属性（Attribute）

HTML标签可以具有属性，用于提供元素的额外信息或控制元素的行为。属性以键值对的形式出现，例如<img src="image.jpg">中的src属性指定了图像的源文件。

4）文档结构

一个HTML文档由<html>、<head>和<body>等标签组成。其中，<html>标签用于定义整个HTML文档的根元素，<head>标签用于定义文档的头部信息，如标题和样式表链接，<body>标签用于定义文档的主体内容。

5）块级元素和内联元素

HTML元素可以被分类为块级元素和内联元素。块级元素以块的形式显示，独占一行或一块空间，如<p>、<div>等。内联元素以行内的方式显示，不会独占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素内部，形成一个层次结构。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 声明

HTML文档的开头通常会包含一个DOCTYPE声明，用于指定文档的HTML版本。

例如：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML与Web 浏览器

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言，而Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于显示和解释HTML文档的应用程序。Web浏览器通过解析HTML文档，将其转换为可视化的网页。浏览器会读取HTML文档中的标签和内容，并根据这些标签和内容的定义，渲染出网页的结构和样式。HTML提供了各种标签和属性，用于定义文本、图像、链接、表格、表单等在网页中的展示和交互方式。浏览器在解析HTML时，会根据标签和属性的定义，将文本显示为段落、标题或其他格式，显示图像、链接，并响应用户的交互操作。

通过HTML和Web浏览器的结合，用户可以在浏览器中访问和浏览各种网页内容，包括网页文本、图像、视频、音频等多媒体元素，并与网页进行交互，如点击链接、填写表单、提交数据等。

大部分浏览器中，直接输出中文会出现中文乱码的情况，需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3、HTML版本及历史背景

HTML有多个版本，每个版本都有不同的特性和改进。

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年发布。它只包含一些基本的标签和属性，用于创建简单的文本和链接。HTML 1.0的目标是定义一种通用的超文本标记语言。

2）HTML 2.0

HTML 2.0于1995年发布，是对HTML 1.0的改进和扩展。它引入了一些新的标签和属性，如图像标签和表格标签，以支持更丰富的内容展示。

3）HTML 3.2

HTML 3.2于1997年发布，是对HTML 2.0的进一步改进。它引入了一些新的标签和属性，如表单标签和框架标签，以支持交互性和页面布局。

4）HTML 4.01

HTML 4.01于1999年发布，是对HTML 3.2的修订和扩展。它引入了更多的标签和属性，如层标签和样式表，以支持更灵活的页面设计和样式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年发布，它严格遵循XML的语法规则，要求所有标签和属性都要正确嵌套和闭合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式发布。HTML5引入了许多新的特性和API，如语义化标签、多媒体支持、Canvas绘图、本地存储等。HTML5还支持响应式设计，以适应不同设备和屏幕尺寸。

4、HTML用途

HTML是构建网页结构和内容的基础语言，它提供了丰富的标签和属性，使得开发者可以创建各种类型的网页，并实现不同的功能和效果。HTML用于定义网页的整体结构，包括标题、段落、列表、标题、导航菜单等元素。通过使用不同的HTML标签和属性，可以将文本、图像、音频、视频等内容组织起来，并构建页面的层次结构。HTML可以用于展示文本内容和多媒体元素，如图像、音频和视频。通过使用适当的HTML标签和属性，可以插入和显示各种类型的媒体内容，从而使网页更加丰富和吸引人。HTML提供了创建表单的标签和元素，可以用于收集用户的输入数据。通过使用表单元素如文本框、复选框、单选按钮和下拉列表等，用户可以输入数据并提交给服务器进行处理。

参考文档：https://www.cjavapy.com/article/3297/

为一名web前端开发工作人员或者草根站长经常会遇到浏览器兼容问题，这个时候css不精通的同学就十分的头大。这里本站提供

一款只有webkit核心浏览器的Chrome谷歌浏览器、safari苹果浏览器识别的CSS hack

Chrome和safari的CSS hack代码，只有谷歌浏览器苹果浏览器读取CSS代码：

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit内核兼容CSS */
}

例子：

@media screen and (-webkit-min-device-pixel-ratio:0) {
.yangshi2{border:1px solid #f00;}
}

注:{ }内的写法请参考普通css的写法！

除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！

日常网络浏览过程中，常常会发现有趣且有益的网站，选择收藏以备未来查阅。然而，收藏夹中的网页有时会因为各种原因而无法连接，令人感到遗憾。

将网页剪切至云端笔记，虽然是一种方法，但其排版样式、元素丢失以及同步速度慢等不足，使其显得不够便捷。相较之下，更为实用的方法是将其保存于本地硬盘，既能节省资源又便于后续管理。

今天向您推荐一个网页保存插件——SingleFile。此插件可帮助您将整个网页（包括CSS、图片、字体、框架等）保存为HTML文件。对于您感兴趣的文章网页等，均可进行离线保存，且采一页一文件格式，即使是GIF图也能够完整保留。

下载与安装

Google Chrome

https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle

Microsoft Edge 浏览器

在Microsoft Edge加载项中搜索"singlefle"即可

https://microsoftedge.microsoft.com/addons/detail/singlefile/efnbkdcfmcmnhlkaijjjmhjjgladedno

Mozilla Firefox 浏览器

https://addons.mozilla.org/firefox/addon/single-file

Apple Safari 浏览器

https://apps.apple.com/us/app/singlefile-for-safari/id6444322545

安装步骤

成功下载后，只需启动插件并选择您需要保存的网页，点击SingleFile按钮便可完成操作。

如果觉得单次保存过于繁琐，可在网页上右键点击折叠工具栏上的SingleFile按钮，选择保存：当前标签或所选内容，或者是所选的帧，甚至是一键保存多个选项卡。

此外，还有自动保存功能。默认的保存路径通常是浏览器配置的下载文件夹。您还可以自主选择将网页直接上传至网盘，如GitHub、Google Drive或WebDAV云盘，让珍藏的资源在云端管理得心应手。

在线咨询

上一篇：深入理解 JavaScript：实现自定义 `map` 方法
下一篇：「代码分享」创建HTML文件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。