百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

HTML5 零基础完全教程-2-HTML5 基础标签

zhezhongyun 2025-03-26 19:07 44 浏览

2. HTML5 基础标签

学习目标

  • 掌握HTML5常用的文本格式化标签
  • 理解语义化容器标签的使用
  • 学会使用注释标签
  • 熟悉常用的HTML字符实体

文本格式化标签

HTML5提供了多种标签来格式化文本,使其在页面上以特定的方式显示。下面介绍最常用的文本格式化标签:

标题标签(

HTML提供六个级别的标题,从

(最大)到

(最小):

html复制代码

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

小贴士:每个HTML页面应该只有一个

标题,它通常用于页面的主标题。标题标签不仅影响文本的显示大小,也对网页的结构和搜索引擎优化(SEO)非常重要。

段落标签(

标签用于定义段落:

html复制代码

这是一个段落。它可以包含多行文本,浏览器会自动处理段落内的换行和空格。

这是另一个段落。每个段落之间浏览器会自动添加一些间距。

换行标签(


标签用于插入一个换行,而不开始一个新段落:

html复制代码

这是第一行文本。
这是第二行文本,位于同一段落内。

小贴士
是一个空元素,不需要结束标签。在HTML5中,可以写为
或自闭合形式

水平线标签(


标签用于插入一条水平线,通常用于分隔内容:

html复制代码

这是第一部分内容。


这是第二部分内容。

文本强调标签

HTML提供了多种方式来强调文本:

  • 加粗文本
    • :表示文本很重要,通常显示为加粗(推荐使用,有语义)
    • :仅表示文本加粗显示(无特殊语义)
  • html复制代码
  • <p>这段文字包含<strong>重要内容</strong>和<b>加粗文本</b>。</p>
  • 倾斜文本
    • :表示强调,通常显示为斜体(推荐使用,有语义)
    • :仅表示文本斜体显示(无特殊语义)
  • html复制代码
  • <p>这段文字包含<em>强调内容</em>和<i>斜体文本</i>。</p>
  • 下划线
    • :给文本添加下划线
  • html复制代码
  • <p>这段文字包含<u>带下划线的文本</u>。</p>
  • 删除线
    • :表示已删除的文本(有语义)
    • :表示不再正确的文本
  • html复制代码
  • <p>这件商品原价<del>yen199</del>,现在只要<strong>yen99</strong>!</p> <p>这是<s>错误的信息</s>更正后的信息。</p>
  • 插入线
    • :表示插入的文本,通常显示为下划线
  • html复制代码
  • <p>我们将于<del>明天</del><ins>后天</ins>举行会议。</p>

上标和下标

  • :上标文本
  • :下标文本
html复制代码

水的化学式是H2O。

二次方表示为x2

预格式化文本(

标签保留文本中的空格和换行,常用于显示代码:

html复制代码
function sayHello() {
    console.log("Hello, World!");
}

代码标签(

标签用于表示计算机代码片段:

html复制代码

HTML中段落使用

标签定义。

标记标签(

标签用于突出显示文本,通常背景为黄色:

html复制代码

请注意这段文字中的重要信息需要特别关注。

小号文本(

标签用于定义小号文本,常用于免责声明、注释等:

html复制代码

这是正常大小的文本。这是小号文本,常用于脚注或法律声明。

缩写标签(

标签用于定义缩写,并提供完整描述:

html复制代码

我们使用HTML来构建网页。

小贴士:当用户将鼠标悬停在带有title属性的元素上时,会显示完整的描述。

地址标签(

标签用于定义文档或文章的联系信息:

html复制代码
Written by John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

文字方向标签(

标签用于改变文本的方向:

html复制代码

从左到右:这是正常文本

从右到左:这是反向文本

语义化容器标签

通用容器(

是一个通用的块级容器,常用于组织和样式化内容:

html复制代码

我的博客文章

这是文章内容...

更多内容...

小贴士

本身没有特定语义,它主要用于结合CSS进行页面布局和样式设计。

行内容器(

是一个行内容器,常用于对文本的一部分应用样式:

html复制代码

我最喜欢的颜色是蓝色

小贴士

的主要区别是:
是块级元素,会另起一行;而是行内元素,不会破坏文本流。

注释标签

HTML注释用于在源代码中添加说明,这些注释不会显示在浏览器中:

html复制代码

这是可见的段落。

小贴士:注释对于代码维护非常重要,特别是在复杂项目中。好的注释可以帮助你和其他开发者理解代码的结构和目的。

字符实体

HTML中的一些字符是预留的,如<和>。要在文本中显示这些特殊字符,我们需要使用字符实体。

常用的字符实体包括:

显示结果

描述

实体名称

实体编号


不间断空格

<

小于号

<

<

>

大于号

>

>

&

和号

&

&

"

引号

"

"

撇号

'

'

(c)

版权符号

(c)

(c)

(R)

注册商标

(R)

(R)

TM

商标

TM

TM

×

乘号

×

×

÷

除号

÷

÷

示例:

html复制代码

在HTML中,小于号 <> 需要使用字符实体。

版权所有 (c) 2023 我的网站。

小贴士:记住最常用的字符实体(如<、>、&和(c))是很有用的。对于不常用的字符,可以在需要时查阅参考资料。

实际应用示例

下面是一个综合使用多种基础标签的例子:

html复制代码


    
    
    HTML5基础标签示例


    
    

我的个人博客

HTML5学习笔记

HTML5是HTML的第五个主要版本,于2014年正式发布。

它引入了许多新特性,包括:

1. 语义化标签如

2. 多媒体支持如

这段代码:





    示例


    

你好,世界!

创建了一个简单的HTML页面。

HTML中的特殊字符如<、>、&需要使用字符实体表示。


作者:张三
电子邮件:zhangsan@example.com
网站:www.example.com

(c) 2023 我的博客。保留所有权利。

章节总结

在本章中,我们学习了:

  • 多种文本格式化标签,包括标题、段落、换行、加粗、倾斜等
  • 语义化容器标签
    的使用
  • HTML注释的添加方法
  • 常用的HTML字符实体

这些基础标签是构建HTML页面的基本构件。掌握它们的用法,你就能创建结构良好且内容丰富的网页。

练习题

  1. 创建一个HTML页面,包含一个主标题(h1),两个子标题(h2),和三个段落(p)。为内容选择一个你感兴趣的主题,如你的爱好或最近的一次旅行。
  2. 在上述页面中,使用标签强调段落中的关键词,使用标签表示段落中的引文或特殊术语。
  3. 使用
    标签展示一段HTML或其他编程语言的代码片段,确保代码格式保持不变并且特殊字符正确显示。
  4. 创建一个包含至少三个不同HTML字符实体的段落,例如版权符号((c))、注册商标((R))、小于号(<)和大于号(>)等。
  5. 使用
    标签创建一个简单的布局,并解释这两种标签的区别和各自的使用场景。你可以使用简单的内联样式(style属性)来突显它们的不同。

相关推荐

3 分钟!AI 从零开发五子棋全过程曝光,网友:这效率我服了

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8...

一行代码实现display&quot;过渡动画&quot;原理

作者:Peter谭老师转发链接:https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章,提到如何让display出现过渡动画,却没有仔...

脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下

AlekseiVinogradovisaRussianfreelancedigitalartistwhoshareshisskillsandtalentwith120k...

浏览器的渲染机制、重绘、重排

1、什么是重排和重绘网页生成过程:HTML被HTML解析器解析成DOM树css则被css解析器解析成CSSOM树结合DOM树和CSSOM树,生成一棵渲染树(RenderTree)生成布局(flo...

托福写作高频考题写作思路&amp;词汇丨考虫独家

科技话题与媒体话题是托福写作的常考话题很多考生对这两类话题里的专有词汇表达也许很不了解所以今天就跟随考虫托福写作老师刘云龙老师一起来学习在这些话题的写作里你可以使用哪些有用的表达。希望大家有收获!记得...

在优麒麟上使用 Electron 开发桌面应用

使用Web标准来创建桌面GUI,上手快、成本低、跨平台、自适应分辨率,这些都是Electron的优势。作者/来源:优麒麟Electron是由Github开发,用HTML、CSS和...

php手把手教你做网站(三十八)jquery 转轮盘抽奖,开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。1、转轮盘本来是想直接绘图实现轮盘,但是没有找到怎么填充文字,只好把轮盘弄成了背景图,通常用于游戏抽道具,商城积分抽奖,公司年末员工抽奖点击抽...

用 CSS 整活!3D 轮播图手把手教学,快乐代码敲出来

兄弟们,今天咱来搞点好玩的——用CSS整一个3D轮播图!咱野生程序员就是要在代码里找乐子,技术和快乐咱都得要!代码是写不完的,但咱能自己敲出快乐来,走起!一、先整个容器,搭个舞台咋先写一个...

实现一个超酷的 3D 立体卡片效 #前端开发

今天我们来实现一个超酷的3D立体卡片效果。正常情况下就是一个普通的图片展示卡片,鼠标悬停的时候图片会跳出卡片,并将影子投射到背景卡片上,在视觉上有一个3D立体感。html主要分成3个部分:容器→背景层...

Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;

模态框的"层级噩梦"与Teleport的救赎"这个模态框怎么又被父容器截断了?"团队协作开发后台系统时,小张第N次遇到这个问题。多层嵌套的组件结构里,弹窗被overfl...

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯CSS...

填坑:transform元素导致zindex失效终极方法

今天遇到了使用css3动画的元素层级被放大置顶的问题,ios浏览器上没问题,安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效,兄弟元素设置多高的z-index都盖不住解决办...

诡异的层级错乱:一个被transform隐藏的CSS陷阱

周五下午三点十七分,设计部突然发来紧急截图——原本应该悬浮在顶部的导航菜单,此刻正诡异地被下方的轮播图遮挡。我盯着屏幕上错乱的层级关系,手指下意识地敲下z-index:9999,心里清楚这不过是程序...

动画篇--碎片动画

本文授权转载,作者:Sindri的小巢(简书)前言从最开始动笔动画篇的博客,至今已经过去了四个多月。这段时间回头看了看自己之前的动画文章,发现用来讲解动画的例子确实不那么的赏心悦目。于是这段时间总是想...

Nature:大洋转换断层处的拉张构造与两阶段地壳增生

Nature:大洋转换断层处的拉张构造与两阶段地壳增生转换断层是三种基本的板块边界之一,全球总长度超过48000km(Bird,2003),它们的发现为板块构造理论的建立奠定了重要的基础(Wil...