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. codeforce 630N Forecast

    N. Forecast time limit per test 0.5 seconds memory limit per test 64 megabytes input standard input ...

  2. HDU2544最短路(dijkstra)

    用dijkstra来练练手 #include<iostream> #include<stdio.h> #include<string.h> #include< ...

  3. 一、Microsoft Dynamics CRM 4.0 SDK概述

    Chapter 1. Microsoft Dynamics CRM 4.0 SDK Overview(SDK概述) You are probably reading this book because ...

  4. Lua学习笔记(二):基本语法

    Lua学习指南:http://www.lua.org/manual/ 首先我们要明确的一点是:在Lua中,除了关键字外一切都是变量. Lua关键字 可以查看这个地址:http://www.lua.or ...

  5. NOSQL之旅---HBase

    最近因为项目原因,研究了Cassandra,Hbase等几个NoSQL数据库,最终决定采用HBase.在这里,我就向大家分享一下自己对HBase的理解. 在说HBase之前,我想再唠叨几句.做互联网应 ...

  6. RSA前台js加密,后台C#解密

    一.需求: 为了安全,项目中前台登陆用的密码需要加密传到后台,后台c#解密登陆密码. 二.解决方案 采用非对称加密算法RSA来达到目的,前台登陆页面一加载便发送一次ajax请求获取后台产生的公钥,用于 ...

  7. session cookie原理及应用

    一.术语session在我的经验里,session这个词被滥用的程度大概仅次于transaction,更加有趣的是transaction与session在某些语境下的含义是相同的. session,中 ...

  8. Unity3D-Baked Lightmapping 示例学习

    首先,看一下摄像机的Rendering Paths http://game.ceeger.com/Manual/RenderingPaths.html 可以看出,对于灯光的渲染质量 Deferred ...

  9. 【转】selenium简介及安装方法

    转自:http://www.cnblogs.com/fnng/p/3157639.html 1. selenium 介绍 selenium 是一个web 的自动化测试工具,不少学习功能自动化的同学开始 ...

  10. 什么是比特币(bitcoin)

    一.什么是比特币? 比特币是一种由开源的P2P软件产生的电子货币,是一种网络虚拟货币.比特币使用遍布整个P2P网络节点的分布式数据库来记录货币的交易,并使用密码学的设计来确保货币流通各个环节安全性.比 ...