HTML入门第二课（常用标签）

二白程序员

已于 2024-03-04 09:29:40 修改

阅读量903

点赞数 26

文章标签： html 前端

于 2024-02-28 15:53:25 首次发布

本文链接：https://blog.csdn.net/weixin_63511098/article/details/136346795

版权

本文介绍了HTML入门中常用的标记标签，如标题标签（h1~h6）、段落标签(p)、hgroup标签以及强调标签(em和strong)，并讨论了它们的语义、默认样式和使用场景。此外，还涉及了居中效果、div和span标签，以及HTML5新标签的分类。

摘要由CSDN通过智能技术生成

上一次二白记录了HTML入门的第一课，现在咱们来继续说说HTML。

常用标签

相信大家对HTML已经有了一定程度的了解，我们要想制作一个网页，就得学习标记语言(markup language)，而标记语言其中有着很多的标记标签(markup tag)，现在咱们来看看一些常用标签。

1：标题标签：h1~h6

注意语义：用标题标签包裹的内容就是标题

标题标签也会帮助seo进行推广，h1~h6，语义是逐步降低的

h1的语义最重，所以一般情况下一个页面就用一个h1（常用h1~h3）

默认样式：字体会加粗，从h1~h6字体大小逐步变小，会独占一行

示例：

<!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>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

</html>

2：段落标签 p

段落标签用于表示内容中的第一个自然段

语义：用段落标签进行包裹，其内容就表示是一个段落

默认样式:会独占一行，段落与段落之间有较大间距

特殊的块元素一般指用来包裹文字或图片，它里面不能放块元素

3：hgroup标签

用来为标签分组，可以将一组相关的标题同时放到hgroup

示例：

<!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>
    <hgroup>
        <h1>古诗一首</h1>
        <h3>作者</h3>
    </hgroup>
    <p>离离原上草</p>
    <p>一岁一枯荣</p>
    <p>野火烧不尽</p>
    <p>春风吹又生</p>
</body>

</html>

格式很丑是吧，大家先别急

4：强调标签

I：em标签用于表示语音语调的一个加重，行内元素（inline element）

II：strong表示强调，重要内容，强调

em和strong都不会独占一行

分享一个面试题：

问：html中有两个强调标签，它们的区别是什么？

答：样式上：em强调，字体上会变斜体

strong强调，字体会加粗

语义上：em是语音语调的强调

strong是具体内容的强调

在实际的开发过程中，一般不作区分，两个强调标签都可以使用

示例：

<!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>
    <p>
        为法守不，<em>那</em>中中变。
        <em>i</em> psum dolor sit, amet consectetur adipisici<strong>n</strong>
    </p> 
</body>

</html>

5：center 居中效果

6：q 表示短引用

默认样式：会在文本外面加双引号，不会独占一行

7：换行标签 br ——强制换行

8：分割线单标签 hr

9：del标签

使用del标签来表示一个删除的内容

在文本中间会有一个删除线它也不会独占一行

这个还挺有意思，像极了某音卖货，示例：

<!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>
    原价：<del>999</del><br>
    现价:9.9
</body>

</html>

10：div标签

用来布局的，没有语义，会独占一行

11：span标签

没有任何语义，一般就用来包裹文字

不会独占一行

12：结构标签

html5的新标签

布局标签（结构化标签）都是块标签

header ——网页的头部

main ——网页的主体部分（一般就一个）

footer ——网页的底部

nav ——网页的导航

aside ——和主体相关的内容，侧边栏

article ——文章之类的

section ——独立的区块，上面的标签都不合适，就用这个

再分享个面试题：

问：请你简单说一说元素的分类

答：元素（标签）的分类

1、形式分：

双标签：h1-h6,p,strong,em,hgroup,del,div,span

单表签：br,hr,meta

2、特点分：

块标签:一般都是用来布局的

（1）、会独占一行

（2）、可以设置宽高

（3）、如果不设置宽高，块元素的宽度是父元素的100%，块元素的高度被内容撑开

h1-h6,p,hgroup,center,div

行内标签：一般用来包裹文字

（1）、不可以设置宽高，被内容撑开

(2)、不会独占一行

strong,em,span,del

行内块标签:

（1）、兼具块标签和行内标签的特点，可以设置宽高，不会独占一行

（2）、元素与元素之间会有3像素的空白间距，称三像素问题

img,input,button

注意：

1、块标签里面什么都能放

块标签里面可以放块标签，行内标签，行内块标签

2、行内标签里面一般只放文字，不能放块标签

3、有一个特殊的块标签 p标签

它里面只能放文字或者图片，不能放块元素

4、有一个特殊的行内标签 a标签

它里面什么都能放，除了它自己

二白写的有点乱

二白程序员

关注

26
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
HTML入门第二课（常用标签）

相信大家对HTML已经有了一定程度的了解，我们要想制作一个网页，就得学习标记语言(markup language)，而标记语言其中有着很多的标记标签(markup tag)，现在咱们来看看一些常用标签。
复制链接

扫一扫