常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>

1.常见的标签

(1)标题标签(h1-h6标签)

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第1张图片

 代码演示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第2张图片

 结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第3张图片

 注意的是:一个网页中只可以写一个

标签,就像一篇作文只能有一个大标题一样,当百度在爬取你的网页时,就认为你这个h1标签里面的内容是最重要的就会推荐给用户

(2)

:段落标签,每一个p标签下面一个段落

代码演示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第4张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第5张图片

 解释:换行标签

标签的区别是,换行标签是换行前后的句子始终在一个段落,但是段落标签是不在一个段落了,有固定的段落间距。

如下是换行标签的效果对比:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第6张图片

 结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第7张图片

 (3)


水平线标签,单标签

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第8张图片

 效果就像:文章下面和评论中间隔开的水平线,如下所示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第9张图片

 这个水平线在css样式里面也可以实现,在html标签里也可以实现

代码演示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第10张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第11张图片

 (4)加粗标签

代码:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第12张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第13张图片

 是不是两句话被加粗了呀,嘻嘻嘻

注意:这里我们更推荐使用标签,因为它有强调文本的作用,更能让百度爬虫抓取到推荐给用户,

(5)倾斜标签:

代码:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第14张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第15张图片

注意:这里也是更推荐用标签,因为也是要强调文本的功能

是不是倾斜了,神奇吧,标签可以嵌套用,如下,倾斜和加粗一起用:

代码:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第16张图片

 结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第17张图片

 倾斜和加粗的效果就出来啦

(6)删除线标签

代码演示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第18张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第19张图片

发现被99和9.9被划掉了是不是,有没有✌

注意:这里也是推荐用标签,有强调作用

(7) 下划线标签和上标标签和下标标签

下划线演示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第20张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第21张图片

 上标和下标标签就像是书里的某个名词的解释一样,

代码演示:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第22张图片

结果:

常见的html标签:<h1>/<p>/<br>/<hr/>/<b>/<strong>/<i>/<em>/<s>/<del>/<u>/<sup>/<sub></sub>_第23张图片

你可能感兴趣的:(web前端开发,html,前端,web)