H5andCSS3 新特性

一、html5视频《video》
1、视频格式：
（1）ogg 是带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件。
（2）MPEG4 是带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。
（3）WebM =是带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件。
2、video的标签属性
（1）autoplay 出现该属性视频就会马上播放

<video src="./2f53d5a0d3459eefe705379f41fc193f.mp4" autoplay="autoplay"></video>

（2）controus 出现该属性 视频显示播放按钮。
（3）height 用于设置浏览器高度
（4）width 用于设置浏览器宽度

    <video src="./2f53d5a0d3459eefe705379f41fc193f.mp4" controls="controls" width="500px" height="500px"></video>

（5）loop 如果出现该属性 播放完在循环播放
（6）preload 出现该属性 预备播放
（7）src 播放视频的url
二、音频标签《audio》
1、audio音频格式
（1）Ogg Vorbis （2）MP3 （3）Wav
2、audio 标签属性
（1）autoplay 出现该属性音频就绪就会马上播放
（2）controus 出现该属性 视频显示播放按钮。
（3）preload 出现该属性 预备播放
（4）src 播放音频的url
三、Canvas（用于绘画）
1、什么是canvas？
（1）canvas 元素用于在网页上绘制图形。
拖拽、
（2）拖拽是一种特别常见特性，应用范围非常广，在HTML5中拖拽成了一部分，任何元素都可以拖拽。

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
//找到 <canvas> 元素:
var c=document.getElementById("myCanvas");
//然后，创建 context 对象：
var ctx=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
//下面的两行代码绘制一个红色的矩形：
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

四、sessionStorage（临时存储）和localStorage（长期存储）
1、sessionStorage 是临时存储 浏览器页面关闭会消失

   // 设置sessionStorage
   sessionStorage.setItem('存储对象名', 存储对象值)
   // 读取sessionStorage
   sesessionStorage.getItem('存储对象名')

2、localStorage 是永久存储 浏览器页面关闭不会消失

   // 设置localStorage
    localStorage.setItem('存储对象名', 存储对象值)//将localStorage中存储信息，由于localStorage中的存储值必须是个字符串，我们可以使用JSON.stringify()这个方法把他变成字符串
    // 读取localStorage
    localStorage.getItem('存储对象名')// 获取localStorage中的信息，在获取到信息是，我们可以只使用JSON.parse()转换成对象使用
    //删除或清空localStorage的方法
    // 1、删除指定的
    localStorage.removeItem("变量")
    // 2、清空所有的
    localStorage.clear()
    // 遍历本地存储的方法
    for (var i in localStorage) {
        if (localStorage.getItem(i)) {
            console.log(localStorage.getItem(i));
        }
    }

五、新增的语义化标签
1、section：独立内容模块 ，可以h1-h6组成大纲 ，表示文档结构，有章节、页眉、页脚或其他部分。
2、article ：（文章） 文章核心部分
3、aside 标签内容之外相辅的信息 侧边栏
4、header 头部/标题
5、footer 尾部标签
6、nav 导航
7、figure标签 代替原来的li>img+p就是有文字有图片的区域
六、新增的表单控件
1、type"email"：限制用户输入为油箱类型

<input type="email" name="email">

2、type=”url”：限制用户输入为网址，即输入内容必须含有"http:"

    <input type="url" name="" id="">

3、type=Date ：日期选择器

<input type="date" name="bday">

4、type=”search”：搜索

    <input  type="search" >

5、type=”color”：颜色

    <input type="color" name="" id="">

6、type=”tel”：手机号

<input type="tel" name="usrtel">

六、html5 地理位置

<p id="demo">点击按钮获取您当前坐标（可能需要比较长的时间获取）：</p>
<button onclick="getLocation()">点我</button>
<script>
    var x = document.getElementById("demo");
    function getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        }
        else {
            x.innerHTML = "该浏览器不支持获取地理位置。";
        }
    }
    function showPosition(position) {
        x.innerHTML = "纬度: " + position.coords.latitude +
            "<br>经度: " + position.coords.longitude;
    }
