一、块级、内联、内联块级元素

(1)块级元素:block

**独占一行

**可设置width,height,margin,padding

**内部可包含块级或内联元素

(3)内联(行内)元素:inline

**和其他inline元素同行显示

**可以设置margin-left,margin-righ,padding-left,padding-right,

**无效设置widht,height,margin-top,margin-bottom,padding-top,padding-bottom

**内部可包含块级或内联元素,内部包含块级元素时,该块级元素继续保持独行显示,下一个内联元素会换行显示

(4)内联块级元素:inline-block

**和其他inline或inline-block元素同行显示。

**和块级元素一样可设置width,height,margin,padding。

**内部可包含块级或内联元素,内部包含块级元素时,该块级元素会在内联元素的内部独行显示,不会影响下一个内联元素的同行显示

块级元素

<div> 定义文档中的节

<blockquote>定义长的引用

<dl>定义列表详情

<fieldset> 定义围绕表单元素的边框

<form> 定义html的表单

<h1>--<h6> 标题

<hr> 水平线

<legend> 定义<fieldset>元素的标题

<li> 定义列表的项目

<object> 定义内嵌对象

<ol> 定义有序列表

<p> 定义段落

<pre> 定义预格式文本

<table> 定义表格

<ul>定义无序列表

Html5新元素

<article> 定义一个文章区域

<aside> 定义页面的侧边栏内容

<audio> 定义音频内容

<canvas> 定义画布

<dialog> 定义对话框,比如提示框

<embed> 定义嵌入的内容,比如插件

<figure> 定义独立的流内容(图像、图标、照片、代码等)

<figcaption> 定义元素的标题

<footer> 定义section或document的页脚

<header> 定义文档的头部区域

<nav> 定义导航链接的部分

<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分

<summary> 标签包含 details 元素的标题,"details" 元素用于描述有关文档或文档片段的详细信息

内联元素

<a> 超文本链接

<address> 文档作者或拥有者的联系信息

<abbr> ,<acronym>  定义缩写

<area> 定义图像映射内部的区域

<b>加粗字体

<bdo> 定义文字方向

<cite>定义引用

<code> 计算机代码

<dfn> 定义定义项目

<em> 定义强调文本

<i> 斜体

<ins> 定义被插入的文本

<kbd> 定义键盘文本

<label>定义input元素的标注

<map> 定义图形映射

<mark> 定义带记号的文本

<q> 定义短的引用

<samp> 计算机样本

<samll> 定义小号文本

<span> 定义文档中的节

<strong> 定义强调文本

<sub> 定义下标文本

<sup> 定义上标文本

<tt> 定义打字机文本

<var> 定义文本的变量部分

Html5新元素

<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。

<meter> 定义度量衡。仅用于已知最大和最小值的度量

<rp>  在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容

<rt>  标签定义字符(中文注音或字符)的解释或发音

<ruby> 标签定义 ruby 注释(中文注音或字符)

<time> 定义日期或时间,或者两者

<wbr> 规定在文本中的何处适合添加换行符

内联块级元素

<button> 定义一个点击按钮

<iframe> 定义内联框架

<img>  定义图像

<input>  定义输入控件

<select> 定义选择列表(下拉列表)

<textarea>  定义多行的文本输入控件

Html5新元素

<video> 标签定义视频,比如电影片段或其他视频流

<keygen> 对表单生成密钥字段

<progress> 定义运行中的进度(进程)

作者:leona

原文链接:http://www.cnblogs.com/leona-d/p/5950280.html

版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接

web兼容学习分析笔记--块级、内联、内联块级元素的更多相关文章

  1. web兼容学习分析笔记-margin 和padding浏览器解析差异

    二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px  margin:15px 10px 15px 10px(IE7) <b ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. Web 页面性能分析笔记

    网页慢的原因不一定只是前端,所以需要结合Network一起看 如何评价一个页面打开得快不快,可以用两个指标描述,一个是ready的时间,另一个是load的时间. 如下示例表示,read时间是2.72s ...

  4. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  5. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  6. ASP.NET Core Web开发学习笔记-1介绍篇

    ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...

  7. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

  8. web前端学习之旅笔记01--HTML

    web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...

  9. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

随机推荐

  1. 来,一起让我们越来越懒,面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

  2. Hadoop学习之旅一:Hello Hadoop

    开篇概述 随着计算机网络基础设施的完善,社交网络和电商的发展以及物连网的推进,产生了越来越多的大数据,使得人工智能最近几年也有了长足的发展(可供机器学习的样本数据量足够大了),大数据的存储和处理也越来 ...

  3. [Oracle] Bulk Insert Data

    命名空间:Oracle.DataAccess.Client 组件:Oracle.DataAccess.dll(2.112.1.0) ODP.NET 版本:ODP.NET for .NET Framew ...

  4. 微信小程序demo理解

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana } p.p2 { margin: 0.0px 0.0px 0.0px 0.0p ...

  5. 锐捷linux客户端常用命令(主要用来连接校园网或公司局域网)

     锐捷访问校园网,.sh脚本文件rjsu*.sh-u 用户名-P 密码-S 参数1保存密码参数0不保存密码   其实:  直接使用md5认证方式输入用户名密码并且配置好ip之后,重新打开网卡即可有一定 ...

  6. Spring下ActiveMQ实战

    MessageQueue是分布式的系统里经常要用到的组件,一般来说,当需要把消息跨网段.跨集群的分发出去,就可以用这个.一些典型的示例就是: 1.集群A中的消息需要发送给多个机器共享: 2.集群A中消 ...

  7. 高性能 TCP & UDP 通信框架 HP-Socket v3.5.1

    HP-Socket 是一套通用的高性能 TCP/UDP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C#.Del ...

  8. Nginx配置文件nginx.conf中文详解(转)

    ######Nginx配置文件nginx.conf中文详解##### #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_ ...

  9. 升级Centos的python为2.7(centos python 升级)

    1.首先下载python的2.7.8版本的tar包.为什么没有选择最新版本的3.4呢?因为3版本的兼容性不好.很多一些成熟的项目都是基于2.7开发的. https://www.python.org/d ...

  10. MSSQL远程连接

    背景:部署公司自己研发的ERP系统. 1)系统架构: .NET+MSSQL. 2)服务器系统:Windows Server 2008 R2 Enterprise 3)数据库:MSSQL Server ...