HTML+CSS+JavaScript知识点整理3

BOM和DOM简介

BOM，Browser Object Model ,浏览器对象模型。
BOM主要提供了访问和操作浏览器各组件的方式。
浏览器组件：
    window(浏览器窗口)
    location(地址栏)
    history(浏览历史)
    screen(显示器屏幕)
    navigator(浏览器软件)
    document(网页)
DOM，Document Object Model，文档对象模型。
DOM主要提供了访问和操作HTML标记的方式。
HTML标记：
    图片标记
    表格标记
    表单标记
    body、html标记
    ……
BOM和DOM不是JS的内容。它们是W3C制定的规范。但是，BOM和DOM在浏览器中以对象的形式得以实现。
换句话说：BOM和DOM都是由一组对象构成。
W3C是制作互联网标准的一个国际化的组织，如：XHTML、CSS、JavaScript、AJAX等。

BOM对象结构图

各对象之间是有层级关系的，那么各对象之间如何访问呢？
    window.document.write(“OK”)
    window.document.body.bgColor = “#FF0000”;
window对象是所有其它对象的最顶层对象，因此，可以省略。
    document.write(“OK”);
    document.body.bgColor = “#FF0000”;
    window.alert(“OK”);   ——>    alert(“OK”);
    window.prompt(“请输入一个分数”)； ——>  prompt(“请输入一个分数”);
  • Window对象属性和方法
    name：指浏览器窗口的名字或框架的名字。这个名字是给<a>标记的target属性来用的。
    设置窗口的名字：window.name = “newWin”
    获取窗口的名字：document.write(name);
    top：代表最顶层窗口。如：window.top
    parent：代表父级窗口，主要用于框架。
    self：代表当前窗口，主要用于框架中。
    innerWidth：指浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
    在IE下，使用 document.documentElement.clientWidth 来代替 window.innerWidth
    innerHeight：指浏览器窗品的内高(不含菜单栏、工具栏、地址栏、状态栏)，该属性Firefox支持。
    在IE下，使用  document.documentElement.clientHeight 来代替  window.innerHeight
    document.documentElement   就是<html>标记对象
    document.body  就是 <body>标记对象

window对象方法
    alert()：弹出一个警告对话框。
    prompt()：弹出一个输入对话框。
    confirm()：弹出一个确认对话框。如果单击“确定按钮”返回true，如果单击“取消”返回false。
    close()：关闭窗口
    print()：打印窗口


open()方法
    功能：打开一个新的浏览器窗口。
    语法：var winObj = window.open([url][,name][,options]);
    说明：参数可有可无。如果没有指定参数，则打开一个选项卡式的窗口(大小是最大大化)。
    参数：
    url：准备在新窗口中显示哪个文件。url可以为空字符串，表示显示一个空的页面。
    name：新窗口的名字，该名字给<a>标记的target属性来用。
    options：窗口的规格。
    width：新窗口的宽度
    height：新窗口的高度
    left：新窗口距离屏幕左边的距离
    top：新窗口距离屏幕上边的距离
    menubar：是否显示菜单栏，取值：yes、no
    toolbar：是否显示工具栏。
    location：是否显示地址栏。
    status：是否显示状态栏。
    scrollbars：是否显示滚动条，不能省略s字母。
    返回值：返回一个window对象的变量，可以通过该名称跟踪该窗口。winObj具备window对象的所有属性和方法。

onload事件：当网页加载完成，指<body>标记的所有内容全部加载完成，才触发该事件(条件)。通过onload事件属性，去调用JS的函数。onload属性只有<body>标记才有。
onclick事件：当单击时，去调用JS代码。所有HTML标记都具有该事件属性。
  • 延时器方法——setTimeout()
setTimeout()
    功能：设置一个延时器，换句话说：时间一到，就执行JS代码一次。
    语法：var timer = window.setTimeout(code,millisec)
    参数：
       code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
    举例：window.setTimeout(“close()” , 2000)
    举例：window.setTimeout(init, 2000);  //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
    millisec：毫秒值。1秒=1000毫秒
    返回值：返回一个延时器的id变量，这个id变量给clearTimeout()用来清除。
    
    clearTimeout()
    功能：清除延时器id变量
    语法：window.clearTimeout(timer)
    参数：timer就是由setTimeout()设置的延时器的id变量。
    
    setInterval()
    功能：设置一个定时器。定时器，重复不断的执行JS代码(周期性)。
    语法： var timer = window.setInterval(code , millisec)
    参数：
    code：是任何合法的JS代码，一般情况下是JS函数。该函数要放在引号中。
    举例：window.setInterval(“init()” , 2000)
    举例：window.setInterval(init, 2000);  //传函数地址，因此不需要加括号。如果加括号，是将函数的执行结果传到方法中。
    millisec：毫秒值。1秒=1000毫秒
    返回值：返回一个定时器的id变量，这个id变量给clearInterval()用来清除。