</script>

一、CSS3 新特性

1、新增属性选择器
（1）E[att^=“val”] ：选择具有att属性且属性值为以val开头的字符串的E元素。
（2）E[att$=“val”] ：选择具有att属性且属性值为以val结尾的字符串的E元素。
（3）E[att*=“val”] ：选择具有att属性且属性值为包含val的字符串的E元素。

<style>
    div[class^="a"]{    /*以a开始*/
        background-color: blue;
    }
    div[class$="a"]{    /*以a结束*/
        background-color: green;
    }
    div[class*="a"]{    /*选择到所有含a的*/
        background-color: red;
    }
</style>
 <div class="abc">div1</div>
 <div class="acc">div2</div>
 <div class="cba">div3</div>

2、新增的伪类选择器
（1）、:not(s)：匹配不含有s选择符的元素E。

<style>
    p {
        color: #000000;
    }
    :not(p) {
        color: #ff0000;
    }
</style>
    <h1>这是标题</h1>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <div>这是 div 元素中的文本。</div>

（2）、:root：匹配E元素在文档的根元素。在HTML中，根元素永远是HTML

<style> 
:root
{
    background:#ff0000;
}
</style>
<h1>我是h</h1>

（3）、:last-child ：匹配父元素的最后一个子元素E。

<style> 
p:last-child
{
background:#ff0000;
}
</style>
<p>p1</p>
<p>p2</p>
<p>p3</p>

（4）、:only-child：匹配父元素仅有的一个子元素E。

p:only-child
{
background:#ff0000;
}
</style>
<div>
<p>这是一个段落。</p>
</div>
<div>
<span>这是一个 span。</span>
<p>这是一个段落。</p>
</div>

（5）、:nth-child(n)：匹配父元素的第n个子元素E，假设该子元素不是E，则选择符无效。

<style>            
    .list div:nth-child(2){
        background-color:red;
    }
</style>
<div class="list">
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

（6）:nth-last-child(n) ：匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。

<style>
    p:nth-last-child(2) {
        background: #ff0000;
    }
</style>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

（7）:first-of-type：匹配父元素下第一个类型为E的子元素。

<style>
    p:first-of-type {
        background: #ff0000;
    }
</style>
<p>一</p>
<p>二</p>
<p>三</p>
<p>四</p>
<p>五</p>

（8）:last-of-type：匹配父元素下的所有E子元素中的倒数第一个。

<style> 
p:last-of-type
{
background:#ff0000;
}
</style>
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>

（9）:only-of-type：匹配父元素的所有子元素中唯一的那个子元素E。

<style>
    p:only-of-type {
        background: #ff0000;
    }
</style>
    <div>
        <p>p</p>
    </div>
    <div>
        <p>hhh</p>
        <p>hhh</p>
    </div>

（10）、:nth-of-type(n) ：匹配父元素的第n个子元素E。

<style>
p:nth-of-type(2){
background:#ff0000;
}
</style>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>

（11）、:nth-last-of-type(n)：匹配父元素的倒数第n个子元素E。

<style>
    p:nth-last-of-type(1) {
        background: #ff0000;
    }
</style>

        <p>p</p>
        <p>hhh</p>
        <p>hhh</p>

（12）:empty：匹配没有任何子元素（包括text节点）的元素E。

<style>
    p:empty {
        width: 100px;
        height: 20px;
        background: #ff0000;
    }
</style>
    <p></p>
    <p></p>
    <p>第三个段落。</p>
    <p>第四个段落。</p>
    <p>第五个段落。</p>

二、透明度

1、opacity

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
        opacity: 0.5;
    }
</style>
<div></div>

2、bgra

<style>
   div {
       width: 100px;
       height: 100px;
       background-color:rgba(250,250,250,0.9);
   }
</style>
<div></div>

三、Word Wrap

word-break: break-word; //长单词换行

四 文字阴影

<style>
  div {
     text-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色;
  }
</style>
<div>asdas </div>

