HTML-块级元素和内联元素
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-块级元素和内联元素的更多相关文章
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- html块级元素和内联元素小结
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...
- html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- (转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- html块级元素和内联元素区别详解
块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...
- html的块级元素和内联元素
常用的块级元素: address , center , div , dl ,, form , h1 , h2 , h3 , h4 , h5 , h6 , menu , ol , p , table , ...
- CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...
随机推荐
- POJ 3312 Mahershalalhashbaz, Nebuchadnezzar, and Billy Bob Benjamin Go to the Regionals (水题,贪心)
题意:给定 n 个字符串,一个k,让你把它们分成每组k个,要保证每组中每个字符串长度与它们之和相差不能超2. 析:贪心策略就是长度相差最小的放上块. 代码如下: #pragma comment(lin ...
- 关于ssh和ajax小小总结
我是相当的不专业,写给自己看.有什么错误的话,说出来将感激不尽. 有两种方法异步传输 1.通过json字符串: jsp中这么写: $.getJSON( "details_ajaxActio ...
- C++中用二维数组传参时形参该怎样写[转]
二维数组的存储方式是和一维数组没什么区别,但是用二维数组做参数,它的形参该怎样写? 要注意的是:函数中的形参其实就相当于一个声明,并不产生内存分配,形参的目的就是要让编译器知道函数参数的数据类型. 正 ...
- linux知识积累
linux 操作系统一.linux 操作系统概述 简介 Linux是 ...
- javascript --学习this
this 在一般的强类型语言中,this指向的是这个对象本身,可在javascript中 this的取值是执行上下文环境的一部分 其实这个this并不是很难立即,只要记住二点就可以了 那就是谁call ...
- appcompat_v7/res/values-v21/themes_base.xml No resource found that matches the given name
今天晕死了 将工作区里的appcompat_v7删除掉了, 然后随意新建了一个工程,因为已经升级到5.0了,appcompat_v7内容有所改变, 以前的工程引用旧的appcompat_v7的某些属性 ...
- 定义member【C++】cstddef中4个定义
最近研究定义member,稍微总结一下,以后继续补充: size_t size_t corresponds to the integral data type returned by the lang ...
- Codeforces Beta Round #51 C. Pie or die 博弈论找规律 有趣的题~
C. Pie or die Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55/problem/ ...
- 不可不表的OSG智能指针之强指针与弱指针 《转载》
不可不表的OSG智能指针之强指针与弱指针 <转载> 使用OSG的人都知道OSG的内存管理方式采用了智能指针,通过智能指针的方式让OSG自己处理对象的销毁工作.在OSG中有两个智能指针类型, ...
- 归并排序的C语言实现
归并排序的核心思想是 Divide-and-Conquer 算法,即将要解决的size为n的问题,分成a个size为n/b的子问题,这些子问题的结果经过O(n^d)的时间复杂度合并,即可解决最初的问题 ...