clearInterval()
    功能：清除定时器id变量
    语法：window.clearInterval(timer)
    参数：timer就是由setInterval()设置的定时器的id变量。
  • screen屏幕对象
    Width：屏幕的宽度，只读属性。
    Height：屏幕的高度，只读属性。
    availWidth：屏幕的有效宽度，不含任务栏。只读属性。
    availHeight：屏幕的有效高度，不含任务栏。只读属性。
  • navigator对象
    appName：浏览器软件名称，主要用来判断客户使用的是什么核心的浏览器。
    如果是IE浏览器的话，返回值为：Microsoft Internet Explorer
    如果是Firefox浏览器的话，返回值为：Netscape
    appVersion：浏览器软件的核心版本号。
    systemLanguage：系统语言
    userLanguage：用户语言
    platform：平台
  • location 地址栏对象
    href：获取地址栏中完整的地址。可以实现JS的网页跳转。location.href = “http://www.sina.com.cn”;
    host：主机名
    hostname：主机名
    pathname：文件路径及文件名
    search：查询字符串。

    protocol：协议，如：http://、ftp://
    hash：锚点名称。如：#top
    reload([true])：刷新网页。true参数表示强制刷新
注意：所有的属性，重新赋值后，网页将自动刷新。
<meta  http-equiv = “refresh”  content = “5;url=http://www.sina.com.cn”  />

history对象

    length：历史记录的个数
    go(n)：同时可以实现“前进”和“后退。”
i.  history.go(0)  刷新网页
ii. history.go(-1)  后退
iii.    history.go(1)   前进一步
iv. history.go(3)   前进三步
    forward()：相当于浏览器的“前进”按钮
    back()：相当于浏览器的“后退”按钮
  • DOM
DOM ， Document Object Model ，文档对象模型。我们可以把网页中的所有“东西”看成是“对象”。
DOM是W3C制定的网页标准或规则，而这个标准，在浏览器中，以“对象”的形式得以实现。
DOM的官方定义：DOM可以使脚本，动态的访问或操作，网页的内容、网页外观、网页结构。
DOM的分类
    核心DOM：提供了同时操作HTML文档和XML文档的公共的属性和方法。
    HTML DOM：针对HTML文档提供的专用的属性方法。
    XML DOM：针对XML文档提供的专用的属性和方法。(就业班讲)
    CSS DOM：提供了操作CSS的属性和方法。
    Event DOM：事件对象模型。如：onclick、 onload等。


HTML节点树

节点关系
    根节点，一个HTML文档只有一个根，它就是HTML节点。
    子节点：某一个节点的下级节点。
    父节点：某一个节点的上级节点。
    兄弟节点：两个子节点同属于一个父节点。

DOM中节点类型
    document文档节点，代表整个网页，不代表任何HTML标记。但它是html节点的父节点。
    element元素节点，指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。
    attribute属性节点。指HTML标记的属性。
    text节点。是节点树的最底节点。

核心DOM中的公共的属性和方法
提示：核心DOM中查找节点(标记)，都是从根节点开始的(html节点)。
1、节点访问
    nodeName：节点名称。
    nodeValue：节点的值。只有文本节点才有值，元素节点没有值。nodeValue的值只能是“纯文本”，不能含有任何的HTML标记或CSS属性。
    firstChild：第1个子节点。
    lastChild：最后1个子节点。
    childNodes：子节点列表，是一个数组。
    parentNode：父节点。



查找<html>标记的方法
    document.firstChild
    document.documentElement
查找<body>标记的方法
    document.firstChild.lastChild
    document.body

为什么，document.body.firstChild 找不到<table>节点？
核心DOM的属性和方法，主要是针对HTML4.0开发的。
在Firefox下，会把空格或换行，当成文本节点。
HTML4.0是有没有DTD类型定义的。

