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

Web前端:HTML篇(一)

HTML简介:

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上,由浏览器来解析。

一个简单的实例

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

运行结果:

HTML标签

如前所述,HTML是一种标记语言,使用各种标签来格式化内容。这些标签被封装在角括号内 <标签名>. 除了一些标签外,大多数标签都有相应的闭合标签。例如, <html> 有其闭合标签 </html> 和 <body> 标签有其闭合标签 </body> 等等。

标签的写法都是

<标签>元素</标签>

上面的HTML文档示例使用了以下标签 −

序号标签和描述
1<!DOCTYPE...> 此标签定义文档类型和HTML版本。
2<html> 此标签包含完整的HTML文档,主要由文档头部和文档主体组成,文档头部由<head>...</head>标签表示,文档主体由<body>...</body>标签表示。
3<head> 此标签表示文档的头部,可以包含其他HTML标签,如<title>,<link>等。
4<title> <title>标签用于在<head>标签中指定文档标题。
5<body> 此标签表示文档的主体,包含其他HTML标签,如<h1>,<div>,<p>等。
6<h1> 此标签表示标题。
7

<p> 此标签表示段落。

HTML 元素

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套(HTML 元素可以包含其他 HTML 元素)。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 空元素(换行符<br />)

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素(意味着它没有结束标签,因此这是错误的:<br></br>)。

在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

注意:请使用 <br> 标签来插入换行符,而不是用它来增加段落之间的空白。

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的,以下方式均可:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

对于设置 <meta charset="utf-8" /> 后出现网页乱码问题,其实归根到底就是:你通过 meta 标签设置的编码网页文件在保存时所使用的文档编码不相同造成的!

至于 360 浏览器会设置 GBK 为默认编码,

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset="utf-8" />,浏览器就绝对会按照 utf-8 编码解析网页,保存 html 文件时,文档编码和 meta 设置的编码,一定要相同,只要不相同,就一定会出现乱码!

之所以一定要写上 <!doctype html>,就是为了防止浏览器的怪异模式,强制浏览器按照标准模式渲染网页!

使用小写标签

HTML 标签对大小写不敏感:<P> 等同于 <p>。但在未来 (X)HTML 版本中强制使用小写。(我不知道,搜的),所以最好用小写。

相关文章:

Web前端:HTML篇(一)

HTML简介&#xff1a; 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用于创建网页的标准标记语言。 您可以使用 HTML 来建立自己的 WEB 站点&#xff0c;HTML 运行在浏览器上&#xff0c;由浏览器…...

ActiViz中的选择点vtkWorldPointPicker

文章目录 1. vtkWorldPointPicker简介2. 类的位置和继承关系3. 选择机制4. 返回的信息5. 选择的条件和参数6. 与屏幕空间选择器的比较7. 性能特征8. 应用场景9. 与其他vtk选择器的集成10. 完整示例总结1. vtkWorldPointPicker简介 vtkWorldPointPicker是Visualization Toolkit…...

如何开启或者关闭 Windows 安全登录?

什么是安全登录 什么是 Windows 安全登录呢&#xff1f;安全登录是 Windows 附加的一个组件&#xff0c;它可以在用户需要登录的之前先将登录界面隐藏&#xff0c;只有当用户按下 CtrlAltDelete 之后才出现登录屏幕&#xff0c;这样可以防止那些模拟登录界面的程序获取密码信息…...

【目标检测】Anaconda+PyTorch配置

前言 本文主要介绍在windows系统上的Anaconda、PyTorch关键步骤安装&#xff0c;为使用yolo所需的环境配置完善。同时也算是记录下我的配置流程&#xff0c;为以后用到的时候能笔记查阅。 Anaconda 软件安装 Anaconda官网&#xff1a;https://www.anaconda.com/ 另外&#…...

什么是离线语音识别芯片?与在线语音识别的区别

离线语音识别芯片是一种不需要联网和其他外部设备支持&#xff0c;‌上电即可使用的语音识别系统。‌它的应用场合相对单一&#xff0c;‌主要适用于智能家电、‌语音遥控器、‌智能玩具等&#xff0c;‌以及车载声控和一部分智能家居。‌离线语音识别芯片的特点包括小词汇量、…...

使用Diffusion Models进行街景视频生成

