【嘉兴东臣PHP】HTML5、CSS3总结

    这个礼拜是前端学习的最后一个礼拜，这也意味着在假期过后面对我们的是一切从0开始。

    从HTML5到CSS3，好像所学的一切都朝着我们当初的”炫“靠近。但是也渐渐的发现，曾经眼中简单是炫，在编写代码的时候并不简单。这一礼拜，老黄主要讲的是HTML5和CSS3，不过大多数时间都是带着我们用canvas画布去制作各种简单的炫。虽然很多时候都是我们提要求老黄打，但是确实挺炫的，不过唯一的遗憾就是自己只会皮毛，炫都是老黄做的！

    自我评价：

    不足：代码熟悉程度不够，知识点掌握的不透彻，练的不够。

一、HTML5

HTML5 是HTML4的升级版。不是特定的开发语言。目前支持HTML5的浏览器有 safari、opera 、firefox 、 chrome、ie  但是较老的版本不支持。

音频、视频标签：
1、<audio> 音乐播放器

<audio>
controls=“controls” 为显示音乐播放器面板
<source src="链接" type="audio/mpeg（mp3,ogg）"/>
</audio>

2、<video> 视频播放器

<video>
    controls="controls" 视频播放器面板
    width= 音乐播放器宽度
    height= 音乐播放器高度
    <source src="链接" type="video/mp4"/>
</video>

document.getElementById("XXX").load 重新加载
document.getElementById("XXX").play 播放
document.getElementById("XXX").pause 暂停

 canvas 画布
注意：canvas 本身不能画图，只能借助于javascript画图。由于jquery并不能保证完全支持html5的特性，所以建议使用原生的JS语法。
canvas一般前2个步骤为：
    1、var can = document.getElementById("") //获取canvas对象
    2、var con = can.getContext("2d");//获取上下文。
注意：1、一般canvas通过上下文去画图，根据图形的特殊性，矩形，圆，线段等统一归类为2d；

          2、在canvas画布上画图形之前，要给canvas一定的尺寸之后，再定义在画布上显示的东西。

canvas基本分类：
    1、画矩形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.fillStyle = "" //设置颜色
        con.fillRect(x,y,width,height) //设置矩形显示的尺寸  

    2、画线段。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.moveTo(x,y); //起始坐标位置
        con.lineTo(x,y); //结束坐标位置

    3、画圆。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        con.beginPath();//开始画圆
        con.arc(圆心x,圆心y，半径r，开始弧度，结束弧度)；//顺时针
        con.strokeStyle = "white"; //设置空心圆颜色.
        con.stroken(); //开始绘制
        con.closePath();//结束画圆
    
    4、渐变 矩形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
        var grd = con.createLinearGradient(开始x,开始y,结束x,结束y);//创建一个渐变矩形
        grd.addColorStop( 0 ， 开始渐变颜色);
        grd.addColorStop( 1， 结束渐变颜色);

        con.fillStyle = grd; //实心矩形颜色方案为grd
        con.fillRect(x,y,width,height);//这个渐变图形在画布上的坐标。

    5、渐变 圆形。
        var can = document.getElementById("");
        var con = can.getContext("2d");
      var grd = con.createRadialGradient(开始的圆心x,开始的圆心y,开始的圆半径,结束的圆心x,结束的圆心y,结束的圆半径);//创建一个渐变圆 。 实际上就是一个圆向另一个圆渐变！)
        grd.addColorStop( 0 ， 开始渐变颜色);
        grd.addColorStop( 1， 结束渐变颜色);
        
        con.fillStyle = grd; //实心矩形颜色方案为grd
        con.fillRect(x,y,width,height);
   

表单新增特性
<input type="number"/> 数字
<input type="url"/>  URL
<input type="email"/> 邮箱
<input type="color"/> 颜色拾取
<input type="date"/> 日期选择
<input type="range"/> 范围

input新增常用属性
min 最小
max 最大
placeholder 默认提示
autocomplete 自动提交
autofocus 自动聚焦
novalidate  提交时不要验证(默认自动验证)

‍

二、CSS3

CSS3:严格意义上说 不是一门新语言，只是在CSS2.0的基础上新增了一些特性。

CSS3 有如下特性：
1、:in-range 范围内
2、:out-range 范围外
3、:valid 通过
4、:invalid 没有通过
5、:enabled  可以填写
6、:disabled 禁用元素
7、:required 必填选项
8、:optional 可选(默认)
9、:read-only: 只读
10、:nth-of-type 选择器
11、[属性^=值] 选择器匹配元素属性值带指定的值开始的元素。注意：从最开始匹配，从左往右
12、[属性$=值] 选择器同理，匹配元素属性值带指定的值结尾的元素。注意：从最后开始匹配，但是还是从左往右数
13、[属性*=值] 选择器匹配元素属性值包含指定值的元素。注意：只要出现匹配值，就会被匹配
14、元素1~元素2 选择器匹配出现在 元素1 后面的 元素2。元素1 和 元素2 这两种元素必须具有相同的父元素。

转载于:https://my.oschina.net/9979187/blog/596514