html5新标签

新增标签

html5特点：标签语义化；尽量使用有相对应结构含义的html标签，如span div无意义，<adress>表示地址<em>表示强调内容。

1.结构更好更利于搜索引擎的抓取（SEO）和开发人员的维护

2.更有利于手机客户端的阅读

header:内容区块或者标题

footer:一般包含创作者信息

article:一块与上下文无关的内容，譬如一篇文章

aside:辅助信息，div:left

section:章节，页眉，页脚，内容等，可以结合h1-h6,强化文章结构

nav:导航

figure:一段独立的流内容，一般表示文章主体内容中的一个独立内容，唯一figcaption来给figure添加标题，类似dl dt dd

mark:突出显示或高亮文字，一般用在搜索结果中高亮搜索关键字

　 Canvas

 <canvas height="200" width="578" id="canvas"></canvas>

context 操作canvas的元素，或者进行绘图的上下文，这个上下文只能创建一个，写入多个的时候，返回的还是一个，canvas.getContext('2d');2d表示使用二维的应用返回

        function $(id) {
            return document.getElementById(id);
        }
        var canvas = $('canvas');
        var context = canvas.getContext('2d');
        //曲线的绘制
        var x = canvas.width / 2;
        var y = canvas.height / 2;
        var radius = 75;
        var startAngle = 1.1 * Math.PI;
        var endAngle = 1.9 * Math.PI;
        var counterClockwise = false;//顺时针
        context.beginPath();
        //绘制弧形
        context.arc(x,y,radius,startAngle,endAngle,counterClockwise);

        //复杂曲线绘制，二次方曲线
        context.moveTo(188,150);
        context.quadraticCurveTo(288,0,388,150);//第一个控制点坐标288,0，第二个控制点坐标388,150

        //贝塞尔曲线
        context.moveTo(188,200);
        context.bezierCurveTo(140,10,388,10,388,170);//三个控制点的坐标
        
        //直线
        context.moveTo(200, canvas.height / 2 - 50);
        context.lineTo(canvas.width - 200, canvas.height / 2 - 50);

        /* //路径  把所有的线连起来
        context.moveTo(88,50);
        context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
        context.quadraticCurveTo(288,0,388,150);
        context.bezierCurveTo(140,10,388,10,388,170);
        context.lineTo(400, 90); */

        //rounded-corners圆角矩形
        var rectWidth = 200;//定义矩形的宽度
        var rectHeight = 100;
        var rectX = 189;
        var rectY = 50;
        var cornerRadius = 50;//半径
        context.moveTo(rectX,rectY);
        context.lineTo(rectX + rectWidth - cornerRadius,rectY);
        context.arcTo(rectX + rectWidth,rectY,rectX + rectWidth,rectY + cornerRadius,cornerRadius);//绘制圆角，前两个参数，起始点的坐标，后两个参数代表终止点的参数，最后是半径
        context.lineTo(rectX + rectWidth,rectY + rectHeight);

        //绘制一个矩形
        context.rect(58,50,200,100);//前两个参数表示起始点坐标，后面表示宽高
        context.fillStyle = 'yellow';//填充的颜色
        context.fill();//进行填充

        //绘制一个圆
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 70;
        context.arc(centerX,centerY,radius,0,Math.PI * 2,false);//0表示起始的角度，到圆弧的终止坐标，false顺时针，绘制一个半圆就是一个Math.PI

        //线向渐变填充
/*         context.rect(0,0,canvas.width,canvas.height);
        var grd = context.createLinearGradient(0,0,canvas.width,canvas.height);//线向渐变的起始坐标和宽高
        grd.addColorStop(0,'#8ed6ff');
        grd.addColorStop(1,'#004cb3');
        context.fillStyle = grd;
        context.fill(); */

        //径向渐变
/*         context.rect(0,0,canvas.width,canvas.height);
        var grd = context.createRadialGradient(238,50,10,238,50,400);//6个参数，前两个代表圆的中心坐标，第三个参数代表半径，后面的参数是结束圆的坐标和半径
        grd.addColorStop(0,'#8ed6ff');
        grd.addColorStop(1,'#004cb3');
        context.fillStyle = grd;
        context.fill(); */

        //图形图片背景pattern
