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

【前端】制作一个简单的网页（2）

news 2026/2/7 14:37:20

单标签组成的元素

这类标签不需要内容产生效果，通常表示对网页的某种行为，它们不用标记任何内容，开始即是结束。

比如，<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）

单标签组成的元素 这类标签不需要内容产生效果&#xff0c;通常表示对网页的某种行为&#xff0c;它们不用标记任何内容&#xff0c;开始即是结束。 比如&#xff0c;<hr>标签的作用是在网页中添加一条分割线&#xff0c;它仅包含开始标签&#xff0c;是一个单标签元素。…...

编程日记 2024/10/14 13:13:03

OpenAI Canvas：提升编程与写作效率的全新工作界面

随着人工智能技术的飞速发展&#xff0c;大语言模型&#xff08;LLM&#xff09;不仅限于生成文本&#xff0c;还能逐步扩展至编程、设计等任务的支持。近期&#xff0c;OpenAI 推出了一个名为 Canvas 的全新功能&#xff0c;专门用于协助用户进行编程和写作。这一功能与 Claud…...

编程日记 2024/10/14 13:12:02

将SpringBoot的Maven项目打成jar包和war包

先需要明确的是&#xff0c;该项目打包的形态是可执行的jar包&#xff0c;还是在tomcat下运行的war包。 springboot自带的maven打包 1.创建一个springboot web项目 1.api控制层HelloWorld.java RestController RequestMapping("/hello") public class HelloWorld …...

编程日记 2024/10/14 13:05:56

【Iceberg分析】Spark与Iceberg集成之常用存储过程

文章目录 Spark与Iceberg集成之常用存储过程调用语法调用样例表快照管理快照回滚根据snapshotid进行回滚根据timestamp进行回滚 设置表当前生效的快照 表元数据管理设置快照过期时间清除孤岛文件重写数据文件运用参数示例optionsGeneral OptionsOptions for sort strategyOptio…...

编程日记 2024/10/14 13:04:54

[旧日谈]关于Qt的刷新事件频率，以及我们在Qt的框架上做实时的绘制操作时我们该关心什么。

[旧日谈]关于Qt的刷新事件频率&#xff0c;以及我们在Qt的框架上做实时的绘制操作时我们该关心什么。 最近在开发的时候&#xff0c;发现一个依赖事件来刷新渲染的控件会导致程序很容易异常和崩溃。 当程序在运行的时候&#xff0c;其实软件本身的负载并不高&#xff0c;所以…...

编程日记 2024/10/14 13:03:53

云上考场小程序+ssm论文源码调试讲解

2　关键技术简介 2.1 微信小程序 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种全新的连接用户与服务的方式&#xff0c;可以快速访问、快速传播&#xff0c;并具有良好的使用体验。 小程序的主要开发语言是JavaScript&#xff0c;它与…...

编程日记 2024/10/14 13:02:52

城域网——IP城域网、城域以太网、光城域网

一、城域网 1、城域网&#xff08;Metropolitan Area Network&#xff0c;MAN&#xff09;&#xff1a;一个城市范围内所建立的计算机通信网。 2、分布式队列双总线&#xff08;Distributed Queue Dual Bus&#xff0c;DQDB&#xff09;&#xff1a;即IEEE802.6&#xff0c;由…...

编程日记 2024/10/14 13:01:50

华为Eth-trunk链路聚合加入到E-trunk实现跨设备的链路聚合

一、适用场景&#xff08;注&#xff1a;e-trunk与eth-trunk是2个不同的概念&#xff09; 1、企业中有重要的server服务器业务不能中断的情况下&#xff0c;可将上行链路中的汇聚交换机&#xff0c;通过eth-trunk链路聚合技术&#xff0c;实现链路故障后&#xff0c;仍有可用的…...

编程日记 2024/10/14 12:58:44

【网络安全】JSONP劫持原理及攻击实战

未经许可，不得转载。 文章目录 JSONP简介JSONP工作原理JSONP劫持Callback可定义问题JSONP简介 JSONP（JavaScript Object Notation Padding）是一种用于绕过浏览器同源策略限制的技术，使得网页可以从不同域名的服务器请求数据。由于浏览器的同源策略限制，网页通常只能向与其…...

编程日记 2024/10/14 12:57:43

VR全景摄影的拍摄和编辑软件推荐

随着虚拟现实技术的不断进步&#xff0c;VR全景摄影逐渐成为商业、娱乐和教育等多个领域中的重要工具。通过专业的设备与软件&#xff0c;摄影师能够创作出沉浸式的360度全景作品&#xff0c;为观众提供身临其境的视觉体验。在这篇文章中&#xff0c;我们将介绍VR全景摄影的相关…...

