HTML5学习随笔

HTML5

含义:html5是超文本语言的第五次重大修改的版本，html5里面做了很多兼容处理，能够兼容多数浏览器。

• 和之前相比：新增了很多内容：

	1.  语义化标签
	2. 增强型表单
	3. 音频，视频
	4. 各种api
	5. canvas
	6. svg 绘图
	7. 离线存储本地存储

• 浏览器：

浏览器内核不同，导致浏览器兼容性不同

	1. chrome  谷歌
	2. firefox    火狐
	3. safari      苹果
	4. IE             微软（不再维护）
	5. opera      欧鹏

目录

• HTML5
• HTML5语法：
• 语义化标签
• 视频video
  • • 视频格式：
• 音频audio
• 增强型表单
  • • 新的输入框
    • 表单新增属性
    • 自定义下拉选项datalist

HTML5语法：

1. 文件后缀名仍然是.html或者.htm
2. 不严格区分大小写
3. 编码仍然是utf-8
4. 对应标签语法
   • 不能省略：
     

     ---

   • 可以省略结束标签（常用双标签）
   • 可以全部省略：head body html colgroup tbody
5. 属性引号不区分单引号和双引号

语义化标签

w3school 在线教程

• header元素 页面中一个内容区块或整个页面的标题
• footer元素 页面中一个内容区块或整个页面的尾部
• article元素 一块与上下文无关的独立的区域
• aside元素 在article之外的，与article内容相关的辅组信息
• section元素 主要的内容区域
• nav元素 导航栏navBar navigator
• main元素 主要的内容
• figure独立的文档区域>figcaption标题 一段独立的流内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）有点相对于ol>li
• mark 标记 强调
• address
• audio
• video

视频video

特征：不会自动播放，播放完后会暂停

• rsc="" 视频路径
• controls 控件（搭配使用，没有控件不能播放）
• autoplay 自动播放（需要先静音才能设置自动播放）
• muted 静音
• loop 循环播放
• poster 封面
  • poster 加载中时转圈圈
  • ../1.png 加载中时显示图片（.asf可以动）
• width 宽高会按比例缩放（如果要调整就在外面包一个盒子，调整盒子大小）
  • 如果想让视频铺满全屏，给视频套个盒子 给盒子设置需要的宽高，给视频宽高100%和object-fit：fill； 可以取值contain，cover，none，scale-down，inherit继承父元素.....
• 多个资源兼容写法：video[controls....]>source[src="" type=""]*n source可以有多个，只播放识别到的第一个资源。如果都不能播放，可以写提示信息。（video必须要写控件，且所有属性写在video上。

视频格式：

常用：.ogg .webm .MP4

• 微软视频：wmv，asf，asx
• Real Player： rm，rmvb
• MPEG视频： mpg，mpeg，mpe
• 手机视频：3gp
• Apple视频：mov
• sony视频：mp4，m4v
• 其他常用视频： avi，dat，mkv，flv，vob

音频audio

• rsc="" 视频路径
• controls 控件（搭配使用，没有控件不能播放）
• preload 预加载
  • meta
• loop 循环播放
• 多个资源兼容写法：audio[controls....]>source[src="" type=""]*n source可以有多个，只播放识别到的第一个资源。如果都不能播放，可以写提示信息。（audeo必须要写控件，且所有属性写在audio上。

增强型表单

新的输入框

• color 拾色器

• date 日期

• datetime

• datetime-local 本地时间

• month 月份

• week 周期

• time 时间

• number 数字

  • min="最小值"
  • max="最大值"
  • value="初始值"
  • step="步长"

• email 邮箱

  • autofocus 自动聚焦（多个情况下，识别第一个）

  • multiple 多个邮箱 输入时两个邮箱逗号隔开

  • autocomplete 自动完成填写 需要搭配name属性使用

    • on 开（默认开）
    • off 关

  • pattern 正则

    • pattern=“[0-9][a-z]{3}”

  • required 必填

• range 滑块

  • min="1"
  • max="100"
  • value="初始值"

• search 输入内容右边会出现小叉可以清除输入内容

• tel 电话，移动段才生效

• url 地址 ftp：// 或者 http：//www.xxx.com或者本地的网址

表单新增属性

• placeholder="提示信息"

  • min="最小值"
  • max="最大值"
  • value="初始值"
  • step="步长"

• autofocus 自动聚焦（多个情况下，识别第一个）

• • autocomplete 自动完成填写 需要搭配name属性使用
  • on 开（默认开）
  • off 关

• pattern 正则

  • pattern=“[0-9][a-z]{3}”

• required 必填

• multiple 可以填写多个 输入时用逗号隔开

自定义下拉选项datalist

input[type='text' list='xx']+datalist[id="xx"]>option*n

• datalist双标签

• 默认datalist不会显示在页面，但是绑定后，可以通过模糊查询获取到option'的值