HTML5 零基础完全教程-2-HTML5 基础标签
yund56 2025-04-26 20:21 15 浏览
2. HTML5 基础标签
学习目标
- 掌握HTML5常用的文本格式化标签
- 理解语义化容器标签的使用
- 学会使用注释标签
- 熟悉常用的HTML字符实体
文本格式化标签
HTML5提供了多种标签来格式化文本,使其在页面上以特定的方式显示。下面介绍最常用的文本格式化标签:
标题标签(<h1>到<h6>)
HTML提供六个级别的标题,从<h1>(最大)到<h6>(最小):
html复制代码<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
小贴士:每个HTML页面应该只有一个<h1>标题,它通常用于页面的主标题。标题标签不仅影响文本的显示大小,也对网页的结构和搜索引擎优化(SEO)非常重要。
段落标签(<p>)
<p>标签用于定义段落:
html复制代码<p>这是一个段落。它可以包含多行文本,浏览器会自动处理段落内的换行和空格。</p>
<p>这是另一个段落。每个段落之间浏览器会自动添加一些间距。</p>
换行标签(<br>)
<br>标签用于插入一个换行,而不开始一个新段落:
html复制代码<p>这是第一行文本。<br>这是第二行文本,位于同一段落内。</p>
小贴士:<br>是一个空元素,不需要结束标签。在HTML5中,可以写为<br>或自闭合形式<br/>。
水平线标签(<hr>)
<hr>标签用于插入一条水平线,通常用于分隔内容:
html复制代码<p>这是第一部分内容。</p>
<hr>
<p>这是第二部分内容。</p>
文本强调标签
HTML提供了多种方式来强调文本:
- 加粗文本:
- <strong>:表示文本很重要,通常显示为加粗(推荐使用,有语义)
- <b>:仅表示文本加粗显示(无特殊语义)
- html复制代码
- <p>这段文字包含<strong>重要内容</strong>和<b>加粗文本</b>。</p>
- 倾斜文本:
- <em>:表示强调,通常显示为斜体(推荐使用,有语义)
- <i>:仅表示文本斜体显示(无特殊语义)
- html复制代码
- <p>这段文字包含<em>强调内容</em>和<i>斜体文本</i>。</p>
- 下划线:
- <u>:给文本添加下划线
- html复制代码
- <p>这段文字包含<u>带下划线的文本</u>。</p>
- 删除线:
- <del>:表示已删除的文本(有语义)
- <s> 或 <strike>:表示不再正确的文本
- html复制代码
- <p>这件商品原价<del>yen199</del>,现在只要<strong>yen99</strong>!</p> <p>这是<s>错误的信息</s>更正后的信息。</p>
- 插入线:
- <ins>:表示插入的文本,通常显示为下划线
- html复制代码
- <p>我们将于<del>明天</del><ins>后天</ins>举行会议。</p>
上标和下标
- <sup>:上标文本
- <sub>:下标文本
html复制代码<p>水的化学式是H<sub>2</sub>O。</p>
<p>二次方表示为x<sup>2</sup>。</p>
预格式化文本(<pre>)
<pre>标签保留文本中的空格和换行,常用于显示代码:
html复制代码<pre>
function sayHello() {
console.log("Hello, World!");
}
</pre>
代码标签(<code>)
<code>标签用于表示计算机代码片段:
html复制代码<p>HTML中段落使用<code><p></code>标签定义。</p>
标记标签(<mark>)
<mark>标签用于突出显示文本,通常背景为黄色:
html复制代码<p>请注意这段文字中的<mark>重要信息</mark>需要特别关注。</p>
小号文本(<small>)
<small>标签用于定义小号文本,常用于免责声明、注释等:
html复制代码<p>这是正常大小的文本。<small>这是小号文本,常用于脚注或法律声明。</small></p>
缩写标签(<abbr>)
<abbr>标签用于定义缩写,并提供完整描述:
html复制代码<p>我们使用<abbr title="超文本标记语言">HTML</abbr>来构建网页。</p>
小贴士:当用户将鼠标悬停在带有title属性的<abbr>元素上时,会显示完整的描述。
地址标签(<address>)
<address>标签用于定义文档或文章的联系信息:
html复制代码<address>
Written by <a href="mailto:john@example.com">John Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
文字方向标签(<bdo>)
<bdo>标签用于改变文本的方向:
html复制代码<p>从左到右:<bdo dir="ltr">这是正常文本</bdo></p>
<p>从右到左:<bdo dir="rtl">这是反向文本</bdo></p>
语义化容器标签
通用容器(<div>)
<div>是一个通用的块级容器,常用于组织和样式化内容:
html复制代码<div>
<h2>我的博客文章</h2>
<p>这是文章内容...</p>
<p>更多内容...</p>
</div>
小贴士:<div>本身没有特定语义,它主要用于结合CSS进行页面布局和样式设计。
行内容器(<span>)
<span>是一个行内容器,常用于对文本的一部分应用样式:
html复制代码<p>我最喜欢的颜色是<span style="color:blue">蓝色</span>。</p>
小贴士:<div>和<span>的主要区别是:<div>是块级元素,会另起一行;而<span>是行内元素,不会破坏文本流。
注释标签
HTML注释用于在源代码中添加说明,这些注释不会显示在浏览器中:
html复制代码<!-- 这是一个HTML注释,用户在浏览网页时看不到它 -->
<p>这是可见的段落。</p>
<!--
这是多行注释
可以跨越多行
用于较长的说明
-->
小贴士:注释对于代码维护非常重要,特别是在复杂项目中。好的注释可以帮助你和其他开发者理解代码的结构和目的。
字符实体
HTML中的一些字符是预留的,如<和>。要在文本中显示这些特殊字符,我们需要使用字符实体。
常用的字符实体包括:
显示结果 | 描述 | 实体名称 | 实体编号 |
不间断空格 |
|
| |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
’ | 撇号 | ' | ' |
(c) | 版权符号 | © | © |
(R) | 注册商标 | ® | ® |
TM | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
示例:
html复制代码<p>在HTML中,小于号 < 和大于号 > 需要使用字符实体。</p>
<p>版权所有 (c) 2023 我的网站。</p>
小贴士:记住最常用的字符实体(如<、>、&和©)是很有用的。对于不常用的字符,可以在需要时查阅参考资料。
实际应用示例
下面是一个综合使用多种基础标签的例子:
html复制代码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5基础标签示例</title>
</head>
<body>
<!-- 页面标题 -->
<h1>我的个人博客</h1>
<!-- 文章部分 -->
<div>
<h2>HTML5学习笔记</h2>
<p>HTML5是<abbr title="超文本标记语言">HTML</abbr>的第五个主要版本,于2014年正式发布。</p>
<p>它引入了许多新特性,包括:</p>
<p>1. 语义化标签如<code><header></code>和<code><footer></code></p>
<p>2. 多媒体支持如<code><audio></code>和<code><video></code></p>
<p>这段代码:</p>
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>示例</title>
</head>
<body>
<p>你好,世界!</p>
</body>
</html>
</code></pre>
<p>创建了一个简单的HTML页面。</p>
<p>HTML中的特殊字符如<、>、&需要使用字符实体表示。</p>
</div>
<hr>
<!-- 联系信息 -->
<address>
作者:张三<br>
电子邮件:<a href="mailto:zhangsan@example.com">zhangsan@example.com</a><br>
网站:<a href="https://www.example.com">www.example.com</a>
</address>
<p><small>(c) 2023 我的博客。保留所有权利。</small></p>
</body>
</html>
章节总结
在本章中,我们学习了:
- 多种文本格式化标签,包括标题、段落、换行、加粗、倾斜等
- 语义化容器标签<div>和<span>的使用
- HTML注释的添加方法
- 常用的HTML字符实体
这些基础标签是构建HTML页面的基本构件。掌握它们的用法,你就能创建结构良好且内容丰富的网页。
练习题
- 创建一个HTML页面,包含一个主标题(h1),两个子标题(h2),和三个段落(p)。为内容选择一个你感兴趣的主题,如你的爱好或最近的一次旅行。
- 在上述页面中,使用<strong>或<b>标签强调段落中的关键词,使用<em>或<i>标签表示段落中的引文或特殊术语。
- 使用<pre>和<code>标签展示一段HTML或其他编程语言的代码片段,确保代码格式保持不变并且特殊字符正确显示。
- 创建一个包含至少三个不同HTML字符实体的段落,例如版权符号((c))、注册商标((R))、小于号(<)和大于号(>)等。
- 使用<div>和<span>标签创建一个简单的布局,并解释这两种标签的区别和各自的使用场景。你可以使用简单的内联样式(style属性)来突显它们的不同。
- 上一篇:精美html个人主页
- 下一篇:html5前端设计简历模板
相关推荐
- SM小分队Girls on Top,女神战队少了f(x)?
-
这次由SM娱乐公司在冬季即将开演的smtown里,将公司的所有女团成员集结成了一个小分队project。第一位这是全面ACE的大姐成员权宝儿(BoA),出道二十年,在日本单人销量过千万,韩国国内200...
- 韩国女团 aespa 首场 VR 演唱会或暗示 Quest 3 将于 10 月推出
-
AmazeVR宣布将在十月份举办一场现场VR音乐会,观众将佩戴MetaQuest3进行体验。韩国女团aespa于2020年11月出道,此后在日本推出了三张金唱片,在韩国推出了...
- 韩网热议!女团aespa成员Giselle在长腿爱豆中真的是legend
-
身高163的Giselle,长腿傲人,身材比例绝了...
- 假唱而被骂爆的女团:IVE、NewJeans、aespa上榜
-
在韩国,其实K-pop偶像并不被认为是真正的歌手,因为偶像们必须兼备舞蹈能力、也经常透过对嘴来完成舞台。由于科技的日渐发达,也有许多网友会利用消音软体来验证K-pop偶像到底有没有开麦唱歌,导致假唱这...
- 新女团Aespa登时尚大片 四个少女四种style
-
来源:环球网
- 韩国女团aespa新歌MV曝光 画面梦幻造型超美
-
12月20日,韩国女团aespa翻唱曲《DreamsComeTrue》MV公开,视频中,她们的造型超美!WINTER背后长出一双梦幻般的翅膀。柳智敏笑容甜美。宁艺卓皮肤白皙。GISELLE五官精致...
- 女网友向拳头维权,自称是萨勒芬妮的原型?某韩国女团抄袭KDA
-
女英雄萨勒芬妮(Seraphine)是拳头在2020年推出的第五位新英雄,在还没有正式上线时就备受lsp玩家的关注,因为她实在是太可爱了。和其他新英雄不同的是,萨勒芬妮在没上线时就被拳头当成虚拟偶像来...
- 人气TOP女团是?INS粉丝数见分晓;TWICE成员为何在演唱会落泪?
-
现在的人气TOP女团是?INS粉丝数见分晓!现在爱豆和粉丝之间的交流方法变得多种多样,但是Instagram依然是主要的交流手段。很多粉丝根据粉丝数评价偶像的人气,拥有数百、数千万粉丝的组合作为全球偶...
- 韩国女团MVaespa Drama MV_韩国女团穿超短裙子跳舞
-
WelcometoDrama.Pleasefollow4ruleswhilewatchingtheDrama.·1)Lookbackimmediatelywhenyoufe...
- aespa师妹团今年将出道! SM职员亲口曝「新女团风格、人数」
-
记者刘宛欣/综合报导南韩造星工厂SM娱乐曾打造出东方神起、SUPERJUNIOR、少女时代、SHINee、EXO等传奇团体,近年推出的aespa、RIIZE更是双双成为新生代一线团体,深受大众与粉丝...
- 南韩最活跃的女团aespa,新专辑《Girls》即将发布,盘点昔日经典
-
女团aespa歌曲盘点,新专辑《Girls》即将发布,期待大火。明天也就是2022年的7月8号,aespa新专辑《Girls》即将发行。这是继首张专辑《Savage》之后,时隔19个月的第二张专辑,这...
- 章泽天女团aespa出席戛纳晚宴 宋康昊携新片亮相
-
搜狐娱乐讯(山今/文玄反影/图科明/视频)法国时间5月23日晚,女团aespa、宋康昊、章泽天等明星亮相戛纳晚宴。章泽天身姿优越。章泽天肩颈线优越。章泽天双臂纤细。章泽天仪态端正。女团aespa亮...
- Aespa舞台暴露身高比例,宁艺卓脸大,柳智敏有“TOP”相
-
作为SM公司最新女团aespa,初舞台《BlackMamba》公开,在初舞台里,看得出来SM公司是下了大功夫的,虽然之前SM公司新出的女团都有很长的先导片,但是aespa显然是有“特殊待遇”。运用了...
- AESPA女团成员柳智敏karina大美女
-
真队内速度最快最火达成队内首个且唯一两百万点赞五代男女团中输断层第一(图转自微博)...
- 对来学校演出的女团成员语言性骚扰?韩国这所男高的学生恶心透了
-
哕了……本月4日,景福男子高中相关人士称已经找到了在SNS中上传对aespa成员进行性骚扰文章的学生,并开始着手调查。2日,SM娱乐创始人李秀满的母校——景福高中迎来了建校101周年庆典活动。当天,S...
- 一周热门
- 最近发表
-
- SM小分队Girls on Top,女神战队少了f(x)?
- 韩国女团 aespa 首场 VR 演唱会或暗示 Quest 3 将于 10 月推出
- 韩网热议!女团aespa成员Giselle在长腿爱豆中真的是legend
- 假唱而被骂爆的女团:IVE、NewJeans、aespa上榜
- 新女团Aespa登时尚大片 四个少女四种style
- 韩国女团aespa新歌MV曝光 画面梦幻造型超美
- 女网友向拳头维权,自称是萨勒芬妮的原型?某韩国女团抄袭KDA
- 人气TOP女团是?INS粉丝数见分晓;TWICE成员为何在演唱会落泪?
- 韩国女团MVaespa Drama MV_韩国女团穿超短裙子跳舞
- aespa师妹团今年将出道! SM职员亲口曝「新女团风格、人数」
- 标签列表
-
- filter函数js (37)
- filter函数excel用不了 (73)
- 商城开发 (40)
- 影视网站免费源码最新版 (57)
- 影视资源api接口 (46)
- 网站留言板代码大全 (56)
- java版软件下载 (52)
- java教材电子课本下载 (48)
- 0基础编程从什么开始学 (50)
- java是用来干嘛的 (51)
- it入门应该学什么 (55)
- java线上课程 (55)
- 学java的软件叫什么软件 (38)
- 程序开发软件有哪些 (53)
- 软件培训 (59)
- 机器人编程代码大全 (50)
- 少儿编程教程免费 (45)
- 新代系统编程教学 (61)
- 共创世界编程网站 (38)
- 亲测源码 (36)
- 三角函数积分公式表 (35)
- 函数的表示方法 (34)
- 表格乘法的公式怎么设置 (34)
- sumif函数的例子 (34)
- 图片素材 (36)
