HTML5基础学习（8）：文本修饰标签、div与span-蒲公英云

HTML5基础学习（8）：文本修饰标签、div与span

怼烎@ 2022-12-09 13:57 294阅读 0赞

一、文本修饰标签

（1）标签：表示需要强调的文本，强调性较强。会对文本进行加粗：


这是一段需要强调的文本


（2）标签：表示需要强调的文本，强调性较弱。会对文本进行斜体：


strong这是一段需要强调的文本
这是一段需要强调的文本


（3）_{、^{：下标文本、上标文本。}}


勾股定理：a2 + b2 = c2


水分子：H2O


（4）~~、：删除文本、插入文本。~~


促销：原价<del>300</del>，现价<ins>100</ins>


二、div与span
（1）概念

div（块）：div全称division，“分割、分区”的意思。
标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数标签都可以嵌套在
标签中，
还可以嵌套多层
,用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）：用来修饰文字的，div与span都是没有任何默认样式的，需要配合css才行。

（2）案例

练习百度搜索页面制作。

编写页面，本页面中涉及一些改变字体颜色的css样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 600px;">

<a href="#">html5 HTML&JS+前端培训_黑马程序员-首页</a>

优势: 专职教研团队特色: 真项目真实战培训方式: 全程面授班型: 基础/进阶班
黑马html5,项目实战教学,模拟企业真实开发,引入三大流行框架,html5,不断更新技术热点,贴合企业需求,学习即积累项目经验.
web.itheima.com 2020-09 <a href="#" style="color: gray;">评价</a>
</div>
<div style="width: 600px;">

<a href="#"> HTML 5 教程</a>

HTML5 是下一代的 HTML。本教程向您讲解 HTML5 中的新特性。每一章中的实例通过我们的 HTML 编辑器,您能够编辑 HTML,然后点击按钮来查看结果。实例 <! 
www.w3school.com.cn/html5/ind.... <a href="#" style="color: gray;">百度快照</a>
</div>
</body>
</html>