0

0

HTML 元素简介

霞舞

霞舞

发布时间:2025-01-14 08:01:34

|

963人浏览过

|

来源于php中文网

原创

本课程深入探讨 html 标签及其在 web 应用中的有效运用。我们将讲解最常用的 html 标签和属性。

段落标签

标签是 HTML 中最常用的元素,用于创建段落。它是一个块级元素,每个段落都另起一行。

这是第一个段落。

这是第二个段落,另起一行。

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

若无

元素,浏览器会忽略多余空格,将文本显示在一行。

这是第一个段落。这是第二个段落,另起一行。

代码演示 ↗

段落内换行需使用
元素 (无需闭合标签)。

这是第一个段落。
这是第二个段落,另起一行。

代码演示 ↗

标题标签

文章标题能提升可读性,HTML 文档亦然。HTML 提供六级标题,从

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题

代码演示 ↗

一般情况下,

足够使用,过多的标题级别 (
,
) 会使网页结构过于复杂。

是主标题,每个 HTML 文档仅能有一个

元素,且应概括整个页面内容。

格式化元素

HTML 提供格式化元素来强调文本,例如加粗、斜体或下划线。










代码演示 ↗

效果相同,都使文本加粗,但 表示文本的重要性。

lorem ipsum dolor sit amet consectetur adipisicing elit.

类似,都使文本斜体,但 表示强调。

lorem ipsum dolor sit amet consectetur adipisicing elit.

元素定义高亮文本。

lorem ipsum dolor sit amet consectetur adipisicing elit.

元素定义小号文本。

lorem ipsum dolor sit amet consectetur adipisicing elit.

元素表示删除文本(加删除线), 元素表示插入文本(加下划线)。

lorem ipsum dolor sit amet consectetur adipisicing elit.

元素分别定义下标和上标。

lorem ipsum dolor sit amet consectetur adipisicing elit.

为 HTML 元素添加样式

格式化元素的默认样式可能不足以表达其含义,例如 使用下划线表示插入,容易造成混淆。

可以使用 style 属性来改善元素外观:

lorem ipsum dolor sit amet consectetur adipisicing elit.

这适用于几乎所有 HTML 元素。样式以键值对形式定义:

...

分号 ; 分隔样式声明。

lorem ipsum dolor sit amet consectetur adipisicing elit.

代码演示 ↗

更多样式将在 CSS 部分讲解。

HTML+CSS图片简介排版样式
HTML+CSS图片简介排版样式

HTML+CSS图片简介排版样式是一款实用的图片简介排版效果,适配多种网页。

下载

超链接标签

超链接使用 元素定义,连接到其他网页。鼠标悬停时,箭头变为手型。点击链接跳转到 href 属性指定的文档。

链接文本

链接默认带下划线并显示为蓝色,点击后变为红色,再次访问则变为紫色。

在工作目录中创建 destination.html 文件:




  
  
  destination


  

这是目标页面。

index.html 中添加指向 destination.html 的链接:

lorem ipsum dolor sit amet consectetur adipisicing elit.

HTML 元素简介

点击链接后跳转到 destination.html

HTML 元素简介

destination.html 中添加返回链接:

这是目标页面。 返回

HTML 元素简介

target="_blank" 属性可在新标签页打开链接:

链接

代码演示 ↗

链接颜色变化与 CSS 伪类有关,将在 CSS 部分详细讲解。

列表

代码演示 ↗

HTML 有三种列表:有序列表、无序列表和描述列表。

有序列表使用

    元素定义,列表项用
  1. 元素定义。

    1. 苹果
    2. 香蕉
    3. 橙子

    无序列表使用

      元素定义。

      • 苹果
      • 香蕉
      • 橙子

      描述列表由

      元素定义,列表项用
      定义,描述用
      定义。

      苹果
      美味又营养的水果,口感清脆。
      香蕉
      香甜软糯的水果,富含营养。
      橙子
      多汁清爽的柑橘类水果,富含维生素 C。

      布局元素

      HTML 还有一些布局元素用于组织内容,与 CSS 结合使用,创建网页布局

      • : 定义文档标题部分。
      • : 定义导航栏。
      • : 定义文档的一个部分。
      • : 定义独立的部分。
      • : 定义主要内容之外的内容,例如侧边栏。
      • : 定义页脚部分。
      • : 创建可展开和折叠的选项卡。
      • : 为
        元素创建标题。
      lorem ipsum dolor sit amet consectetur adipisicing elit lorem ipsum dolor sit amet consectetur...

      代码演示 ↗

      是通用布局元素,创建块级区域,常用于页面布局。
      这是一个 div

      代码演示 ↗

      无 CSS 样式时,布局元素(除

      )外观相同,但与 CSS 结合使用后,它们才能发挥作用。

      块元素与行内元素

      元素总是另起一行,占用全部水平空间(块元素)。 元素则只占用必要空间(行内元素)。

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga blanditiis... Labore ipsum...

      HTML 元素简介

      大多数已讨论元素都是块元素,例如

      等。 是行内元素的示例,widthheight 属性对其无效。

      还有许多其他 HTML 元素,本课程无法全部涵盖,更多信息请参考 W3Schools。

      进一步阅读

      • 如何使用 CSS 选择器
      • 什么是语义化 HTML 代码?
      • 如何在 CSS 中居中 div

    • 相关文章

      HTML速学教程(入门课程)
      HTML速学教程(入门课程)

      HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

      下载

      本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

      相关专题

      更多
      css
      css

      css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

      524

      2023.06.15

      css居中
      css居中

      css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

      263

      2023.07.27

      css如何插入图片
      css如何插入图片

      cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

      757

      2023.07.28

      css超出显示...
      css超出显示...

      在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

      539

      2023.08.01

      css字体颜色
      css字体颜色

      CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

      760

      2023.08.10

      什么是css
      什么是css

      CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

      605

      2023.08.10

      css三角形怎么写
      css三角形怎么写

      CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

      560

      2023.08.21

      css设置文字颜色
      css设置文字颜色

      CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

      395

      2023.08.22

      PS使用蒙版相关教程
      PS使用蒙版相关教程

      本专题整合了ps使用蒙版相关教程,阅读专题下面的文章了解更多详细内容。

      23

      2026.01.19

      热门下载

      更多
      网站特效
      /
      网站源码
      /
      网站素材
      /
      前端模板

      精品课程

      更多
      相关推荐
      /
      热门推荐
      /
      最新课程
      Sass 教程
      Sass 教程

      共14课时 | 0.8万人学习

      Bootstrap 5教程
      Bootstrap 5教程

      共46课时 | 2.9万人学习

      CSS教程
      CSS教程

      共754课时 | 20.9万人学习

      关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
      php中文网:公益在线php培训,帮助PHP学习者快速成长!
      关注服务号 技术交流群
      PHP中文网订阅号
      每天精选资源文章推送

      Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号