HTML-块级元素和内联元素

块级元素

内联元素

address - 地址

block - 块引用

center - 居中对齐块(不推荐)

dir - 目录列表(HTML5踢出)

div - 常用的不能再常用了

dl - 列表

fieldset - 一个包含着form组的框

form - 表了个单

h1 ~ h6 各种尺寸标题

hr - 水平分隔线(不推荐)

menu - 菜单列表

noframes - 浏览器不支持frames显示的块

noscript - 浏览器不支持script显示的块

ol - 有序列表

ul - 无序列表

p - 段落

pre - 格式化文本

table - 表了个格

a - 锚点

abbr - 缩写(语义、利于搜索引擎)

acronym - 首字(HTML5踢出)

b - 粗体(不推荐)

big - 大字体(不推荐)

cite - 引用(语义、利于搜索引擎)

code - 引用源码(语义)

em - 强调(如果仅为了斜体请用<i>)

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

label - 表单标签(事件关联对应表单项)

q - 短引用(标准添加引号,IE不添加引号)

s - 中划线(不推荐)

samp - 用于提取内容

select - 项目选择

small - 小字体(不推荐)

strong - 粗体(不推荐)

sub - 下标

sup - 上标

textarea - 多行文本输入框

u - 下划线

var - 定义变量

学习html后, 你会了解一些基本的html元素(Element), 如p, h1~h6, br, div, li, ul, img等.
如果将这些元素细分, 又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.

1. Top-level
element 【顶级元素】:    { html,
body, frameset }
包括html, body, frameset, 表现如Block-level element, 属于高级块级元素.

2. Block-level
element 【块级元素】:   { p,
h1~h6, div, ul }
顾名思义就是以块显示的元素,高度宽度都是可以设置的。比如我们常用的
p, h1~h6, div, ul
默认状态下都是属于块级元素。块级元素比较霸道,默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。当然非块级元素也可以通过css的display:block;将其更改成块级元素。此外还有个特殊的,float也具有此功能。
块级元素能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔。块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用Box model来解释说明.

3. Inline
element 【内联元素】: { a,
br, em, img, li, span }
通俗点来说就是文本的显示方式,与块级元素相反,内联元素的高度宽度是不可以设置的,其宽度就是自身文字或者图片的宽度。我们常用到的<a>、<span>、<em>都属于内联元素。内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。当然内联元素也能变成块级元素,那就是通过css的display:inline;和float来实现。
内联元素依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行.

在《CSS权威指南》这样定义到,“任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式。”我个人不太习惯“行布局”的说话,因为我认为块级元素从表现上更像“行”显示,而内联元素更像是“文本”的显示属性。这其中一点记住很关键,“内联元素的高度宽度都是不可以设置的,其宽度就是自身文字或者图片的宽度”。因为在你设置宽度高度大半天后没反应才发现,原来这只是个内联元素。

HTML-块级元素和内联元素的更多相关文章

  1. Code笔记之:CSS块级元素、内联元素概念

    文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...

  2. CSS文档流与块级元素和内联元素

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  3. html块级元素和内联元素小结

    Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...

  4. html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。

    html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...

  5. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  6. (转) html块级元素和内联元素区别详解

    http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...

  7. CSS块级元素、内联元素概念

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  8. html块级元素和内联元素区别详解

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  9. html的块级元素和内联元素

    常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...

  10. CSS的块级元素和内联元素的概念

    三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...

随机推荐

  1. AutoCAD.NET二次开发:扩展数据之XData

    结果缓存——ResultBuffer 结果缓存即 Autodesk.AutoCAD.DatabaseServices.ResultBuffer 类型,使用 ResultBuffer 对象时需要提供一个 ...

  2. C#Windows窗体界面设计_01_绘制三角函数_附强制类型转换

    binzhouweichao@163.com 今天开始学习C#windows窗体界面设计. 首先说一下类型转换. 参考http://www.csharpwin.com/csharpspace/6848 ...

  3. 【PYTHON】二维码生成

    二维码是什么? 二维码从一维码扩展而来,增加另一维具有可读性的条码,用黑白矩形图形表示二进制数据,被设备扫描后获取其中包含的信息,二维码的长度.宽度均记载着数据,二维码具有定位点和容错机制,即便没有辨 ...

  4. HibernateDaoSupport的使用

    1.HibernateDaoSupport是有spring提供的一个hibernate模版工具类,或不多说,直接上代码 接口 IGenericDao.java package org.hibernat ...

  5. maven使用.01.Hello World

    要说Java世界有什么东西是我最为留恋的:在写其他语言程序的时候,我最为想要的东西,那非maven莫属. 什么是Maven? Maven能做什么? Maven是一个针对Java的自动构建工具.所谓自动 ...

  6. 开始学习web前端技术

    不能再蹉跎了,不能再徘徊了,不能再犹豫了,犹豫徘徊等于白来…… 感觉之前浪费了太多的岁月,必须得学习一门实用的技术来充实自己空虚的心情了. 想来想去网页应该是万金油的,大大小小多多少少都得用到.既然如 ...

  7. openssl生成rsa公私钥

    1.生成私钥pem,  执行命令openssl genrsa -out rsa_private_key.pem 1024 2.生成公钥,执行命令openssl rsa -in rsa_private_ ...

  8. delphi 添加节点

      //在选中的节点中上添加1个节点 procedure TForm1.Button1Click(Sender: TObject); begin     with TreeView1 do     b ...

  9. android Camera 数据流程分析

    这篇文章主要针对其数据流程进行分析.Camera一般用于图像浏览.拍照和视频录制.这里先对图像浏览和拍照的数据流进行分析,后面再对视频电话部分进行分析. 1.针对HAL层对摄像头数据处理补充一下 Li ...

  10. win7中USB音箱没有声音解决的方法

    Win7装好后,原来在XP中工作正常的USB小音箱却不工作了,重装了声卡驱动还是一样,后来通过下面尝试最终好用了. 1.右键右下角喇叭button. 2.点击"播放设备". 3.设 ...