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

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

news 2026/2/6 21:27:12

前端篇之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

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2026/2/2 23:40:18

MPNet：旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

编程新知 2026/1/31 16:21:10

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/1/26 21:34:05

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2026/1/23 4:15:03

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/1/28 5:43:51

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2026/1/30 6:03:31

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2026/2/4 2:38:01