您的位置: 首页  >  文章  >  HTML5+CSS3

HTML5+CSS3

分类: 文章 • 2025-03-10 09:41:58

HTML5

HTML5增加了新的特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图片及特效特性，性能与集成特性，CSS3特性。

1.新增语义化标签

如：

  1. header 头部标签
  2. nav 导航标签
  3. article 内容标签
  4. section 块级标签
  5. aside 侧边栏标签
  6. footer 尾部标签

2.新增多媒体标签

1. 音频标签audio
  1. HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放，但是支持的格式有限。
格式 IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √

注:不同浏览器所支持的格式不同，可以用source提供多种格式，供浏览器选择。例如：
HTML5+CSS3
2. 音频标签常见属性

属性 值 描述
autoplay autoplay 自动播放
controls controls 控制器面板,向用户展示控件
loop loop 循环播放
src url 要播放文件的路径

注:谷歌浏览器把autoplay属性禁用了

2. 视频标签video
  1. 支持格式
格式 IE Firefox Opera Chrome Safari
Ogg × 3.5+ 10.5+ 5.0+ ×
MPEG4 9.0+ × × 5.0+ 3.0+
WebM × 4.0+ 10.6+ 6.0+ ×
  1. 常见属性
属性 值 描述
autoplay autoplay 自动播放
controls controls 控制器面板,向用户展示控件
loop loop 循环播放
src url 要播放文件的路径
width pixels（像素） 设置播放器宽度
height pixels（像素） 设置播放器高度
preload preload 是否等加载完成再播放
poster img url 加载等待的图片
muted muted 静音播放

注:谷歌浏览器把autoplay属性禁用了，添加muted属性可以解决，但是静音播放。
HTML5+CSS3

3.新增input表单和表单属性

  1. 新增type属性
属性（值） 描述
type=“email” 限制用户输入必须为Email类型 ，会对邮箱进行验证
type=“url” 限制用户输入必须为URL类型，会对网址进行验证
type=“date” 限制用户输入必须为日期类型（年月日）
type=“datetime” 支持Safari
type=“datetime-local” 年月日+时分
type=“time” 限制用户输入必须为时间类型（时分）
type=“month” 限制用户输入必须为月类型
type=“week” 限制用户输入必须为周类型（第*年 第*周）
type=“number” 限制用户输入必须为数字类型
type=“tel” 电话号码，在移动端切换数字键盘，不会进行验证
type=“search” 搜索框，会携带清除的‘×’
type=“color” 会生成一个颜色选择表单
  1. 新增表单属性
属性 值 描述
required required 必须输入,不能为空
placeholder 提示文本 表单的提示信息,存在默认值将不显示
autofocus autofocus 页面加载完成自动获取焦点到指定表单
autocomplete off/on 当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项，默认已经打开。（前提：1.必须成功提交过；2.需要在表单内同时加上name属性）
multiple multiple 可以选择多个文件提交,多个邮箱（用"，"分割）提交

HTML5+CSS3HTML5+CSS3

CSS3

1.选择器

1. 属性选择器(权重10)
选择符 描述
E[attr] 选择具有attr属性的E元素
E[attr=value] 选择attr属性的值必须为value的E标签
E[attr*=value] attr属性的值包含value的E标签
E[attr^=value] attr属性的值以value开头的E标签
E[attr$=value] attr属性的值以value结尾的E标签

相关推荐