首页 > html教程 > 正文

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

转载 2019-02-11 0 4

原标题: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,文本……

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

相关文章


  • 七夕马上要到了,用HTML语言编写一个礼物,送给女朋友吧
  • “我的人生,我做主!”——中科韬睿TR1802班HTML项目验收
  • PDF转Word太常见了,来看看PDF转HTML的吧!
  • 仿生智能算法之路径智能寻找的HTML及JS动画实现代码
  • 零基础学习HTML背景表单单选按钮复选框上传文件下拉列表
  • 重走JAVA编程路,还是熟悉的路-html标签和css属性
  • 第六节html插入图片代码及比例鼠标经过图片显示信息元素
  • 零基础怎么学前端?学好前端必须打好html和css基础