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>

结果:

相关推荐
lecepin16 小时前
AI Coding 资讯 2025-09-17
前端·javascript·面试
IT_陈寒16 小时前
React 18实战:7个被低估的Hooks技巧让你的开发效率提升50%
前端·人工智能·后端
树上有只程序猿16 小时前
终于有人把数据库讲明白了
前端
猩兵哥哥17 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
司宸17 小时前
Prompt设计实战指南:三大模板与进阶技巧
前端
RoyLin17 小时前
TypeScript设计模式:抽象工厂模式
前端·后端·typescript
华仔啊17 小时前
Vue3+CSS 实现的 3D 卡片动画,让你的网页瞬间高大上
前端·css
江城开朗的豌豆17 小时前
解密React虚拟DOM:我的高效渲染秘诀 🚀
前端·javascript·react.js
vivo互联网技术17 小时前
拥抱新一代 Web 3D 引擎,Three.js 项目快速升级 Galacean 指南
前端·three.js