Html5和Css3的基础标签及常用属性

H5

H5的常用标签及属性：

新增和废弃

新增的结构（布局） 标签：section、artcle、nav、footer、header、hgroup、Aside、figure

新增的其他标签：

Video、audio、mark、time、menu、canvas、svg、details、datalist、progress、output、source。。。。。。。

Input  type 的新增：email、url、number、date、pickers、range

废弃的标签 ：font、center、s、tt、u、big、basefont

      全局属性

在H5中，定义了少量对所有元素都有效的属性。

<p contenteditable="true">我是一个段落，但我可以编辑p>//可以被编辑
<p contenteditable="false">我是一个段落，但我不能编辑p>//不能被编辑
<p contenteditable>我是一个没有设置contenteditable的段落，p>//可以被编辑

 

Contenteditable=true：标签设置了此属性之后可以在页面上直接进行编辑。编辑之后元素的宽高自动适应。

Contenteditable=false：说明这个标签不可以被编辑（设置可编辑模式的意思）

 

注意：如果不设置contenteditable，其默认的值时true

    Contenteditable：属性是可以被继承的，需要考虑就近原则

可以加到body里，使全局都可以被编辑。

注意事项：1如果同时设置了designMode和Contenteditable属性，最终是否可以编辑使用就看就近原则了。

Hidden属性可以实现对元素的隐藏，隐藏的元素不会被显示，同时不会占原有的位置。类似于display：none；

Hidden：看不见不占位置

"visibility: hidden"：看不见，占位置

display: none：看不见，不占位置

 

spellchck

 Spellchck属性是H5专门为input和textarea标签提供新属性，它的功能是对用户输入的内容进行拼写和语法检查，如果拼写错了，文字下面有一个波浪线。

 

spellcheck="false"：取消语法和和拼写检查

spellcheck="true"：开启语法和拼写检查

 

tabindex:

姓名type="text" tabindex ="2">

性别type="text"tabindex="4">

年龄type="text"tabindex="3">

身份证号type="text">

 

Tabindex=”正整数”：按键tab键可以选中（获取焦点），，这里选择的标签可以是input输入框、input按钮、a标签等。同时按下tab键选择的顺序和设置的tabindex属性一致，Tabindex值越大，越在后面选中。建议不使用Tabindex=0；

Tabindex=-1，按tab不选中。

 

（1）    nav（导航）--使用频率高

：navigation的缩写。通常用在：导航条、页面导航、翻页操作。

 

<header>
    <div class="=logo">
        <nav>
            <ul>
                <li>H5发展史li>
                <li>CSS3发展史li>
                <li>EMScript发展史li>
            ul>
        nav>
    div>
header>

 

 

非主体结构

（1）  header（页眉）标签

一般来防治整个页面的标题。比如说一个新闻页面，header一般放新闻的标题。如果是一个官网地址，一般header用来放logo和网站导航。

（2）  footer（页脚） 标签

一般用来放置脚注，主要包含：作者信息、copyright。

 

（3）  address（地址）标签

一般用来呈现联系信息主要包括：网站的联系方式、电子邮箱、联系地址、电话号码等等。

例文：

<header>
    <div class="logo">这是放logo的区域div>
    <nav>
        <ul>
            <li><a>首页a>li>
            <li><a>教程a>li>
        ul>
    nav>
header>
<article>
    <h2>html5的教程h2>
    <p>详细教程，请访问华点网站 <a href="http://www.huadianedu.com">点击跳转a>p>
article>
<footer>
    <p>copyright  2017  华电软件学院p>
    <address>
        <p>啦啦啦德玛西亚！p>
        <p>啦啦啦德玛西亚！p>
        <p>啦啦啦德玛西亚！p>
    address>
footer>

 

表单新增：

  提交类：提交给服务器设置的属性，formtion、formmethod、formtype

控制类：required、autoofocus、labels。

form属性

           在H5之前，表单内所有的从属标签（下级标签），必须书写在form标签内部。

           H5：允许标签写在任何地方需要做两部操作：1、给form设置一个id；给元素设置form属性，form属性的值就是form Id属性的值

<form action="XXX.api" id="testForm">
    请输入账号：<input type="text" name="date"><br>
    <input type="submit" value="提交">
form>
请输入密码：<input form="testForm" type="password" name="psd"><br>

 

formaction

  

在H5之前，表单内所有的submit,只能提交到一个统一的地址，也就是指定的Action。

H5：可以为每个submit指定一个action，是通过formaction属性来实现的

<form id="testForm">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formaction="XX0.api">
    <input type="submit" value="提交1"formaction="XX0.api">
