【前端寻宝之路】学习和总结HTML的标签属性

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|

💫个人格言:"没有罗马,那就自己创造罗马~"
be pressed for time时间不够

文章目录

Html:html文件根标签
Head:编写页面相关的属性
Title:页面标题
Body:页面内容展示


Dom树

  • 所有的标签都是html子标签
  • Head和body是兄弟标签
  • Head和title父子标签

每一个标签相当于一个对象,我们可以通过代码拿到这些对象,然后对这些对象进行增删查改.


|----------------------------------|
| 快速生成代码框架 Shift+!+Enter 生成代码框架的含义 |


|------------------------------------|
| 标题标签:h1-h6 有六个,从h1-h6,数字越大,则则字体越小. |

|-----------------------------------------|
| 注释:ctrl+/ 我们可以通过快捷键:Fn + F12 查看到页面的源代码. |


段落标签:p是双标签


换行标签:br是单标签

  • Br是break的缩写,表示换行.
  • Br是一个单标签(不需要结束标签)

|--------------------------------|
| 换行标签和段落标签的区别:换行标签换行后的间隙比段落标签小. |

格式化标签

  • 加粗:strong标签 和 b标签
  • 斜线:em 标签 和 I 标签
  • 删除线:del 标签 和 s 标签
  • 下划线:ins 标签 和 u 标签

Img标签

属性1:

|-------------------------------|
| Src属性 Img标签必须搭配着src使用(指定图片路径) |

属性2

  • alt:替换文本,当文本不能正确显示的时候,会显示一个替换的文字.(alt后面的文案,只有当图片加载出错的时候才会展示,如果图片加载成功,这个文案就不会展示)
  • title:提示文本,鼠标放到图片上,就会有提示.
  • width/height:控制宽度高度,宽度和高度一般改一个就行,另外一个会等比例缩放,否则就会图片失衡.
  • border:边框,参数是宽度的像素.但一般使用 CSS 来设定.

a标签

herg属性

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://blog.csdn.net/Aileenvov?type=blog">Aileen_0v0</a>
  
    <a href="html01.html">跳转到html01页面</a>

    <a href="#">跳转到当前页面</a>

    <a href="https://blog.csdn.net/Aileenvov?type=blog">
        <img src="D:\html猫.jpg" alt="">
    </a>
</body>
</html>
相关推荐
图码5 分钟前
如何用多种方法判断字符串是否为回文?
开发语言·数据结构·c++·算法·阿里云·线性回归·数字雕刻
U盘失踪了11 分钟前
python curl转python脚本
开发语言·chrome·python
charlie11451419112 分钟前
Linux 字符设备驱动:cdev、设备号与设备模型
linux·开发语言·驱动开发·c
handler0114 分钟前
Linux 内核剖析:进程优先级、上下文切换与 O(1) 调度算法
linux·运维·c语言·开发语言·c++·笔记·算法
FQNmxDG4S14 分钟前
Java泛型编程:类型擦除与泛型方法的应用场景
java·开发语言·python
CDN36025 分钟前
排查实录:网站偶发502/504错误?360CDN回源超时配置与日志分析技巧
前端·数据库
lizhihai_9934 分钟前
股市学习心得-六张分时保命图
大数据·人工智能·学习
我星期八休息36 分钟前
IT疑难杂症诊疗室:AI时代工程师Superpowers进化论
linux·开发语言·数据结构·人工智能·python·散列表
热心网友俣先生1 小时前
2026年第二十三届五一数学建模竞赛C题超详细解题思路+各问题可用模型推荐+部分模型结果展示
c语言·开发语言·数学建模
之歆1 小时前
Day07_CSS盒子模型 · 样式继承 · 用户代理样式
前端·css