CSS入门3-认识html之元素

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1. 元素的定义

html元素,指的是从开始标签(start tag)到结束标签(end tag)的所有代码。 其拥有如下特点:

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容(empty content)
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)
  • 大多数 HTML 元素可拥有属性

2. 元素分类

2.1 顶级元素 Top-level element

包括html, body, frameset, 表现如Block-level element, 属于高级块级元素。

2.2 块级元素:Block-level element

以块显示的元素,高度宽度都是可以设置的。比如我们常用的 p, h1~h6, div, ul 默认状态下都是属于块级元素。块级元素默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。

块级元素能够独立存在,一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素,而任意一个块级元素均可以用Box model(盒模型)来解释说明。

可以这么理解,页面就像一个个盒子垒起来,每个盒子就是一个块状元素。

有哪些块元素呢?我按照自己写页面时的使用频率来排序:

  1. 常用
  • div 常用来组合块级元素,像几个小盒子组成的大盒子一样,作为一个分区
  • p 段落
  • h1~h6 标题
  • table 表格
  • ul 无序列表
  • ol 有序列表
  • li 列表项
  • hr 水平分隔线
  1. 不常用
  • form html表单
  • dl 定义列表
  • blockquote 常引用
  1. 基本不用(那就不列举了,记住上面这些就够了)

更多块状元素请参考Block-level elements

2.3 内联元素 Inline element

通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。当然内联元素也能变成块级元素,那就是通过css的display:inline;和float来实现。

内联元素依附其他块级元素存在,紧接于被联元素之间显示,而不换行。 可以理解为书架上的书本,有高有低,有宽有窄,取决于其内容本身。牢记一点:内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度。

内联元素如下:

  1. 常用
  • span 和div对于块元素的作用一样,sapn用来组合内联元素。
  • a 链接
  • input 输入框
  • img 图片
  • button 按钮
  • select 单选或多选框
  • br 换行(你无法为它设置宽高)
  • textarea 多行文本输入框
  • b,big,i,em 设置文本效果的基本都是
  1. 不常用
  • q 短引用
  1. 基本不用(不做列举)

更多内联元素请参考Inline elements

参考:

W3school-HTML元素 HTML-块级元素和内联元素 html块级元素与行内元素 Html中行内元素有哪些?块级元素有哪些? 行内元素和块级元素 元素类型 Block-level elements Inline elements

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端布道

CSS选择器详解

最近在做一些面试的工作,我经常会问的一个问题就是:CSS中有哪些选择器。我往往得到的答案就是id选择器啊、class选择器啊,再追问下去就没了,这让我很是意外!...

36040
来自专栏前端说吧

css布局 - 常规上中下分左右布局的一百种实现方法(更新中...)

左侧nav栏目,要固定也要用fixed。不过固定定位的元素要想高度百分百,可以使用top+bottom对应方位值的拉伸效果:

39420
来自专栏柠檬先生

初探css3

属性选择器:   1.完全匹配的属性选择器。 就是完全匹配的字符串。     [id=article]{       color:red;    ...

21190
来自专栏Pythonista

css基础

    行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。

14320
来自专栏云端架构

【云端架构】前端必备“层叠样式表”精选

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

441130
来自专栏Create Sun

没人看系列----css 随笔

16630
来自专栏一“技”之长

Java开发GUI之滚动条 原

7800
来自专栏C/C++基础

web前端开发初学者十问集锦(2)

行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。

9310
来自专栏前端布道

CSS技巧和经验

1. 如何清除图片下方出现几像素的空白间隙 方法1 img { display: block; } 方法2 img { ...

38270
来自专栏岑志军的专栏

HTML标签分类

38290

扫码关注云+社区

领取腾讯云代金券