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

HTML 基础要素解析

news 2026/5/18 7:34:49

HTML 初步认识

纯文本文件介绍

纯文本文件与其它文件的区别

Html介绍

HTML 骨架

文档类型（!DOCTYPE）声明

介绍

常用的 DOCTYPE 声明

meta标签

字符集

关键字和页面描述

HTML 初步认识

纯文本文件介绍

纯文本文件指的是仅包含文本内容，不存在样式，且使用记事本等纯文本编辑器打开时能够正常读取，不会出现乱码的文件。例如，html、css、js 都属于纯文本文件。

纯文本文件与其它文件的区别

txt 文件仅能保存文本内容，无法记录文本样式。而 doc 文件既能保存内容，又能保存样式。因此，存储相同的内容时，doc 文件通常比 txt 文件大。

Html介绍

HTML 是 “HyperText Markup Language” 的英文缩写，即超文本标记语言。

HTML 标签是分等级的，HTML 将所有的标签分为两类：容器级和文本级。容器级的标签内部可以放置任何元素；文本级的标签内部只能放置文字、图片、表单元素。

.html 是网页的常见格式。

当前业界的标准是，网页技术严格遵循三层分离：html 主要负责描述页面的语义；css 负责描述页面的样式；js 负责描述页面的动态效果。

HTML 骨架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  <meta name="Keywords" content="关键字 " />  <meta name="Description" content="描述 " />  <title>Document</title>  
</head>  
<body>  …  
</body>  
</html>

文档类型（!DOCTYPE）声明

介绍

DTD 即文档类型声明（Doc Type Declaration）。总共有 7 种 DTD，在 HTML4.01 中有三种<!DOCTYPE>声明，在 XHTML1.0 中也有三种<!DOCTYPE>声明，而在 HTML5 中仅有一种<!DOCTYPE>声明。XHTML 总体上比 HTML 更为严格，比如要求标签必须为小写字母、标签必须闭合、属性值必须带引号等。HTML4.01 兼容 ie6 及以上版本，HTML5 兼容 ie9 及以上版本。例如：

HTML4.01 ：

strict（严格型）：更为严格，不包括展示性的和弃用的元素（比如 font、u、b、i 标签），不允许框架集（Framesets）。

transitional（过渡型）：相对不那么严格，不允许框架集（Framesets）。

frameset（框架集型）：允许框架集（Framesets）。

XHTML1.0 ：

strict（严格型）：更为严格，不包括展示性的和弃用的元素（比如 font、u、b、i 标签），不允许框架集（Framesets）。

transitional（过渡型）：相对不那么严格，不允许框架集（Framesets）。

frameset（框架集型）：允许框架集（Framesets）。

常用的 DOCTYPE 声明

HTML4.01 ：

Strict ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset ：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0 ：

Strict ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset ：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5 ：

<!DOCTYPE html>

备注：XHTML 1.1 ：该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

meta标签

字符集

中文能够使用的字符集两种：

第一种：UTF-8

UTF-8 是国际通用字库，包含各种国家的语言，但保存尺寸较大，存储一个汉字需要3个字节。例如：新华网藏语频道使用的是 UTF-8，以保证字符集的丰富性。

第二种：gb2312（也可以写成 gbk）

gb2312 包含的字符较少，主要是中文、少数外语和符号，但尺寸较小，存储一个汉字只需 2 个字节。例如：部分网易的网页出于对显示速度的追求，或许会采用 GBK（或 GB2312）字符集。

UTF-8 和 gb2312 对比：

字符集	描述
UTF-8	字全，存储一个汉字所需3个字节。
gb2312	只用中文、少数外语和符号，存储一个汉字所需2个字节。

关键字和页面描述

<meta name="Keywords" content="关键字 " />  
<meta name="Description" content="描述 " />

meta 标签必须属性：

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息

meta 标签可选属性：

属性	值	描述
http-equiv	content-type	把 content 属性关联到 HTTP 头部。
	expires
	refresh
	set-cookie
name	author	把content属性关联到一个名称。
	description
	keywords
	generator
	revised
	others
scheme	some_text	定义用于翻译 content 属性值的格式。

HTML 基础要素解析

目录 HTML 初步认识纯文本文件介绍纯文本文件与其它文件的区别 Html介绍 HTML 骨架文档类型（!DOCTYPE）声明介绍常用的 DOCTYPE 声明 meta标签字符集关键字和页面描述 HTML 初步认识纯文本文件介绍纯文本文件指的是仅包含文本内容&am…...

编程日记 2024/8/20 23:42:16

开源的向量数据库Milvus

Milvus是一款开源的向量数据库，专为处理向量搜索任务而设计，尤其擅长处理大规模向量数据的相似度检索。官网地址：https://milvus.io/ 以下是关于Milvus的详细介绍： 一、基本概念向量数据库：Milvus是一款云原生向量…...

编程日记 2024/8/20 23:41:15

设计模式-工厂方法

