html多媒体标签-表格(table)-分帧

多媒体标签

  • 图片标签:<img />
  • 音频视频:<audio></audio>
    属性 说明
    src 音频资源地址
    controls 显示播放控制条,值为controls,可以不写
    loop 是否进行循环播放,值为loop,可以不写
    autoplay 是否进行自动播放,值为autoplay,可以不写
    • 谷歌浏览器配置自动播放
      • 地址栏输入:chrome://flags
      • 搜索选项Autoplay policy,设置为:No user guester is required
  • 视频标签:<video></video>
    • 音频选项视频标签都有:src、controls、loop、autoplay
    • 多出来的选项:width、height用于设置尺寸,单独设计会等比缩放,同时设置会有补白

表格(table)

  • 说明:展示效果类似于excel的行列形式
  • table:表格标签,所有表格相关的内容都要放在其中
    属性 说明
    width 宽度
    height 高度
    align 对齐方式(left、center、right)
    bgcolor 背景色
    border 边框尺寸
    bordercolor 边框颜色
  • tr:表示表格中的一行
    属性 说明
    bgcolor 背景色
    align 水平对齐方式(left、center、right)
    valign 垂直对齐方式(top、middle、bottom)
  • td:表示一行中的一个单元
    属性 说明
    bgcolor 背景色
    align 水平对齐方式(left、center、right)
    valign 垂直对齐方式(top、middle、bottom)
    colspan 列合并
    rowspan 行合并
  • th:与td一样都是表示一个单元格,只是样式不同,用于显示表头信息
  • caption:用于设置表格的标题

分帧(iframe)

  • 说明:简单理解就是一个页面中插入另外一个页面
  • 属性:
    属性 说明
    src 指定加载页面的地址
    width 宽度
    height 高度
    frameborder 是否显示边框,0表示隐藏,1表示显示
    scrolling 滚动条显示方式:yes表示一直显示,no表示不显示,auto自动显示
    name 设置名字,可以作为a标签的打开方式之一

分帧(frameset)

  • 说明:替代body标签定义页面框架,可以指定尺寸,也可以指定比例
  • frameset
    属性 说明
    noresize 禁止拖拽修改尺寸
    frameborder 是否显示边框,0表示隐藏,1表示显示
    border 边框宽度
    bordercolor 边框颜色
    rows 垂直方向划分尺寸,*表示其他所有
    cols 水平方向划分尺寸
  • frame:表示frameset中的每一帧数据,其实就是一个页面
  • noframes:针对不支持frameset的低级浏览器的兼容写法

表单(form)

  • 说明:服务器用于收集用户信息,如:注册、登录等
  • form:表单,所有要提交的内容必须放在其中
    属性 说明
    action 提交地址,默认是当前地址
    method 提交方法,get是默认的,数据会拼接在url后,post数据不可见
  • input:表单中最重要的组成部分
    属性 说明
    type 类型,默认text,普通文本框
    name 名称,不指定无法提交数据
    size 设置尺寸(宽度)
    最大输入字符个数
    value 文本框的内容,一般用于无法输入的类型中
    placeholder 设置占位提示信息
    readonly 只读状态
    disabled 禁用状态
    • type属性取值
    取值 说明
    text 普通文本框,默认类型
    password 密文文本
    submit 提交按钮
    hidden 隐藏字段,与text类型一样,只是不可见而已
    number 数值类型的文本框,可以进行加1减1操作,还可以进行min、max的设置
    radio 单选框,多个互斥的选项name属性要一致,提交的值要通过value指定<br />默认选中状态checked属性设置
    checkbox 复选框,用法同单选框
    file 文件上传,需要对form进行相应的配置<br /><form method="post" enctype="multipart/form-data"></form>
  • select,下拉选择框
    • 说明:他是一个组合的提交内容,select需要设置name属性
    • 选项:每个选项是一个option标签,需要设置value属性
    • 选中:默认选中使用selected属性设置
    • 尺寸:通过size属性可以设置可见选项的数量
  • textarea:文本域,可以输入一段文本,不要在标签内学多余的任何内容
    属性 说明
    rows 设置行数
    cols 设置列数
    placeholder 占位提示信息
    value 文本内容
    name 名称
  • 表单提交
    方式 数码
    input type=”submit” / 标准的提交按钮
    input type=”button” / 普通按钮,但是不能提交,可以结合JS完成提交功能
    input type=”image” / 图片形式的按钮,通过src指定图片资源,可以进行提交
    button/button 标准按钮,可以进行提交

head标签

  • 说明:用于存放对页面进行说明的内容,不是用于显示
  • 示例:
    <head>
        <!-- 简化方案设置字符集 -->
        <meta charset="utf-8">
        <!-- 设置标题 -->
        <title>标题</title>
        <!-- 设置关键字 -->
        <meta name="keywords" content="PYTHON培训,PYTHON开发" />
        <!-- 设置描述 -->
        <meta name="description" content="良心做教育" />
        <!-- 标准方案设置字符集 -->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <!-- 定时刷新 -->
        <meta http-equiv="refresh" content="3; url=http://www.qfedu.com" />
        <!-- 加载CSS文件 -->
        <link rel="stylesheet" type="text/css" href="xxx.css"/>
    </head>

无意义标签

  • 行标签:<span></span>
  • 块标签:<div></div>、<header></header>、<section></section>、<footer></footer>
  • 说明:这些标签本身没有什么特殊意义,但是后面结合CSS与JS一起使用就非常灵活了

取消的DTD

  • 说明:文档类型定义
  • H5统一使用:<!DOCTYPE html>

练习:

  • 书写一个3行3列的表格,设置表头、标题,合并单元格1和4,8和9
  • 实现一个点击联动效果
  • 写一个注册表单,内容尽量全面,可以结合表格对齐样式

发表评论 X

电子邮件地址不会被公开。 必填项已用*标注

姓名不能为空
填写正确的email