H5补充1

border-sizing

这个属性用于计算盒模型的宽高,由于浏览器的兼容问题,主要是ie低版本的问题.
有两个属性:border-sizing: content-box;
或者border-sizing: border-box;
前者是css默认的宽高计算方法,就是 width = 内容的宽度, height = 内容的高度.
后者则是被称为怪异盒模型, width = 内容的宽度+border的宽度+padding的宽度, height = 内容的高度+borderde的高度+padding的高度.

---

H5语义化标签

语义化标签有利于;浏览器或其他软件对网页的解析,有利于搜索引擎的优化,有利于编译时更好地理解含义.

• 太多了…着重写一下媒体标签

video

<figure>
	<img>
	<figcaption></figcaption>
</figure>

• 其中figure来存放图片,使用img引入,figcaption写图片的标题,同一个figure里面只能嵌套一个标题.

<video src="mov/cz.mp4" controls autoplay></video> 
    
    <video controls loop muted>
        <source src="mov/cz.mp4"/>
        <source src="mov/cz.ogg"/>
        <source src="mov/cz.webm"/>
    </video>
    
    <video controls poster="images/1.jpg">
        <source src="mov/cz.mp4"/>
        <source src="mov/cz.ogg"/>
        <source src="mov/cz.webm"/> 
    </video> 

• controls为播放器,autoplay为自动播放(谷歌不支持),loop为循环播放,muted为静音播放,poster为播放之前显示的背景图片.
• video一共就支持三种格式,分别为Ogg、MPEG4、WebM

audio

• <audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>

embed

• 适用于各种媒体文件,包括但不限于midi、wav、AIFF、AU、MP3、Flash

属性选择器

标签[属性="值"]{ }

• 标签 存在 attr 属性即可

a[title]{
            /*  */
            font-size:100px;
        }

• 标签存在attr属性,且以value 开头

a[href^="http://www.baidu"]{
			/* */
}

• 标签存在 attr 属性 并且是以 value 结尾

a[href$='.com']{
            /*  */
            background-color: #f40; 
        }

• 标签存在 attr 属性 并且包含 value 值

a[href*='jd']{

• 标签存在attr属性,且值为value

a[href='http://www.sina.com']{

• 标签存在 attr 属性 并且包含 value 值(整个单词)

a[class~='nav']{
            /*  */
            background-color: gray;
        }

$

• 标签存在attr属性 并且包含value字段

a[class*="nav"]{}