HTML基本标签(二)

HTML基本标签(二)

    • [表格标签 table](#表格标签 table)
    • 媒体元素
      • [audio 音频](#audio 音频)
      • [vido 视频](#vido 视频)
    • [form 表单元素](#form 表单元素)

表格标签 table

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

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

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

-->

案例:

html 复制代码
    <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 表单元素

html 复制代码
<!-- 
    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元素 主要是把表单控件分类
 -->

案例:

html 复制代码
    <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>

结果:

相关推荐
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai2 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼3 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風7 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#