H5 CSS3第一阶段总结（二）

最新推荐文章于 2022-05-06 10:27:22 发布

苏小锅

最新推荐文章于 2022-05-06 10:27:22 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/qq_37786243/article/details/84639440

版权

一、H5新增标签及语义化的重要性

1. <header></header>
2. <nav></nav>
3.<section></section>    // 内含内容div 
4.<article></article>
5.<aside></aside>
6.<footer></footer>
7.<figure>                // 用于图像、图片、视频
8.   <figcaption></figcaption>
9.</figure>

老browser 兼容新标签方法

方法一：
<style>  article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}
</style>
<script src="html5shiv.js"></script>

方法二：
<script src="custom.moderizr.js"></script>

语义化的重要性：

1. 呈现清晰的结构
2. 搜索引擎更易识别，易被检索
3. 无障碍性，方便其他设备解析
4. 便于开发和维护，语义化更具可读性
5. 适应未来浏览器和开发工具的发展趋势

二、多媒体标签

1.<video>: 不安装插件即可支持视频

支持 Mp4、WebM、Ogg 三种类型。 MIME 类型有 video/mp4 、video/ webm、video/ogg

属性 autoplay: 自动播放 controls: 显示控件（height width 设定播放器宽高） loop: 循环播放

muted 静音（chrome 高版本中有可能autoplay 不能用，使用 autoplay muted 循环但静音播放）

2.<audio>:定义音频、音乐/ 其他音频流

语法：<audio src="XXXX.wav"> 浏览器不支持audio 标签 </audio>

支持格式：Mp3 、Wav、Ogg

3. <source>：定义媒介资源

<audio>
    <source src="AA.ogg" type="audio/ogg">   // type 是 MIME 类型,启动适当类型的应用程序
    <source src="bb.mp3" type="audio/mpeg">
    "Your browser dones not support the audio type"
</audio>

4.<canvas>：定义图形

把 API 提供给客户端 JS，使脚本能够绘制

5.<embed>：引入flash 动画

<object> 定义一个嵌入对象，向XHTML 添加多媒体 </object>
   若<object> 元素未能显示，会执行内部的代码
   因此能嵌套多个 object 元素

多媒体标签能极大提升用户体验

三、属性选择器

1.E[att][attr=“x”]匹配所有具有att属性的元素。
2.E[att~="val"]匹配所有att属性具有多个空格分隔的值、其中至少有一个值等于“val”的元素(如果忽略了波浪号，则说明需要完成完全匹配)。
3.E[att|=“val”]匹配所有att属性具有多个连字号分隔(-)的值,其中一个值以“val”开头的元素，主要用于lang属性；
4.E[a^="def"] 选择 a 属性值以 "def" 开头的所有元素 
5.E[a$="def"]  选择 a 属性值以 "def" 结尾的所有元素
6.E[a*="def"]  选择 a 属性值中包含子串 "def" 的所有元素

1. :target:目标伪类选择符（作为被触发元素，触发后有效）
2. :not：否定伪类选择符
3. :root：根伪类选择符（绑定 html 上）
4. :empty：空伪类选择符，内容为空的元素设置的样式
5. :nth-of-type:匹配父元素内，同类型的第n个标签
6. e:nth-child(n)：匹配父元素中的第n个元素，并且为e元素的标签,非 e 标签也算在内
7. e:last-of-type: 指定类型的最后一个 e 元素
8. e:first-of-type:指定类型的第一个 e 元素
9. e:only-child 只包含一个子元素，并且匹配为e
10. e:only-of-type : 只包含一个同类型的子元素
11. e:nth-last-of-type : 同类型的最后一个e 元素
12. e:nth-last-child : 父元素中的最后一个元素(不一定是e)

四、ui元素状态伪类选择符

1.E:disabled  设置该元素处于不可用状态的样式;
2.E:enabled  设置该元素处于可用状态时的样式；
3.E:read-only    指定当元素处于只读状态时的样式
4.E:read-write   指定当元素处于非只读状态时的样式；
5.E:checked  指定当表单中的radio单选框或checkbox复选框处于选取状态时的样子(FF中要写成：-moz-checked)
6.E:default  指定当页面打开时默认处于选中状态的radio或checkbox控件的样式
7.E:indeterminate  指定当页面打开时,如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样

五、阴影

box-shadow: x y 模糊半径 扩展半径 color inset（不写默认为外阴影）

六、圆、半圆、椭圆

半圆设置
border-radius: 50% 50% 0 0/100% 100% 0 0   （上部分的半圆）
右上角左下角不收缩的半圆
border-radius: 50% 0 50% 0/100% 0 100% 0 
---------------------
那边需要90度角的半圆：50%/100%

椭圆
长宽不一致时，border-radius:50%;

七、引入外部字体

css 样式
@font-face(font-family:"myFirstFont";src:url(XXX.ttf);)    // 适用格式 woff、eot 等

图标库，下载后引入css 文件
fontclass：引入class名
unicode ：在内容区适用 &....
symbol ：支持多个图标，但兼容性差。1）引入 JS   2)插入 svg

常用字体库网站：

阿里
http://wwww.iconfont.cn/

fontello
http://fontello.com/

icommon
https://icomoon.io/

Font-Awesome
http://www.fontawesome.com.cn/

Glyphicon
https://www.glyphicons.com/

ionicons
https://ionicons.com/