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