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

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

运行显示结果类似如下:

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/168193.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

虹科Pico汽车示波器 | 汽车免拆检修 | 2011款瑞麒M1车发动机起动困难、加速无力

虹科Pico汽车示波器 | 汽车免拆检修 | 2011款瑞麒M1车发动机起动困难、加速无力

一、故障现象 一辆2011款瑞麒M1车&#xff0c;搭载SQR317F发动机&#xff0c;累计行驶里程约为10.4万km。该车因发动机起动困难、抖动、动力不足、热机易熄火等故障进厂维修。用故障检测仪检测&#xff0c;发动机控制单元&#xff08;ECU&#xff09;中存储有故障代码“P0340相…
阅读更多...
Vue框架学习笔记——事件处理

Vue框架学习笔记——事件处理

文章目录 前文提要事件处理的解析过程样例代码如下&#xff1a;效果展示图片&#xff1a;v-on:click"响应函数"v-on:click简写形式响应函数添加响应函数传参占位符"$event"注意事项 前文提要 本人仅做个人学习记录&#xff0c;如有错误&#xff0c;请多包…
阅读更多...
2、git进阶操作

2、git进阶操作

2、git进阶操作 2.1.1 分支的创建 命令参数含义git branch (git checkout -b)<new_branch> <old_branch>表示创建分支-d <-D>删除分支 –d如果分支没有合并&#xff0c;git会提醒&#xff0c;-D强制删除-a -v查看分支-m重新命名分支commit id从指定的commi…
阅读更多...
如何打造“面向体验”的音视频能力——对话火山引擎王悦

如何打造“面向体验”的音视频能力——对话火山引擎王悦

编者按&#xff1a;随着全行业视频化的演进&#xff0c;我们置身于一个充满创新与变革的时代。在这个数字化的浪潮中&#xff0c;视频已经不再只是传递信息的媒介&#xff0c;更是重塑了我们的交互方式和体验感知。作为字节跳动的“能力溢出”&#xff0c;火山引擎正在飞速奔跑…
阅读更多...
RK3588平台 USB框架与USB识别流程

RK3588平台 USB框架与USB识别流程

一.USB的基本概念 在最初的标准里&#xff0c;USB接头有4条线&#xff1a;电源&#xff0c;D-,D,地线。我们暂且把这样的叫做标准的USB接头吧。后来OTG出现了&#xff0c;又增加了miniUSB接头。而miniUSB接头则有5条线&#xff0c;多了一条ID线,用来标识身份用的。 热插拔&am…
阅读更多...
最新AIGC创作系统ChatGPT网站源码，Midjourney绘画系统，支持GPT-4图片对话能力（上传图片并识图理解对话）,支持DALL-E3文生图

最新AIGC创作系统ChatGPT网站源码，Midjourney绘画系统，支持GPT-4图片对话能力（上传图片并识图理解对话）,支持DALL-E3文生图

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…
阅读更多...
2023亚太杯数学建模B题完整原创论文讲解

2023亚太杯数学建模B题完整原创论文讲解

大家好呀&#xff0c;从发布赛题一直到现在&#xff0c;总算完成了2023亚太地区数学建模竞赛B题玻璃温室的微气候调控完整的成品论文。 本论文可以保证原创&#xff0c;保证高质量。绝不是随便引用一大堆模型和代码复制粘贴进来完全没有应用糊弄人的垃圾半成品论文。 论文共6…
阅读更多...
软著项目推荐 深度学习 opencv python 实现中国交通标志识别

软著项目推荐 深度学习 opencv python 实现中国交通标志识别

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 &#x1f525; 优质…
阅读更多...
游览器缓存讲解

游览器缓存讲解

浏览器缓存是指浏览器在本地存储已经请求过的资源的一种机制&#xff0c;以便在将来的请求中能够更快地获取这些资源&#xff0c;减少对服务器的请求&#xff0c;提高页面加载速度。浏览器缓存主要涉及到两个方面&#xff1a;缓存控制和缓存位置。 缓存控制 Expires 头&#…
阅读更多...
RAM模型从数据准备到pretrain、finetune与推理全过程详细说明

RAM模型从数据准备到pretrain、finetune与推理全过程详细说明

提示&#xff1a;RAM模型&#xff1a;环境安装、数据准备与说明、模型推理、模型finetune、模型pretrain等 文章目录 前言一、环境安装二、数据准备与解读1.数据下载2.数据标签内容解读3.标签map内容解读 三、finetune训练1.微调训练命令2.load载入参数问题3.权重载入4.数据加载…
阅读更多...
使用new Vue()的时候发生了什么？

