web前端实习Day2--表

目录

1.table表格

2.细线表格

3.表格标题及表格语义化

4.合并单元格

5.表单

6.表单控件的通用属性

7.html语义化标签

---

1.table表格

table表格标签 tr一行 td一列
bgcolor 背景颜色

table标签的常用属性：
    border 边框宽度 默认是0
    width 宽度
    height 高度
    align ='left | center | right' 表格在页面中的对齐方式
    cellspacing 单元格之间的间距
    cellpadding 单元格内部的内容到单元格周围的距离

tr标签的常用属性：
    align ='left | center |right' 当前行文本的横向对齐方式
    valign ='top | center | bottom' 当前行文本垂直对齐方式

td标签的常用属性：
    align ='left | center |right' 当前单元格文本的横向对齐方式
    valign = 'top | center |bottom' 当前单元格文本垂直对齐方式

<table border="2" width="400" height="400" align="center" bgcolor="red">
    <tr valign="top" bgcolor="green">
        <td>姓名</td>
        <td>年龄</td>
    </tr>
</table>

2.细线表格

<style>
    table{
        border-collapse: collapse;
    }
</style>

<table border="2" width="400" height="400">

3.表格标题及表格语义化

caption 表格标题标签

thead tbody tfoot：标签本身没有什么效果 但是代表一定的结构 让表格结构更清晰

4.合并单元格

rowspan=''合并的行数 高度变高

clospan=''合并的列数 宽度变宽

<table>
    <tr>
        <td colspan="2">1-1</td>
        <td rowspan="3">1-3</td>
    </tr>
</table>

5.表单

作用：收集用户信息，把这些信息发送给服务器

表单分类：
    表单域
        form标签 所有的表单控件都要放到表单域里面
        form表单的action属性 填写服务器地址
    表单控件
        标签名：input
            input标签的type属性不同表示不同的控件
            type='text'普通输入框
            type='password'密码输入框
            type='radio'单选框 相同的name属性 互相单选
            type='checkbox'多选框
        下拉列表：
            select option：多选菜单 在select标签上面添加multiple属性
        按钮：
            input type='button' 普通按钮 按钮的value属性定义按钮文字
            input type='reset'重置按钮
            input type='submit'提交按钮
        多行文本：
            textarea

表单提交：把表单域里面的表单控件收集到的用户信息
    提交给form标签action属性所指向的服务器的地址
前提：
    表单域内必须有提交按钮 点击时会自动提交
form表单的属性：
    action 填写服务器地址
    method 提交方式
        目前阶段大概了解 常用方式get post 默认值get
    带有name属性的表单控件可以被表单域提交
    ?username=su&pwd=123
    ?键1=值1&键2=值2....
    get提交方式：默认在地址栏通过?拼接 以键值对的方式提交给后台

<form action="https://www.baidu.com" method="get">
    <p>
        用户名：
        <input type="text" name="username">
    </p>
    <p>
        密码：
        <input type="password" name="pwd">
    </p>
    <p>
        <input type="submit">
    </p>
 </form>

6.表单控件的通用属性

表单控件的通用属性：
    name：有name的表单控件才会被提交
    value：表单提交时 根据name提交value name-value
    disabled表单控件被禁用 不会被提交

    type='text' 输入框
        常用属性：
            readonly 只读表示输入框内容不可修改
            placeholder 输入框占位提示文字
            value 输入框默认输入内容
    type='password' 密码框
        常用属性：和上面一模一样
    type='radio'单选框
        value属性是用来被提交的值 选中哪一个提交哪一个的value
        以上两个默认被选中需要添加checked
    select 下拉菜单
        name写到select标签上面
        option的value是被提交的值
        哪一个被option选中 就提交哪一个option标签的value值
        若option没有定义value 则默认提交标签内部文本
    文本控件
        input type = file 可以选取本地文件 进行文件上传
    图片提交按钮
        input type = image src 关联图片的地址
    label信息提交控件
        for属性 可以关联一个表单控件的id属性 和控件之间联动

    按钮的另一个标签：
        button 内部定义按钮
        默认是提交按钮的功能
            type属性：控制按钮的功能
                type = 'submit' 默认值 提交按钮
                type = 'reset' 重置按钮
                type = 'button' 普通按钮

7.html语义化标签

无语义化标签
    div 独占一行
    span
语义化标签：
    标签本身没有什么效果 但是代表了一个意境或者代表了一定的结构
    header main footer nav