form>

 

formmethod

<form id="testForm" method="post">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formmethod="post" >
    <input type="submit" value="提交1"formmethod="get">
form>

在H5之前只能写在form里，现在可以写在按表单里（在此我两种都写了）

隐藏显示提交的数据

formenctype：编码方式

<form id="testForm" enctype="text/plain">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formenctype="text/plain">
    <input type="submit" value="提交1"formenctype="text/plain">
form>

 

在H5之前只能写在form里，现在可以写在按表单里（在此我两种都写了）

隐藏显示提交的数据

 

formtarget

<form id="testForm" target="">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit" value="提交0"formtarget="_self">
    <input type="submit" value="提交1"formtarget="_blank" >
form>

在H5之前只能写在form里，现在可以写在按表单里（在此我两种都写了）

隐藏显示提交的数据

 

Autofocus：为输入框，按钮什么的，添加autofocus属性，当页面打开时，该元素将自动获取焦点。

required

<formid="testForm">
    请输入账号：<inputtype="text"name="date"required><br>
    请输入密码：<inputform="testForm"name="psd" type="password"><br>
    <input type="submit" value="提交0"formtarget="_self">
    <input type="submit" value="提交1"formtarget="_blank" >
form>

如果输入框输入了该属性，提交时，该框若为空，则弹出提示框

增强的页面元素

details元素和sumry元素

mark元素：作用是为了突出显示页面的某一块内容放到mark元素内部的内容将高亮些（也就是给加个黄色的背景色）

Small语言：小的，不起眼的

Ol列表添加了start和reversed属性。

Start：定义了开始计数的系数。

Reversed：技术的顺序，默认的是从小到大，加上该属性之后从小到大。

Progress：是行内标签。有两个常用属性

Max：进度的最大值

Value：当前值

Meter：度量衡，注意：一般情况，需要已知最大值和最小值（不重要）

 

 

音频视频属性处理：

 

 

audio

（1）  src（）：本地储存的音频文件的地址

（2）  controls：由于浏览器提供的音频控件

（3）  preload：预加载，让文件先进性缓冲，优化播放速度。

三个可选值：auto对整个音频文件进行加载，默认值

            Metadata：只加载文件的元数据（第一帧，播放总时间，播放列表）

（4）Autoplay：自动播放，布尔类型，在标签内使用时默认为true

（5） Loop：循环播放，布尔类型，在标签内使用时默认true

可脚本控制的属性值
（1）muted，布尔类型，当他的值为true是开启静音，值为false时关闭静音

function muted(obj){
    if(audio.muted){
        audio.muted = false;
        obj.innerHTML = "开启静音"
    }else{
        audio.muted = true
        obj.innerHTML = "关闭静音"
    }
}

 

 

（2）currentTime,获取已播放的时间

 

//获取已播放音频的总时长

function getCurrentTime(){

   alert(audio.currentTime);

}

 

 

（3）duration，获取总时长

//获取音频总时TotalTime(){

function getTotalTime(){

   alert(audio.duration+"秒");

}

 

（4）隐藏或者显示

//隐藏或者显示

function hideOrShow(obj){

   if(audio.controls){

       audio.removeAttribute("controls");

       obj.innerHTML = "显示"

       return

    }

   audio.controls = "controls";

   obj.innerHTML = "隐藏";

}

 

可脚本控制的属性值

（1）muted，布尔类型，当他的值为true是开启静音，值为false时关闭静音

 

function muted(obj){

   if(audio.muted){

       audio.muted = false;

       obj.innerHTML = "开启静音"

    }else{

       audio.muted = true

       obj.innerHTML = "关闭静音"

    }

}

（2）vol：通过改变函数中定义的volume的值来控制音量的大小

Vo Lome范围：0.0~~1.0   超出范围会报错

video

标签属性：

1、 Poster（）：给视频设置第一帧（封面）。

2、 A

常用方法：

1、 playBySeconds（）：通过currentTIme的值设置视频开始播放的位置（播放点）

 

function playBySeconds(){
    video.currentTime=5;
}

 

2、 etPlaySpeed()：通过改变playbackRate的值来改变播放速度。

 

function setPlaySpeed(){
     video.playbackRate=3;

}

 

3、 duration（）：返回视频总时间长

 

function duration(){
    alert(video.duration)
}

 

4、 onended：当视频播放完成后自动触发的事件

 

video.onended=function(){
    alert("视频播放完成")
}

 

画布：

Canvas:定义画布的大小是style的属性，而定义画布的像素是Canvas的属性

