HTML中标签的类型

本章摘要 :

  • 一, HTML中标签的类型
    HTML中标签的类型有很多种,我们根据它显示的类型,将它们分成了3大类

  • 1, 块级标签
    特点 : 独占一行,能够随意设置宽度和高度(比如: div, p, h1, h2, ul, li)

  • 2, 行内标签
    行内标签又叫做内联标签
    特点 : 多个行内标签能同时显示在一行,并且宽度和高度是有内容决定的(比如: span, a, label)

  • 3, 行内-块级标签
    行内-块级标签也叫做内联-块级标签
    特点 : 多个行内-块级标签能够显示在同一行,并且能随意修改他们的宽度和高度(比如 : input, button)


本章重点 :

如何修改标签的显示类型

CSS中提供了一个display属性,它能够修改标签的显示类型

1, none : 隐藏标签

2, block : 让标签变为块级标签(主要针对的是标签选择器)

3, inline : 让便签变为行内标签

4, inline-block : 让标签变为行内-块级(内联-块级)标签

-->

<html>

<head>

<meta charset="UTF-8">

<title>掌握标签的类型以及如何修改标签的类型</title>

<style>

div{

color: red;

background-color: yellow;

width: 100px;

height: 150px;

}

span{

color: green;

background-color: red;

width: 100px;

height: 150px;

}

input{

width: 100px;

height: 150px;

}

</style>

</head>

<body>

<div>我真的是被自己帅哭了</div><br>

<span>每次洗澡都需要对着镜子自恋30分钟</span>

<p></p>

<input>

<input>

</body>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,661评论 0 30
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,310评论 1 41
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,301评论 0 3
  • 从前有一只毛毛虫,他有一个爱好,就是喜欢玩飞镖,每天早上做完减肥操,吃完早饭,他都会在自家种的棉花地练习飞镖。 有...
    田螺剪尾机阅读 311评论 0 0