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>

结果:

相关推荐
开开心心就好4 分钟前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝22 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮1 小时前
【无标题】
开发语言·前端·javascript
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军3 小时前
React 协调器 render 阶段
前端·react.js·前端框架