HTML 元素

上周,您成为了一名 web 开发人员!干得好!我们开始研究 html 用于构建文档的不同类型的元素,以便 internet 浏览器可以读取该文档。但是,html 几乎所有事情都使用元素!本周,我们将介绍四种不同类型的元素以及如何使用它们,最后,您将向上周创建的页面添加内容!

如果您刚刚找到该系列,请查看该系列页面,或者如果您需要复习一下,请转到上周的文章!

文本元素

文本构成了互联网的大部分内容,您在任何页面上放置的最基本的内容之一就是文本!由于我们需要能够格式化该文本,因此 HTML 为我们提供了元素来环绕该文本并为我们的内容提供一些组织。

段落元素

要将常规文本添加到我们的页面,我们将该文本放置在开始和结束

标记之间!查看示例并亲自尝试一下!

  

这是一些常规正文。

还有更多!

立即学习前端免费学习笔记(深入)”;

为什么我们称其为“段落”?好吧,如果我们放置其中两个元素,它们将分别出现在不同的行上,从而有效地形成一个段落。如果您正在在线查看新闻文章,每次看到新段落时,您都会看到一个单独的

元素!

标题

如果一切都是正文,我们的页面看起来会非常平淡,帮助用户理解我们网站内容的最佳方法之一就是用信息丰富的标题对其进行标记。 HTML 有 6 个不同的标题元素,它们的语法并不难记住!

标题

副标题

标题

副标题

部分
小节

默认情况下,您的浏览器会将

标题设置为最大,将

标题设置为最小,但是当我们了解 CSS 时,您会发现情况并非如此。

对于标题,我们还需要遵循一些使用它们的规则:

每个网页只能有一个

标签。

按顺序使用标题:

之后,不要跳到

使用所有标题来描述页面的内容!

如果您不遵循这些规则,您的网页仍然会呈现,但您的文档将不再格式良好。我们遵循这些规则是因为它使浏览器更容易阅读并解释您的页面,并且使搜​​索引擎更容易知道您页面上的重要信息是什么!

创建列表

我们还可以在列表中构建页面上的信息。 HTML 提供两种列表:有序列表和无序列表。您可能会分别将它们称为编号列表和项目符号列表。要创建列表,您将在您选择的列表类型中嵌套列表项元素!这里有几个例子:

  1. 第 1 项
  2. 第 2 项
  3. 第 3 项
  • 项目 1
  • 第 2 项
  • 第 3 项

在大多数情况下,您将使用无序列表,除非信息必须是连续的,例如食谱说明中。

添加图像

到目前为止,我们的页面上只有文本,但为了使我们的页面更​​有趣,我们可以添加图像、音频或视频! HTML 也有这些元素!

要将图像添加到我们的网站,我们将使用 HTML 元素

就这样吧!您网页上的图像!

挑战

现在您已经掌握了一些新元素,本周有一个挑战!制作您自己的“关于我”页面。至少使用两个不同的标题级别、一个列表、一段有关您自己的信息,并包含一张图片!确保使用适当的元素并在您的网络浏览器上打开它!

下周见!

以上就是HTML 元素的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1629388.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 12:28:06
下一篇 2025年12月24日 12:28:12

