[学习交流] 【石家庄校区】学习笔记

本帖最后由小石姐姐于 2018-5-4 10:06 编辑

HTML

HTML:超文本标记语言

扩展名:.html .htm

结构标签:<html> <head> <body>

字体标签:<font color="颜色" size="大小" face="字体"></font>

标题标签:<h1>..由大到小..<h6>

段落:<p> 加粗:<b> 斜体:<i> 下划线:<u> 居中:<center> 删除线:<del>

分割线:<hr/> 预编译标签:<pre> 回车:<br/>

图片标签:<img src="路径" width="宽度" height="高度" alt="提示信息"/>

有序列表:<ol type="1 | a | A | i |I" start="起始位置" >

</ol>

无序列表:<ul type="disc | circle | square" start="起始位置">

</ul>

超链接:<a href="链接地址" target="_self | _blank | _parent">

表格:<table width="" height="" border="" align="left | center | right">

<thead>

</thead>

<tbody>

<tr>

</tr>

</tbody>

</table>

表单:<form action="提交地址" method="get | post">

默认提交地址为本页面;

get:不安全,数据大小受限

post:安全,数据大小不受限

</form>

表单元素:

文本/密码:<input type="text | password" id="" name="" value="" size="" maxlength="" readonly="readonly" disabled="disabled"/>

单选:<input type="radio" checked="checked"> 多个单选,名字唯一.</input>

复选:<input type="checkbox" checked="checked">多个复选,名字唯一.</input>

按钮:<input type="button | submit | reset | hidden | image图片按钮"/>

文件:<input type="file"/>

下拉列表:<select>

</select>

文本域:<textarea rows="行数" cols="列数">

H5扩展标签: <input type="email | date | number | color"/>

框架:<frameset rows="" cols="" >

列数和行数可用多个百分比表示.

<frame src="" noresize="noresize">边框固定,不可随意拉动</frame>

</frameset>

特殊字符:

空格:&nbsb;

<:<

>:>

":"

Div+CSS

块标签:
      <div></div>:独占一行
      <span></span>:在同一行
css语法:
      选择器{属性:属性值;属性:属性值;}
      引入方式:
            行内引入:<h1 style="color:red;font-size:200px;">标题</h1>
            页面内引入:
                     <style>
                              h1{
                                    color:blue;
                                    font-size:40px;
                              }
                     </style>
            外部引入:<link href="../css/demo1.css" rel="stylesheet" type="text/css"/>
ID选择器用#修饰,类选择器用.修饰
浮动:
      float:left | right | none | inherit(继承父元素float属性的值);
      clear:left | right | none | inherit(继承父元素clear属性的值);
属性选择器:
      input[type="text"]{
            background-color:red;
      }
后代选择器:(用空格隔开)
      div span 查找div中所有span元素
子元素选择器:(用>隔开)
      div > span 查找div中span子元素
并列选择器:(用,隔开)
      选择器,选择器{}

背景样式:
      background
      background-attachment
      background-color
      background-image
      background-position
      background-repeat
文本样式:
      color
      direction
      line-height
      letter-spacing
      text-align
      text-decoration
      text-indent
      text-shadow
      text-transform
      unicode-bidi
      white-space
      word-spacing
字体样式:
      font
      font-family
      font-size
      font-size-adjust
      font-stretch
      font-style
      font-variant
      font-weight
列表样式:
      list-style
      list-style-image
      list-style-position
      list-style-type
盒子模型:
      margin:外边距
      padding:内边距
定位属性:
      position:relative | absolute | left | top
超链接伪类:
            a:link             未访问的链接
            a:visited       已访问的链接
            a:hover             鼠标移动到连接上
            a:active       选定的链接

JS知识点总结

组成:ECMAScript,BOM,DOM
      ECMAScript中:
            语法:
                     1.弱变量,用var声明
                     2.数据类型分原始类型和引用类型
                              原始类型:五种,undefined,boolean,string,number,null
                     3.运算符:===全等
            内置对象:
                     1.Array:比如var arr=new Array(5); arr[0]=new Array("","");
                                             var arr1=[[""],[""]];
                     2.Boolean
                     3.Date:new Date().getTime();
                     4.Math:abs(x);max(x,y);min(x,y);random();round(x);比如Math.abs(-0.1);
                     5.Number
                     6.String:"字符串".matche("正则表达式");
                                    substr(startIndex,length)与substring(startIndex,endIndex)区别:
                                                                     前者取length个字符,后者取endIndex-startIndex个字符
                     7.RegExp:"正则表达式".test("字符串");
            全局函数:
                     1.decodeURI()
                     2.encodeURI()
                     3.eval()作用:把文本当做代码来执行
                     4.parseFloat()
                     5.parseInt()
      BOM中:
            window:
                     history.go(-1)
                     设置:location.href="";获取:locaction.href;
                     方法:1.alert();
                              2.setInterval();
                              3.setTimeout();
                              4.clearInterval();
                              5.clearTimeout();
                              6.confirm();
                              7.prompt();
                              8.open();
            screen:
                     screen.availHeight:不包含任务栏的高度
                     screen.availWidth
                     screen.height:包含任务栏的高度
                     screen.width
   DOM中:
            获得元素：
                     document.getElementById();通过ID获得元素.
                     document.getElementsByName();通过name属性获得元素.
                     document.getElementsByTagName();通过标签名获得元素.
            创建元素：
                     document.createElement();创建元素
                     document.createTextNode();创建文本
            添加节点：
                     element.appendChild();在最后添加一个节点.
                     element.insertBefore();在某个元素之前插入.
            删除节点：
                     element.removeChild();删除元素

            事件:
                     onblur()       onfocus()
                     onsubmit()
                     onclick()       ondblclick()
                     onmouseover() onmousemove()       onmouseout()
                     onkeydown()       onkeyup()       onkeypress()
                     onchange()
            输出:
                     document.write();
                     document.innerHTML();

JQuery知识点

      页面加载:
            $(function(){  });
            $(document).ready(function(){ });
            相当于window.onload=function(){};.相比于js一次执行,JQ多次执行,且效率高.
      JQ转JS:
            1.JQ[0].innerHTML();       2.JQ.get(0).innerHTML();
      JS转JQ:
            $(JS).html();
      单击:
            $("#id").click(function(){ });
            $("#id").on("click",function(){  })
      trigger与triggerHander区别:
            trigger:获得焦点,执行代码
            triggerHander:不获得焦点,只执行代码
      on/bind:为一个元素绑定多个事件,多个事件执行同一个函数
            $("").bind("click dblclick",function(){    });
      delegate:事件委派,为后来新创建的元素绑定事件.
            $("父元素").delegate("子元素","click",function(){    });

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【石家庄校区】学习笔记

0 个回复