首页 > html教程 > 正文

HTML之行内标签、块标签、行内块标签(广州中软卓越)

转载 2019-02-11 0 1

原标题:HTML之行内标签、块标签、行内块标签(广州中软卓越)

今天中软卓越广州Web前端培训课程的老师讲讲HTML之行内标签、块标签、行内块标签,任何不是块级元素的可见元素都是内联元素。其表现的特性是“ 行布局”形式,这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如,我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复,每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。

A:行内就是在一行内的元素,只能放在行内;块级元素,就是一个四方块,可以放在页面上任何地方。

B:说白了,行内元素就好像一个单词;块级元素就好像一个段落,如果不另加定义的话,它将独立一行出现。

C:一般的 块级元素诸如段落<p>、标 题<h1><h2>…、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ……..

D:块级无素的显著特点是:每个块级元素都是从一个新行开始显示,而且其后的无素也需另起一行进行显示。

E:<span>在CSS定义中属于一个行内元素,而<div>是块级元素。

用容器这一词会更容易形象理解它们的存在与用途,行内元素相当一个小容器,而<div>相当于一个大容器,大容器当然可以放一个小容器 了。<span>就是小容器。

一、HTML标签分类

行内标签:包含a、span、em、strong、b、i、u、label、br;

特点:可以多个标签存在一行,不能直接设置行内标签的高度、宽度、行高以及顶和底边距,完全靠内容撑开宽高!

a标签:主要用来链接一个其他的网页;

span标签:主要用来对行内的文字进行一些样式以及其他的操作;

em标签:一般用来对文字进行强调,使用斜体体现出来;

strong标签:一般用来对文字进行强调,使用加粗字体体现出来;

img标签:图片引用标签,其中src属性中写入图片的地址;

var标签:Java中命名变量的标签。

块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6、form;

特点:独占一行,对高度、宽度、行高以及顶和底边距都可设置的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽;

p标签:段落标签,段落文字使用,默认格式:段尾进行换行;

div标签:划分块的主要使用标签;

ul标签:无序列表的主标签,后面的标号为圆点(黑色);

ol标签:有序列表的主标签,后面一般跟有序的1,2,3,4,5...;

li标签:列表中的主体使用标签

dl标签:自定义标签的主标签;

dt标签:自定义标签的表头;

dd标签:自定义标签的表头的解释(描述)信息;

h1~h6:6级标题标签、字体的大小依次变小。

行内块标签:imginputtextarea

特点:结合的行内和块级的有点,不仅可以对宽高属性值生效,还可以多个标签存在一行显示;

二、各种标签之间的转换

1、块级标签转换为行内标签:display:inline;

2、行内标签转换为块级标签:display:block;

3、转换为行内块标签:display:inline-block;

三、各个标签之间的区别

块标签:独自占领一行、可以进行宽高的数值的设定;

行标签:在一行内显示、不可以进行宽高的数值设定;

行内块标签:能和其他元素待在一行,能设置宽高;

四、嵌套规则

块标签可以套行标签,行标签不可以套块标签。

P标签不要套块属性标签,可以套a,span,文本……

嵌套的时候注意代码的缩进。

相关文章


  • 用Unity和HTML5开发移动游戏的优缺点
  • 游戏中的HTML词汇大比拼
  • 白鹭HTML5开发者巡回沙龙走进“会耍”的成都
  • PS直播预告|html5+css3打造炫酷3D卡片效果
  • 游吐槽丨道长开喷:《逆水寒》该道歉!炒作low逼,把html说成C语言
  • html页面中图片长宽不一需要根据父级长宽全图不拉伸显示的做法
  • 高端的医院官网响应式模板PSD和HTML+后台界面HTML皮肤套装下载
  • 应届生4天的时间来制作一个简单的HTML按钮和CSS,应该解雇他吗?
  • 作者信息

    藏色散人

    好好学习天天向上!

    最近文章
    PS搞定你的影子 0
    PS黑白照片快速上色技巧 0
    以口袋PUSH案例盘点H5的类型 0