HTML/CSS 第二章

论坛 期权论坛 期权     
web前端基地   2019-7-8 06:15   3567   0
[h1]学习目标[/h1]
  • 表格的创建和使用
  • 常见表单的使用
  • 了解HTML5新增的标签及其表单属性
[h1]创建表格[/h1]
  1. 单元格单元格单元格单元格单元格单元格单元格单元格单元格
复制代码
  • 表格至少有三个基本的标签构成 table 代表一个表格 tr代表行 td代表单元格
  • tr必须嵌套在table标签中,td必须嵌套在tr或者th中
  • 有几个单元格就代表有几列
[h2]表格属性[/h2]
  1. width  表格的宽度 (了解)height 表格的高度 (了解)border 表格的边框 (了解)align  表格的对齐方式 (了解)cellspacing 单元格与单元格的间距cellpadding 单元格与单元格内容的间距
复制代码
[h2]表格的表头标签[/h2]
在合适的位置将td替换成th即可 th标签相对td来说更有语义性 并且会将内部的文字加粗且居中
  1. 表头1表头2表头3
复制代码
[h2]表格的结构[/h2]
  1. 姓名年纪性别小明18男小强18女
复制代码
表格的结构不是一定需要的,但是添加上表格的结构会使表格的语义更明确
[h2]合并单元格[/h2]跨行合并 rowspan 上下合并 将rowspan写在上面的单元格上跨列合并 colspan 左右合并 将colspan写在左边的单元格上
需要合并几个 这个值就是几 一旦合并了多余的单元格需要删掉多余的单元格
[h1]表单[/h1]作用:收集用户信息发送给后台 三大组成部分:
  • 表单域 (将内部包含的表单信息都收集起来发送给后台)
  • 提示文本(提示用户当前表单的输入内容)
  • 表单 (真正用来收集用户信息)
[h2]表单的分类[/h2]
  1. type的取值:text 单行文本输入框password 密码框 radio 单选框(在多个里面选择一个) 单选框要生效必须具备name属性 并且同一种类型的单选框的name取值必须一样 checkbox 复选框(在多个里面选择某几个) button 普通按钮 file 用户上传控件 submit 提交按钮
复制代码
[h2]其他表单的补充[/h2]
  1. textarea 多行文本输入框select 下拉菜单
复制代码
[h2]表单补充[/h2]
  1. radio和checkbox 默认选中项  checkedselect框的默认选中项 selectedlabel标签的使用
复制代码
[h2]表单域[/h2]
  1. action 提交的后台地址method 提交的方法
复制代码
[h1]H5新增的标签及其表单属性[/h1][h2]H5新增的标签[/h2]
  1. header,nav,section,footer,aside,article这些新增的标签不会带来任何视觉效果的改变,它的作用仅是增加了语义性header 表示header里面包裹的东西是网站的头部区域nav 表示nav里面包裹的东西是网站的导航section 表示里面包裹的东西是网页的某一个模块footet 表示footer标签里面包裹的东西是网页的页脚aside 表示aside标签里面包裹的东西是网页的侧边栏article 表示article标签里面包裹的东西是网页的文章页详细请查阅文档
复制代码
[h2]H5新增的表单新属性[/h2]
  • placeholder 占位文本
  • autofocus 自动获取焦点
  • autocomplete 自动补全
  • required 自动验证表单
[h2]H5新增的表单[/h2]
  1.      滑块   日期控件  唤醒数字键盘详细的请查阅文档
复制代码
[h2]多媒体标签[/h2][h3]视频[/h3]网页中插入视频有两种方法
  • 没有兼容性的 将视频文件上传到第三方网站获取其分享代码放到自己的页面中即可
    • 优点:没有兼容性
    • 缺点:有广告植入
  • 使用H5新增的video方法
复制代码
  • 优点:没有广告
  • 缺点:有兼容性,一般运用在手机端
video标签的常用属性
  • autoplay 自动播放
  • controls 播放控件
  • loop 循环播放
video的格式支持 ogg,MP4,webm 不同的浏览器支持的格式不一样,所以出现了一种兼容写法:前提是准备三种格式的视频文件
  1. 你的浏览器不支持video,点击升级吧
复制代码
浏览器会从上到下依次去读,在这个过程中,只要读到自己识别的视频文件就直接播放这个视频文件,并且不会再往后继续读取 实测:目前的主流浏览器对Mp4的支持都比较好!!
[h3]音频[/h3]音频的使用和视频的使用基本一致
  1. 你的浏览器不支持audio,点击升级吧
复制代码
audio标签的常用属性 1.autoplay 自动播放 2.controls 播放控件 3.loop 循环播放
[h2]知识补充[/h2][h3]字符集的设置[/h3]字符集的核心点就是如果设置了以什么字符集进行读取,那么在保存的时候也需要设置成对应的字符集
utf-8 收录了全世界所有国家的语言文字 gbk 收录的是汉字
utf-8 > gbk 所以查询来说的话gbk的查询和存储都小于utf-8 但是现在国际主流都是utf-8,所以为了后期的考虑,都用utf-8


分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:15
帖子:3
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP