Web前端学习成长计划---第二天

# Web前端学习成长计划—第二天

表格

创建表格

表格的属性

• border（边框）
• cellpadding（内容与单元格边框之间的距离）
• cellspacing（单元格与单元格之间之间的距离）
• width（宽）
• height（高）
• align（对齐方式）

表头标签

• 在合适的位置将td替换成th即可

表格的结构

• thead
• tbody
• 不是必须的 加上语义更好

表格的标题

• caption（写在table内部 渲染在表格外部）

单元格的合并

• rowspan

  跨行合并 上下合并 是一个属性 写在上单元格上合并几个这个值就是几 一旦合并 那么多余的那个单元格需要删除

• colspan

  跨列合并 左右合并 是一个属性 写在上单元格上合并几个这个值就是几 一旦合并 那么多余的那个单元格需要删除

表单

作用：收集用户信息提交给后台

组成

• 表单域
• 提示文本
• 表单

表单分类

• input

  • text（单行文本）
  • radio（单选框）
  • checkbox（复选框）
  • password（密码框）
  • file（上传控件）
  • button（普通按钮）
  • submit（提交按钮）

• <s/elect>

  • 下拉框

• textarea

  • 多行文本输入框

表单的属性

• value（表单里面的值）
• name（配合提交到后台用）
• checked（默认选中项）
• selected（下拉框默认选中项）

label（关联表单和文字，点文字自动选中表单）

表单域 form（收集表单内部的值，提交到后台）

• action（向何处发送表单属性）
• method【规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）】

H5新增的标签和属性

新增容器标签

• header（网页头部）
• footer（网页尾部）
• aside（网页侧边栏）
• article（文章页）
• nav（网页导航栏）
• section（网页的区域块）

普通的容器标签【div和span】没有任何语义性

新增的表单

• range（特定范围数值选择器）
• date（显示日期）
• number（只能包含数字的输入框）
• …更多查阅文档

新增的表单属性

• placeholder（提示文本）
• autofocus（自动获取焦点）
• autocomplete（自动补全）
• required（认证非空）
• …更多查阅文档

多媒体

视频

• 第三方播放视频【第三方网站，获取分享链接（好处：没有兼容性困扰）（坏处：麻烦，会有广告植入）】

• video标签播放视频

  • 标签属性

    • autoplay（自动播放）
    • loop（循环）
    • controls（控件）

  • 视频格式

    • ogg
    • MP4
    • webm
    • 兼容写法

    •   <source src="文件夹/文件名.mp4">
      

    •   <source src="文件夹/文件名.ogg">
      

    •   <source src="文件夹/文件名.webm">
      

    •   <a href="">浏览器版本过低，请升级</a>
      

音频

• 使用方式和video基本一致

字符集

乱码

乱码的问题的根源来源于存储的时候和解析的时候的编码方式不一致

gbk

国标中文

utf-8

全球通用 包含中文及其其他所有国家的语言编码

gb2312

也支持中国汉字，生僻字，繁体字支持的少