web兼容学习分析笔记--块级、内联、内联块级元素
一、块级、内联、内联块级元素
(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
web兼容学习分析笔记--块级、内联、内联块级元素的更多相关文章
- web兼容学习分析笔记-margin 和padding浏览器解析差异
二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px margin:15px 10px 15px 10px(IE7) <b ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- Web 页面性能分析笔记
网页慢的原因不一定只是前端,所以需要结合Network一起看 如何评价一个页面打开得快不快,可以用两个指标描述,一个是ready的时间,另一个是load的时间. 如下示例表示,read时间是2.72s ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
- web前端学习之旅笔记01--HTML
web前端学习之旅笔记01--HTML HTML最容易上手,但也易忘,实际开发中有时需要查阅官方文档,小伙伴们别忘了哟! HTML 教程 (w3school.com.cn) HTML是网页的骨架负责页 ...
- ASP.NET MVC Web API 学习笔记---第一个Web API程序
http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...
随机推荐
- iOS UIGestureRecognizer与UIMenuController(内容根据iOS编程)
UIGestureRecognizer 对象会截取本应由视图处理的触摸事件.当某个UIGestureRecognizer对象识别出特定的手势后,就会向指定的对象发送指定的消息.iOS SDK默认提供若 ...
- js数组去重
这就是数组去重了...var str=['hello','node','element','node','hello','blue','red'];var str1=[]; function firs ...
- python推荐淘宝物美价廉商品
完成的目标: 输入搜索的商品 以及 淘宝的已评价数目.店铺的商品描述(包括如实描述.服务态度.快递的5.0打分): 按要求,晒选出要求数量的结果,并按"物美价廉算法"排序后输出 思 ...
- 如何实现一个php框架系列文章【5】安全处理输入
所有的外部输入参数都应该检查合法性. 未正确处理输入数据将可能导致sql注入等漏洞. 框架提供系列函数来取$_REQUEST中的值 requestInt requestString requestFl ...
- ubuntu安装navicat及常见问题解决
1.安装navicat Step1: 下载Navicat ,网址:http://www.navicat.com/en/download/download.html Step2:进入下载目录,解压压缩包 ...
- 高性能 TCP/UDP/HTTP 通信框架 HP-Socket v4.0.1
HP-Socket 是一套通用的高性能 TCP/UDP/HTTP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP/HTTP 通信系统,提供 C/ ...
- 大数据下BI产品如何发挥最大价值
看到这个题目,你是否总感觉云里雾里?你是否真正懂什么叫“大数据”?商业智能BI和大数据又有着什么千丝万缕的联系?为什么说商业智能BI能在大数据中发挥价值? 大数据,指的是所涉及的数据资料量规模巨大到无 ...
- 联机分析处理(OLAP)到底是什么?
联机分析处理 (OLAP) 的概念最早是由关系数据库之父E.F.Codd于1993年提出的,OLAP的提出引起了很大的反响,OLAP作为一类产品同联机事务处理 (OLTP) 明显区分开来. 当今的数据 ...
- BW知识问答汇总
什么是sap的星型结构,能不能详细讲解一下? Cube的星型结构中SID技术的优点有哪些? 什么是BW的星型结构,与传统的星型结构的区别是什么? SAP的星型结构相对于传统的星型结构优势? Cube与 ...
- 「视频直播技术详解」系列之七:直播云 SDK 性能测试模型
关于直播的技术文章不少,成体系的不多.我们将用七篇文章,更系统化地介绍当下大热的视频直播各环节的关键技术,帮助视频直播创业者们更全面.深入地了解视频直播技术,更好地技术选型. 本系列文章大纲如下: ...