HTML 属性

news2024/9/24 18:27:53

在这里插入图片描述

HTML 属性学习笔记

HTML 属性真的好神奇呢!它们像是元素的额外说明,总是伴随着特定的格式出现在元素的开始标签里。接下来,我就记录下一些常见的 HTML 属性吧!

HTML 属性的基本概念

每个 HTML 元素都可以有自己的属性,这些属性给元素添加了更多的信息。属性都写在元素的开始标签里,采用“属性名称=属性值”的格式。

href 属性小发现

在网页里,我经常看到可以点击的链接。原来这是通过 <a> 标签的 href 属性实现的呢!比如:

<a href="https://www.example-website.com">访问示例网站</a>

点击这个链接,浏览器就会跳转到 https://www.example-website.com 这个网址。

src 属性初探

网页上的图片是怎么显示出来的呢?原来是通过 <img> 标签,并且用它的 src 属性来指定图片的位置哦!比如:

<img src="images/beautiful-landscape.jpg" alt="风景图片">

浏览器会在 images 文件夹里找 beautiful-landscape.jpg 这张图片并显示出来。同时,alt 属性提供了图片的替代文本,这在图片无法加载时非常有用。

设定宽度和高度

有时候,为了让图片更好地适应网页布局,我们可以调整图片的宽度和高度。通过 <img> 标签的 widthheight 属性就能轻松实现。比如:

<img src="images/beautiful-landscape.jpg" width="800" height="600" alt="美丽的风景">

这样,图片就会被调整成 800 像素宽和 600 像素高。

alt 属性的重要性

alt 属性真的很贴心呢!当图片因为某些原因无法显示时,它就会代替图片出现。这对于使用屏幕阅读器的朋友来说特别重要。

初探内联样式与 style 属性

你知道吗?HTML 元素可以直接拥有自己的样式哦!这都要归功于 style 属性,它允许我们直接在 HTML 标签里定义元素的样式。比如:

<p style="color: blue; font-size: 18px;">这段文字是蓝色的,字体大小为18像素。</p>

这样,这段文字就会以蓝色、18像素的字体大小呈现在网页上。

了解语言声明与 lang 属性

<html> 标签里,有一个 lang 属性,它用来声明网页内容的语言。这样,搜索引擎和浏览器就能更准确地解析和展示内容了。比如:

<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
<title>我的中文网页</title>
</head>
<body>
<!-- 这里是网页的内容 -->
</body>
</html>

这里,lang 属性被设置为 zh-Hans-CN,表示网页内容是用简体中文写的,且采用简体中文的书写规范。

title 属性的额外信息

title 属性真是个小能手!它能为 HTML 元素提供额外的信息,这些信息通常会以工具提示的形式出现。比如:

<p title="这是关于风景的额外说明">鼠标悬停在这里查看风景的额外说明。</p>

当你把鼠标放在这段文字上时,就会看到一个小提示框,里面显示着“这是关于风景的额外说明”。

编码规范小摘

在写 HTML 代码的时候,遵循一些规范和最佳实践真的很重要呢!比如,属性名称最好都用小写字母,属性值要用引号括起来,标签要正确嵌套。这样,代码看起来就会更加整齐和易读,也更容易维护哦!

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1739. 迷宫的所有路径-深度优先搜索-DFS

代码&#xff1a; #include<bits/stdc.h> using namespace std; int n; int fx[4]{0,1,0,-1}; int fy[4]{1,0,-1,0}; bool vis[100][100]; int q[35][3]; int c; void print(int k){c;cout<<c<<":";for(int i1;i<k;i){cout<<q[i][1]<…

测试 ASP.NET Core 中间件

正常情况下&#xff0c;中间件会在主程序入口统一进行实例化&#xff0c;这样如果想单独测试某一个中间件就很不方便&#xff0c;为了能测试单个中间件&#xff0c;可以使用 TestServer 单独测试。 这样便可以&#xff1a; 实例化只包含需要测试的组件的应用管道。发送自定义请…

多线程排序(java版)

&#x1f4d1;前言 本文主要是【排序】——多线程排序的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句&#x…

湖(岛屿)

from book&#xff1a;挑战程序设计竞赛

【Linux系统编程】程序地址空间

进程地址空间 进程地址空间是指每个进程在计算机内存中所占用的地址空间。地址空间是指能被访问的内存地址范围&#xff0c;它由若干个连续的内存块组成。每个进程都有自己的地址空间&#xff0c;这意味着每个进程都有自己的内存地址范围&#xff0c;不会与其他进程冲突。进程地…

回溯法:0-1背包问题

问题描述 给定种物品和一背包。 物品的重量是&#xff0c; 其价值为&#xff0c;背包的容量为 c。 问应该如何选择装入背包中的物品&#xff0c;使得装入背包中物品的总价值最大&#xff1f;注意物品不重复! 实例&#xff1a;物品价值V{12, 11, 9, 8}, 物品重量W{8, 6, 4, 3},…

操作系统-中断和异常(中断作用 类型 内外中断 中断机制原理)

文章目录 总览中断的作用中断类型内中断的例子外中断中断的分类中断机制的基本原理小结 总览 中断的作用 刚启动CPU上运行的是内核程序 中断类型 内中断的例子 当前执行指令非法是指参数有问题等其他原因 陷入指令是主动转换状态&#xff0c;但它并不是特权指令 外中断 时钟…

