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;//拉伸
    }

最后编辑于：2022.07.27 14:19:12

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,922评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,591评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 160,546评论 0赞 350
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,467评论 1赞 288
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,553评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,580评论 1赞 293
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,588评论 3赞 414
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,334评论 0赞 270
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,780评论 1赞 307
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,092评论 2赞 330
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,270评论 1赞 344
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,925评论 5赞 338
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,573评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,194评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,437评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,154评论 2赞 366
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,127评论 2赞 352