4.1、getContext（）：获取渲染的上下文，说白了就是获取画笔。后面传递参数，固定写“2d”

4.2、moveTo（x，y）：移动画笔位置，后面带两个参数。

4.3、lineTo（x，y）画一条直线，参数是线的终点位置。

4.4、stroke()绘制线条

4.5、closepath():关闭路径，回到起始点

4.6、ctx.fill（）完成填充操作

4.7、fillStyle：这是属性，设置填充的样式，一般填充颜色就行

4.8、beginPath（）:方法开始一条路径或者重置当前路径。

4.9context.arc(x,y,r,start,end,direction)绘制一个弧。前面两个参数组成圆心的坐标，第三个参数r半径。第四个参数：start其实的弧度，第五个参数end，结束的弧度，最后一个参数direction，绘制方向，true：逆时针方向，false：顺时针方向，默认值是false。

4.10context。rect（x,y,w,h）绘制矩形，（x，y）是矩形的坐标，w：是宽，h高

1、             window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width=500;//画布的宽
    canvas.height=500;//画布的高
    var context=canvas.getContext("2d");
    context.moveTo(100,200);//移动圆点
    context.lineTo(100,400);//目标位置
    context.lineWidth=10;//目标粗细
    context.strokeStyle="red";//画笔的样式
    context.stroke();//开始画
};

2、     

3、        context.closePath();            ///回到原点，解决封口问题

4、         

5、    圆形：

6、             context.arc(250,250,200,0,2*Math.PI,false);
        //左边距，上边距，半径，起始角度，目标角度，时针（true）
        context.lineWidth=10;//目标粗细
        context.strokeStyle="red";//画笔的样式
/*       context.fillStyle="red";
        context.fill();*/
        context.stroke();//开始画

 

input在H5中的新增功能

1.   color：当输入框中的属性设置为color的时候，可以直接调用系统的调色板，进行填充，缺点：没有透明度。

2.   Url：当输入框中的属性设置为url时，只接受地址或域输入，输入有误时，系统不允许提交，具有自我检测功能。如果是移动端，虚拟键盘会自动切换到输入网址的键盘（.com、/、www）

3.   3.email：的那个输入框中的属性设置为email时，只接受邮箱输入邮箱，当输入的不为邮箱或者格式错误，则系统不允许提交，具有自我检测功能。如果是移动端，虚拟键盘会自动切换到输入邮箱键盘（@）

4.   Tel当输入的属性设置为tel时，此框就是专门为电话号码专门设置的。他并没有特殊的校验规则，可以通过设置帕特term属性来手动完成。如果是移动端，虚拟键盘会自动切换到输入电话的键盘（数字、+）

5.   search：当输入的属性设置为search,只能输入数字

6.   Number：当为number时，输入框只接收数字，可以用max，min去实现控制域。

7.   Date：当为date时，可以以日历的形式显示出来，可获取当前日历年月日。缺点：就是只有在谷歌浏览器上显示出来日历的形式，其他浏览器不兼容，就比如IE浏览器。

8.   Time：时间，input元素中专门输入时间的文本框属性。他会接受用户输入的时间自我检测修改。

9.   Datetime：让用户输入时间。

10. Datetime-local：此属性综合了上面几个属性的特性，年月日和时间，点击可以出来日历供用户选择，同时提交时可以自己判断是否正确。

11. Week：这个属性只会显示年和周的属性，点击可以出来日历供用户选择，同时提交时可以自己判断是否正确。

12. Month：这个属性只会显示年和月份，点击可以出来日历供用户选择，同时提交时可以自己判断是否正确。

13. Range ：当输入的是该属性时，可以设置一段范围内数值的文本框，它的类型是一个滑块，可设置大小限制，当设置了step属性的时候，可以指定每次拖动的幅度。

 

数据的村春与删除

删除数据：

删除key中的数据

 /*具体删除某个数值*/
/*localStorage.removeItem("name");*/
/*删除所有的值*/
localStorage.clear();

获取数据：

获取key中的数据

var a=localStorage.getItem("age");
alert(a);

getitem（k）,只有一个参数，该参数是获取数据的键名。

 

 

注意：写key中必须要加“”，localStorage储存的数据没有时间限制。

 

sessionStorage

      用法和localStorage一样，不同的是：sessionStorage的有效期仅对于当前打开的浏览器页面有效，一旦关闭，之前储存的内容就没了。

储存对象：

无论是localStorage还是sessionStorage，都只能等储存字符串，所以储存对象或者数组时都要进行将其拆分为字符串（即通过JSON对象中的stringfy（）将对象转化为字符串才能储存，也可以通过JSON对象中的parse（）将对象进行解析），然后才能放进去。如下案例：

 