“对象创建”模式通过“对象创建”模式绕开new，来避免对象创建（new）过程中所导致的紧耦合（依赖具体类），从而支持对象创建的稳定。它是接口抽象之后的第一步工作。典型模式 Factory MethodAbstract Factory…...

编程日记 2024/8/20 23:40:13

Flask SQLALchemy 的使用

Flask SQLALchemy 的使用安装 Flask-SQLAlchemy配置 Flask-SQLAlchemy定义模型创建数据库和表插入和查询数据更新和删除数据迁移数据库总结Flask-SQLAlchemy 是一个 Flask 扩展，它简化了 Flask 应用中 SQLAlchemy 的使用。SQLAlchemy 是一个强大的 SQL 工具包和对象关系映射（…...

编程日记 2024/8/20 23:38:12

Metasploit漏洞利用系列（一）：MSF完美升级及目录结构深度解读

在信息安全领域，MetasploitFramework（MSF）是一个无处不在的工具，它集合了大量的渗透测试和漏洞利用模块，帮助安全专家识别和利用系统中的弱点。本文将深入探讨如何对Metasploit进行完美升级，以及对其核心目…...

编程日记 2024/8/20 23:37:11

C/C++｜经典代码题（动态资源的双重释放与「按值传递、按引用传递、智能指针的使用」）

以下代码中你能看出其存在什么问题？如何修复，能给出几种方法？分别在什么场景下用哪种方法。 #include <iostream>class Buffer {public:Buffer() { std::cout << "Buffer created" << std::endl; }~Buffer() { s…...

编程日记 2024/8/20 23:36:10

西北乱跑娃 -- linux使用笔记

1.后台运行每天一个日志文件 nohup python3.8 manage.py >> $(date %Y-%m-%d).log 2>&1 &2.目录操作： ls：列出目录内容。cd：改变当前工作目录。pwd：显示当前工作目录的路径。mkdir：创建新目录。rmd…...

编程日记 2024/8/20 23:34:07

Kubectl基础命令使用

一.Kubectl 基础命令格式： kubectl [command] [TYPE] [NAME] [FLAGS] kubectl 是 Kubernetes 的命令行工具，用于管理 Kubernetes 集群。以下是一些常用的 kubectl 命令及其选项： 常用命令获取资源列出所有资源类型（Pods、De…...

编程日记 2024/8/20 23:31:04

推荐编译器插件：Fitten Code 更快更好的AI助手

✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。我是Srlua小谢，在这里我会分享我的知识和经验。&am…...

编程日记 2024/8/20 23:27:59

ArcGIS Pro基础：状态栏显示栏的比例尺设置和经纬度位置

上图所示，界面下方最左侧是显示的比例尺，可以进行选择设置，也可以进行自定义设置上图所示，可以手动录入比例尺，同时也可以对比例尺设置别名，比如【实验1】作为特定比例尺的标记如上图所示，可以…...

编程日记 2024/8/20 23:21:43

微前端架构入门

什么是微前端？定义微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端是一种架构风格，它允许将一个复杂的大前端应用拆分成多个可以独立开发、部署的小型前端应用。这些小型前端应用通常被称为“子应用”或者“微前端应用…...

编程日记 2024/8/20 23:20:42

[LitCTF 2023]导弹迷踪

页面源码底部有多个js,查看浏览查看ksrc/game.js发现flag...

编程日记 2024/8/20 23:19:41

win10安装wsl2(ubuntu20.04)并安装 TensorRT-8.6.1.6、cuda_11.6、cudnn

参考博客： 1. CUDA】如何在 windows 上安装 Ollama 3 open webui （docker WSL 2 ubuntu nvidia-container）：https://blog.csdn.net/smileyan9/article/details/140391667 2. 在 Windows 10 上安装 W…...

编程日记 2024/8/20 23:18:40

信息搜集--敏感文件Banner

免责声明:本文仅做分享参考... 目录 git安装: git目录结构: 敏感目录泄露 1-git泄露 (1)常规git泄露 scrabble工具 (2)git回滚 (3)git分支 GitHacker工具 (4)git泄露的其他利用 .git重定向问题 2-SVN泄露 dvcs-ripper工具 3-小结 dirsearch目录扫描工具敏感备…...

编程日记 2024/8/20 23:16:38

Qt 学习第六天：页面布局

如何设计页面？ 有个类似沙盒模式的玩法，Qt Widget Designer可以更好的帮助我们设计页面点击.ui文件进入右上方可以看到四种常见的布局： 四种布局 （一）水平布局horizontalLayout：QHBoxLayout H 是 hori…...

编程日记 2024/8/20 23:14:36

利用队列收集单双击和长按按键

利用队列收集单双击和长按按键引言当我们仅仅通过在while循环里面进行判断按键类型的标志位, 然后进行操作的时候, 我们的最小例程很小, 所以能够实时的检测到按键,从而触发实验现象. 假如我们此时进入了一个事件处理函数呢 ? 并且这个这个函数的操作是不可被打断的, 如果此…...