使用new Vue()的时候发生了什么？

前言 Vue.js是一个流行的JavaScript前端框架&#xff0c;用于构建单页面应用&#xff08;SPA&#xff09;和用户界面。当我们使用new Vue()来创建一个Vue实例时&#xff0c;Vue会执行一系列的初始化过程&#xff0c;将数据变成响应式&#xff0c;编译模板&#xff0c;挂载实例…
阅读更多...
RabbitMQ之发送者（生产者）可靠性

RabbitMQ之发送者（生产者）可靠性

文章目录 前言一、生产者重试机制二、生产者确认机制实现生产者确认&#xff08;1&#xff09;定义ReturnCallback&#xff08;2&#xff09;定义ConfirmCallback 总结 前言 生产者重试机制、生产者确认机制。 一、生产者重试机制 问题&#xff1a;生产者发送消息时&#xff0…
阅读更多...
分布式事务总结

分布式事务总结

文章目录 一、分布式事务基础什么是事务&#xff1f;本地事物分布式事务分布式事务的场景 二、分布式事务解决方案全局事务可靠消息服务TCC 事务 三、Seata 分布式事务解决方案3.1 Seata-At模式3.2 秒杀项目集成 Seata启动 Seata-Server项目集成seata配置AT模式代码实现 3.3 Se…
阅读更多...
openstack（2）

openstack（2）

目录 块存储服务 安装并配置控制节点 安装并配置一个存储节点 验证操作 封装镜像 上传镜像 块存储服务 安装并配置控制节点 创建数据库 [rootcontroller ~]# mysql -u root -pshg12345 MariaDB [(none)]> CREATE DATABASE cinder; MariaDB [(none)]> GRANT ALL PR…
阅读更多...
1、Docker概述与安装

1、Docker概述与安装

相关资源网站&#xff1a; ● docker官网&#xff1a;http://www.docker.com ● Docker Hub仓库官网: https://hub.docker.com/ 注意&#xff0c;如果只是想看Docker的安装&#xff0c;可以直接往下拉跳转到Docker架构与安装章节下的Docker具体安装步骤&#xff0c;一步步带你安…
阅读更多...
82基于matlab GUI的图像处理

82基于matlab GUI的图像处理

基于matlab GUI的图像处理&#xff0c;功能包括图像一般处理&#xff08;灰度图像、二值图&#xff09;&#xff1b;图像几何变换&#xff08;旋转可输入旋转角度、平移、镜像&#xff09;、图像边缘检测&#xff08;拉普拉斯算子、sobel算子、wallis算子、roberts算子&#xf…
阅读更多...
【Rust日报】2023-11-22 Floneum -- 基于 Rust 的一款用于 AI 工作流程的图形编辑器

【Rust日报】2023-11-22 Floneum -- 基于 Rust 的一款用于 AI 工作流程的图形编辑器

Floneum -- 基于 Rust 的一款用于 AI 工作流程的图形编辑器 Floneum 是一款用于 AI 工作流程的图形编辑器&#xff0c;专注于社区制作的插件、本地 AI 和安全性。 Floneum 有哪些特性&#xff1a; 可视化界面&#xff1a;您无需任何编程知识即可使用Floneum。可视化图形编辑器可…
阅读更多...
oled的使用 动态的变量 51

oled的使用 动态的变量 51

源码均在IIC手写程序中 外部中断实现变量加一 #include "reg52.h" #include "main.h" #include <intrins.h> #include "OLED.h" #include "bmp.h" #include "Delay.h" sbit LED1 P1^0; sbit LED2 P1^1; sbit LED3…
阅读更多...
Python报错：AttributeError（类属性、实例属性）

Python报错：AttributeError（类属性、实例属性）

Python报错&#xff1a;AttributeError&#xff08;类属性、实例属性&#xff09; Python报错&#xff1a;AttributeError 这个错误就是说python找不到对应的对象的属性&#xff0c;百度后才发现竟然是初始化类的时候函数名写错了 __init__应该有2条下划线&#xff0c;如果只有…
阅读更多...
构建未来：云计算 生成式 AI 诞生科技新局面

构建未来：云计算 生成式 AI 诞生科技新局面

目录 引言生成式 AI&#xff1a;开发者新伙伴云计算与生成式 AI 的无缝融合亚马逊云与生成式 AI 结合的展望/总结我用亚马逊云科技生成式 AI 产品打造了什么&#xff0c;解决了什么问题未来科技发展趋势&#xff1a;开发者的机遇与挑战结合实践看未来结语开源项目 引言 2023年…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023