HTML 属性

HTML 属性_第1张图片

HTML 属性学习笔记

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

HTML 属性的基本概念

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

href 属性小发现

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

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

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

src 属性初探

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

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

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

设定宽度和高度

有时候,为了让图片更好地适应网页布局,我们可以调整图片的宽度和高度。通过 标签的 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 属性

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

你可能感兴趣的:(#,HTML,学习笔记,html,前端,javascript)