HTML学习笔记Day6
一、元素类型
1.元素类型分类依据和元素类型分类
根据css显示分类,XHTML元素被分为三种类型:块状元素、内联元素、行内块元素、可变元素
2.块状元素
1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包括div,dl,dt,dd,ol,ul,fieldset,h1~h6,p,form,hr,colgroup,col,table,tr,td等;
2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列;
3)块状元素都可以定义自己的宽度和高度;
4)块状元素严格遵循盒模型规则,即都可以定义padding/border/margin的属性;
5)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素;我们可以把这种容器比喻为一个盒子;
注:h1~h6、p标签里面不能再容纳其他块状元素,包括其本身;
大部分块元素display属性值默认为block,其中列表中的li的默认值为list-item。
3.内联元素:(inline element称内嵌元素,行内元素,直进式元素等)
1)任何不是块状元素的可见元素都可以称之为内联元素,常见的内联元素如:a,img,span,input,b,select,i,em,strong,u,del,sub,sup等;
2)内联元素的表现形式是始终以行内逐个显示的,和文字一样,自左向右排列(默认情况下)
3)内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含的内容的宽高来确定,它的最小内容单元也会呈现矩形块状;
4)内联元素也会遵循盒模型的规则,也可以定义padding、border、margin属性,但部分内联元素需要特殊处理后才能正确显示;
注:大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block;
5.行内块元素
1)Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行;可直接设置width/height;
注:(只有这一个元素类型支持vertical-align属性)img,input垂直对齐方式{vertical-align:top/bottom/middle;}
6.可变元素
7.元素转换{display:none/block/inline/inline-block/list-item/table-cell/table-header-group/table-footer-group该属性规定元素应该生成的盒模型(元素类型)
none:此元素不会被显示(隐藏该元素)
block:此元素将显示为块状元素(显示该元素)
inline:此元素会被显示为行内元素(内联元素)
inline-block:行内块元素
list-item:将元素转换为列表格式
注:HTML中的置换元素与非置换元素
大部分内联元素的元素类型为inline,其中有类特殊的元素:如img,input,select,textarea,button等,他们被称为可置换元素(Replaced element);他们区别一般inline元素,这些元素拥有内在的尺寸(intrinsic dimensions),他们可以设置width/height属性;他们的性质同设置了display:inline-block的元素一致;
内联元素添加浮动后(float);自动转成(行内块)元素,块元素加浮动后,体积与内容同宽。
HTML学习笔记Day6的更多相关文章
- python学习笔记-Day6(3)
代码书写原则: 1)不能重复写代码 2)写的代码要经常变更 编程模式概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数 ...
- python学习笔记-Day6(2)
xml处理模块 xml是实现不同语言或程序之间进行数据交换的协议,跟json差不多,但json使用起来更简单,不过,古时候,在json还没诞生的黑暗年代,大家只能选择用xml呀,至今很多传统公司如金融 ...
- python学习笔记-Day6(1)
shelve模块是一个简单的k,v将内存数据通过文件持久化的模块,可以持久化任何pickle可支持的python数据格式 >>> s=shelve.open('test') > ...
- 学习笔记day6:CSS3动画属性
总结: 1: CSS动画:@keyframes animation:ie10+:加-webkit前缀: animation 则是属于关键帧动画的范畴; 它本身被用来替代一些纯粹表现的javascri ...
- 学习笔记day6:position index结合
z-index属性适用于定位元素(position 属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序(stack o ...
- JS学习笔记Day6
一.数组 1.数组就是个容器,里面可以存放任意类型的数 2.定义数组:1)var arr = []: 2)var arr = new Array():构造函数定义方式,如果括号中有一个整数,该正数代表 ...
- sqli-labs学习笔记 DAY6
DAY 6 sqli-labs lesson 30 与上一题一样,需要用到HPP 查看源代码,参数两边加上了双引号,直接使用lesson 26a与lesson 27a的脚本即可 sqli-labs l ...
- Python学习笔记 - day6 - 函数
函数 函数在编程语言中就是完成特定功能的一个词句组(代码块),这组语句可以作为一个单位使用,并且给它取一个名字.可以通过函数名在程序的不同地方多次执行(这叫函数的调用).函数在编程语言中有基本分为:预 ...
- 商业爬虫学习笔记day6
一. 正则解析数据 解析百度新闻中每个新闻的title,url,检查每个新闻的源码可知道,其title和url都位于<a></a>标签中,因为里面参数的具体形式不一样,同一个正 ...
随机推荐
- Lodop删除语句Deleted只能内嵌设计维护可用
有些人想用类似如下的语句删除打印项,或判断后把不需要的打印项删除,这种删除语句只能在打印设计或打印维护内嵌的时候使用,打印预览内嵌也不能使用.LODOP.SET_PRINT_STYLEA(2,'Del ...
- How to remove popup on boot on Windows 2003
Administrative Tools\Manage Your Server\Add or remove a role\Add or Remove Programs Local Computer P ...
- 【Tensorflow】Tensorflow入门教程
基本使用 使用 TensorFlow, 你必须明白 TensorFlow: 使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使 ...
- Django框架中的Context使用
Django框架中的Context使用 2017年11月09日 20:01:09 aweilark 阅读数:1113 转载自:http://www.aichengxu.com/python/606 ...
- linux查找符合条件的文件并删除
找到根目录下所有的以test开头的文件并把查找结果当做参数传给rm -rf命令进行删除: 1.find / -name “test*” |xargs rm -rf 2.find / -name “te ...
- 使用开源项目xutils3完成下载
上一次自己写了一个多线程断点续传下载的demo,过于麻烦,bug超多,所以我学习使用xutils来完成此功能. 先将xutils依赖搭建好(上一篇博客已经具体写了方法) 先看看效果图: 下面开始代码的 ...
- [HDU4635] Strongly connected
传送门:>Here< 题意:给出一张DAG,问最多添加几条边(有向)使其强连通分量个数大于1 解题思路 最少添加几条边使其强连通我们是知道的,非常简单,就是入度为0的点与出度为0的点的较大 ...
- Edge Deletion CodeForces - 1076D(水最短路)
题意: 设从1到每个点的最短距离为d,求删除几条边后仍然使1到每个点的距离为d,使得剩下的边最多为k 解析: 先求来一遍spfa,然后bfs遍历每条路,如果d[v] == d[u] + Node[i] ...
- maven "mvn不是内部或外部命令,也不是可运行的程序或批处理文件"
配置maven环境变量cmd控制台提示:mvn不是内部或外部命令,也不是可运行的程序或批处理文件 首先maven环境变量: 变量名:MAVEN_HOME 变量值:E:\apache-maven-3.2 ...
- 「SHOI2014」三叉神经树 解题报告
「SHOI2014」三叉神经树 膜拜神仙思路 我们想做一个类似于动态dp的东西,首先得确保我们的运算有一个交换律,这样我们可以把一长串的运算转换成一块一块的放到矩阵上之类的东西,然后拿数据结构维护. ...