五、盒子阴影

<style>
    div {
       box-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色;
    }
</style>
<div>asdas </div>

六、渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

七 、媒体查询

@media screen and (min-width:970px){
            body{
                background-color: red;
            }
        }
        @media screen and (min-width: 560px) and (max-width: 969px){
            body{
                background-color: green;
            }
        }
        @media screen and (min-width: 321px) and (max-width: 559px){
            body{
                background-color: blue;
            } 
        }
        @media screen and (max-width: 320px){
            body{
                background-color: yellow;
            } 
        }

媒体查询书写规则
注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁

八 、边框圆角

 border-radius: 数值+单位(em,rem,px,%);

九、动画

  /* 动画名称 */
  animation-name: move;
  /* 动画花费时长 */
  animation-duration: 2s;
  /* 动画速度曲线 */
  animation-timing-function: ease-in-out; //上图运动曲线这里也可以使用
  /* 动画等待多长时间执行 */
  animation-delay: 2s;
  /* 规定动画播放次数 infinite: 无限循环 */
  animation-iteration-count: infinite;
  /* 是否逆行播放 */
  animation-direction: alternate;
  /* 动画结束之后的状态 */
  animation-fill-mode: forwards;

十、弹性盒（flex）

        display: flex;//设置弹性和
        flex-direction: row;
        /*弹性盒方向：主轴方向X轴  */
        flex-direction: column;
        /* 弹性盒方向：主轴Y轴方向 */
        flex-direction: row-reverse;
        /* 弹性盒方向：主轴方向X轴 倒叙 */
        flex-direction: column-reverse;
        /* 弹性盒方向：主轴Y轴方向 倒叙*/
        flex-wrap: nowrap;
        /* 弹性盒换行：不换行 默认的 */
        flex-wrap: wrap;
        /* 弹性盒换行：换行 */
        /*设置主轴方向子元素排列顺序*/
        justify-content: flex-start;
        /* 从左到右排列 默认的 */
        justify-content: flex-end;
        /* 从尾部开始排列 不影响子元素排列顺序 */
        justify-content: center;
        /* 从主轴居中对齐 */
        justify-content: space-around;
        /* 平分主轴剩余空间 */
        justify-content: space-between;
        /* 两边对齐，中间评分剩余空间 */
        justify-content: space-evenly;
        /* 间距相同 */
        align-items: flex-start;//从头部开始
        align-items: flex-end;//从尾部开始
        align-items: center;//居中显示
        align-items: stretch;//拉伸
    }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 196,302评论 5赞 462
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 82,563评论 2赞 373
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 143,433评论 0赞 325
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,628评论 1赞 267
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,467评论 5赞 358
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,354评论 1赞 273
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,777评论 3赞 387
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,419评论 0赞 255
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,725评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,768评论 2赞 314
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,543评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,387评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,794评论 3赞 300
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,032评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,305评论 1赞 252
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,741评论 2赞 342
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,946评论 2赞 336

推荐阅读更多精彩内容

  • CSS 核心样式、H5 + C3 新特性
    字体属性 粗细font-weight设置文字是否加粗显示 。 有两种类型 ：单词类型、数字类型单词类型 | 属性...
    ly_0cd0阅读 717评论 0赞 2
  • h5和css3新特性汇总
    HTML5 新的特殊内容元素 增加的标签及描述 -----------定义页面独立的内容区域。 ---------...
    Mr无愧于心阅读 1,599评论 0赞 2
  • H5 CSS3 新特性
    H5 新特性 1.语义化标签：article、nav、header、section、aside、footer2.增...
    所幸_8f66阅读 340评论 0赞 0
  • No.16 CSS3新特性
    一、属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 选择符描述E...
    testleaf阅读 391评论 1赞 9
  • 关于HTML5和CSS3的新特性
    Html5新特性 1.新的Doctype尽管使用，即使浏览器不懂这句话也会按照标准模式去渲染 2. Figure元...
    Hedgehog_Dove阅读 1,062评论 0赞 1