2、对节点的属性操作
    setAttribute(name,value)：给某个节点添加一个属性。
    getAttribute(name)：获取某个节点属性的值。
 
    removeAttribute(name)：删除某个节点的属性。
    
    3、节点的创建
    document.createElement(tagName)：创建一个指定的HTML标记，一个节点
    tagName：是指不带尖括号的HTML标记名称。
    举例：var imgObj = document.createElement(“img”)
    parentNode.appendChild(childNode)：将创建的节点，追加到某个父节点下。
    parentNode代表父节点，父节点必须存在。
    childNode代表子节点。
    举例：document.body.appendChild(imgObj)
    parentNode.removeChild(childNode)：删除某个父节点下的子节点。
    parentNode代表父节点。
    childNode代表要删除的子节点。
    举例：document.body.removeChild(imgObj)
  • HTML DOM简介和新特性
1、简介
    核心DOM中，提供的属性和方法，已经可以操作网页了。为什么还要有HTMLDOM呢？
    如果在核心DOM中，网页中节点层级很深时，访问这个节点时将十分麻烦。
    那么，HTMLDOM中就提供了通过id直接找节点的方法，而不用再HTML根节点开始。
2、HTML DOM的新特性
    每一个HTML标记，都对应一个元素对象。如：<img>对应一个图片对象
    每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
    
    HTML DOM访问HTML元素的方法(最常用)
1、getElementById()
    功能：查找网页中指定id的元素对象。
    语法：var obj = document.getElementById(id)
    参数：id是指网页中标记的id属性的值。
    返回值：返回一个元素对象。
    举例：var imgObj = document.getElementById(“img01”)
2、getElementsByTagName(tagName)
    功能：查找指定的HTML标记，返回一个数组。
    语法：var arrObj = parentNode.getElementsByTagName(tagName)
    参数：tagName是要查找的标记名称，不带尖括号。
    返回值：返回一个数组。如果只有一个节点，也返回一个数组。
    举例：var arrObj = ulObj.getElementsByTagName(“li”)

    tagName：标签名称，与核心DOM中nodeName一样。
    className：CSS类的样式。
    id：同HTML标记id属性一样。
    title：同HTML标记的title属性一样。
    style：同HTML标记的style属性一样。
    innerHTML：包含HTML标记中的所有的内容，包括HTML标记等。

以上元素对象属性的应用，详细看文件。

    offsetWidth：元素对象的可见宽度，不带px单位。
    offsetHeight：元素对象的可见高度，不带px单位。
    scrollWidth：元素对象的总宽度，包括滚动条中的内容，不带px单位。
    scrollHeight：元素对象的总高度，包括滚动条中的内容，不带px单位。
    scrollTop：指内容向上滚动上去了多少距离(有滚动条时才有效)，默认值为0
    scrollLeft：指内容向左滚动过去了多少距离(有滚动条时才有效)。


onscroll：当拖动滚动条时，调用JS函数。

CSS DOM动态样式

使用JS操作CSS中的各属性。
JS只能操作或修改行内样式。如：imgObj.style.border = “1px solid red”
对于类样式，通过className来赋值。如：imgObj.className = “imgClass”

style对象
每个HTML标记，都有一个style属性。但这个style属性又是一个style对象。
那么，这个style对象的属性有哪些？style对象的属性，与CSS中的属性，一一对应。
因此，style对象用来代替CSS。
如：imgObj.style.border = “1px solid red”;

style对象属性与CSS属性的转换
1）  如果是一个单词，style对象属性，与CSS属性一样。
2）  如果是多个单词，第1单词全小写，后面每个单词首字母大写，并去掉中划线。
i.  divObj.style.backgroundColor = “red”;
ii. divObj.style.backgroundImage = “url(images/bg.gfi)”;
iii.    divObj.style.fontSize = “18px”;



Event DOM：事件DOM
1、事件简介
    事件主要实现“用户与网页的交互”。
    当事件发生时，去执行JS功能代码。
    当点击图片时(onClick)，将图片放大两倍(JS代码)。
    当网页加载完成时(onLoad)，弹出一个小窗口。
    
    
    当鼠标放到滚动文本上时(onMouseOver)，文本停止滚动。
    当向下拖动滚动条时(onscroll)，文本向上滚动。
    ……
2、常用事件
    onload：当网页加载完成时。只能给<body>用。
    onclick：当点击时，所有标记都适用。
    onscroll：当拖动滚动条时
    onmouseover：当鼠标放上时
    onmouseout：当鼠标移开时
    onsubmit：当提交表单时
    onreset：当重置表单时
    onfocus：当获得焦点时，把光标定位到文本框中。
    onblur：当失去焦点时，把光标从文本框中移开。
    onchange：当下拉列表内容改变时。用在下拉列表、上传文件。
    onselect：当选中文本时。
    onresize：当改变窗口大小时，发生的事件。
    ……
    
