网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

html的常用标签元素是什么-创新互联

这篇文章给大家分享的是有关html的常用标签元素是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联是一家专业提供绥化企业网站建设,专注与成都网站制作、成都网站建设、H5高端网站建设、小程序制作等业务。10年已为绥化众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

首先我们来了解一下html标签元素可以分成哪些类型?

HTML中标签元素一般会分成三种不同类型,分别为:块状元素,行内元素,行内块状元素。

下面我们来详细介绍一下这三种类型元素的特点以及用处,并且让大家了解常用的块状元素与行内元素有哪些?

块状元素

特点:

1、独占一行,每一个块状元素都会从新的一行重新开始,从上到下排布

2、可以直接控制宽度、高度以及盒子模型的相关css属性(元素的高度、宽度、行高以及顶和底边距都可设置)

3、在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

4、在不设置高度的情况下,块级元素的高度是它本身内容的高

因为它自身具有的这些特点,我们通常会使用块状元素来进行大布局(大结构)的搭建。

常用的块状元素:

1、普通元素

div(常用块状容器,也是css layout的主要标签)、p(段落)、hr(水平分隔线)、table( 表格)、form(交互表单)

2、标题元素:

h2(大标题)、h3(副标题)、h4(三级标题)、h5 (四级标题)、h6 (五级标题)、h7(六级标题)

3、列表元素

menu(菜单列表)、ol(有序列表)、ul(无序列表)、li(列表项)、dl(定义列表)、dt(定义术语)、dd(定义描述)

我们通过简单代码来看看这些块状元素



	
		
		块状元素
		
	
	
		
div标签元素,占据一行

p标签元素,占据一行

标题元素,占据一行
  • ul1 li 标签 元素
  • ul1 li 标签 元素
  • ul2 li 标签 元素
  • ul2 li 标签 元素

效果图:

html的常用标签元素是什么

行内元素

特点:

1、和其他内联元素从左到右在一行显示

2、不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的

3、内联元素的宽高是由本身内容的大小决定(文字、图片等)

4、内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

因为它自身具有的这些特点,我们通常会使用行内元素来进行文字、小图标(小结构)的搭建。

常用的行内元素:

1、普通元素标签

span(常用内联容器,定义文本内区块),a(锚点,链接),img(引入图片),br(强制换行),sub(下标),sup(上标)

2、文本文字修饰标签

b(加粗),strong(加粗强调),i(斜体),em(斜体强调),,big(大字体文本),small( 小字体文本),s(中划线(不推荐使用)),strike(中划线),del(文档中已被删除的文本),u(下划线)

3、表单内使用的标签元素

textarea(多行文本输入框),input(输入框),select(下拉列表),label input(元素定义标注(标记))



	
		
		行内元素
		
	
	
		span标签元素1
		span标签元素2
		
		
		

换一行看看文字效果,我是一段测试代码,被b标签加粗。我是一段测试代码,被i标签变成斜体

效果图:

html的常用标签元素是什么

行内块状元素

特点:

1、和其他元素都在一行上,不会自动换行,默认排列方式为从左到右;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

行内块状元素综合了行内元素和块状元素的特点,但是各有取舍。因此行内块状元素在日常的使用中,由于其特点,使用的次数也比较多,在很多方面都很有用。

感谢各位的阅读!关于html的常用标签元素是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


分享题目:html的常用标签元素是什么-创新互联
浏览地址:http://bjjierui.cn/article/dojcii.html

其他资讯