JSON.Parse（）；将字符转化为对象

JSON.Stringify（）；将对象转化为字符串。

解决问题：

1.  localstorage、sessionStorage存数据

需要储存的对象—》字符串  JSON。Stringify（）；

储存才字符串

 

 

 

2．localStorage/sessionStonrage

  读取该字符串—》对象JSON.stringify（）；

 

 

 

 

/*保存对象数据*/
$("#saveBtn").click(function () {
    var userName = $("#username").val();
    var age = $("#age").val();
    var information=new Object();
    information.user=userName;
    information.age=age;
    var str=JSON.stringify(information);
    localStorage.setItem("message",str);
    alert(str);
});

 

区别：

特性	Cookie	Localstorage	SessionStorage
生命周期	根据设置的时间	只要不删除，永远存在	浏览器关闭，自动删除，结束。
存储容量	<4kb	5Mb
和服务器通讯（http）	每次请求都会带上cookie	只保存在浏览器，和服务器没关系。
易用性	接口不太友好（参数需要自己拼接）	接口还可以接受吧！对于object、array等类型的数据储存比较麻烦。

 

CSS3

CSS3选择器

X[attr^=“value”]指定属性名，可以找以value开头的属性值

x[attr$=“value”]指定属性名，找以value结尾的

x[attr*=“value”]指定属性名，找包含value的

     E：enabled{}：元素被激活的时候触发，比如输入框获取焦点。

     E：disabled{}：元素被禁用时触发，比如输入框不可获取焦点。

     E：checked{}：元素被选中的时候触发，比如radio或checkbox元素的选中。

     E：selection{}：选中的时候触发，比如一堆文字被选中的时候，给选中的文字设置字体

E:nth-child（index）{}：所有元素的父元素的第index孩子，孩子的编号就是从1开始的，同时标号的顺序不管什么类型的元素，标号依次递增。

E：nth-of-type（index）{}；所有元素的父元素的第index孩子，孩子编号根据同一类型的元素进行编号，如果一个子元素有多种元素（div、h3、p），那么就有多组编号

E:first-of-type等价于E:nth-of-type(1)

E：last-of-type；等价于E：nth-of-type（最后一个）{}

 

注意：只能向：：selection选择器应用的少量的css属性：color、background、cursor、以及outline。

 

阴影：

Shadow

text-shadow：文本阴影（四个参数）

-1px 5px 3px rgba(22,22,22,0.3),
1px 5px 3px red,
1px -5px 3px red,
-1px -5px 3px red;

     分别是四周阴影（注意：是逗号隔开。）

       .fontShadow{
            width:300px;
            height:100px;
            font-size:30px;
            font-weight:bold;
            margin-left:10%;
            text-shadow:#00c500 5px 5px;
            animation:flash 0.8s infinite alternate;
        }
        @keyframesflash {
            10%{
                text-shadow: red 5px 5px;
            }
            50%{
                text-shadow: #71b9fe 5px 5px;
            }
            80%{
                text-shadow: #fe5bbb 5px 5px;
            }
            100%{
                text-shadow: #55fe8d 5px 5px;
            }
        }
style>

 

box-shadow：是给元素块添加阴影

box-shadow: inset 2px 2px 2px blue;

不加inset是正常倒影，加了变成往元素内显示

反射（倒影）

Reflect：反射

用法：浏览器的兼容性问题，使用boxreflect前面加上-webkit的前缀。

参数：反射的方向（above、below、left、right）上下左右。

-webkit-box-reflect: below 10px;

 

2倒影和本体的距离，可以为负数

3其他属性：透明度的变化

-webkit-box-reflect: below -10px
-webkit-linear-gradient(transparent,transparent 30%,rgba(225,225,225,0.3));

 

Gradient：变化率，线性变化。

Css渐变

渐变为css3新增的属性，

分为两种：线性渐变和径向渐变

1、     线性渐变：-webkit-gradient（参数多，但是容易改变）

background: -webkit-gradient(linear,0%0%,100%0%,from(yellow),to(red));

参数：linear：线性，后面的两组参数代表的是起始位置和终止位置，from（起始颜色）to（渐变到那种颜色）

2、     linear-gradient：

background:linear-gradient(aqua,chartreuse,red);

参数只有起始颜色和终止颜色，也可以有多种颜色，取决于你传进去多少种颜色

3.对角渐变：

参数方向、起始位置、终止位置

background:-webkit-linear-gradient(45deg,red,greenyellow);

4.径向渐变：