编程日记 2024/10/14 12:56:43

linux：使用sar诊断问题

使用sar诊断问题 1. CPU 使用情况2. 内存与交换3. 磁盘 I/O 活动4. 网络 I/O 活动5. 进程与上下文切换6. 系统调用与文件活动7. 电源管理8. 延迟分析9. 系统全局统计10. 查看历史记录11. 特定时间段12. 自动定时采样其他参数&#xff1a;使用实例&#xff1a; sar&#xff08;S…...

编程日记 2024/10/14 12:53:39

CUDA编程技巧（不断搜集更新）

1 使用位运算替换部分乘法或除法 位移操作主要适用于无符号整数&#xff0c;对于带符号数的位移&#xff0c;特别是负数&#xff0c;可能会导致问题&#xff0c;如果你需要对负数执行除法或者乘法&#xff0c;最好谨慎使用位移运算。 1.1 替换除法 当需要将一个数除以 2、4、…...

编程日记 2024/10/14 12:52:37

云计算（第二阶段）：mysql后的shell

第一章&#xff1a;变量 前言 什么是shell Shell 是一种提供用户与操作系统内核交互的工具&#xff0c;它接受用户输入的命令&#xff0c;解释后交给操作系统去执行。它不仅可以作为命令解释器&#xff0c;还可以通过脚本完成一系列自动化任务。 shell的特点 跨平台&#xff1a…...

编程日记 2024/10/14 12:50:35

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…...

编程日记 2024/10/14 12:49:34

文本生成视频技术：艺术与科学的交汇点

在人工智能技术的飞速发展下&#xff0c;文本生成视频&#xff08;Text-to-Video&#xff09;技术已经成为现实。这项技术能够根据文本描述生成相应的视频内容&#xff0c;极大地拓展了内容创作的边界。本文将从三个主要方面对文本生成视频技术进行深入探讨&#xff1a;技术能达…...

编程日记 2024/10/14 12:48:33

【Windows】【DevOps】Windows Server 2022 采用WinSW将一个控制台应用程序作为服务启动（方便）

下载WinSW 项目地址&#xff1a; GitHub - winsw/winsw: A wrapper executable that can run any executable as a Windows service, in a permissive license. 下载地址&#xff1a; https://github.com/winsw/winsw/releases/download/v2.12.0/WinSW-x64.exe 参考配置模…...

编程日记 2024/10/14 12:44:29

OpenAI董事会主席Bret Taylor的Agent公司Sierra：专注于赋能下一代企业用户体验

本文由readlecture.cn转录总结。ReadLecture专注于音、视频转录与总结&#xff0c;2小时视频&#xff0c;5分钟阅读&#xff0c;加速内容学习与传播。 视频来源 youtube: https://www.youtube.com/watch?vriWB5nPNZEM&t47s 大纲 介绍 欢迎与介绍 介绍Bret Taylor&#x…...

编程日记 2024/10/14 12:42:26

【linux】信号（下）

8. 阻塞信号 (一)信号其他相关常见概念 实际执行信号的处理动作称为信号递达(Delivery)信号从产生到递达之间的状态,称为信号未决(Pending)进程可以选择阻塞 (Block )某个信号被阻塞的信号产生时将保持在未决状态,直到进程解除对此信号的阻塞,才执行递达的动作(即被阻塞的信…...

编程日记 2024/10/14 12:40:23

Notepad++ 初学者指南

引言 对于初学者来说&#xff0c;选择合适的编程工具很重要&#xff0c;特别是考虑到易用性和计算机资源的需求。 虽然集成开发环境&#xff08;IDE&#xff09;如 Eclipse、IntelliJ IDEA 和 Visual Studio 提供了许多强大的功能&#xff0c;但对于刚开始学习编程的人来说&a…...

编程日记 2024/10/14 12:39:22

Web Socket 使用详解

在信息爆炸的时代&#xff0c;用户对网页的期待早已超越了静态内容的展示。实时聊天、股票报价、协同编辑等功能的实现&#xff0c;都离不开服务器与客户端之间持续、高效的数据交互。传统的HTTP请求-响应模型难以满足这种需求&#xff0c;而WebSocket的出现&#xff0c;为构建…...

编程日记 2024/10/14 12:38:20

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

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

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2026/1/8 11:38:36

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

编程新知 2026/1/23 11:53:19

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

编程新知 2025/6/11 3:20:47

C++.OpenGL （14/64）多光源（Multiple Lights）

多光源（Multiple Lights） 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

编程新知 2025/6/11 3:15:20

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30