Diffusion Models专栏文章汇总&#xff1a;入门与实战 前言&#xff1a;街景图生成相当有挑战性&#xff0c;目前的文本到视频的方法仅限于生成有限范围的场景的短视频&#xff0c;文本到3D的方法可以生成单独的对象但不是整个城市。除此之外街景图对一致性的要求相当高&#x…...

UFO:革新Windows操作系统交互的UI聚焦代理

人工智能咨询培训老师叶梓 转载标明出处 人机交互的便捷性和效率直接影响着我们的工作和生活质量。尽管现代操作系统如Windows提供了丰富的图形用户界面&#xff08;GUI&#xff09;&#xff0c;使得用户能够通过视觉和简单的点击操作来控制计算机&#xff0c;但随着应用程序功…...

scp免密复制文件

实现在服务器A和服务器B之间使用scp命令免密互相传输文件 1. 在服务器A中免密复制到服务器B 1.1 生成服务器A的公钥私钥 #在服务器A中执行 ssh-keygen -t rsa -P ""命令执行完毕会在服务器A的 ~/.ssh 目录下生成两个文件&#xff1a;id_rsa 和 id_rsa.pub 1.2 拷…...

Maven 的模块化开发示例

Maven 的模块化开发是一种非常有效的软件开发方式&#xff0c;它允许你将一个大型的项目分割成多个更小、更易于管理的模块&#xff08;modules&#xff09;。每个模块都可以独立地构建、测试和运行&#xff0c;这不仅提高了开发效率&#xff0c;也便于团队协作和项目的维护。以…...

通过QT进行服务器和客户端之间的网络通信

客户端 client.pro #------------------------------------------------- # # Project created by QtCreator 2024-07-02T14:11:20 # #-------------------------------------------------QT core gui network #网络通信greaterThan(QT_MAJOR_VERSION, 4): QT widg…...

【STM32 HAL库】DMA+串口

DMA 直接存储器访问 DMA传输&#xff0c;将数据从一个地址空间复制到另一个地址空间。-----“数据搬运工”。 DMA传输无需CPU直接控制传输&#xff0c;也没有中断处理方式那样保留现场和恢复现场&#xff0c;它是通过硬件为RAM和IO设备开辟一条直接传输数据的通道&#xff0c…...

C#类型基础Part2-对象判等

C#类型基础Part2-对象判等 参考资料引用类型判等简单值类型判等复杂值类型判等 参考资料 《.NET之美-.NET关键技术深入解析》 引用类型判等 先定义两个类型&#xff0c;它们代表直线上的一个点&#xff0c;一个是引用类型class&#xff0c;一个是值类型struct public class…...

13.CSS 打印样式表 悬停下划线动画

