HTML 属性

发布时间：2024年01月19日

在这里插入图片描述

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> 标签的 width 和 height 属性就能轻松实现。比如：

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

文章来源:https://blog.csdn.net/e7182818/article/details/135656662
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章