编程日记 2024/8/20 23:13:35

AI工作流：低代码时代的革新者，重塑手机问答类应用生态

在这个数字化迅猛发展的时代，低代码技术正以惊人的速度改变着我们的生活方式。作为低代码人群的先锋，AI工作流技术正在以前所未有的方式，赋予非技术人群实现梦想的能力 🔥能用AI-低代码传送门：https://www.nyai.chat …...

编程日记 2024/8/20 23:12:34

配置MySQL主从，配置MySQL主主 +keeplive高可用

在大数据-Hadoop体系中配置MySQL主主keeplive高可用注意：这个是我两年前的word文档，可以当作参考文档有个思路参考一下，但是里面可能有些地方有误另外 :关于一些企业级实战技术可以参考这篇mysql 物理备份 MySQL 全量备份增量备份差异…...

编程日记 2024/8/20 23:10:32

第5节：Elasticsearch核心概念

我的后端学习笔记大纲我的ElasticSearch学习大纲 1.Lucene和Elasticsearch的关系: 1.Lucene：最先进、功能最强大的搜索库，直接基于lucene开发，非常复杂，api复杂2.Elasticsearch：基于lucene，封装了许多luc…...

编程日记 2024/8/20 23:08:30

存储实验：华为异构存储在线接管与在线数据迁移（Smart Virtualization Smart Migration 特性）

目录目的实验环境实验步骤参考文档1. 主机安装存储多路径2. v2存储创建Lun，映射给主机；主机分区格式化，写数据3. 将v2存储映射该成映射到v3存储上(v3存储和v2之间链路搭建，测通，远端设备）（Smar…...

编程日记 2024/8/20 23:07:29

开源监控面板OpenClaw：从架构设计到生产部署实战指南

1. 项目概述：一个开源监控面板的诞生在运维和开发的世界里，监控面板就像是驾驶舱里的仪表盘。没有它，你就是在盲飞。今天要聊的这个项目 xingrz/openclaw-dashboard ，就是一个由社区驱动的开源监控面板解决方案。它的名字很有意…...

编程新知 2026/5/17 10:55:30

终极指南：在Windows上直接安装安卓APK文件的5个简单步骤

终极指南：在Windows上直接安装安卓APK文件的5个简单步骤【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 想在Windows电脑上运行安卓应用，但又厌…...

编程新知 2026/5/17 10:39:46

Netgear路由器急救指南：nmrpflash如何让变砖设备重获新生

Netgear路由器急救指南：nmrpflash如何让变砖设备重获新生【免费下载链接】nmrpflash Netgear Unbrick Utility 项目地址: https://gitcode.com/gh_mirrors/nmr/nmrpflash 当你心爱的Netgear路由器因为固件升级失败、意外断电或其他原因变成一块"砖头&q…...

编程新知 2026/5/17 10:37:24

Java并发编程：CompletableFuture实战

Java并发编程：CompletableFuture实战引言 Java 8引入的CompletableFuture是现代异步编程的重要工具，它不仅解决了Future的局限性，还提供了丰富的API用于组合、转换和处理异步结果。相比传统的Future，CompletableFuture支持流式调…...

编程新知 2026/5/17 10:30:49

Real-ESRGAN-GUI 终极指南：免费AI图像增强工具如何让模糊照片重获高清新生

Real-ESRGAN-GUI 终极指南：免费AI图像增强工具如何让模糊照片重获高清新生【免费下载链接】Real-ESRGAN-GUI Lovely Real-ESRGAN / Real-CUGAN GUI Wrapper 项目地址: https://gitcode.com/gh_mirrors/re/Real-ESRGAN-GUI 你是否曾为模糊的老照片感到无奈&a…...

编程新知 2026/5/17 10:14:10

将HermesAgent项目接入Taotoken的详细配置步骤与注意事项

🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度将HermesAgent项目接入Taotoken的详细配置步骤与注意事项本文旨在为开发者提供一份清晰的指南，帮助你将HermesAgent项…...

编程新知 2026/5/17 10:01:23

如何用nmrpflash拯救你的Netgear路由器：从“变砖“到重生的完整指南

如何用nmrpflash拯救你的Netgear路由器：从"变砖"到重生的完整指南【免费下载链接】nmrpflash Netgear Unbrick Utility 项目地址: https://gitcode.com/gh_mirrors/nmr/nmrpflash 当你的Netgear路由器固件升级失败、意外断电或系统崩溃后无法启动…...

编程新知 2026/5/17 9:38:38

Godot卡牌游戏框架终极指南：3小时从零构建专业级卡牌游戏

Godot卡牌游戏框架终极指南：3小时从零构建专业级卡牌游戏【免费下载链接】godot-card-game-framework A framework which comes with prepared scenes and classes to kickstart your card game, as well as a powerful scripting engine to use to provide full r…...

编程新知 2026/5/17 9:14:34