3、事件句柄属性
    HTML标记，都有相应的事件属性。
    每一个HTML标记，都对应一个元素对象。元素对象也具有相应的事件属性。
    但是，元素对象的事件属性应该是全小写。
    事件属性后面调用的一般是JS函数，通过JS函数来完成相应的功能。

Event对象简介
当事件发生时，向调用函数，传递一个event参数，这个event参数是一个事件对象。
该event对象中记录了当前事件发生的环境信息。如：单击时的坐标、事件类型等。
注意：这个event对象是“短暂”存在的，新的事件发生，新的event对象产生，原来的event对象消失了。

DOM中Event对象
1、DOM中引入Event对象(DOM浏览器就是标准浏览器)
    （1）通过HTML标记的事件属性来传递event对象
        在DOM中，event对象是作为事件调用函数时的参数，传递给函数的。
        该event参数，是系统固定写法，全小写，不能加引号，它就是event对象参数。

    function getXY(e){
        alert(e.clientX+ "-"+e.clientY);
    }       


<body>
    ![](images/91.png)
</body>

（2）使用元素对象的事件属性来传递event对象
    
    window.onload = function(){
        var imgObj = document.getElementById("img1");
        imgObj.onclick = getXY;     //传地址,不带括号
        
    }
    
    <body>
        ![](images/91.png)
    </body>
    
    2、DOM中Event对象属性
    type：当前的事件类型
    clientX和clientY：距离窗口左边和上边的距离
    pageX和pageY：距离网页左边和上边的距离
    screenX和screenY：距离屏幕左边和上边的距离
    
IE中Event对象
IE中的event对象，是window对象的一个属性，可以通过window对象调用，而不需要传参数。如：window.event

IE中Event对象属性
    type：事件的类型
    clientX和clientY：距离窗口左边和上边的距离。
    x和y：距离网页左边和上边的距离
    screenX和screenY：距离屏幕左边和上边的距离
  • form 对象
一个<form>标记，就是一个<form>对象。
1、form对象的属性
    name：表单的名称，主要用来让JS来控制表单。
    action：表单的数据处理程序(PHP文件)。
    method：表单的提交方式，取值：GET、POST
    enctype：表单数据的编码方式。
2、form对象的方法
    submit()：提交表单，与<input  type = “submit” />功能一样。
    reset()：重置表单，与重置按钮功能一样。
3、form对象的事件
    onsubmit：当单击提交按钮时发生，并数据发往服务器之前发生。主要用来“在表单提交之前进行表单验证”。
    onreset：当单击重置按钮时发生(了解)。
    
    
    获取表单元素的
    通过网页元素的id来获取对象。document.getElementById(id)
    通过HTML标签名来获取对象。parentNode.getElementsByTagName(tagName)
    通过name属性来获取表单元素对象。表单中所有元素的起点都必须是document对象。
    语法：document.formObj.elementObj
    访问方式是三层结构。其中，formObj代表表单对象，elementObj代表表单元素对象。
    举例：document.form1.username.value.length

事件返回值
事件的返回值，会影响对象的默认动作。如：<a>标记的默认动作是打开一个网址。
如果事件返回false，则阻止默认动作的执行；如果事件返回true或空，则默认动作继续执行。



提交和验证方法总结
1、使用submit按钮，结合onsubmit事件来实现(最常用)

2、submit按钮，结合onclick事件，实现表单的验证和提交

3、button按钮(普通按钮)，结合submit()方法，实现表单验证提交
<script type="text/javascript">
function checkForm()
{
    if(document.form1.username.value.length == 0)
    {
        //如果用户名为空
        window.alert("用户名不能为空！");
    }else if(document.form1.username.value.length<5 || document.form1.username.value.length>20)
    {
        //如果用户名长度小于5或大于20
        window.alert("用户名只能介于5-20个字符！");
    }else if(checkOtherChar(document.form1.username.value))
    {
        //如果用户名含有特殊符号
        window.alert("用户名中含有特殊符号！");
    }else
    {
        //如果验证通过，提交表单
        window.alert("验证通过！");
        //表单提交方法
        document.form1.submit();
    }
}
function checkOtherChar(str)
{
    //定义一个特殊符号的数组
    var arr = ["*","&","<",">","$","\\","/"];
    //循环比较：数组中的每一个字符，与用户名每一个字符进行比对
    for(var i=0;i<arr.length;i++)
    {
        for(var j=0;j<str.length;j++)
        {
            if(arr[i]==str.charAt(j))
            {
                return true;
            }
        }
    }
    //如果没找到
    return false;
}
</script>
</head>
<body>
<form name="form1" method="post" action="login.php">
用户名：<input type="text" name="username" />
密码：<input type="password" name="userpwd" />
<input type="button" value="提交按钮" onclick="checkForm()" />
</form>