Docker(一)简介和基本概念:什么是 Docker?用它会带来什么样的好处?

作者主页&#xff1a; 正函数的个人主页 文章收录专栏&#xff1a; Docker 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01; 一、简介 本章将带领你进入 Docker 的世界。 什么是 Docker&#xff1f; 用它会带来什么样的好处&#xff1f; 好吧&#xff0c;让我们带…

matplotlib从起点出发(12)_Tutorial_12_MultiAxes

在一个Figure中安排多个Axes 通常在一个图像中&#xff0c;需要同时呈现多于一个Axes&#xff0c;并且需要对齐到网格. Matplotlib有多种工具用于处理在本库历史中演变的Axes网格&#xff0c;我们将讨论我们认为用户最常使用的工具&#xff0c;支持Axes组织方式的工具&#xf…

记录自己 自学摸索 学习日语:新标日

新标日 几节课合成在一起太乱了 第四课会更新个集合 自学日语吧算是 摸索中&#xff01; 尽量一周一课 第一课 单词 ちゅうごくじん 中国人 中国人 にほんじん 日本人 日本人 あめりかじん アメリカ人 美国人 かんこくじん 韓国人 韩国人 ふらんすじん フラン…

uniApp H5使用JSSDK对接微信公众号问题

问题1 uni-app开发微信应用引用JSSDK后 wx.agentConfig is not a function (或 wx.config is not a function) 原因&#xff1a; 因为uni-app自动集成了 微信的 jweixin.js &#xff0c; 所以通过 在浏览器打开 然后保存下来js 文件 然后在项目中通过 import 引入就可以了 …

C++继承(万字详!!)

文章目录 继承的概念及定义继承的概念继承定义 基类和派生类对象赋值转换继承中的作用域派生类的默认成员函数继承与友元继承与静态成员复杂的菱形继承及菱形虚拟继承菱形继承菱形虚拟继承 继承的总结和反思笔试面试题 继承的概念及定义 继承的概念 继承(inheritance) 机制是面…

【Linux】yum

个人主页 &#xff1a; zxctsclrjjjcph 文章封面来自&#xff1a;艺术家–贤海林 如有转载请先通知 yum 1. 什么是yum&#xff1f;2. Linux系统(Centos)的生态3. yum的相关操作4. yum的本地配置5. 如何安装软件 1. 什么是yum&#xff1f; yum是一个软件下载安装的一个客户端&a…

Qt/QML编程之路:QWidget和QOBJECT的不同之处(37)

开始使用Qt的工程师&#xff0c;要有个思想准备&#xff0c;标准的Application或者说Windows窗口类的工程和QML是不同的&#xff0c;很多控件在QML里面是不支持的。要了解QObject、QWidget、QMainWindow几个的不同。为何我会遇到这个问题呢&#xff1f;因为在做OpenGL想实现3D效…

Spark流式读取文件数据

流式读取文件数据 from pyspark.sql import SparkSession ss SparkSession.builder.getOrCreate() # todo 注意1&#xff1a;流式读取目录下的文件 --》一定一定要是目录&#xff0c;不是具体的文件&#xff0c;# 目录下产生新文件会进行读取# todo 注意点2&#xff1…

知识图谱的演进

目录 前言1 Memex&#xff1a;信息存储的雏形2 超文本和Web&#xff1a;链接的崛起3 Semantic Web&#xff1a;从文本链接到数据链接4 Linked Big Data&#xff1a;规范化的语义表示5 谷歌的知识图谱搜索引擎6 多种语义网/知识图谱项目结语 前言 随着人工智能和互联网的飞速发…

02.Spotless代码格式化工具

Spotless代码格式化工具 1.为什么需要 在一些大型项目或开源项目&#xff0c;由于开发人员太多&#xff0c;导致各个代码格式不统一。会让整体项目的代码可读性变差&#xff0c;那么如何可以统一代码格式呢&#xff1f; 使用Spotless就可以完成 2.是什么 Spotless 是支持多…

4456系列数字荧光示波器

4456系列数字荧光示波器 简述&#xff1a; 4456系列数字荧光示波器具有6个产品型号&#xff0c;带宽350MHz~1GHz&#xff0c;最高采样率5GSa/s&#xff0c;最大存储深度500Mpts/CH&#xff0c;最快波形捕获率100万个波形/秒&#xff0c;独创的Any Acquire Phosphor技术&#xf…

Docker安装MinIO以及Spring Boot 整合 MinIO 实现分布式文件服务

什么是MinIO&#xff1f; MinIO 是一个开源的对象存储服务器&#xff0c;旨在通过简化分布式存储架构的方式&#xff0c;提供高性能、高可用性的存储解决方案。它兼容 Amazon S3 API&#xff0c;因此可以无缝地替代或与 Amazon S3 兼容的应用程序集成。 下面是一些关于 MinIO…

LeetCode-67/104/1232/136

1.二进制求和&#xff08;67&#xff09; 题目描述&#xff1a; 给你两个二进制字符串 a 和 b &#xff0c;以二进制字符串的形式返回它们的和。 思路&#xff1a; 第一种方法就是直接将字符串转为二进制数&#xff0c;然后相加返回结果&#xff0c;但是提交未通过&#xff…