【前端】制作一个简单的网页(2)
| 单标签组成的元素 这类标签不需要内容产生效果,通常表示对网页的某种行为,它们不用标记任何内容,开始即是结束。 比如,<hr>标签的作用是在网页中添加一条分割线,它仅包含开始标签,是一个单标签元素。 |
|
有时我们还需要为元素添加更多的信息,解决诸如下面的问题:
这个元素的颜色是什么?
元素内容使用了哪一种语言?
元素展示了哪一张图片?
...
此时,我们可以在标签中添加属性。
属性
定义
HTML 属性(或简称为属性)能够为 HTML 标签提供一些额外信息。
隐喻
若把HTML标签比作商品的吊牌,属性就是吊牌上用来描述商品的附加信息。
| 属性可以为网页元素提供更多信息, 它总是以属性名/值对的形式出现。 右边展示了网页中常见的两个属性。 |
|
HTML 属性有很多,大致可以分为下面两种类型:
通用属性:适用于大部分或者所有 HTML 标签;
专用属性:只适用于一个或者几个特定的 HTML 标签。
我们会在后面的课程中陆续学习每个属性的用法与分类。
| 设置属性的位置 一个标签可以没有属性,也可以有一个或多个属性。 属性需要设置在开始标签后,并使用空格与标签名分开,格式为<标签名 属性1 属性2>。 |
|
| 属性的结构 通常情况下,HTML属性由属性名与属性值两个部分组成,结构为属性名="属性值"。 需要注意的是,属性值中的内容需要放在一对引号中。 |
|

一个基本的HTML文档。
右图展示了一个简易的网页,它会在屏幕中显示:
“第一个网页”。