/*         var imgObj = new Image();
        imgObj.src = './img/1.jpg';
        imgObj.onload = function(){
            var pattern = context.pattern(imgObj,'repeat');
            context.rect(0,0,canvas.width,canvas.height);
            context.fillStyle = pattern;
            context.fill();
        } */

        //加载图片
/*         var imgObj = new Image();
        imgObj.src = './img/1.jpg';
        imgObj.onload = function(){
            context.drawImage(imgObj,50,50,200,200);//后面表示起始位置和宽高
        } */

        //裁剪图片
/*         var imgObj = new Image();
        imgObj.src = './img/1.jpg';
        imgObj.onload = function(){
            context.drawImage(imgObj,50,50,200,200,100,100,150,150);//后面依次表示源的xy位置，裁剪的宽高，裁剪完后放置在画布的位置，然后显示的宽高
        } */

        //载入多个图片
        var sourceImg = {
            img1:'./img/1.jpg',
            img2:'./img/2.jpg'
        };
        function loadImages(sourceImg,callback){
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
        }
        for(var arc in sourceImg){
            numImages++;
        }
        for(var src in sourceImg){
            images[src] = new images();
            images[src].onload = function(){
                if(++loadImages >= numImages){
                    callback(images);
                }
            }
            images[src].src = sourceImg[src]
        }
        loadImages(sourceImg,function(images){
            context.drawImage(images.img1,50,50,100,100);//起始位置，宽高
            context.drawImage(images.img2,150,150,100,100);
        })

        context.strokeStyle = '#ff0000';//线条颜色
        context.lineWidth = 5;//线条宽度
        context.lineCap = 'square';//或者round，square ，butt,头和尾的效果
        
        context.lineJoin = 'round';//miter结合点是尖的,round,bevel切平
        context.stroke();

video

视频的组成部分：画面、音频

视频格式:OGG/火狐.chrome.Opera支持 MPEG4/Safari.Chrome支持 WebM/Ie.Firefox.Chrome.Opera

音频格式：AAC.MP3.Vorbis

<video src="" controls="controls">您的浏览器暂不支持video标签。播放视频</video>

视频video常用属性

autoplay:视频就绪自动播放autoplay

controls:向用户显示播放控件controls

width:宽度

height:高度

loop:是否循环 loop

preload:是否等加载完再播放 preload

src:地址

poster:加载等待的画面图片 imgurl

autobuffer:设置为浏览器缓冲方式，不设置autoplay才有效，autobuffer

常用方法

play():属性：currentSrc 事件：play

pause():属性currentTime 事件:pause

load():属性：videoWidth 事件:progress

canPlayType:属性：videoHeight 事件：error

Webkit(safari5.1/chrome15):全屏：element.webkitRequestFullScreen();退出全屏：document.webkitCancelFullScreen();

firefox(works in nightly):全屏：element.mozRequestFullScreen();退出全屏:document.mozCancelFullScreen();

W3C提议:全屏：element.RequestFullScreen();退出全屏:document.exitFullScreen();

video API属性

CSS3选择器和新增属性

1.属性选择器

语法：

E[att]{}; image[title]{}; //css2

E[att=""]{}; input[type="text"]{} ;//css2

E[att~=""]{};选取属性值中有指定词汇的元素。比较少用，比如class里面有两个词组时 class="div1 layout" ， div[class~="layout"]; //css2

E[att|=""]{};用于选择指定值开头的元素，必须是整个单词，比如 class="a-img" ; image[|="a"]{} ;//css2

E[att^=""]{};匹配指定值开头的所有的元素;//css3;

E[att$=""]{};匹配指定值结尾的每个元素;//css3;

E[att*=""]{};匹配包含指定值的每个元素;//css3;

2.伪类选择器

结构性伪类选择器，

语法：:first-child与:last-child:单独指定第一个和最后一个元素， .nav1 li:first-child{}

语法：:nth-child（数字）与:nth-last-child（数字）(倒数):指定序号的子元素， .nav1 li:nth-child(2){}

对奇数个或偶数个子元素使用样式，如果子元素不是同类型，会出问题，先定义排位，再定义元素

:nth-child(odd){}:奇数个元素 li:nth-child(odd){}

:nth-child(even){}:偶数个元素

:nth-last-child(odd){}:倒数奇数个元素

:nth-last-child(even){}:倒数偶数个元素

:nth-of-type与:nth-last-of-type:先定义元素，再定义排位

