HTML补充内容

（HTML表单、表格）

1、表格

用table标签来创建表格

        在table中使用tr表示表格中的一行，有几个tr就有几行

        在tr中使用td表示一个单元格，有几个td就有几个单元格

        在td中colspa属性表示横向的 合并单元格，rowspan属性表示纵向的合并单元格 

可以将一个表格分为三个部分：

              头部  thead

              主体  tbody

              底部  tfoot

              th   表示头部的单元

border-spacing 指定边框之间的距离

border-collapse:collapse; 设置边框合并

默认情况下元素是垂直居中的，可以通过vertical-align来调整位置

如果表格中没有使用tbody而是直接使用tr，那么浏览器会自动创建一个tbody，并将tr全部放到tbody

注意：tr不是table的子元素但是其后代元素

  /* 将元素设置为单元格 */
            display: table-cell;

若将外部容器设置为单元格，那内部元素可以使用单元的方式调整位置，但是外部元素不能使用之前的属性来调整位置

2、表单

网页中的表单用于将本地数据提交给远程服务器，使用form标签创建一个表单。 

 <!-- form属性  action 表单要提交的服务器的地址 -->
  <form action="../../target/02.service.html">
      <!-- 文本框 text
            注意:将数据提交到服务器中必须将元素指定一个name属性 -->
            文本框<input type="text" name="uesername">
            
            <br><br>
            <!-- 密码框 password-->
            密码框<input type="password" name="uesername">
            
            <br><br>
            <!-- 单选按钮 radio
                 -必须要指定一个value属性，最后会作为用户填写的值 
                -checked  可以将单选按钮设置为默认选中-->
            单选框 <input type="radio" name="hello" value="a">
                   <input type="radio" name="hello" value="b" checked>
                   <br></br>
            <!--多选框 checkbox   checked设置默认选项 -->
            多选框<input type="checkbox" name="test" value="1">
                    <input type="checkbox" name="test" value="2">
                    <input type="checkbox" name="test" value="3">
            <br><br>
            <!-- 下拉列表select 选项option -->
            <select name="list">
                 <option value="a">选项一</option>
                 <option value="aa">选项二</option>
                 <option value="aaa">选项三</option>
            </select>
            <br><br>
            <input type="submit" value="注册">
        </form>

autocomplete="off"自动关闭补全

readonly 将表单设置为只读，数据会提交

disabled 将表单项设置为禁用，数据不会提交

autofacus 设置表单项自动获取焦点

3、less

 less是css的预处理语言

           -less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式

           -less增添了许多新特性

           -less语法大体上与xcss语法一致，但less增添了许多对css的扩展

所以浏览器无法执行less代码，要执行必须将less转换为css，再由浏览器执行

// less的单行注释，注释中的内容不会被解析到css中
/*  
   css中的多行注释，内容会被解析到css中
*/
html{
    width: 100%;
    height: 100%;
}

body{
    width: 100%;
    height: 100%;
    background-color: blue;
}
body:hover{
    background-color: darken(blue,10%)
}
//变量，在变量中可以储存一个任意的值，并且在需要时可以任意修改变量值
// 变量的语法：@变量名
@a:200px;
@b:box6;
@c:blue;

.box5{
    width: @a;
}
// 作为类名使用或一部分值使用时必须以 @{变量名}的形式
.@{b}{
    // 使用变量时，如果是直接使用则以 @变量名 的形式使用
    width: @a;
    background-color: @c;
}

@d:100px;
@d:200px;
// 变量名发生重名时，按照就近原则
div{
   width: @d;
}

div{
    height: @e;
}
// 可以在变量声明前就使用变量
@e:300px;


.box1{
    .box2{
        color: blue;
    }
    >.box3{
        color: blueviolet;
    }
    // 为box1设置一个hover
    // & 表示外层的父元素
    &:hover{
        color: chartreuse;
    }
}
.p1{
    width: 100px;
    height: 100px;
}
// :extend()对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color: cornflowerblue;
}
.p3{
    // 直接对指定样式进行引用
    // mixins 混合
    .p1()
}
//使用类选择器时可以在选择器后添加一个括号，此时实际上就创建了一个mixins
// 作为其他样式的引用
.p4(){
    width: 100px;
    height: 100px;
    background-color: darkblue;
}
.p5{
    .p4
}
// 混合函数，在混合函数中可以直接设置变量
.test(@w,@h,@color){
    width: @w;
    height: @h;
    border: @color 1px solid;
}
div{
    // 调用混合函数，默认按顺序传递；也可以按名称传递
    .test(200px,300px,blue);
}
span{
    // average 设置颜色的平均值
    color:average(red,blue)
}

// 可以通过import来将其他的less引入到当前的less中
@import"syntax.css";

.box1{
//   在less中数值可以直接进行计算
width: 100px+200px;
height: 100px*2;
background-color: darkslateblue;
}