html基础之表格表单

一、表格：统计数据、展示数据

1.

表格标签：table->tr

      行标签：tr->td

      单元格：td

2.

表格的特点：

          1、默认是没有边框的

          2、添加边框属性后，有默认的边框与边框之间的距离

3.

表格的属性：

          1、border:边框

          2、cellspacing:边框与边框之间的距离

          3、cellpadding:内容与边框之间的距离

          4、align:水平位置   left/right/center

          5、width:宽

          6、height：高

4.

表格的结构：

          表格标题 caption

          表头:thead    将td换成th ： 有自动加粗居中的效果

          表格主体：tbody

          表尾:tfoot (由于浏览器的兼容性，后期再说)

    表格的注意事项

          table标签中只能包含caption/thead/tbody/tfood/tr

       5.

合并单元格的步骤

          1、先确定是跨行合并还是跨列合并

          2、跨行合并用rowspan，跨列合并用colspan属性

          3、将合并属性写在要合并的第一个单元格上

          4、属性值就是合并的单元格个数

          5、将多余的单元格注释掉

二、表单：用来验证数据、提交数据

1.

表单的组成部分

          1、表单标签  form

              action:表单提交的地址

              method:表单提交的方式

              name：没有特殊含义，给表单起个名字

          2、表单域

              a、普通输入框： <input type="text">

              b、密码框：<input type="password">

              c、单选框：<input type="radio">

              d、多选框：<input type="checkbox">

              e、选择框：<select><option>

              f、多行文本框:<textarea>

              g、重置按钮：<input type="reset">

              h、普通按钮：<input type="button">

          3、提交按钮

              <input type="submit">

2.

表单域中的属性

            type:类型，当input控件的type的属性值不同时，显示不一样的效果

            value:输入框或者按钮的默认的值

            name:名字

            checked:单选框、多选框的默认选中

              checked

            selected:选择框的默认选中

              selected

            cols:宽度

            rows:高度

            disabled:按钮禁用属性

              disabled

三、H5新增的结构化语义化元素

头部区域标签<header> </header>

导航标签<nav> </nav>

侧导航标签<section> </section>

文章标签<article> </article>

区间标签<section> </section>

进度条progress

底部区域标签<footer> </footer>

四、H5新增的表单属性

1.

<fieldset> 标签可以将表单内的相关元素分组。

<fieldset> 标签会在相关表单元素周围绘制边框。

<legend>标签中文本会在边框的左上角显示。

2.

新增的属性：

        1、placeholder 占位符  提示信息

        2、autofocus    页面加载完成后，自动的获取某个输入框的焦点 (只写属性即可)

        3、required：验证条件，必填项(只写属性即可)在提交表单的时候验证

        4、novalidate ：关闭表单域中所有的验证，用于表单元素

        5、maxlenth:最大长度

        6、minlenth:最小长度