h5及c3新增的一些内容

Posted 2022-09-13 ann-web-1

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