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

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

news 2026/3/26 14:49:05

单标签组成的元素

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

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

leetcode 1504. Count Submatrices With All Ones 统计全 1 子矩形

Problem: 1504. Count Submatrices With All Ones 统计全 1 子矩形 计算矩阵的前缀和&#xff0c;然后遍历所有的子矩阵&#xff0c;看是否都是1也就是面积等于长乘以宽 都是1的矩阵&#xff0c;可以直接计算得到结果 Code class Solution { public:int numSubmat(vector<…...

编程新知 2026/3/26 14:27:33

FanControl：打造高效静音的电脑散热解决方案

FanControl&#xff1a;打造高效静音的电脑散热解决方案 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/FanContr…...

编程新知 2026/3/26 14:21:28

Qwen1.5-1.8B GPTQ生成技术博客大纲与初稿：以“操作系统内存管理”为例

Qwen1.5-1.8B GPTQ生成技术博客大纲与初稿&#xff1a;以“操作系统内存管理”为例 1. 引言&#xff1a;当AI成为技术写作的“副驾驶” 最近在折腾一些技术分享&#xff0c;想写一篇关于操作系统内存管理的文章。这话题吧&#xff0c;说深了容易劝退&#xff0c;说浅了又没意…...

编程新知 2026/3/26 13:00:53

从猫狗识别到工业质检：深入理解PyTorch中的sample_weight，让模型更‘关注’关键样本

从猫狗识别到工业质检&#xff1a;深入理解PyTorch中的sample_weight&#xff0c;让模型更‘关注’关键样本 在工业质检和医疗影像分析中&#xff0c;某些样本的误判代价可能比其他样本高出一个数量级。想象一下&#xff0c;在半导体缺陷检测中漏判一个微小裂纹&#xff0c;或在…...

编程新知 2026/3/26 12:38:39

Android开发避坑指南：RecyclerView最后一行被截断的5种原因及对应解决方案

Android开发避坑指南&#xff1a;RecyclerView最后一行被截断的5种原因及对应解决方案 在Android应用开发中&#xff0c;RecyclerView作为列表展示的核心组件&#xff0c;其灵活性和高性能深受开发者喜爱。然而&#xff0c;在实际项目中&#xff0c;我们经常会遇到一个令人头疼…...

编程新知 2026/3/26 12:16:30

自动驾驶轨迹预测新思路：VectorNet如何用矢量编码替代传统栅格化方法？

自动驾驶轨迹预测的矢量革命&#xff1a;VectorNet如何重构环境编码范式 在自动驾驶系统的决策闭环中&#xff0c;轨迹预测模块犹如驾驶员的预判能力&#xff0c;其准确性直接关系到行车安全与舒适性。传统基于卷积神经网络&#xff08;CNN&#xff09;的预测方法存在一个根本性…...

编程新知 2026/3/26 12:00:01

告别振动噪音：用DRV8825模块的细分功能，让你的3D打印机或CNC雕刻机运行更安静平稳

静音革命&#xff1a;DRV8825微步进技术在3D打印与CNC中的实战应用 当你的3D打印机在深夜工作时发出刺耳的嗡嗡声&#xff0c;或是CNC雕刻机在低速运行时产生令人不适的振动&#xff0c;这不仅影响工作环境&#xff0c;更会直接反映在成品质量上——那些本应光滑的表面出现的细…...

编程新知 2026/3/26 11:49:59

【笔试真题】- 阿里系列-2026.03.25-算法岗

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 阿里系列-2026.03.25-算法岗 1. LYA 的同余构造 问题描述 说明：阿里系列近期多条业务线笔试题基本共用同一套公开机试，淘天、阿里云等方向都可参考本场。 …...

编程新知 2026/3/26 11:25:55

使用 Java 泛型创建 CSV 到对象的转换器

本文将介绍如何使用它 Java 创建一个通用的泛型 CSV 文件到 Java 对象转换器。通过泛型&#xff0c;我们可以避免为每个需要转换的类别编写重复的代码&#xff0c;以实现代码的重用和简化。本文将提供示例代码&#xff0c;并讨论一些关于代码设计和最佳实践的建议&#xff0c;以…...

编程新知 2026/3/26 10:41:24

Linux字符设备驱动开发与核心架构解析

Linux字符设备驱动开发深度解析1. Linux设备驱动分类与架构Linux内核将设备驱动分为三大类型&#xff1a;字符设备驱动&#xff1a;以字节流形式进行数据读写&#xff0c;如串口、键盘等块设备驱动&#xff1a;以固定大小数据块为单位进行操作&#xff0c;如硬盘、U盘等网络设备…...

编程新知 2026/3/26 10:11:14