input对象
一个<input>标记，就是一个input对象。
1、input对象的属性(以type=text为例)
    name：表单元素的名称。
    value：表单元素的值，用户输入的内容，可以通过该属性来获取。
    size：表单的长度。
    maxlength：表单元素的最大长度(最多可输的字符数)。
    disabled：禁用属性。
    readonly：只读属性。

2、input对象的方法
    focus()：获得焦点的方法(定位光标)。
    blur()：失去焦点的方法(移走光标)。
    select()：选中文本的方法。
3、input对象的事件
    onfocus：当获得焦点时
    onblur：当失去焦点时
    
    
select对象
一个<select>标记，对应一个select对象。
select对象属性
    options[]：设置或返回下拉列表中<option>标记构成的数组。
    selectedIndex：设置或选中指定<option>的索引号。
    length：指定下拉列表中<option>标记的个数。
    name：元素名称。
option对象
一个<option>标记，对应一个option对象。

option对象属性
    text：指<option>和</option>之间的文本。
    value：是指<option>标记的属性。

window.onload = function(){
    var form1 = document.form1;
    form1.province.selectIndex = 1;
    form1.province.options[2].text = "hahaha";
    alert(form1.province.options[2].text);
}


<body>
    <form name="form1" method="post" action="login.php">
    Province: <select name="province">
                    <option>dd</option>
                    <option>dd1</option>
                    <option>dd2</option>
                </select>
    </form>
</body>


二级联动菜单

（1）二级菜单初始化
        当网页加载完成，将arr_province中的数据写入到name=province下拉列表中。
        name=city下拉列表数据，要根据name=province列表的默认选择(selectedIndex)而改变。
（2）根据name=province的选择，来改变name=city中的内容
        当改变时，获取选择中的省份的索引值。
        城市列表，会根据传递过来的索引值，请取对应的二维数组中的数据，并写入city列表中。



<script type="text/javascript">
var arr_province = ["请选择省/城市","北京市","上海市","天津市","重庆市","深圳市","广东省"];
var arr_city = [
                ["请选择城市/地区"],
                ["东城区","西城区","朝阳区","宣武区","昌平区","大兴区","丰台区","海淀区"],
                ['宝山区','长宁区','丰贤区', '虹口区','黄浦区','青浦区','南汇区','徐汇区','卢湾区'],
                ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],
                ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],
                ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],
                ['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市']
            ];
//网页加载完成，初始化二级菜单
window.onload = init; //传地址，不带括号
function init()
{
    
    //获取name=province和name=city的对象
    var province = document.form1.province;
    var city = document.form1.city;
    //指定省份下拉中<option>标记的个数
    province.length = arr_province.length;
    //循环将arr_province中的数据写入到<option>标记中
    for(var i=0;i<arr_province.length;i++)
    {
        province.options[i].text = arr_province[i];
        province.options[i].value = arr_province[i];
    }
    //修改省份列表中默认选择项
    var index = 0;
    province.selectedIndex = index;
    //指定城市下拉中<option>标记的个数
    city.length = arr_city[index].length;
    //循环将arr_city中对应的数据写入到<option>标记中
    for(var j=0;j<arr_city[index].length;j++)
    {
        city.options[j].text = arr_city[index][j];
        city.options[j].value = arr_city[index][j];
    }
}
function changeSelect(index)
{
    //获取name=city的对象
    var city = document.form1.city;
    //指定城市下拉中<option>标记的个数
    city.length = arr_city[index].length;
    //循环将arr_city中对应的数据写入到<option>标记中
    for(var j=0;j<arr_city[index].length;j++)
    {
        city.options[j].text = arr_city[index][j];
        city.options[j].value = arr_city[index][j];
    }
}
</script>
</head>

<body>
<form name="form1" method="post" action="login.php">
省份：<select name="province" onchange="changeSelect(this.selectedIndex)"></select>
城市：<select name="city"></select>
</form>


