• h5及c3新增的一些内容


    H5新增内容

    1.H5新增语义化标签

      标签语义化:在合适的地方放合适的标签,利于SEO优化

      

        <!-- 头部 -->
        <header></header>
        <!-- 导航 -->
        <nav></nav>
        <!-- 网页的主体内容 -->
        <main>
            <!-- 有联系的内容组 -->
            <section>
                <!-- 侧边栏 -->
                <aside></aside>
                <!-- 独立完整的内容 -->
                <article></article>
            </section>
        </main>
        <!-- 底部 -->
        <footer></footer>

       main 标签的语义化特性:可以使辅助技术快速定位到页面的主体。有些页面中有 “跳转到主要内容” 的链接,使用main标签可以使辅助设备自动获得这个功能。

      article 标签的语义化特性:是一个分段标签,用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。

      section 标签的语义化特性:用于对与主题相关的内容进行分组。它和article可以根据需要嵌套着使用。举个例子:如果一本书是一个article的话,那么每个章节就是section。

      header 标签的语义化特性:可以使辅助技术快速定位到它的内容。

      nav 标签的语义化特性:用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。

      footer 标签的语义化特性:可以使辅助设备快速定位到它。它位于页面底部,用于呈现版权信息或者相关文档链接。

    2.新增表单类型

      email,tel,url,number,search(搜索框),range(自由拖动滑块),color,time,date(日期,年月日),datatime(日期时间),month,week(年周)

    3.表单元素

      <datalist>数据列表 与input配合使用

    4.表单属性

      autofocus自动获取焦点

      placeholder提示文字

      required 必填的

      autocomplete=”on” 自动完成,默认为on开启,关闭则为off

      multiple 用于上传多个文件

      pattern=”” 自定义验证,直接写正则表达式

      form=”需要提交至那个表单的ID” 指定表单所属的表单域

      novalidate 关闭表单的验证功能 加给form标签。

    5.表单事件

      oninput:当用户输入时触发

      oninvalid:当验证不通过时触发,通常用于设置验证不通过时的提示文字

    6.多媒体标签

       audio   音频标签

      video    视频标签

      canvas  表示位图区域

      source   为video和audio提供数据源

      track      为video和audio指定字母

      svg    定义矢量图

      音频、视频对应属性:

      controls控制条 

      autoplay自动播放 

      

    C3新增内容

       颜色:rgba

      文字阴影:text-shadow

      边框:圆角(border-radius)、边框阴影(box-shadow)

      盒子模型:box-sizing

      背景:设置背景图片的尺寸(background-size)、设置背景图片的原点(background-origin)、设置背景图片的裁切区(background-clip)、以“,”分隔可以设置多背景,用于自适应布局

      渐变:linear-gradient、radial-gradient

      过渡:transition

      自定义动画

      在c3中唯一引入的伪元素是:selection

      2D转换:transform:translate(x,y)、rotate(x,y)、skew(x,y)、scale(x,y)

      3D转换同上多了z轴

    c3新增伪类

      :first-of-type  选择属于其父元素的首个元素

      :last-of-type  选择属于其父元素的最后一个元素

      :only-of-type  选择属于其父元素唯一的一个元素

      :only-child  选择属于其父元素的唯一子元素的每个元素

      :nth-child(n)  选择属于父元素的第n个子元素

      :enabled  表单控件的开启属性

      :disabled  表单控件的禁用属性

      :checked  单选或复选框的选中状态

  • 相关阅读:
    Database
    模式匹配
    About Unicode
    Dive into python学习笔记
    Python基本概念及零碎知识点
    Djnago的一些零碎知识点
    python项目练习3:万能的XML
    Django的第一个web程序及深入学习
    Poj1195&tyvj1474二维线段树
    zoj2319Beautiful People Dp
  • 原文地址:https://www.cnblogs.com/Ann-web-1/p/11437992.html
Copyright © 2020-2023  润新知