今天我们一起探究HTML中的一些常用标签
首先,我们需要了解一下标签的分类,主要有如下两种分类方式:
1、按形式分:
双标签:开始标签和结束标签, 例如:html、body、title
单标签(自结束标签):开始标签和结束标签就它自己, 例如:meta
<meta> 或 <meta />
2、按特点分
块标签,行内标签,行内块标签
不同的标签拥有不同的功能,以下列举一些简单的标签及其应用
1:标题标签:h1~h6
注意语义:用标题标签包裹的内容就是标题
标题标签也会帮助seo进行推广,h1~h6,语义是逐步降低的
h1的语义最重,所以一般情况下一个页面就用一个h1(常用h1~h3)
默认样式:字体会加粗,从h1~h6字体大小逐步变小,会独占一行
示例:
效果图如下:
2:段落标签:p
段落标签用于表示内容中的一个自然段
语义:用段落标签进行包括,其内容就表示是一个段落
默认样式: 会独占一行,段落与段落之间有较大的间距
3:标题分组标签 :hgroup
可以将一组相关的标题同时放到hgroup
示例:
4:强调标签:
html中有两个强调标签,它们的区别是什么?
样式上:em强调,字体会变斜体
strong强调,字体会加粗
语义上:em是语音语调的强调
strong是具体内容的强调
在实际的开发过程中,一般不做区分,两个强调标签都可以使用
示例:
效果图如下:
5:居中效果:center
示例:
效果图如下:
6:短应用:q
默认样式:会在文本外面加双引号,不会独占一行
7:强制换行标签: br
8:分割线 单标签 :hr
使用del标签来表示一个删除的内容
在文本中间会有一个删除线它也不会独占一行
10:div标签
用来布局的,没有语义,会独占一行
11:span标签
没有任何语义,一般就用来包裹文字
不会独占一行
12:结构标签
html5的新标签
布局标签(结构化标签) 都是块标签
header ——网页的头部
main ——网页的主体部分(一般就一个)
footer ——网页的底部
mav ——网页的导航
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标签
它里面什么都能放,除了它自己