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

Python武器库开发-前端篇之html概述(二十八)

news 2026/2/10 17:56:37

前端篇之html概述(二十八)

html概述

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。

HTML（Hypertext Markup Language）是一种用于创建和发布Web页面的标记语言。它使用标记标识文本、图像和其他内容的结构和呈现形式。HTML文档包含一系列嵌套的标记和元素，这些元素可以通过浏览器解析和渲染为Web页面。HTML是Web开发的基础，它具有简单易于学习的语法，使得它成为了Web开发者的标准语言之一。HTML也支持各种交互和媒体元素，例如链接、表格、图像、音频和视频等。最新版本是HTML5，提供了新的语义元素和API，可以更好地满足Web应用程序的需求。

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着他们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略他们不支持HTML5的新特性。
这个doctype比以前更短，更简单，使的它更容易被记住并且减少必须下载的字节数。

用<meta charset>声明字符集

在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的元素，现在它变得非常简单：

<meta charset="UTF-8">

把这个放到你的<head>头中，因为在一些浏览器中如果声明的字符集和他们的预期的不同，他们会重新解析一遍HTML文档。另外，如果你目前没有使用UTF-8，建议您把您的网页改为这个编码，因为它简化了不同脚本对文件中字符的处理。

值得注意的是HTML5限制了可用的字符集，他们需要兼容8位的ASCII。这样做是为了加强安全，防止某些类型的攻击。

HTML 常用编辑器

工欲善其事,必先利其器；一个好用的html编辑器，可以让您在制作html网页效率更高，事半功倍的效果。下面给您介绍几款常用的编辑器。

以使用专业的 HTML 编辑器来编辑 HTML，基础教程为大家推荐几款常用的编辑器：

  • Notepad++ https://notepad-plus.en.softonic.com/

  • Editplus https://www.editplus.com/

  • VS Code：https://code.visualstudio.com/

  • Sublime Text：http://www.sublimetext.com/

你可以从以上软件的官网中下载对应的软件，按步骤安装即可。

HTML 头部元素

<head> 元素是所有头部元素的容器。 <head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息等。

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

Html注释

HTML注释是在HTML代码中添加注释的一种方法。这些注释不会在网页上显示，只是用于在HTML代码中记录注释和说明。在HTML中，使用“<!--”开始注释，使用“-->”结束注释。

例如，以下HTML代码中添加了一个注释：

<!DOCTYPE html>
<html>
<head><title>我的网站</title>
</head>
<body><!-- 这是我的首页 --><h1>欢迎来到我的网站！</h1><p>这是一个示例段落。</p>
</body>
</html>

HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

  • 定义了浏览器工具栏的标题

  • 当网页添加到收藏夹时，显示在收藏夹中的标题

  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>HTML文档标题</title></head><body>HTML文档内容......</body></html>

运行显示结果类似如下:

在这里插入图片描述

第一个Html网页

接下来我们来制作第一个html的网页

<! DOCTYPE html>
<html lang="en"><head><title>第一个html网页</title></head><body>网页显示的内容</body>
</html>

运行显示结果类似如下:

在这里插入图片描述

HTML 标题

HTML 标题由 <h1> 到 <h6> 标签组成，分别表示六个级别的标题。其中 <h1> 标签表示最高级别的标题，<h6> 标签表示最低级别的标题。如下所示：

<h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6>

运行显示结果类似如下:

在这里插入图片描述

HTML 段落

HTML 段落是通过标签 <p> 来定义的，HTML段落是指由一些文字组成的单个块，这些文字通常都有一个相关主题并且被一些空格和换行符隔开以便于阅读。在HTML中，我们可以使用<p>标签来定义一个段落。例如：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题</title></head><body><p>这是一个段落。</p><p>这是一个段落。</p><p>这是一个段落。</p></body>
</html>

运行显示结果类似如下:

在这里插入图片描述

HTML块和样式标签

HTML块是一组相关的HTML元素，通常用于组织内容。例如，常见的HTML块包括段落、标题、列表、表格等。

样式标签用于指定HTML元素的样式。有多种样式标签可用，其中包括：

  • <style>标签：在HTML文档中嵌入CSS样式表。
  • <link>标签：将CSS样式表链接到HTML文档中。
  • <div>标签：定义HTML中的一个通用容器，可以在其中应用样式
  • <span>标签：定义HTML中的一个行内元素，可以在其中应用样式。
  • <h1>-<h6>标签：定义HTML中的标题元素，可以应用样式。
  • <p>标签：定义HTML中的段落元素，可以应用样式。

这些样式标签可以帮助开发人员控制HTML元素的外观和布局。