HTML5简介
HTML5是新一代的HTML。
HTML5目前主要应用在手机端，在PC端最新浏览器已经开始支持了，但还不全面。
HTML5是由W3C和WHATWG合作的结果。
W3C是万维网联盟，主要制作各种互联网标准的国际组织。如：XHTML、CSS、JavaScript、XML、AJAX等。
    主要想发展XHTML2.0。
WHATWG应用程序工作组，是由Firefox、Chrome、苹果、safari、IE等浏览器公司成立了一个机构。主要面向应用程序的完善和开发、表单的扩展和完善。如：在HTML5中使用<video>标记，直接可以播放视频。
    <input  type = “email”  name = “email”  />  邮箱验证
    <input  type = “color”  name = “color”  />
    <input  type = “date”  name = “date”  />
HTML5支持度测试
http://chrome.360.cn/test/html5/index.html 
浏览器市场份额统计
http://tongji.baidu.com/data/browser 

文档类型定义
XHTML1.0中的文档类型定义有三种：过渡型、严格型、框架型。
HTML5中的文档类型定义：<!DOCTYPE html>
就连IE6最不兼容的浏览器，也支持这个类型定义。

网页字符集设置
<meta charset= “utf-8”>

页面结构标记
   <header></header>网页头部
   <nav></nav>导航栏、菜单栏
   <footer></footer>页脚

文章相关标记
   <article>：代表一篇文章。
   <aside>：侧边栏
   <section>：区块。主要用于排版网页，功能与<div>一样。
   <details>：一个标题的简介。
   <summary>标题的内容，与<details>配合使用。

其它标记
   <mark>：重点标注。
   <progress>：进度条
   max：最大值
   value：当前值
<progress id="pro" style="width:500px;" max="100" value="0"></progress>
<script type="text/javascript">
//获取id=pro对象
var pro = document.getElementById("pro");
var i = 0;
window.setInterval("start2()",40);
function start2()
{
    pro.value = i;
    i++;
    if(pro.value==pro.max)
    {
        i = 0;
    }
}
</script>


音频标记<audio>属性
    语法格式：<audio>对不起，你浏览器不支持audio元素。</audio>
    常用属性
    Controls：是否显示控制面板
    Autoplay：是否自动开始
    Src：播放文件路径。支持的文件格式有：mp3、ogg、wav
    Loop：是否循环
<audio controls="controls" autoplay="autoplay" src="images/hudie.mp3">对不起，你的浏览器不支持audio元素！</audio>

视频标记<vedio>属性
    语法格式：<vedio>对不起，你的浏览器不支持vedio！</vedio>
    常用属性
    Controls：是否显示控制面板
    Autoplay：是否自动开始
    Src：视频路径。支持的文件格式：ogg、mp4
    Loop：是否循环
    Width：宽度
    Height：高度
    Poster：第一帧的画面。默认是视频的第一帧。
<video src="images/mov_bbb.ogg" poster="images/baobao.jpg" controls="controls" width="400" height="300"></video>

表单中新增的属性
    Autocomplete：自动完成，取值：on、off
    Autofocus：自动获得焦点
表单input元素type属性的值
    tel：电话验证
    Email：邮箱验证
    url：网址验证
    color：颜色拾色器
    date：日历
    month：选择月份
    time：时间
    datetime：日期时间
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,793评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,567评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,342评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,825评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,814评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,680评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,033评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,687评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,175评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1赞 332
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,419评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,020评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2赞 351
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2赞 343

推荐阅读更多精彩内容

  • JavaScript进阶篇(慕课网)
    第1章 系好安全带,准备启航 1.1让你认识JS 1.1.1 JavaScript能做什么？增强页面动态效果(...
    张中华阅读 1,347评论 4赞 10
  • JavaScript
    一、JS前言 （1）认识JS 也许你已经了解HTML标记(也称为结构)，知道了CSS样式(也称为表示)，会使用HT...
    凛0_0阅读 2,752评论 0赞 8
  • JavaScript进阶
    第1章 认识JS JavaScript能做什么？1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,244评论 0赞 5
  • JS的学习
    JavaScript是什么？ JS是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。JS是嵌入到浏览器软...
    钩不了沉阅读 1,886评论 0赞 6
  • JavaScript概述
    JS简介 外部JavaScript中文件的文件扩展名为.js，如果使用外部文件，那么标签需要设置它的src属性为文...
    Grape_葡萄阅读 909评论 1赞 6