:nth-child(αn+β)与:nth-last-child(αn+β):循环使用样式，α表示每次循环中共包括几种样式，β表示在循环中的位置

:nth-child(3n){} ; :nth-child(2n+1){}; n从0开始

:only-child:只有一个子元素会被匹配， li:only-child{}

目标伪类选择器

语法：:target,突出显示HTML活动的锚，URL后面带有很多#的名称，指向文档内的特定元素，这个被链接的元素就是目标元素（target element）

:target选择器可用于选取当前活动的目标元素。只有用户点击了超链接有target目标才起作用。 :target{};

3.层级选择器

E>F{}:子元素选择器，只能选择某元素的子元素F元素，子子元素F不能匹配。 ul .li1>span

E+F{}:相邻元素选择器，他们具有相同的父元素，只选择一个F在后面。 ul .li1+li

E~F{}:通用选择器，同一个父元素中，F在E后面，选择全部F。 ul .li1~H1

浏览器前缀简介与应用

某些CSS还只是预览版，但大部分浏览器已经提供了支持，但这些属性是小部分浏览器专有的，为了让浏览器识别，CSS允许这些属性前添加各自的浏览器前缀

-webkit-:webkit,如chrome,safari

-moz-:mozila,gecko引擎，如firefox

-ms-:microsoft

-o-:opera,例如，-o-text-overflow

服务器端字体和iconfont

1.服务器端字体

@font-face{font-family:WebFont;src:url("")format("opentype")}

　　　　　 div{font-family:WebFont}

opentype字体后缀otf,truetype字体后缀ttf

2.iconfont

用字体来代替图片来展示特殊字体、图标，体积小，拉伸不变形，支持CSS3一些文字特效，去阿里巴巴iconfont下载。

CSS3新增属性

1.背景属性

background-clip:

border-box：背景被裁剪到边框盒，包含边框，默认属性

padding-box：背景被裁剪到内边距框，不包含边框

content-box：背景被裁剪到内容框，不包含边框和内边距

css2中背景不包括边框，css2.1-3中包括了边框

background-origin:设定背景图从边框，内边距或者内容的左上角开始。

border-box:从边框开始

padding-box:默认

content-box:

background-size:定义背景图片大小。

length:设置高宽，如果只设置一个，另一个默认AUTO

percentage:以父元素的百分比来设置高宽

cover:等比放大覆盖整个区域

contain:等比缩放，不覆盖整个区域

在一个元素里面可以添加多张背景图片

div{background:url(""),url("");background-repeat:no-repeat;repeat-x;background-position:20px 20px,center center}

background-clip:background-clip:background-size:background-iamge 这些都可以多次使用

2.边框属性

border-raidus:左上15px 右上右下左下；左上右下右上左下；

border-image:url("")A B C D(表示上，右，下，左边距，可以缩写成一个，不需要单位)

-webkit-border-image:url("../img/borderbg.png")30 30 30 30/10px repeat;repeat/round铺满/stretch拉伸;

3.盒阴影

box-shadow:5px 5px 5px 5px #333 inset/outset

h-shadow :必须，水平阴影位置，可以为负值

v-shadow :必须，垂直阴影位置，可以为负值

blur :模糊

spread: 尺寸

color :颜色

inset:将外部阴影改成内部阴影

边框背景图片练习

.borderimg{height: 100px;width: 300px;-webkit-border-image:url("../img/borderbg.png")30 30 30 30/10px round;}

<div class="borderimg"></div>

盒子阴影练习

.box1{height: 100px;width: 100px;box-shadow:0px 5px 5px 0px #333 outset;}

<div class="box1"></div>

伪类选择器的练习，边框箭头

.box{height: 50px;width: 100px;position: relative;margin: 100px 0;line-height: 50px;}
    .box:hover::after{content: "";height: 0;width: 0;border: 10px solid transparent;border-right: 10px solid #f00;
         position: absolute;top: 50%;margin-top:-10px; left: 83%;}
    .box:hover::before{content: attr(data-text);height: 40px;width: 120px;background: #ff0000;border-radius: 3px;
         position: absolute;line-height: 40px;text-align: center;left: 100%;top: 50%;margin-top:-20px;}

<p class="box" data-text="hello!world!">hello!world!</p>

posted @ 2019-10-01 20:04 solaris-wwf 阅读(293) 评论(0) 收藏举报

刷新页面返回顶部

solaris-wwf

html5新标签

公告