以下是实列：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>块</title>
</head>
<body><div>已经可以用<em>双足</em>行走的、长得像<i>小型恐龙</i>的爬虫型数码宝贝。<br />
还在成长中，所以力量较弱，但性格相当凶猛，无所畏惧。双手双足都长出坚硬锋利的爪子，在战斗中也能发挥威力。<br />
预测其将会进化成强大且伟大的数码宝贝。奥义技是口吐火焰攻击敌人的<b>“小型火焰”</b>。 <br />
神经大条、性格直接,虽然还在成长中力量弱小，但是性格却相当勇猛<strong>无所畏惧</strong>，有时会有些鲁莽。<br />
十分贪吃，什么都想吃一口，只要有吃的就会非常开心。 <br /></div><br /><br /><br /><br /><div>已经可以用双足行走的、长得像小型恐龙的爬虫型数码宝贝。
还在成长中，所以力量较弱，但性格相当凶猛，无所畏惧。双手双足都长出坚硬锋利的爪子，在战斗中也能发挥威力。
预测其将会进化成强大且伟大的数码宝贝。奥义技是口吐火焰攻击敌人的“小型火焰”。 
神经大条、性格直接,虽然还在成长中力量弱小，但是性格却相当勇猛无所畏惧，有时会有些鲁莽。
十分贪吃，什么都想吃一口，只要有吃的就会<span>非常开心</span>。 </div>
</body>
</html>

运行显示结果类似如下:

在这里插入图片描述

相关文章：

Python武器库开发-前端篇之html概述(二十八)

前端篇之html概述(二十八) html概述 HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准&#xff0c;是构建以及呈现互联网内容的一种语言方式&#xff0e;被认为是互联网的核心技术之一。HTML产生于1990年&#xff0c;1997年HTML4成为互联网标准&#xff0c;…...

编程日记 2023/11/24 15:27:11

安防视频EasyCVR平台太阳能供电+4G摄像头视频监控方案的建设

在工地、光伏、风电站、水库河道等场景中&#xff0c;以及一些偏远地区的项目现场&#xff0c;会存在无网无电情况&#xff0c;大大制约了视频监控系统建设的效率及可行性。在这种场景中&#xff0c;我们也可以通过太阳能供电4G监控摄像机的方案&#xff0c;满足偏远地区无网无…...

编程日记 2023/11/24 15:26:10

12.位运算的性质（异或的性质）

