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>

结果:

相关推荐
多多*13 分钟前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
mubeibeinv37 分钟前
列表代码思路
前端
过期的H2O238 分钟前
【H2O2|全栈】JS进阶知识(十)ES6(6)
开发语言·前端·javascript·ecmascript·es6
White graces1 小时前
Spring MVC练习(前后端分离开发实例)
java·开发语言·前端·后端·spring·java-ee·mvc
2401_882726481 小时前
web组态可视化编辑器
前端·物联网·前端框架·编辑器·web·iot
努力学习的木子1 小时前
跨域问题?同源策略大全
前端
○陈1 小时前
vue2面试题10|[2024-11-24]
前端·javascript·vue.js
米奇妙妙wuu1 小时前
react实现模拟chatGPT问答页
前端·react.js·chatgpt·前端框架
在荒野的梦想1 小时前
Vue-TreeSelect组件最下级隐藏No sub-options
前端·javascript·vue.js
田本初2 小时前
浏览器缓存与协商缓存
前端·javascript·缓存