一、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的更多相关文章

  1. JS学习笔记Day10

    一.设置或获取元素对象中(标签中)的属性和自定义属性 对象.属性 对象['属性'] 对象.getAttribute('属性名') 对象.setAttribute('属性名','属性值'); 对象.re ...

  2. Python学习笔记 - day10 - 正则表达式

    正则表达式 字符串是编程时涉及到的最多的一种数据结构,对字符串进行操作的需求几乎无处不在.比如判断一个字符串是否是合法的Email地址,虽然可以编程提取@前后的子串,再分别判断是否是单词和域名,但这样 ...

  3. 【目录】Python学习笔记

    目录:Python学习笔记 目标:坚持每天学习,每周一篇博文 1. Python学习笔记 - day1 - 概述及安装 2.Python学习笔记 - day2 - PyCharm的基本使用 3.Pyt ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  6. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  7. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  8. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  9. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. 如何调用layer.open打开的的iframe窗口中的JS

  2. Span<T>

    Introduction Span<T> is a new type we are adding to the platform to represent contiguous regio ...

  3. Springboot学习问题记录

    1.spring boot与cloud构建微服务,返回数据从json变成了xml 问题:本身spingboot项目是用@RestController注解,返回结果也是json格式,但是结合spring ...

  4. mfs 使用心得

    CentOS的安装方法: To install MooseFS from officially supported repository on EL7, follow the steps below: ...

  5. springboot使用redis

    1.pom文件中引入 spring-boot-starter-redis <dependency> <groupId>org.springframework.boot</ ...

  6. centos安装php7.2环境

    centos安装php7.2环境 安装apache服务 yum -y install httpd 首先获取rpm: rpm -Uvh https://dl.fedoraproject.org/pub/ ...

  7. Bomb Game HDU - 3622(二分最小值最大化)

    题意: 就是给出n对坐标,每对只能选一个,以选出来的点为圆心,半径自定义,画圆,而这些圆不能覆盖,求半径最小的圆的最大值 解析: 看到最x值最x化,那二分变为判定性问题,然后...然后我就没想到... ...

  8. hdu 2191 (多重背包二进制优化)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 实现代码: #include<bits/stdc++.h> using namespac ...

  9. MT【305】丹德林双球

    如图.在正方体$ABCD-A_1B_1C_1D_1$中,点$M,N$分别是直线$CD,AB$上的动点,点$P$是$\Delta A_1C_1D_1$内的动点(不包括边界),记直线$DP$与$MN$所成 ...

  10. MT【304】反射路径长度比

    (高考压轴题改编)如图,长方体$ABCD-A_1B_1C_1D_1$中,$AB=11,AD=7,AA_1=12.$一质点从顶点$A$设向$E(4,3,12)$遇到长方体的面反射(服从光的反射原理),将 ...