探索HTML元素

探索HTML元素_第1张图片

探索HTML元素

最近我开始接触HTML,发现里面的元素真的好有趣呢!它们就像是搭建网页的小积木,每个都有自己特别的用处。我来和大家分享一下我的学习心得吧!

初识HTML元素

一开始,我了解到HTML元素是构成网页的基本单位。每个元素都有自己的开始标记和结束标记,中间的部分就是它的内容。比如,

中间包裹的,就是大标题的内容。

常见的HTML小伙伴

在HTML的世界里,有好多不同的小伙伴,也就是元素啦。比如,有负责标题的

,还有负责段落的

。它们各自有各自的职责,一起合作就能把网页呈现得井井有条。

我还特意整理了一个表格,方便大家查看:

开始标签 元素内容示例 结束标签

主标题在这里

这是一个段落示例


这里是换行 (无需结束标签)

对了,还有一些特殊的小伙伴,比如
,它是个换行符,不需要结束标记,真是个方便的小工具呢!

元素的嵌套魔法

最神奇的是,这些HTML元素还可以嵌套使用!也就是说,一个元素里面可以包含另一个元素。这样一来,我们就可以创造出各种各样复杂的网页布局啦。比如:

DOCTYPE html>
<html>
  <body>
    <h1>欢迎访问我的网页h1>
    <p>这是一个介绍段落的示例。p>
  body>
html>

在这个例子中,就像是一个大房子,里面住着,而里面又有标题

和段落

等元素,它们就像是房子里的小房间和家具。

不要忘记结束标记哦

编写HTML的时候,一定要注意给每个开始标记配上相应的结束标记。虽然有些浏览器即使代码不完整也能显示网页,但我们还是要养成好习惯,避免以后出现奇怪的问题。

空元素的小秘密

空元素真的好神奇,它们不需要结束标记,就能完成自己的任务。比如
,只要它在,就能换个行。使用空元素的时候,只需要写出它的开始标记就好啦。

标记的大小写规范

虽然HTML标记不区分大小写,但我还是建议大家统一使用小写字母来书写标记。这样代码看起来会更整洁、更一致哦。

我的HTML标记小手册

为了方便以后查阅,我还特意整理了一份HTML标记的小手册:

标记 它的用途
定义整个网页文档
定义网页的主体部分

定义网页的标题,大小从大到小排列

定义一个段落

实现文字换行

通过这次学习,我对HTML元素有了更深入的了解,也更有信心去设计和开发自己的网页啦!希望我的分享能对大家有所帮助哦!

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