美文网首页
HTML5新增语义化标签

HTML5新增语义化标签

作者: 琳琳酱吖 | 来源:发表于2020-10-29 23:27 被阅读0次

    在HTML第五次重大修改后,用于取代HTML4和XHTML的第一代标准版本,称为HTML5。HTML5中新增了一些语义化标签,提高可用性和改进用户的友好体验。接下来,就让我们来学习HTML5中新增的标签吧~(╹▽╹)

    • 狭义的HTML5指的是HTML语言的第五个版本。
    • 广义的HTML5是指,HTML5 + CSS3 + Javascript技术的综合。

    HTML5新增语义化标签

    HTML5的优势:

    • 提高可用性和改进用户的友好体验
    • 更好的语义化标签
    • 带来更多的多媒体元素,很好的替代FLASH和Silverlight
    • 涉及到网站抓取和索引时,对SEO很友好
    • 大量应用于移动应用程序和游戏
    • 可移植性好

    HTML5的劣势:

    • 该标准未能很好的被PC端浏览器支持
    • IE9以下浏览器几乎不兼容

    H5新增语义化标签-常用布局标签

    • <header> 头部标签
    • <nav> 导航标签
    • <main> 主体标签
    • <article> 独立内容标签
    • <section> 区段标签
    • <aside> 侧边栏标签
    • <footer> 尾部标签


      语义化标签.PNG

    注:这种语义化标准主要针对搜索搜索引擎,可在页面中多次使用。在IE9中,需要把这些元素转换为块级元素。

    H5新增语义化标签-多媒体标签

    <audio>音频标签

    HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,但支持的格式有限。


    音频格式.PNG
    <audio>音频标签的兼容写法
      <audio controls="controls">
        <source src="happy.mp3" type="audio/mpeg">
        <source src="happy.ogg" type="audio/ogg">
        您的浏览器暂不支持audio标签
      </audio>
    
    <audio>音频标签常见属性
    属性 描述
    autoplay autoplay 音频在就绪后马上播放
    controls controls 向用户显示音频控件
    loop loop 音频结束时,会重新开始播放
    preload preload 音频在页面加载时进行加载,并预备播放,会忽略"autoplay"属性
    src url 要播放的音频URL

    <video>视频标签

    HTML5在不使用插件的情况下也可以原生的支持视频格式文件的播放,但支持的格式有限。


    视频格式.PNG
    <audio>音频标签的兼容写法
      <video controls="controls">
        <source src="move.mp4" type="audio/mp4">
        <source src="move.ogg" type="audio/ogg">
        您的浏览器暂不支持video标签
      </video>
    
    <video>视频标签常见属性
    属性 描述
    autoplay autoplay 视频就绪自动播放
    controls controls 向用户显示播放控件
    loop loop 视频结束,会继续播放该视频,循环播放
    preload auto(预先加载),none(不预先加载) 是否预加载视频,"autoplay"属性会被忽略
    src url 视频url地址
    width pixels(像素) 播放器宽度
    height pixels(像素) 播放器高度
    poster img url 加载时等待画面的图片
    muted muted 静音播放

    H5新增语义化标签-表单标签

    输入标签

    HTML5新增<input>表单类型

    属性值 描述
    type="email" 限制用户输入必须为email类型
    type="url" 限制用户输入必须为url类型
    type="date" 限制用户输入必须为日期类型
    type="time" 限制用户输入必须为时间类型
    type="month" 限制用户输入必须为月类型
    type="week" 限制用户输入必须为周类型
    type="number" 限制用户输入必须为数字类型
    type="range" 滑动条
    type="tel" 手机号码
    type="search" 搜索框
    type="color" 生成一个颜色选择表单

    <datalist> 标签

    • <datalist>标签规定了<input>元素可能的选项列表;
    • <datalist>元素包含了一组<option>元素,这些元素表示预定义可选值,在<input>元素输入过程,会自动相应<option>元素的值,
    • 绑定的<input>标签必须设置list属性,属性值等于<datalist>标签的id属性值。
    <!-- 第一种写法 -->
     <input type="text" list="city-list">
      <datalist id="city-list">
        <option value="广州">gz</option>
        <option value="成都">ct</option>
        <option value="上海">sh</option>
      </datalist>
    <!-- 第二种写法 -->
     <input type="text" list="city-list">
      <datalist id="city-list">
        <option value="广州">
        <option value="成都">
        <option value="上海">
      </datalist>
    

    新增表单属性

    属性 描述
    required required 拥有该属性表单内容不得为空,必填
    placeholder 提示文本 表单提示信息
    autofocus autofocus 自动聚焦属性
    autocomplete off/on 默认打开,需要放在表单内同时加上name属性,同时需要成功提交
    multiple multiple 可以多选文件提交

    相关文章

      网友评论

          本文标题:HTML5新增语义化标签

          本文链接:https://www.haomeiwen.com/subject/frglvktx.html