| HTML 文档的最外层结构由两个元素确定: 第一个元素是:DOCTYPE; 第二个元素是:HTML。 | |
| <!DOCTYPE html> <!DOCTYPE html>是一个特殊的标签,总是放在HTML文档的第一行。 它的作用是让浏览器明白其处理的是HTML文档。 doc - document - 文件; type - 类型; | ![]() |
| <html> 紧跟着<!DOCTYPE html>的是HTML元素的开始标签。 html 是根元素,它告诉浏览器网页从<html>开始,到</html>结束。 也就是说,网页的所有内容都放在html元素中。 | ![]() |
| 有时你会发现<html>标签中设定了一个名为lang的属性,它用来告诉浏览器这是“网页使用的语言”。 比如,"en" 表示这个网页的主要语言是英文。 当浏览器识别到你常用的语言(比如中文)与lang中的语言不一致,会自动询问你是否需要翻译网页内容。 当浏览器识别到你常用的语言(比如中文)与lang中的语言不一致,会自动询问你是否需要翻译网页内容。 | ![]() |
相关文章:
【前端】制作一个简单的网页(2)
单标签组成的元素 这类标签不需要内容产生效果,通常表示对网页的某种行为,它们不用标记任何内容,开始即是结束。 比如,<hr>标签的作用是在网页中添加一条分割线,它仅包含开始标签,是一个单标签元素。…...
OpenAI Canvas:提升编程与写作效率的全新工作界面
随着人工智能技术的飞速发展,大语言模型(LLM)不仅限于生成文本,还能逐步扩展至编程、设计等任务的支持。近期,OpenAI 推出了一个名为 Canvas 的全新功能,专门用于协助用户进行编程和写作。这一功能与 Claud…...
将SpringBoot的Maven项目打成jar包和war包
先需要明确的是,该项目打包的形态是可执行的jar包,还是在tomcat下运行的war包。 springboot自带的maven打包 1.创建一个springboot web项目 1.api控制层HelloWorld.java RestController RequestMapping("/hello") public class HelloWorld …...
【Iceberg分析】Spark与Iceberg集成之常用存储过程
文章目录 Spark与Iceberg集成之常用存储过程调用语法调用样例表快照管理快照回滚根据snapshotid进行回滚根据timestamp进行回滚 设置表当前生效的快照 表元数据管理设置快照过期时间清除孤岛文件重写数据文件运用参数示例optionsGeneral OptionsOptions for sort strategyOptio…...
[旧日谈]关于Qt的刷新事件频率,以及我们在Qt的框架上做实时的绘制操作时我们该关心什么。
[旧日谈]关于Qt的刷新事件频率,以及我们在Qt的框架上做实时的绘制操作时我们该关心什么。 最近在开发的时候,发现一个依赖事件来刷新渲染的控件会导致程序很容易异常和崩溃。 当程序在运行的时候,其实软件本身的负载并不高,所以…...
云上考场小程序+ssm论文源码调试讲解
2 关键技术简介 2.1 微信小程序 微信小程序,简称小程序,英文名Mini Program,是一种全新的连接用户与服务的方式,可以快速访问、快速传播,并具有良好的使用体验。 小程序的主要开发语言是JavaScript,它与…...
城域网——IP城域网、城域以太网、光城域网
一、城域网 1、城域网(Metropolitan Area Network,MAN):一个城市范围内所建立的计算机通信网。 2、分布式队列双总线(Distributed Queue Dual Bus,DQDB):即IEEE802.6,由…...
华为Eth-trunk链路聚合加入到E-trunk实现跨设备的链路聚合
一、适用场景(注:e-trunk与eth-trunk是2个不同的概念) 1、企业中有重要的server服务器业务不能中断的情况下,可将上行链路中的汇聚交换机,通过eth-trunk链路聚合技术,实现链路故障后,仍有可用的…...
【网络安全】JSONP劫持原理及攻击实战
未经许可,不得转载。 文章目录 JSONP简介JSONP工作原理JSONP劫持Callback可定义问题JSONP简介 JSONP(JavaScript Object Notation Padding)是一种用于绕过浏览器同源策略限制的技术,使得网页可以从不同域名的服务器请求数据。由于浏览器的同源策略限制,网页通常只能向与其…...
VR全景摄影的拍摄和编辑软件推荐
随着虚拟现实技术的不断进步,VR全景摄影逐渐成为商业、娱乐和教育等多个领域中的重要工具。通过专业的设备与软件,摄影师能够创作出沉浸式的360度全景作品,为观众提供身临其境的视觉体验。在这篇文章中,我们将介绍VR全景摄影的相关…...
linux:使用sar诊断问题
使用sar诊断问题 1. CPU 使用情况2. 内存与交换3. 磁盘 I/O 活动4. 网络 I/O 活动5. 进程与上下文切换6. 系统调用与文件活动7. 电源管理8. 延迟分析9. 系统全局统计10. 查看历史记录11. 特定时间段12. 自动定时采样其他参数:使用实例: sar(S…...
CUDA编程技巧(不断搜集更新)
1 使用位运算替换部分乘法或除法 位移操作主要适用于无符号整数,对于带符号数的位移,特别是负数,可能会导致问题,如果你需要对负数执行除法或者乘法,最好谨慎使用位移运算。 1.1 替换除法 当需要将一个数除以 2、4、…...
云计算(第二阶段):mysql后的shell
第一章:变量 前言 什么是shell Shell 是一种提供用户与操作系统内核交互的工具,它接受用户输入的命令,解释后交给操作系统去执行。它不仅可以作为命令解释器,还可以通过脚本完成一系列自动化任务。 shell的特点 跨平台:…...
Debian12离线部署Mysql全网最详细教程
一、下载安装所需要的库 1、所需要的库 # 所需要的库有 libc6_2.36-9deb12u8_amd64.deb libgcc-s1_12.2.0-14_amd64.deb libstdc6_12.2.0-14_amd64.deb gcc-12-base_12.2.0-14_amd64.deb psmisc_23.6-1_amd64.deb libnuma1_2.0.18-1_amd64.deb libmecab2_0.996-14b14_amd64.d…...
文本生成视频技术:艺术与科学的交汇点
在人工智能技术的飞速发展下,文本生成视频(Text-to-Video)技术已经成为现实。这项技术能够根据文本描述生成相应的视频内容,极大地拓展了内容创作的边界。本文将从三个主要方面对文本生成视频技术进行深入探讨:技术能达…...
【Windows】【DevOps】Windows Server 2022 采用WinSW将一个控制台应用程序作为服务启动(方便)
下载WinSW 项目地址: GitHub - winsw/winsw: A wrapper executable that can run any executable as a Windows service, in a permissive license. 下载地址: https://github.com/winsw/winsw/releases/download/v2.12.0/WinSW-x64.exe 参考配置模…...
OpenAI董事会主席Bret Taylor的Agent公司Sierra:专注于赋能下一代企业用户体验
本文由readlecture.cn转录总结。ReadLecture专注于音、视频转录与总结,2小时视频,5分钟阅读,加速内容学习与传播。 视频来源 youtube: https://www.youtube.com/watch?vriWB5nPNZEM&t47s 大纲 介绍 欢迎与介绍 介绍Bret Taylor&#x…...
【linux】信号(下)
8. 阻塞信号 (一)信号其他相关常见概念 实际执行信号的处理动作称为信号递达(Delivery)信号从产生到递达之间的状态,称为信号未决(Pending)进程可以选择阻塞 (Block )某个信号被阻塞的信号产生时将保持在未决状态,直到进程解除对此信号的阻塞,才执行递达的动作(即被阻塞的信…...
Notepad++ 初学者指南
引言 对于初学者来说,选择合适的编程工具很重要,特别是考虑到易用性和计算机资源的需求。 虽然集成开发环境(IDE)如 Eclipse、IntelliJ IDEA 和 Visual Studio 提供了许多强大的功能,但对于刚开始学习编程的人来说&a…...
Web Socket 使用详解
在信息爆炸的时代,用户对网页的期待早已超越了静态内容的展示。实时聊天、股票报价、协同编辑等功能的实现,都离不开服务器与客户端之间持续、高效的数据交互。传统的HTTP请求-响应模型难以满足这种需求,而WebSocket的出现,为构建…...
UE5 学习系列(二)用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇,在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下: 【Note】:如果你已经完成安装等操作,可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作,重…...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
Python:操作 Excel 折叠
💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
Cesium1.95中高性能加载1500个点
一、基本方式: 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表,若其中包含环,则输出环的入口节点。 若其中不包含环,则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!
一、引言 在数据驱动的背景下,知识图谱凭借其高效的信息组织能力,正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合,探讨知识图谱开发的实现细节,帮助读者掌握该技术栈在实际项目中的落地方法。 …...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...




