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  单选或复选框的选中状态

原文地址:https://www.cnblogs.com/Ann-web-1/p/11437992.html