HTML5

BOM:

windowd method：

    alert() 显示带有一段消息和确认按钮的警告框

    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

    prompt()　显示可提示用户输入的对话框

   

    open() 打开一个新的浏览窗口或查找一个已知的窗口//open("http://www.baidu.com")

            open('http://www.baidu.com','','width=200,resizable=no,height=100');新打开一个宽为200 高为100的窗口

    close()　关闭浏览器窗口。

    setInterval() 按照指定的周期（以毫秒）来调用函数或计算表达式。

    clearInterval() 取消由 setInterval() 设置的 timeout

    setTimeout() 在指定的毫秒数后调用函数或计算表达式

    clearTimeout() 取消由 setTimeout() 设置的 timeout

    scrollTo() 把内容滚动到指定的坐标

history method：

    back() 加载 history列表中的前一个URL

    forward() 加载history列表中的下一个URL

    go() 加载history 列表中的某个具体页面

   

DOM:

    导航属性：

    parentNode  父亲节点

    firstChild   第一个子元素

    lastChild   最后一个子元素

    childNodes  所有子元素

   

    推荐导航属性：

    parentElement  父亲标签元素

    childdren   所有子标签

    firstElementChild 第一个子元素

    lastElementChild 最后一个子元素

    nextElementSibling 下一个兄弟元素

    previousElementSiling 上一个兄弟元素

   

    获取节点：

    getElementById() 通过ID获取

    getElementsByTagName() 通过标签获取

    getElementsByClassName() 通过class获取

    getElementsByName() 通过属性name获取

   

    事件Event:

    onclick        当用户点击某个对象时调用的事件句柄。

    ondblclick     当用户双击某个对象时调用的事件句柄。

   

    onfocus        元素获得焦点。               //练习：输入框

    onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.

    onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

   

    onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.

    onkeypress     某个键盘按键被按下并松开。

    onkeyup        某个键盘按键被松开。

    onload         一张页面或一幅图像完成加载。

    onmousedown    鼠标按钮被按下。

    onmousemove    鼠标被移动。

    onmouseout     鼠标从某元素移开。

    onmouseover    鼠标移到某元素之上。

    onmouseleave   鼠标从元素离开

   

    onselect      文本被选中。

    onsubmit      确认按钮被点击。

   

    event.stopPropagation(); //阻止事件向外层div传播

   

    节点的增删改查：

    增：

        createElement(name) 创建元素

        appendChild() 添加元素

    删：

        获取要删除的元素，

        获取它的父元素

        使用removeChild()方法删除

    改：

        setAttribute() 修改属性

        innerHTML 修改属性

        innerText   修改Text内容

    复制：

        div.cloneNode(true); 参数true表示克隆所以的子元素，false 表示只克隆自己。

   

    修改 HTML DOM 样式：

        elementNode.className

        elementNode.classList.add    添加属性样式

        elementNode.classList.remove 移除属性样式

   

   

HTML:

    img：src 要显示图片的路径;alt 图片没有加载成功的提示;title 鼠标悬停事的提示

    ul:无序列表 type: disc 实心圆点(默认) circle(空心圆圈),square(实心方块)

    table:rowspan 竖跨多少行;colspan 横跨多少列 cellpadding 内边距;cellsapcing外边距

    form:file method='post' enctype='multipart/form-data'

    input: name 后端根据name获取相应的value;readonly 只读;disabled 禁用

    select: size 选项个数;multiple:mulitple 多选

    option: value 表单提交的值;selected:selected 被选中

    textarea: cols 宽度;rows 高度; name 名称

   

    CSS的四种引入方式：

        1.行内式：直接在标签中style属性

        2.嵌入式：在head中加入如style标签

        3.链接式：添加一个link标签，引入一个CSS文件 <link href="mystyle.css" rel="stylesheet" type="text/css"/>

        4.导入式： @import"mystyle.css"; 此处要注意.css文件的路径

            导入式会在整个网页加载完后再进行CSS文件的加载

        

选择器：

    基本选择器：

        1.标签选择器 p{}

        2.id选择器   #id{}

        3.class选择器 .active{}

        4.通赔选择器  *{}

     组合选择器：

        1.多元素选择器 div,p{}

        2.后代选择器  div p{} div里面的所有p元素

        3.子元素选择器 div>a{} div孩子中的a元素

        4.毗邻选择器   div+p{} 紧随div之后的同级元素p

        5.普通兄弟选择器 div ~ p

     属性选择器：

        1.p[class] 具有class属性的p元素

        2.p[class='hide'] 具有class='hide'属性的p元素

        3.p[class~='hide'] 具有class属性，并且有多个值，其中一个为hide

       

伪类：

    a:link 未访问的链接

    a.visited 已访问的链接

    a.hover 鼠标移动到链接上

    a.active 选定的链接

    a:before 在a元素之前插入

    b:after 在a元素之后插入

文本属性：

    vertical-align: -4px 设置元素的垂直对其方式，只对行内元素有效，块级元素无效

    text-decoration:none 文本下划线

    text-indent:150px 行首缩进150px

    letter-spacing:10px 字母间距

    word-spacing:20px 单词间距

    text-transform:capitalize/uppercase/lowercase 每个单词首字母大写

background:

    background-color:red;             background-image:url('1.jpg')

    background-repeat:repeat(平铺满); background-position:right top(200px,200px)

width = 100% - border:

    box-sizing: border-box; #在div标签中加这一行

    border-left: 1px solid gray;