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

    Python编程 wuya 212次浏览 已收录 0个评论

    多媒体标签

    • 图片标签:<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
    • 实现一个点击联动效果
    • 写一个注册表单,内容尽量全面,可以结合表格对齐样式

    学海无涯 , 版权所有丨如未注明 , 均为原创丨转载请注明html多媒体标签-表格(table)-分帧
    喜欢 (0)
    发表我的评论
    取消评论
    表情 加粗 删除线 居中 斜体 签到

    Hi,您需要填写昵称和邮箱!

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址