Html-html5和CSS3新特性

概念： HTML5 的语义化指的是合理正确的使用语义化的标签来创建页面结构

新特性

• 语义化标签
• 多媒体标签(audio,video) 点击，页面最底部
• input 属性值
• 表单属性 — 点击，查看更多详情
• canvas / webGL
• 拖拽释放 API
• history API
• requestAnimationFrame
• 地理位置 API
• webSocket
• web 存储：localStorange、SessionStorage 点击，查看并阅读浏览器缓存小节
• css3 特性
  • 属性选择器
  • 伪类选择器
  • 伪元素选择器 — 点击，查看更多选择器知识
  • 盒子模型 —点击，查看更多盒子知识
  • 模糊滤镜 filter —
  • calc 函数： 声明属性值时执行简单计算
    • 如：width：calc(100%-80px) 表示子盒永远比父盒小 80 像素
  • 过度效果 transtion: 变化的属性 花费时间 运动曲线 何时开始;

语义化标签：

• header: 头部标签

• nav：导航栏标签

• main: 创建网页的主体

• article：内容标签

• section：定义文档某个区域

• aside：侧边栏标签

• footer：底部标签

• 优点：

  • 代码结构清晰
  • 利于开发和维护
  • 有利于搜索引擎优化(SEO)
  • 在没有 CSS 样式的情况下，页面整体也会呈现很好的结构效果

input 属性值 type

属性值	说明	示例
email	限制用户输入必须为 Email 类型	邮箱：
url	限制用户输入必须为 URL 类型	网址：
date	限制用户输入必须为 日期 类型	日历-日期：
time	限制用户输入必须为 时间 类型	时间：
month	限制用户输入必须为 月份 类型	日历-年月：
week	限制用户输入必须为 周 类型	日历-周：
number	限制用户输入必须为 Number 类型	步进器：
tel	手机号码	手机号码：
search	搜索框	搜索框：
color	生成一个颜色表单	颜色块：
submit	提交按钮	form中做提交：

表单属性

属性值	说明	示例
required	必填
autofocus	页面加载完自动聚焦指定表单
autocomplete: on/off	浏览器基于之前键入的值，默认显示已填写的选项，只有name+成功提交才算键入过
placeholder:""	文本提示，value有值则不显示
multiple	多选文件提交