【前端】制作一个简单的网页(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中的语言不一致,会自动询问你是否需要翻译网页内容。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

公链技术开发之路:从概念到实现的公链开发全攻略

随着区块链技术的日益成熟&#xff0c;公链&#xff08;Public Chain&#xff09;作为区块链生态的基础设施之一&#xff0c;成为了众多企业和项目方争相探索和开发的重要领域。公链是去中心化的区块链网络&#xff0c;任何人都可以自由加入&#xff0c;进行交易、开发和使用去…

Node.js 中的 WebSocket 底层实现

WebSockets 是一种网络通信协议&#xff0c;可实现双向客户端-服务器通信。 WebSockets 通常用于需要即时更新的应用程序&#xff0c;使用 HTTP 之上的持久双工通道来支持实时交互&#xff0c;而无需持续进行连接协商。服务器推送是 WebSockets 的众多常见用例之一。 本文首先…

pytorch与卷积神经网络实战笔记

课程视频链接 CNN卷积神经网络算法原理 全神经网络的整体结构 输入层&#xff08;x1, x2, x3…&#xff09;->隐藏层&#xff08;全连接&#xff09;->输出层&#xff0c;整体就类似于一个函数&#xff0c;输入x&#xff0c;经过函数module(x)得到输出y的过程&#xf…

QtModel

QModelIndex index1 model->index(row,column,QModelIndex());QModelIndex index2 model->index(row.column,index2); QSqlQuery::size() 仅在使用了 QSqlQuery::exec() 后并且查询结果集的所有行都被读取时才有效。如果结果集很大或在使用游标的情况下&#xff0c;返回…

AVL树的实现

AVL树 1. AVL的概念2. AVL树的实现2.1 AVL树的结构2.2 AVL树的插⼊2.2.1 AVL树插⼊⼀个值的⼤概过程2.2.2 平衡因⼦更新2.2.3 插⼊结点及更新平衡因⼦的代码实现 2.3 旋转2.3.1 旋转的原则2.3.2 右单旋2.3.3 右单旋代码实现2.3.4 左单旋2.3.5 左单旋代码实现2.3.6 左右双旋2.3.…

【排序】——2.快速排序法(含优化)

快速排序法 递归法 霍尔版本(左右指针法) 1.思路 1、选出一个key&#xff0c;一般是最左边或是最右边的。 2、定义一个begin和一个end&#xff0c;begin从左向右走&#xff0c;end从右向左走。&#xff08;需要注意的是&#xff1a;若选择最左边的数据作为key&#xff0c;则…

Arduino配置ESP32环境

Arduino配置ESP32环境 引言一、IDE下载教程操作取巧方法 二、社区安装包三、官方手动安装 引言 最近入手了一款ESP32-C3的开发板&#xff0c;想继续沿用现有Arduino IDE&#xff0c;网上看了很多方法&#xff0c;大致分了三类&#xff1a;IDE下载、社区安装包、github手动配置…

基于SpringBoot+Vue+uniapp的诗词学习系统的详细设计和实现

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…

ROS理论与实践学习笔记——5 ROS机器人系统仿真之URDF(Unified Robot Description Format)语法详解

URDF 文件是一个标准的 XML 文件格式&#xff0c;用于在 ROS 中描述机器人模型的结构。URDF 通过预定义的一系列标签&#xff0c;简洁地表达机器人的组成和运动关系。虽然机器人模型可能非常复杂&#xff0c;但在 URDF 中可以主要简化为两个核心部分&#xff1a; 连杆&#xff…

6.2 遍历重定位表

本节我们将编写一个遍历重定位表的示例程序&#xff0c;打印重定位表。 本节必须掌握的知识点&#xff1a; 遍历重定位表 6.2.1 遍历重定位表 实验四十三&#xff1a;遍历重定位表 以下代码实现打印"c:\\notepad64.exe"进程重定位表的所有信息。 /*--------------…

【详尽-实战篇】使用Springboot生成自带logo或者图片的二维码-扫描二维码可以跳转到指定的页面-Zing-core

先上效果图 项目源码&#xff1a;https://download.csdn.net/download/qq_43055855/89891285 源码地址 手机扫描二维码跳转到指定网页 概述 这个项目是一个基于 Java 的二维码生成与解析工具&#xff0c;主要由 QRCodeUtil 和 QRCodeController 两个类组成。它利用了 Google…

python 爬虫 入门 一、基础工具

目录 一&#xff0c;网页开发者工具的使用 二、通过python发送请求 &#xff08;一&#xff09;、get &#xff08;二&#xff09;、带参数的get &#xff08;三&#xff09;、post 后续&#xff1a;数据解析 一&#xff0c;网页开发者工具的使用 我们可以用 requests 库…

人脸识别-特征算法

文章目录 一、LBPH算法1.基本原理2.实现步骤3.代码实现 二、Eigenfaces算法1.特点2.代码实习 三、FisherFaces算法1.算法原理2.算法特点3.代码实现 四、总结 人脸识别特征识别器是数字信息发展中的一种生物特征识别技术&#xff0c;其核心在于通过特定的算法和技术手段&#xf…

leader必备技能——编写高质量测试计划

前言 作为一个想成为leader(不论是整个测试部门还是小项目组的leader&#xff09;的人&#xff0c;测试计划编写是必备技能。 接下来我们先了解一下测试计划的一些基础知识再进一步了解。 什么是测试计划&#xff1f; 测试计划是对测试过程的整体设计&#xff0c;测试计划确…

Spring Boot知识管理:智能搜索与分析

3系统分析 3.1可行性分析 通过对本知识管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本知识管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…

c#中多态的实例应用说明

在C#中&#xff0c;多态性是通过继承和实现接口来实现的&#xff0c;允许编写可以使用基类型的代码&#xff0c;然后使用派生类型的特定行为。 一.实例界面显示 二.源码界面显示 //定义的基类abstract class Shape{public abstract int Area();//基类中的抽象方法}//定义矩形的…

【前端】如何制作一个自己的网页(6)

接上文 网络中的图片 我们也可以在百度等网站搜索自己喜欢的图片。 此时对图片点击右键&#xff0c;选择【复制图片地址】&#xff0c;即可获得该图片的网络地址。 其实在HTML中&#xff0c;除了图片以外&#xff0c;我们还可以利用地址找到另一个网页。 如右图所示&#…

第一次排查 Java 内存泄漏,别人觉得惊险为什么我觉得脸红害羞呢

今天前端一直在群里说&#xff0c;服务是不是又挂了&#xff1f;一直返回 503。我一听这不对劲&#xff0c;赶紧看了一眼 K8S 的 pod 状态&#xff0c;居然重启了4次。测试环境只有一个副本&#xff0c;所以赶紧把副本数给上调到了3个。 堵住前端的嘴&#xff0c;免得破坏我在…

【C语言】一维数组应用Fibonacci数列

Fibonacci数&#xff08;斐波那契数列&#xff09; 前两项为1&#xff0c;从第三项开始&#xff0c;每一项为前两项的和。可以知道连续三项的关系&#xff1a;f[i]f[i-1]f[i-2] 使用数组进行存储&#xff0c;十分方便。可以知道前n项的fibonacci数。 #include <stdio.h>…

数据治理(2)-数据标准

前言 在建模前规划制定数据标准&#xff0c;或在建模使用过程中根据业务情况沉淀企业业务的数据标准。通过规范约束标准代码、度量单位、字段标准、命名词典&#xff0c;来保障数据处理的一致性&#xff0c;从源头上保障数据的标准化生产&#xff0c;节约后续数据应用和处理的…