自我学习前端第九天--高级表格与高级表单

1、高级表格

标签

caption   表格的标题
th         标题列

数据行分组（让表格的结构更加清晰，方便后期数据更新）

thead
tbody
tfoot

---

---

数据列分组（方便局部列设置样式）

    <colgroup span="数字"></colgroup>
    <col span="数字" />
    如果用rules="groups"添加组分割线的话,给表格table设置

    <table rules="rows"></table>
                    rows  行分割线
                    cols  列分割线
                    all   行和列分割线
                    groups 跟列分组配合使用

---

表格css属性

    border-spacing    设置单元格和单元格之间的间距
    border-collapse:collapse   合并相邻的边框线
    table-layout：fixed  固定表格的宽度（auto由内容决定）



    empty-cells：hide   单元格没有内容时隐藏
    caption-side:top/right/bottom/left    左右浏览器有兼容性，一般浏览器只能设置标题上下的位置

---

2、高级表单

    表单的字段集：对表单控件的内容分组和嵌套
    <fieldset></fieldset>

    字段集标题
    <legend></legend>

    提示信息
    <label for="关联表单控件，写表单控件的id名"></label>

    上传按钮
    <input type="file" />

    单选按钮和单选框(实现单选功能设置name值相同)
    <input type="radio"  name=""/>

    多选按钮/多选框 checked默认选中
    <input type="checkbox"  name=""/   checked=“checked”>

    下拉列表（disabled 禁用   selected默认选中）
    <select>
        <option  disabled  selected></option>
    </select>

    文本域（resize:none;可以取消拖拽）
    <textarea></textarea>


块元素
form/fieldset/legend/option 

内联
    label


行内块
    input、select、textarea

---

伪元素选择器、伪对象选择器

    ：：after   
    ：：before

    ：：first-line   设置第一行的样式
    ：：first-letter 设置第一个字的样式

---

banner图片的处理

父元素

    设置高度
    position:relative
    overflow:hidden

子元素

    position:absolute
    left:50%
    margin-left:- 图片宽度的一半