Css3径向渐变就是圆形或者椭圆渐变，不再沿着一条直线进行变化，而是从一个起点朝着所有的方向渐变，相比于线性渐变，径向渐变更为复杂。

1.标准语句：

background:radial-gradient(red,greenyellow);

2不均匀渐变

background:radial-gradient(red 40%,greenyellow 40%);

参数：在颜色的后面加上百分之百，可以控制渐变度的程度。

5.形状渐变

background: repeating-radial-gradient(chartreuse 20%,aqua 40%);

参数：变化的形状、起始颜色变化、终止颜色变化。

滤镜

CSS滤镜属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。

圆角

border-radius: 40px  0 40px 0;/*左上，右上，右下，左下*/

背景

1.    background-clip：

1border-box：背景颜色直接眼神到边框外面

2 content-box：背景颜色在内容后面，没内容就没有背景色

3 padding-box：背景颜色在边框里面

2.   background-origin：

 1 no-repeat：不让图片重复

3.   background-size：

  1 contain ：自适应，缩小图片以适合元素（维持像素长宽比）以较大的缩放比例为准

 

  2cover：可以被撑起来的背景图片，扩展元素以填补元素（维持像素长宽比）以较小的缩放比例为准

 

Css3以前，背景图片大小由图像的实际大小决定，

Css3中可以指定图片，重新指定图片的大小，或者百分比。

图片的大小只能写在所有图片属性的最后面

 

偏移

translate（x,y）

         X表示水平方向上的移动，y代表垂直方向的移动。为负值的时候往相反的方向移动。

transform: translate(500px,200px);

缩放

scale（x，y）

         X表示放大或者缩小元素的宽度，y表示高度。

         ScaleX（）表示只对元素的高进行缩放

         ScaleY（）表示只对元素的宽进行缩放 

注意：当里面的值为负数时，网页会先将其倒过来，再进行缩放

 

 

旋转

rotate（）      

--了解即可        

 deg;单位，度数

       当里面的值为正数时，元素顺时针转，反之，逆时针转

transform:rotate(-120deg);

倾斜

skew（）       --了解即可      

        里面的参数指的是绕着那个方向去倾斜

有正负之分

transform:skew(60deg,60deg);

 

矩阵

matrix（a,b,c,d,e,f）

比如transform:matrix(1,0,0,1,50,50);

表示将元素向右移动50px，再向下移动50px

过度（类似于动画）

特点：1、本质上是一帧动画，一帧结束后，就结束了

     2、过度的效果的实现，必须通过用户的行为，可能触发的行为：hover，focus，click，js代码

transition的属性

     Transition-property：指定元素的过度属性

     Transition-duration：规定了过渡的时间

     Transition-timming-function：规定以任何方式过渡

     Ease：表示快速

     Ease-in：先慢后快

Ease-out：先快后慢

Linear：线性平缓的变换。

Steps（）：规定过度分几步完成。

缩写：Transition：property duration function delay

动画

1.   animation动画属性

      animation-name：取值为动画名称

      animation-duration：规定动画完成所需要的时间

      animation-timming-function：规定以什么方式完成动画

      animation-delay：规定动画延迟多少时间

      animation-iteration-count：规定动画执行的次数 （infinite无限循环）

      animation-direction：规定动画执行的方向（alternate规定动画来回执行）

      animation-state：规定动画是否执行（paused表示暂停）

      animation-fill-mode：规定动画开始之前和结束之后发生的操作，默认值为none；forwards表示动画结束后元素保留最后帧的状态，backwards则与forwards相反。

 

2.   @keyframes

   规定一个动画，包括动画名称，

from规定初始状态，to规定动画的末状态

0%可以表示出状态，100%也可以表示动画的末状态，即最后帧。

 

  

img {
    width:300px;
    height:300px;
    /*transition-duration:1s;*/
    animation-name:move;
    animation-direction:alternate;
    animation-iteration-count:infinite;/*无限循环*/
    animation-play-state: running;
    animation-duration:2s;    /*持续时间*/
    /*animation-delay: 2s;*//*延迟时间*/
    /*animation:move 1s linearforwards;*/
}

 

@keyframes move {
    /*               from{
                        transform:translate(0,0);
                    }
                    to{
                        transform: translate(800px,500px)scale(5);
                    }*/
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        transform: translate(800px, 500px)scale(5);
    }
    60% {
          transform:translate(1300px, 900px)scale(5);
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}

有疑问请留言，可能我会晚点回复，（打个广告：专职前端，接小型外包，类型不限，pc,m,公众号，小程序，webapp，毕业项目等，qq:641577885）