CSS 打印样式表 虽然我们不经常从网上实际打印内容,但打印样式表不应被忽视。它们可以用来确保你的网站内容以一种易读和适合打印的方式呈现。这里有一个简单的、独特的打印样式表,你可以用它作为自己的基础: media print {page {size: A4;}body {margin: 0;padding: 0;}body, …...

C#基础:数据库分表的好处和实现方式

一、分表的好处&#xff1a; 1.提升查询速度&#xff1a;分表筛选后再拼接&#xff0c;而不是查大表&#xff0c;速度会显著提升 2.管理容易&#xff1a;根据业务需求&#xff0c;通常会按照时间或者空间来分表 3.提高并发性&#xff1a;降低锁竞争和查询阻塞的风险&#xf…...

基于3D开发引擎HOOPS平台的大型三维PLM系统的设计、开发与应用

产品生命周期管理&#xff08;Product Lifecycle Management&#xff0c;PLM&#xff09;系统在现代制造业中扮演着至关重要的角色。随着工业4.0和智能制造的推进&#xff0c;PLM系统从最初的CAD和PDM系统发展到现在的全面集成、协作和智能化的平台。本文将探讨基于HOOPS平台的…...

学习React(描述 UI)

React 是一个用于构建用户界面&#xff08;UI&#xff09;的 JavaScript 库&#xff0c;用户界面由按钮、文本和图像等小单元内容构建而成。React 帮助你把它们组合成可重用、可嵌套的 组件。从 web 端网站到移动端应用&#xff0c;屏幕上的所有内容都可以被分解成组件。在本章…...

mysql字符类型字段设置默认值为当前时间

-- 2024-07-22 10:22:20 select (DATE_FORMAT(CURRENT_TIMESTAMP, %Y-%m-%d %H:%i:%s)); ALTER TABLE tablename MODIFY COLUNN CREATE_DATE varchar (23) DEFAULT(DATE_FORMAT(CURRENT_TIMESTAMP, %Y-%m-%d %H:%i:%s)) COMMENT "创建日期;...

java题目之数字加密以及如何解密

public class Main6 {public static void main(String[] args) {// 某系统的数字密码&#xff08;大于0&#xff09;&#xff0c;比如1983&#xff0c;采用加密方式进行传输//定义了一个静态数组int []arr{1,9,8,3};//1.加密//先给每位数加上5for (int i 0; i <arr.length …...

Linux基于CentOS7【yum】【vim】的基础学习,【普通用户提权】

目录 yum生态 什么是yum yum是如何得知目标服务器的地址和下载链接 vim vim模式 命名模式 光标移动 插入模式 i键插 a键插 o键插 底行模式 批量化注释 批量化去注释 创建vim配置文件 例子 高亮功能&#xff1a; 缩进功能&#xff1a; 符号位自动补齐功能…...

盛元广通实验室自动化生物样本库质量控制管理系统

随着我国生物医学研究的不断深入和精准医疗的快速发展&#xff0c;对高质量生物样本的需求日益增长。近年来&#xff0c;我国生物样本库建设取得了显著进展。各级政府、高校和医院纷纷投入资源建设生物样本库&#xff0c;推动了生物样本资源的有效整合和利用。生物样本库的质量…...

Java | 自制AWT单词猜一猜小游戏(测试版)

目录 游戏标题 开发过程 开发想法 技术栈 代码呈现 导包 核心代码 游戏标题 探索知识的迷宫&#xff0c;体验自制AWT单词猜一猜小游戏 在数字时代&#xff0c;学习可以是多彩的&#xff0c;游戏可以是智慧的。我们自豪地推出“单词猜猜猜”是一款结合了教育与娱乐的自制…...

docker搭建ES 8.14 集群

参考&#xff1a;【docker搭建es8集群kibana】_docker 安装生产级 es 8.14 集群-CSDN博客 1、之前已搭建一台单机版的dockerES集群 参见 Elasticsearch docker 安装_docker 安装es8.14.3-CSDN博客 2、现在需要重新搭建为docker ES集群 准备新搭建3个点 一、准备工作 提前开…...

自定义特征的智能演进:Mojo模型中的动态特征选择控制

自定义特征的智能演进&#xff1a;Mojo模型中的动态特征选择控制 在机器学习领域&#xff0c;特征选择是提升模型性能和泛化能力的关键步骤。Mojo模型&#xff0c;作为一种高效的模型部署方式&#xff0c;其对特征的动态选择和控制能力是实现高级机器学习应用的重要特性。本文…...

Git->Git生成patch和使用patch

生成patch git format-patch -1 HEAD -o "输出目录"format-patch&#xff1a;用于生成补丁文件-1&#xff1a;-1 表示最近一次提交&#xff0c;-2 表示生成最近两次提交的补丁。HEAD&#xff1a;HEAD 指向当前分支的最新提交-o&#xff1a;指定生成的补丁文件的输出…...

开发面试算法题求教

在《无尽的拉格朗日》中&#xff0c;有许多不同的星系建筑物。每个星系建筑物的等级不同&#xff0c;带来的影响力也不同。 已知宇宙可以抽象为一个无穷大的平面直角坐标系&#xff0c;现在给定了每个星系建筑物的所在坐标(xi,yi)和它的影响力ri&#xff0c;距离其切比雪夫距离…...

OpenStack中nova的架构

1.1 nova-api 负责接收和相应客户的API调用。 1.2 compute core nova-schedule 负责决定在哪个计算节点运行虚拟机。 nova-compute 通过调用Hypervisor实现虚拟机生命周期的管理。一般运行在计算节点。 hypervisor 对虚拟机进行硬件虚拟化的管理软件&#xff…...

力扣高频SQL 50题(基础版)第五题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第五题1683. 无效的推文题目说明&#xff1a;思路分析&#xff1a;实现过程&#xff1a;结果截图&#xff1a; 力扣高频SQL 50题&#xff08;基础版&#xff09;第五题 1683. 无效的推文 题目说明&#xff1a; 表&a…...

Air780EP- AT开发-阿里云应用指南

简介 使用AT方式连接阿里云分为一机一密和一型一密两种方式&#xff0c;其中一机一密又包括HTTP认证二次连接和MQTT直连两种方式 关联文档和使用工具&#xff1a; AT固件获取在线加/解密工具阿里云平台 准备工作 Air780EP_全IO开发板一套&#xff0c;包括天线SIM卡&#xff0…...

【中项】系统集成项目管理工程师-第4章 信息系统架构-4.4数据架构

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…...

excel批量新建多个同类型的表格

背景引入 比如&#xff0c;一个企业有多个部门&#xff0c;现在需要按照某一个excel表模板收集各个部门的信息&#xff0c;需要创建数十个同类型表格&#xff0c;且标题要包含部门名称。 1.修改模板表格标题 在一个文件夹下面放入需要发放给各个部门的表格&#xff0c;将标题…...

React Native 与 Flutter:你的应用该如何选择?

Flutter 和 React Native 都被认为是混合应用程序开发中的热门技术。然而&#xff0c;当谈到为你的项目使用框架时&#xff0c;你必须考虑哪一个是最好的&#xff1a;Flutter 还是 React Native&#xff1f; 本篇文章包含 Flutter 和 React Native 在各个方面的差异。因此&…...

DP学习——状态模式

学而时习之&#xff0c;温故而知新。 状态模式 角色 2个角色&#xff0c;引用类&#xff0c;状态行为类。 和策略模式很相似 状态行为封装成很多独立的状态行为类——就是把不同的状态及其要执行的方法单独封装起来。 而策略模式类似&#xff0c;是不同的算法封装成一个个…...

前端性能优化面试题汇总

面试题 1. 简述如何对网站的文件和资源进行优化? 参考回答&#xff1a; 举列&#xff1a; 1.文件合并&#xff08;目的是减少http请求&#xff09;&#xff1a;使用css sprites合并图片&#xff0c;一个网站经常使用小图标和小图片进行美化&#xff0c;但是很遗憾这些小图片…...

C#基于SkiaSharp实现印章管理(4)

前几篇文章实现了绘制不同外形印章的功能&#xff0c;印章内部一般包含圆形、线条等形状&#xff0c;有些印章内部还有五角星&#xff0c;然后就是各种样式的文字。本文实现在印章内部绘制圆形、线条、矩形、椭圆等四种形状。   定义FigureType枚举记录印章内部形状&#xff…...

Vue全家桶 - pinia 的理解和学习2(Pinia 核心概念的插件、组件外的 Store 和 服务器渲染(SSR))

Pinia&#xff08;Vue 的专属状态管理库&#xff09; Vue全家桶 - pinia 的理解和学习1&#xff08;Pinia 核心概念的 Store、State、Getter、Action&#xff09; https://blog.csdn.net/weixin_54092687/article/details/140520675 插件 由于有了底层 API 的支持&#xff0c…...

数学建模(6)——预测类模型目录

预测模型是一类通过分析和建模历史数据来预测未来结果的算法或模型。这些模型广泛应用于各种领域&#xff0c;包括金融、医疗、市场营销、气象、制造业等。以下是一些常见的预测模型&#xff1a; 1. 回归模型 线性回归&#xff08;Linear Regression&#xff09;&#xff1a;…...

安卓刷入系统证书

设备&#xff1a;Pixel XL 证书&#xff1a;reqable-ca.crt 刷入前需要手机已刷入Magisk 使用USB充电线连接手机&#xff0c;打开Windows终端面板手机打开Magisk&#xff0c;开启Shell的Root权限Windows终端输入su获取root权限查看SELinux状态并修改为Permissive修改system分…...

中科亿海微信号采集核心板在振动采集场景中的应用

在工业现场控制领域&#xff0c;对于旋转物体的速度我们通用的做法是测量旋转所产生的振动量来倒推设备的转速值。振动采集系统是一种广泛用于检测和记录系统振动的设备&#xff0c;整体包括传感器和数据采集两部分。传感器类型包括加速度传感器、速度传感器和位移传感器&#…...

`panic` 是 Go 语言中用来表示发生了严重错误的一种机制

目录 panic 是 Go 语言中用来表示发生了严重错误的一种机制案例goroutine空指针是什么栈展开是什么defer 语句会按照 LIFO&#xff08;后进先出&#xff09;的顺序执行 panic 是 Go 语言中用来表示发生了严重错误的一种机制 在 Go 程序中&#xff0c;panic 是一种运行时错误&a…...

【BUG】已解决:requests.exceptions.ProxyError: HTTPSConnectionPool

已解决&#xff1a;requests.exceptions.ProxyError: HTTPSConnectionPool 目录 已解决&#xff1a;requests.exceptions.ProxyError: HTTPSConnectionPool 【常见模块错误】 原因分析 解决方案 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&am…...

Python实现招聘数据采集 ,并做可视化分析

转眼秋招快到了&#xff0c; 今天来学习一下如何用Python采集全网招聘数据&#xff0c;并进行可视化分析&#xff0c;为就业准备~ 话不多说开始造 源码和详细的视频讲解我都打包好了&#xff0c;文末名片自取 准备工作 首先你需要准备这些 环境 Python 3.10 Pycharm 模块…...

ES中的数据类型学习之Aggregate metric(聚合计算)

Aggregate metric field type | Elasticsearch Guide [7.17] | Elastic 对于object类型的字段来说&#xff0c;可以存子字段为 min/max/sum/value_count PUT my-index {"mappings": {"properties": {"my-agg-metric-field": { -- 字段名"ty…...

看准JS逆向案例:webpack逆向解析

&#x1f50d; 逆向思路与步骤 抓包分析与参数定位 首先&#xff0c;我们通过抓包工具对看准网的请求进行分析。 发现请求中包含加密的参数b和kiv。 为了分析这些加密参数&#xff0c;我们需要进一步定位JS加密代码的位置。 扣取JS加密代码 定位到JS代码中的加密实现后&a…...

【C语言】 利用栈完成十进制转二进制(分文件编译,堆区申请空间malloc)

利用栈先进后出的特性&#xff0c;在函数内部&#xff0c;进行除二取余的操作&#xff0c;把每次的余数存入栈内&#xff0c;最后输出刚好就是逆序输出&#xff0c;为二进制数 学习过程中&#xff0c;对存储栈进行堆区的内存申请时候&#xff0c;并不是很熟练&#xff0c;一开始…...

如何解决ChromeDriver 126找不到chromedriver.exe问题

引言 在使用Selenium和ChromeDriver进行网页自动化时&#xff0c;ChromeDriver与Chrome浏览器版本不匹配的问题时有发生。最近&#xff0c;许多开发者在使用ChromeDriver 126时遇到了无法找到chromedriver.exe文件的错误。本文将介绍该问题的原因&#xff0c;并提供详细的解决…...

Anaconda下安装配置Jupyter

Anaconda下安装配置Jupyter 1、安装 conda activate my_env #激活虚拟环境 pip install jupyter #安装 jupyter notebook --generate-config #生成配置文件提示配置文件的位置&#xff1a; Writing default config to: /root/.jupyter/jupyter_notebook_config.py检查版本&am…...

蓝队黑名单IP解封提取脚本

应用场景&#xff1a;公司给蓝队人员一个解封IP列表&#xff0c;假如某个IP满足属于某某C段&#xff0c;则对该IP进行解封。该脚本则是进行批量筛选出符合条件的白名单IP 实操如下&#xff1a;公司给了一个已经封禁了的黑名单IP列表如下&#xff08;black&#xff09; 公司要求…...

共享充电桩语音ic方案,展现它的“说话”的能力

随着电动汽车的普及&#xff0c;充电设施的便捷性、智能化需求日益凸显&#xff0c;共享充电桩语音IC应运而生&#xff0c;成为连接人与机器、实现智能交互的桥梁。本文将为大家介绍共享充电桩语音ic的概述、应用词条以及优势&#xff0c;希望能够帮助您。 一、NV170D语音ic概述…...

ARM 单片机裸机任务调度框架

前言&#xff1a; 在没有使用操作系统的情况下&#xff0c;一个合理的裸机任务调度方式&#xff0c;可以更好的提供数据的处理&#xff0c;和用户体验&#xff0c;有多种任务调度的方式。 方案 1&#xff1a; 从上到下的任务调度方式&#xff0c;C语言程序的代码是在main函数…...

.Net 8 控制台程序部署(Linux篇)

在无流量Linux环境下部署.NET8开发的控制台程序 写在前面准备远程访问安装环境程序部署1.下载并导入2.解压并配置3.发布程序4.创建Systemd服务单元文件5.启用并启动服务 写在结尾 写在前面 好久没更新文章了&#xff0c;今天给大家带来的是在在无流量的Linux工控机上部署.Net8…...