相关推荐

  • 创建 CSS 轮播的分步指南

    纯 CSS 轮播可以是展示图像或内容的优雅且高性能的方式。本指南解释了如何仅使用 HTML 和 CSS 创建简单而有效的轮播。 工作演示 您可以在 JSFiddle 上查看工作演示并与之交互:CSS Carousel Demo HTML结构 HTML 结构由充当包装器的article 元素组成。在这…

    2025年12月24日
    000
  • 检查网页上使用的字体

    情况 因为我目前正在学习next.j。我正在学习下一个团队创建的课程 (https://nextjs.org/learn)。 有一个与字体和图像优化相关的部分。老实说,我从来没有太关注字体以及网页上的某个元素使用哪些字体。 但通过阅读这些材料,我意识到你能够做到这一点。您可以找出某个元素使用了哪些字…

    2025年12月24日
    000
  • 如何编写更好的 CSS

    为了为网站样式编写更好的 CSS,您必须首先学习三件事,即响应式设计、您的代码可维护和可扩展以及具有执行性。 响应式设计就是要确保您的网站在每种可能的屏幕尺寸上都具有完美的外观和行为。随着屏幕尺寸的不断增加,响应式设计是每个前端开发人员必须学习和掌握的基本概念。 您编写的代码必须以其他开发人员也可以…

    2025年12月24日
    000
  • 前端技术

    千里之行始于足下,我想说我的科技世界之旅就是从这篇文章开始的。 我是一个出色的分析者,我发现我对数字和代码行有着浓厚的兴趣。我的意思是我对编码的工作原理很着迷,虽然我不知道大多数功能,但我可以解释基本的代码行,相信我,我没有任何背景。 我的意思是,这篇文章应该是关于 HTML、CSS、JAVASCR…

    2025年12月24日
    000
  • 掌握 CSS 网格布局:开发人员综合指南

    CSS 网格布局是一个强大的工具,可以让开发人员轻松创建复杂的、响应式的网页布局。与浮动、弹性盒和定位等传统布局方法不同,CSS Grid 提供了一个二维系统,可以处理列和行,使其成为现代 Web 开发的基本技能。 了解基础知识 CSS 网格的核心涉及两个主要元素:容器和项目。容器是父元素,项目是其…

    2025年12月24日
    000
  • 我的项目需要一些使用 React+GSAP Flip 的帮助

    我一直在尝试重新创建前几天看到的 CodePen 项目。这是我正在尝试复制的 CodePen 项目。https://codepen.io/cmalven/pen/RwGqewd?editors=0110我做了很多工作并花了很长时间来完善它,但我无法达到相同的结果。我怀疑这个问题可能与我项目中的 CS…

    2025年12月24日
    000
  • 使用 CSS Translate 属性创建动态搜索栏

    CSS 中的翻译属性是什么?CSS 平移属性沿 X 轴和 Y 轴移动元素。与其他定位属性(例如位置)不同,翻译不会破坏文档的自然流程,因此非常适合生成流畅的动画和过渡。 CSS中的transform属性是什么具有视觉吸引力的动态用户界面已成为不断变化的 Web 开发环境中的常态。 CSS(层叠样式表…

    2025年12月24日
    000
  • CSS 中的页面声明结构

    什么是CSS CSS 是一种用于以瀑布样式设计页面样式的语言,用于添加布局、动画、几何形状、过滤器、计数器以及其他设置。 声明 CSS 的方法 内联CSS:使用HTML标签内的style属性添加CSS;内部CSS:添加在HTML页面的 标签内;外部CSS:创建一个扩展名为.css的文件,其中包含将应…

    2025年12月24日
    000
  • 免费工具:Mesher

    嗨,我最近开发了(又一个) 小工具来生成香草 css 动画渐变。它仍处于早期阶段,但我很想从所有社区获得一些反馈,希望这个工具可以帮助人们生成一些很酷的渐变。 链接:mshr.app 以上就是免费工具:Mesher的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月24日
    000
  • 提升我的 Web 开发技能:HNG 实习和前端技术的迷人世界

    开始新事物的兴奋感永远不会消失,尤其是当它涉及到像 HNG 实习这样的强化项目时 [https://hng.tech/internship 和 https://hng.tech/premium]。这就像再次参加编码训练营,但这一次有令人兴奋的机会来突破我的极限并加快学习速度。 HNG 实习中真正令我…

    2025年12月24日
    000
  • css背景颜色怎么填充

    在 CSS 中,使用 background-color 属性填充 HTML 元素的背景色。步骤如下:选择要填充背景色的 HTML 元素。使用语法 element { background-color: #rrggbb; }。替换 “#rrggbb” 为十六进制颜色代码、RGB…

    好文分享 2025年12月24日
    000
  • css怎么设置底部div样式

    在CSS中设置底部div样式的方法有:固定底部:position: fixed; bottom: 0; left: 0; right: 0;相对定位:position: relative; bottom: 0;调整左右位置:left/right 属性;其他样式:height、width、backgr…

    好文分享 2025年12月24日
    000
  • css自适应怎么设置高度

    可以通过使用 CSS 属性设置自适应高度,包括 min-height(设置最小高度)、max-height(设置最大高度)、flex(允许元素在空间内展开)和 calc(动态计算高度),根据具体效果选择合适的方法。 CSS 自适应高度设置 问题:如何使用 CSS 设置自适应高度? 回答:可以通过使用…

    2025年12月24日
    000
  • css三级菜单怎么做

    创建一个 CSS 三级菜单需要以下步骤:1. 创建嵌套的 HTML 结构,将菜单项分组为父级、二级和三级列表。2. 使用 CSS 样式设置定位、显示和颜色。3. 添加悬停状态,在悬停主菜单项时显示二级菜单,在悬停二级菜单项时显示三级菜单。4. 调整菜单位置以符合设计要求。 如何创建 CSS 三级菜单…

    2025年12月24日
    000
  • css边框圆角怎么设置

    CSS 中使用 border-radius 属性为元素设置圆角边框,可指定一个或四个长度值,分别表示四个角的圆角程度:一个值:适用于所有角。两个值:水平和垂直半径,适用于所有角。三个值:左上、右上和右下角。四个值:左上、右上、右下和左下角。 CSS 圆角边框设置 在 CSS 中,可以使用 borde…

    2025年12月24日
    000
  • css颜色表怎么调出来

    要调出 CSS 颜色表:使用浏览器开发人员工具查看颜色代码。直接浏览 W3Schools 网站的颜色表。使用 ColorZilla 扩展程序或 Color Picker 软件拾取和查看颜色。 如何调出 CSS 颜色表? 要调出 CSS 颜色表,请按照以下步骤操作: 使用浏览器开发人员工具: 打开要检…

    2025年12月24日
    000
  • css滚动条怎么改

    要自定义 CSS 滚动条,您可以使用以下属性:scrollbar-width:设置宽度。scrollbar-color:设置轨道和轨的颜色。scrollbar-gutter:设置轨道和滚动条之间的间隙。scrollbar-track:定制轨道的外观。scrollbar-thumb:定制轨的外观。 如…

    2025年12月24日
    000
  • css二级菜单怎么变色

    为 CSS 二级菜单添加变色效果可通过以下步骤实现:为二级菜单项创建悬停状态(例如:.menu-item:hover {background-color: #f5f5f5;})。嵌套 HTML 结构,添加子菜单(例如:二级菜单项子菜单项 1子菜单项 2 CSS 二级菜单变色 在 CSS 中,为二级菜…

    2025年12月24日
    000
  • 进一步完善造型

    嘿,欢迎回到边学边编码:HTML 和 CSS!今天,我们将深入探讨造型的世界。到目前为止,我们一直在直接设计元素的样式。但是,如果您有两个 元素并且希望每个元素看起来不同怎么办?输入 CSS 选择器! 元素选择器 您已经熟悉这些,但让我们回顾一下: h1 { 字体大小:32px; 字体系列:Aria…

    2025年12月24日
    000
  • 释放下拉菜单的力量

    下拉菜单是访问者访问各种选项的一种有用且节省空间的方式,是网页设计的重要组成部分。这个详尽的教程将涵盖下拉菜单的原理、它们在网页设计中的重要性,以及如何使用 css 伪元素::before 和 ::after 提高其可用性和外观。 了解下拉菜单下拉菜单有时也称为下拉菜单,是用户界面中常见的交互式组件…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信