HTML基本标签（二）

表格标签 table

<!-- 
 caption 代表表格标题
 相关属性
     border 边框
     cellpadding 设置单元格内填充
     cellspacing 设置单元格间空隙
     width 设置表格宽度，默认是内容撑起来的宽度 
 子元素
     col 虚拟列
        相关属性 span 设置合并的列

     tr代表行
         相关属性 align 设置行中每个单元格中内容的对其方式
     子元素 
         td代表单元格
             相关属性 width 设置单元格的宽度，这一列中最宽的单元格的宽度是这一列的宽度
             align 对齐方式
             rowspan 设置单元格合并的行数
             colspan 设置单元格合并的列数

         th代表标题单元格（会自动居中加粗）
             width 宽度
             align 对齐方式

-->

案例：

    <table border="1" cellpadding="30" cellspacing="0" width="800">
        <caption>表格标题</caption>
        <!-- 第一列 -->
        <col style="background: red;">
        <!-- 第二列 -->
        <col style="background: blue;">

        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>

        <tr align="center">
            <td>r</td>
            <td width="400">r</td>
            <td>r</td>
        </tr>
        <tr>
            <td rowspan="2">er</td>
            <td>er</td>
            <td>er</td>
        </tr>
        <tr>

            <td>er</td>
            <td>er</td>
        </tr>
        <tr>
            <td colspan="3">er</td>

        </tr>
    </table>

展示结果

媒体元素

audio 音频

相关属性：

• src 设置音频资源路径

• controls 控制音频播放器是否显示

• autoplay 设置音频自动播放

• loop 循环播放

vido 视频

相关属性：

• src 设置音频资源路径
• controls 控制音频播放器是否显示
• autoplay 设置音频自动播放
• loop 循环播放
• width 宽
• height 高

注意等比例变化

form 表单元素

<!-- 
    form 表单元素
        表单控件元素 input
        name 设置控件名称
        value 设置控件的值
        placeholder 提示信息
        autofocus 设置表单控件为焦点状态（可以键入的状态），一个表单使用一次
        checked 默认选中 （单选复选）
        disable 控件是否可用
        readonly 只读
        type 设置控件类型
            text 单行文本框
            password 密码框
            radio 单选框
            checkbox 复选框
            file 文件上传器
            submit 提交按钮
            button 普通按钮
            reset 重置按钮
            color 颜色拾取器
            number 数字输入框（只能输入数字）
                min最小 max最大 step步长 （range ）
            range 滑块
            date 日期
            time 时间
            datetime-local 本地日期时间控件
            month 月
            week 周
        ！！！name value 功能性必须要有

    select 下拉框
        name
        size 设置显示下拉项个数
        multiple 设置是否多选
        子元素
            option 下拉选项
                value 下拉值
                selected 默认下拉项选中
            optgroup 选项组
                label 下拉项组名

    多行文本框textarea
        name    
        cols 设置文本框的宽度
        rows 设置多行文本框的高度

    filedset元素和legend元素 主要是把表单控件分类
 -->

案例：

    <form action="" style="height: 300px;">

        <input type="text" value="文本框">
        <input type="password" placeholder="密码">
        <input type="radio" id="">
        <input type="checkbox">
        <input type="file">
        <input type="submit">
        <input type="button" value="按钮">
        <input type="reset">
        <input type="color" name="" id="">
        <input type="number" name="" id=""><br>
        <input type="number" name="" id=""><br>
        <input type="range" name="" id=""><br>
        <input type="date" name="" id="">
        <input type="time" name="" id="">
        <input type="datetime-local" name="" id="">
        <fieldset>

            <legend>
                信息
            </legend>

            <input type="text" value="文本框">
            <input type="password" placeholder="密码">
            <input type="radio" id="">
            <input type="checkbox">
            <input type="file">
            <input type="submit">
            <input type="button" value="按钮">
            <input type="reset">
            <input type="color" name="" id="">
            <input type="number" name="" id=""><br>
            <input type="number" name="" id=""><br>
            <input type="range" name="" id=""><br>
            <input type="date" name="" id="">
            <input type="time" name="" id="">
            <input type="datetime-local" name="" id="">
        </fieldset>
    </form>

结果：