从0.5开始学前端：HTML+CSS（2）：内联框架+音视频+CSS基本语法+常用选择器+复合选择器+关系选择器+属性选择器+伪类选择器+超链接伪类+伪元素

       

内联框架

  
       内联框架使用<iframe>标签，它用于向当前页面引入一个其他页面。实际上内联框架的使用是比较少的，因为开发中最注重的还是页面本身的信息。再者，爬取其他网站的信息很可能遭到拒绝。

音视频

  
       <audio>标签引入音频。默认不允许用户控制开始暂停，所以需要添加controls属性决定是否允许让用户播放，autoplay设置让音频自动播放，loop设置循环播放。目前，大部分浏览器不会对音视频进行播放(第一次打开浏览器)，实际需要JS代码真正实现自动播放.

       音视频都拥有宽高属性.该属性可用于设置播放窗口大小。同时，还需要设置type值指定文件类型。正确地设置宽高属性能够实现更好的交互，但实际上该属性对开发并不太友好，原因是一旦标签的值设置不正确就会导致播放窗口无法正常显示，它同样指向兼容问题。

<embed src="./source/audio.mp3" type="audio/mp3" width="300" height ="100">

       source标签可引入文件的链接，但IE8不支持source标签，需使用embed标签。所以若需要兼容IE8可增加一行embed代码，同时不需写兼容提示.

       视频标签为<video>，相对于音频新增了muted的静音输出属性。

       实际开发中雇佣服务器部署网页目录时，还要考虑到带宽问题，考虑视频的压缩。更受中小网站欢迎的解决方案是寻找第三方音视频云服务商提供外链，以及在视频网站中上传视频再引外链。

CSS基本语法

  
       网页源码的<style>标签遵循CSS规范，这一部分一般html不会涉及。反之，在html的其他“器官”中也不能使用CSS规范.

注释

       ctrl+"/"快速生成注释，并可取消注释。

/* 这是一段注释 */

选择器、声明块

       选择器是要修饰的对象。通过选择器修饰对象属性。声明块则是后方括号内的属性声明.

p{
    color:blue;
    font-size:40px;
}
<p>我是蓝色的</p>

       其中p为选择器。括号内为声明块。color为属性，blue为值。CSS分为多种选择器，其中的声明属性各不相同。

常用选择器

  
       元素选择器（p{},h{},div{}）根据标签名来选中指定的元素。它使用标签名{}的语法。
       id选择器根据元素的id属性值来选中一个元素。它使用#id属性值{}的语法。它和元素选择器的区别主要在于可指定id而不需要一个个的添加特定标签名。
       类选择器根据元素的class属性值选中元素。它使用.class属性值{}语法，与id选择器相似，但class可重复指定。
       通配选择器选中页面所有元素。它使用*{}语法。

复合选择器

  
       多个选择器规范，使用时可视为一个选择器混合使用。
       交集选择器的语法：选择器1选择器2选择器3…选择器n{}。
       交集选择器中如有元素选择器，则必须使用元素选择器开头。
       选择器分组（并集选择器）的语法：选择器1,选择器2,…,选择器n{}。若如此做可同时选中多个对象。注意逗号是语法。

关系选择器

  
       Html/CSS中不同元素的关系亦有不同，分为父子、祖先、后代、兄弟元素。Venn图和节点图都能够比较好的描述这些关系.
       父元素指的是直接包含子元素的元素。
       子元素指的是直接被父元素包含的元素。
       祖先元素指的是直接或间接包含后代元素的元素。
       后代元素与祖先元素相反，兄弟元素指的是被同一父元素包含的不同的一组元素.
       关系选择器语法如下：

       子元素选择器：父元素>子元素{}
       后代元素选择器：祖先元素 后代元素{}
       兄弟元素选择器（选择下一个兄弟）：前一个+后一个{}
       （选择下方所有的兄弟）：前一个~最后一个{}

       实际开发中更多地使用后代元素选择器。注意子元素选择器可以混合为孙代元素选择器，只需要父元素>子元素>孙代元素{}即可.

属性选择器

  
       属性选择器可选中带有某属性的元素，在同一选择器中指定属性。回顾所学，我们必然不需要在属性选择器中指定class,id属性，而是当有其他属性加入时使用.语法:选择器[属性名]{}

p[title]{
    color:yellow;
}
<p title="this" >这个是this是这个<\p>
<p>这个不是this是那个<\p>

       [属性名]{}选择含指定属性的元素
       [属性名=属性值]{}选择含指定属性名和值的元素
       [属性名^=属性值]{}选择属性值以指定值开头的元素
       [属性名$=属性值]{}选择属性值以指定值结尾的元素
       [属性名*=属性值]{}选择属性值中含有某值的元素的元素

伪类选择器

  
       伪类：用来添加一些选择器的特殊效果。它对元素进行分类并不依据其名字、属性或内容，而是基于特征。它是基于文档以外的抽象。伪类有:link,:hover,:active,:lang…

       伪类实际上是一个不存在的类。或者说，它是一个特殊的类.伪类描述一个元素的特殊状态，比如第一个子元素（:first-child）、被点击的元素（:active）、鼠标移入的元素(:hover)…

ul>li:last-child{
    color:orange;
}
li:nth-child(2n+1){
    font-size:12px;

}
li:nth-child(odd){
    font-size:30px;
    /* 选中li中奇数元素 */
}
ul>li:not(:first-child){
     color:red;
     /* 选中所有的li标签，除了第一个 */
}

       :first-of-type，:last-of-type，nth-of-type的功能与上述类似，但不同点在于它们在同类型元素中进行排序。

       CSS伪类选择器分为4种：动态伪类选择器，UI元素状态伪类选择器，结构伪类选择器，否定伪类选择器。

超链接伪类

  
       并非所有的伪类都被浏览器所支持，有四个可安全使用于超链接：
       :link用在未访问的连接上。
       :visited用在已经访问过的连接上。
       :active用于获得焦点（比如，被点击）的连接上。
       :hover 用于鼠标光标置于其上的连接。

       :visited出于隐私原因考虑只能修改链接的颜色。

伪元素

  
       伪元素表示页面中特殊的并不真实存在的元素，它指向的是特殊的位置。
       伪元素使用::前缀，常见的有::first-letter(首字母),::first-line（首行），::selection（选中内容），::before（元素的开始），::after（元素的末尾）。其中，::before和::after必须结合content属性使用（添加内容）.添加内容将无法选中，原因是添加内容为CSS规范无法选中。

div::before{
    content:'ok';
    color:yellowgreen;
}