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

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

news 2025/9/24 11:55:43

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/9/11 7:28:46

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/9/22 19:37:25

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/9/21 5:14:32

MFC内存泄露

1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...

编程新知 2025/9/22 11:40:56

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/7/27 1:33:21

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/9/16 17:08:01

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/23 15:59:11

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2025/7/9 18:52:53