HTML5(新增)

文章介绍了HTML5的新特性,包括五大主流浏览器的名称,HTML5语法的灵活性和更好的兼容性,新增的语义化标签如
等提高搜索引擎友好度,以及
摘要由CSDN通过智能技术生成

一、五大浏览器
     1.IE浏览器      IE        
      2.火狐浏览器    firefox    
      3.谷歌浏览器    google
      4.苹果浏览器    safari
      5.欧朋浏览器    opera
      拓展:市面上第一款浏览器叫做网景浏览器,又叫做网景领航者。

二、html5特点
    语法相较于之前更加的灵活,兼容性和包容性更好

三、h5新增(语义化)标签
    1.header        头部标签
      2.main          主体模块
      3.footer        脚部标签
      4.nav           导航栏
      5.section       模块
      6.article       与上下文无关的独立模块、文章
      7.aside         搭配article使用,对article内的内容做出解释(写在article之外)
      8.figure        表示独立的流内容。figcaption元素作为他的标题,一般放在内部第一个或者最后一个。
    好处:对于浏览器搜索引擎和渲染引擎更加的友好,搜索排名比重更高。

四、视频和音频标签
  1.video       视频
    元素类型:元素类型为行内块元素
    属性:
      src             视频路径
      controls        控制台
      muted           静音
      autoplay        自动播放(很多浏览器默认禁止此功能,若想使用,需要搭配muted使用)
      loop            循环播放
      poster          视频未播放时和加载时的加载封面
  2.audio       音频
    元素类型:元素类型为行内块元素
    属性:
      src             音频路径
      controls        控制台(不加控制台啥都看不到)
      muted           静音
      autoplay        自动播放(看浏览器,浏览器支持就行)
      loop            循环播放

视频和音频格式
    mp4  ogg   webm


五、h5智能表单
    1.input新增控件类型
    type
      color       拾色器
      tel         拨号盘(在手机上有用)
      search      搜索框
      number      数字框
      range       滑块
      email       邮箱框(会对邮箱格式进行简单验证)
      url         网址框(会对网址格式进行简单验证)
      date        日期选择器(选择年月日)
      month       月份选择器(选择年月)
      week        周选择器(选择年周)
      time        时间选择器(选择时分)
      datetime-local  本地时间选择器(选择本地年月日时分)
    
    2.input新增属性
            <1>搭配数值框和滑块使用的属性
              min     最小值
              max     最大值
              step    间隔数值
            <2>搭配邮箱框使用的属性
              multiple   允许邮箱输入多组值
            <3>多搭配单选框和多选框使用,其他类型也能用  (不属于新增)
              checked       默认选中
              disabled      禁止使用、不可用
            <4>其他新增属性
              placeholder   提示信息
              autofocus     自动获取聚点(只识别第一个)
              required      必填项
              autocomplete  自动提示、自动补全(需要搭配name使用)
                    on(默认值)    打开自动补全
                    off           关闭自动补全
        <5>搭配标签使用的新属性   list
              作用:绑定数据列表
              格式:
              <datalist id='list1'>
                <option value='xx'>
                <option value='yy'>
                <option value='zz'>
              </datalist>
              <input type='xx' list='list1' />
            <6>校验输入框内容格式  pattern·

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值