HTML学习笔记Day10
一、Form表单补充(收集用户信息)
1.button按钮(不进行提交)
1)语法1:<input type="button" value="按钮内容" />
2)语法2:<button type="button(普通按钮)/submit(默认值提交按钮)/password(密码)">按钮上的内容</button>
2.radio单选按钮
1)语法:<input type="radio" name="名字">
<input type="radio" name="名字">单选按钮必须要有name属性,并且一组单选按钮name属性的属性值相同,系统会默认为这是一组单选按钮
3.checkbox复选框
1)语法:<input type="checkbox" />吃饭
<input type="checkbox" />睡觉
<input type="checkbox" />打豆豆
4.多行文本框(文本域)
1)语法:<textarea cols="字符宽度" rows="行数"></textarea>
注:一般不用cols和rows设置宽高,给textarea起class名设置样式(宽高)
阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)
5.列表和菜单
1)下拉菜单语法:<select>
<option>选项一</option>
<option>选项二</option>
......
</select>
2)下拉列表语法:<select size="行数">
<option>选项一</option>
<option>选项二</option>
......
</select>
6.上传文件框
文件域:<input type="file" />
7.form属性
1)checked="checked"默认选中
2)disabled="disabled"禁用
注:上面所有的都成为表单元素,表单元素要写在表单域里。
二、表单高级
1.表单的组成:表单域、表单元素、提示信息
表单域<form name="" method="" action=""></form>
表单元素<input type="" value="" />
提示信息如:用户名 密码
2.提示信息标签<lable></lable>
1)lable元素用来定义标签,为页面上的其他元素指定提示信息;要将lable元素绑定大其他的控件上,可以将lable元素的for属性;设置为与该控件的id属性值相同。
<input type="button" value="按钮内容" id="name" /><lable for="name">按钮</lable>
3.表单字段集<fieldset></fieldset>
1)相当于一个方框,在字段集中可以包含文本和其他元素;该元素用于对表单中的元素进行分组并在文档中区别标出文本;fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。
4.字段集标题<legend></legend>
1)legend元素可以在fieldset对象绘制的方框内插入一个标题;legend元素必须是fieldset内的第一个元素
5.图像域
1)语法:<input type="image" src="相对路径" width="" height="">
三、表格高级(显示数据)
(一)关于表格的css属性
1.单元格间距border-spacing:value;(该属性必须给table添加);
2.合并相邻单元格边框border-collapse:separate(边框分开)/collapse(边框合并);
3.无内容单元格的显示或隐藏empty-cells:show(显示)/hide(隐藏);
4.表格布局算法(加快运行的速度,但不够灵活)
table-layout:auto/fixed(固定宽度,不会随内容多少改变单元格宽度)
说明:
自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的;
缺点:较慢(因为他需要在确定最终布局钱访问表格中的所有内容);
优点:灵活;
固定表格的布局
优点:加快运行速度,允许浏览器更快的对表格进行布局;
缺点:不够灵活
5.表格标题<caption>标题内容</caption>
1)表格标题位置:caption-side:top/right/bottom/left
left/right/top/bottom位置只有火狐识别,top,bottomIE7以上版本支持,IE7及以下版本不支持其他属性,只识别top;
6.表格布局元素
1)表格的基本组成:table(表格) tr(行) td(列) th(表格列标题)放在tr里
<table>
<tr>
<th>表格列标题</th>
</tr>
</table>
(二)HTML里table的重要属性
1.合并行和列:
1)colspan=“value” 合并列 横向合并
2)rowspan=“value” 合并行 纵向合并
3)valign=“top/bottom/middle”垂直对齐方式
align=“left/center/right”水平对齐方式
2.rules=“rows/cols/all/none/groups” 添加分割线
1)rows:位于行之间的线条
2)cols:位于列之间的线条
3)all:位于行和列之间的线条
4)none:没有线条
5)位于行和列组之间的线条
3.数据行分组:<thead></thead>(表头)、<tbody></tbody>(表体)、<tfoot></tfoot>(表尾)
1)一个table中,只能有一个thead,一个tfoot,但可以包含多个tbody。
4.数据列分组<colgroup span="value"></colgroup>
1)colgroup元素会根据从左到右的顺序依次对数据表格进行列分组;
2)span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组;
3)可以通过给table添加rules=“groups”属性来给分组列添加组分割线。
(三)CSS结构伪类选择器
1.nth-child()
1)tr:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素类型;
2)tr:nth-child(2n-1){}
odd 奇数/even 偶数
四、BFC
1.BFC(Block formatting context)直译为“块级格式化上下文”。
1)它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干;
2)是Web页面中盒模型布局的CSS渲染模式;它的体系属于常规文档流。
2.BFC的布局规则
1)内部的Box会在垂直方向,一个接一个地放置;
2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;
3)每个元素的margin box的左边, 与包含块border box的左边相接触;
4)BFC的区域不会与float box重叠;
5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;
6)计算BFC的高度时,浮动元素也参与计算。
3.哪些元素或属性能触发BFC
1)根元素(html)
2)float属性不为none position为absolute或fixed
3)display为inline-block, table-cell, table-caption, flex, inline-flex
4)overflow不为visible
4.BFC的作用
1)自适应两栏布局
2)清除内部浮动
3)防止margin上下重叠
HTML学习笔记Day10的更多相关文章
- JS学习笔记Day10
一.设置或获取元素对象中(标签中)的属性和自定义属性 对象.属性 对象['属性'] 对象.getAttribute('属性名') 对象.setAttribute('属性名','属性值'); 对象.re ...
- Python学习笔记 - day10 - 正则表达式
正则表达式 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样 ...
- 【目录】Python学习笔记
目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
随机推荐
- SLAs-笔记
类型 sla status determined at time intervals over a timeline: average transaction response time errors ...
- loadrunner 事务、同步点和思考时间
事务 在LoadRunner里,我们定义事务主要是为了度量服务器的性能.每个事务度量服务器响应指定的Vuser请求所有的时间,这些请求可以是简单任务,也可以是复杂任务. 要度量事务,需要插入Vuser ...
- CSAW 2016:Rock-100
ELF文件 拖进ida 震惊: 这一堆堆都是什么神仙函数呀!! f5看一下伪代码 可以看出来 其实看起来函数很多 但是真正管用的函数也就那么几个 如果sub_4017E6的值是0 那么就会输出flag ...
- react使用setstate注意的两点
1.this.state里的属性不修改,或是只修改一个,那么不修改的剩下的属性不会被变动. this.state={ name:"Aliece", age:19, msg:&quo ...
- 前端传递给后端且通过cookie方式,尽量传递id
前端传递给后端且通过cookie方式,尽量传递id
- 只要访问url地址 那么容器就会根据地址进行对象的创建
只要访问url地址 那么容器就会根据地址进行对象的创建
- EUV光刻!宇宙最强DDR4内存造出
三星电子宣布开发出业内首款基于第三代10nm级工艺的DRAM内存芯片,将服务于高端应用场景,这距离三星量产1y nm 8Gb DDR4内存芯片仅过去16个月. 第三代10nm级工艺即1z nm(在内存 ...
- python optparser模块
python的内置模块中对于命令行的解析模块共两个getopt 和 optparse .不过getopt过于简单,往往不能满足需求.此时可以使用optparse模块.这个模块相对于getopt更新,功 ...
- POI Excel 单元格内容类型判断并取值
个人用到的 String birthdayVal = null; ...
- BZOJ3638[Codeforces280D]k-Maximum Subsequence Sum&BZOJ3272Zgg吃东西&BZOJ3267KC采花——模拟费用流+线段树
题目描述 给一列数,要求支持操作: 1.修改某个数的值 2.读入l,r,k,询问在[l,r]内选不相交的不超过k个子段,最大的和是多少. 输入 The first line contains inte ...