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

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

### 一、文本修饰标签 ###

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

这是一段需要强调的文本

![20200922161911808.png][]

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

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

![20200922162252789.png][]

（3）、：下标文本、上标文本。

勾股定理：a2 + b2 = c2
 
 
 水分子：H2O

![2020092216290943.png][]

（4）<del>、<ins>：删除文本、插入文本。

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

![20200922163324506.png][]

### 二、div与span ###

（1）概念

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

（2）案例

练习百度搜索页面制作。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70][]

编写页面，本页面中涉及一些改变字体颜色的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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 1][]

[20200922161911808.png]: /images/20221123/fa90ad6edecf4b6cbacd66b99e0cbc5b.png
[20200922162252789.png]: /images/20221123/78c4ce3e303b4aab946a021bf5c5b7f3.png
[2020092216290943.png]: /images/20221123/78ab09e94a284027bf39242e032bd747.png
[20200922163324506.png]: /images/20221123/058bc5b9fa9549b8830c6ce8ddf3e5be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70]: /images/20221123/66526ab7d72d410586bf2fcc38794593.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjk4MzUx_size_16_color_FFFFFF_t_70 1]: /images/20221123/ac23bd521ec0444b9b7c73a8fc030fc1.png