文章目录 异或的性质求异或和问题[421. 数组中两个数的最大异或值](https://leetcode.cn/problems/maximum-xor-of-two-numbers-in-an-array/)[2935. 找出强数对的最大异或值 II](https://leetcode.cn/problems/maximum-strong-pair-xor-ii/) 异或前缀和问题&#xff08;最..回…...

编程日记 2023/11/24 15:25:09

国标直流充电枪9孔分别啥意思？

DC&#xff1a;直流电源正 DC-&#xff1a;直流电源负 PE&#xff1a;接地&#xff08;搭铁&#xff09;S&#xff1a;通讯CAN-H S-&#xff1a;通讯CAN-L CC1&#xff1a;充电连接确认 CC2&#xff1a;充电连接确认 A&#xff1a;12V A-&#xff1a;12V- 以上就是国标直流充电…...

编程日记 2023/11/24 15:24:08

关于 Google AMP 和 SEO

Google 于 2015 年首次推出 AMP&#xff0c;即加速移动页面。借助开源 AMP 框架&#xff0c;网页设计师可以制作快速加载的移动网页。该框架的创建是为了应对使用移动设备访问互联网的个人数量的增加。从那时起&#xff0c;谷歌一直在推动使用 AMP 来增强移动设备上的 SEO 和用…...

编程日记 2023/11/24 15:23:07

【SpringMVC】 对请求的不同响应

前言 本文学习如何运用不同的注解来返回不同的响应. 1.返回静态页面Controller 返回index.html页面 Controller 和 RestController的区别 controller 只有加上这个注解,Spring才会帮我们管理这个代码.后续我们访问时才能访问到. RestController 等同于 Controller ResponseBo…...

编程日记 2023/11/24 15:22:06

SQL进阶学习

1.[NISACTF 2022]join-us sql报错注入和联合注入 过滤&#xff1a; as IF rand() LEFT by updatesubstring handler union floor benchmark COLUMN UPDATE & sys.schema_auto_increment_columns && 11 database case AND right CAST FLOOR left updatexml DATABA…...

编程日记 2023/11/24 15:21:05

邦芒解析：做好职场规划防止跳槽失败

为了防止跳槽进入不适合自己的工作环境&#xff0c;你可以采取以下措施&#xff1a; 1、做好调研&#xff1a;在决定跳槽之前&#xff0c;尽可能了解新公司的情况。这包括公司的文化、工作氛围、发展前景以及团队成员之间的关系等。通过搜索公司网站、阅读员工评价以及与公司内…...

编程日记 2023/11/24 15:20:04

基于springboot实现实习管理系统的设计与实现项目【项目源码+论文说明】计算机毕业设计

基于sprinmgboot实现实习管理系统的设计与实现演示 摘要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;实习管理也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;…...

编程日记 2023/11/24 15:19:02

【华为OD题库-031】比赛的冠亚季军-java

题目 有N(3<N<10000)个运动员&#xff0c;他们的id为0到N-1,他们的实力由一组整数表示。他们之间进行比赛&#xff0c;需要决出冠亚军。比赛的规则是0号和1号比赛&#xff0c;2号和3号比赛&#xff0c;以此类推&#xff0c;每一轮&#xff0c;相邻的运动员进行比赛&#…...

编程日记 2023/11/24 15:18:01

电脑如何禁止截屏

禁止电脑截屏是一项重要的安全措施&#xff0c;可以保护用户隐私和防止恶意软件的使用。以下是几种禁止电脑截屏的方法&#xff1a; 形式一&#xff1a; 一刀切&#xff0c;全部禁止截屏 可以在域之盾软件后&#xff0c;点击桌面管理&#xff0c;然后选择禁止截屏。就能禁止所…...

编程日记 2023/11/24 15:17:00

【Web】NewStarCTF Week1 个人复现

目录 ①泄露的秘密 ②Begin of Upload ③Begin of HTTP ④ErrorFlask ⑤Begin of PHP ⑥R!C!E! ⑦EasyLogin ①泄露的秘密 盲猜/robots.txt,访问得到flag前半部分 第二个没试出来&#xff0c;老老实实拿dirsearch扫吧 访问/www.zip 下载附件&#xff0c;拿到第二部分…...

编程日记 2023/11/24 15:15:59

Android 提示框代码 java语言

在Android中&#xff0c;你可以使用 AlertDialog 类来创建提示框。以下是一个简单的Java代码示例&#xff0c;演示如何创建和显示一个基本的提示框&#xff1a; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; im…...

编程日记 2023/11/24 15:14:59

【c语言】二维数组的对角线对称交换

c语言&#xff0c;假设已经有了一个二维数组&#xff0c;对其进行对角线对称变换&#xff0c;如&#xff08;0&#xff0c;1&#xff09;与&#xff08;1&#xff0c;0&#xff09;变换&#xff0c;并打印。 示例 #include <stdio.h>void swap(int *a, int *b) {int te…...

编程日记 2023/11/24 15:13:57

Sulfo-CY3 NHS荧光染料的制备和表征

Sulfo-CY3 NHS(源自星戈瑞的花菁染料)荧光染料的制备和表征是确保染料质量和性能的关键步骤。制备Sulfo-CY3 NHS荧光染料&#xff1a; 原材料准备&#xff1a;准备所需的原材料&#xff0c;包括CY3 NHS ester&#xff08;或等效的前体&#xff09;&#xff0c;用于制备Sulfo-C…...

编程日记 2023/11/24 15:12:56

数字乡村：科技赋能农村产业升级

数字乡村&#xff1a;科技赋能农村产业升级 数字乡村是指通过信息技术和数字化手段&#xff0c;推动农业现代化、农村经济发展和农民增收的一种新模式。近年来&#xff0c;随着互联网技术的飞速发展&#xff0c;数字乡村开始在全国范围内迅速兴起&#xff0c;为乡村经济注入了新…...

编程日记 2023/11/24 15:11:56

K8S部署mongodb-sharded-cluster（7.0.2）副本分片

添加源 helm repo add bitnami https://charts.bitnami.com/bitnami指定版本拉取 helm pull --repo https://charts.bitnami.com/bitnami mongodb-sharded --version 7.0.5安装时选择SCRAM-SHA-1默认是SCRAM-SHA-256 helm install -n prod mymongodb mongodb-sharded --value…...

编程日记 2023/11/24 15:10:55

Dockerfile-CentOS7.9+Python3.11.2

本文为CentOS7.9下安装Python3.11.2环境的Dockerfile # CentOS with Python3.11.2 # Author xxmail.com# build a new image with basic centos FROM centos:centos7.9.2009 # who is the author MAINTAINER xxmail.comRUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/…...

编程日记 2023/11/24 15:08:53

自定义责任链Filter实现

核心接口 Filter package com.xxx.arch.mw.nbp.common.extension;import com.xxx.commons.data.domain.Result;/*** date 2023/08/25*/ public interface Filter {Result invoke(final Invoker invoker, final Invocation invocation); } Invoker package com.xxx.arch.mw.…...

编程日记 2023/11/24 15:07:50

NX二次开发UF_CSYS_create_matrix 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CSYS_create_matrix Defined in: uf_csys.h int UF_CSYS_create_matrix(const double matrix_values [ 9 ] , tag_t * matrix_id ) overview 概述 Creates a 3 x 3 matrix. 创建…...

编程日记 2023/11/24 15:06:49

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

在Mathematica中实现Newton-Raphson迭代的收敛时间算法（一般三次多项式）

考察一般的三次多项式&#xff0c;以r为参数&#xff1a; p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]&#xff1b; 此多项式的根为&#xff1a; 尽管看起来这个多项式是特殊的&#xff0c;其实一般的三次多项式都是可以通过线性变换化为这个形式…...

编程新知 2026/1/30 3:24:00

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

编程新知 2026/2/2 0:52:30

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

智能职业发展系统：AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

编程新知 2025/9/26 10:15:18

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...

编程新知 2026/2/8 23:54:57

篇章二 论坛系统——系统设计

目录 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 1. 数据库设计 1.1 数据库名: forum db 1.2 表的设计 1.3 编写SQL 2.系统设计 2.1 技术选型 2.2 设计数据库结构 2.2.1 数据库实体 通过需求分析获得概念类并结合业务实现过程中的技术需要&#x…...

编程新知 2026/2/5 5:58:30