A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

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

           WEB阶段笔记

一,
HTML概述

HTML:HYper Text Markup Language:超文本标记语言
     标记语言:指的是通过一组标签的形式描述事物的一门语言
     超文本:比普通文本更强大
HTML作用:
      HTML是用来制作页面(静态页面)
HTML应用:
     在设计网站的页面的时候用
HTML标签含义
<font>文字</font>:
<font color="  "   size = " "  face = "  " >
p      段落
br     换行
b      加粗
I       斜体
u     下划线
   加一个空格
hr      加横线
<center>    居中


图片标签<img>:的来源
width : 图片的宽度
heigth :  图片的高度
alt  :     图片找不到显示的内容
   图片引入路径的问题
   路径:相对路径
         如果引入的图片和HTML文件在同一级
            
HTML的列表标签
有序列表:<ol>
                     <li></li>
                  </ol>
无序列表:<ui>
                      <li></li>
                  <ui>
HTML的超链接:
   超链接标签:<a>
      属性:
            href :链接的路径
           target:打开的方式
               (要跳转的地方)        _self   :在自身页面跳转
                  (要跳转的地方)   _blank  :新开一个窗口打开。
                                                 _parent  : 在自身页面打开


无序列表属性
     type属性:
               disc    实心点
               circle   空心圆
              square  方块儿
有序列表属性:
      type属性:
               1        数字类型
                          start属性 :   从哪儿开始
               a        英文类型
               i        罗马字符


HTML表格布局标签
     <table>  
               <tr>行
                      <td>12</td>
                      <td>22</td>
               (</td>列)
                       <td>22</td>
                       <td>33</td>
                   </tr>
                    一行四列
   </table> 属性:
Width :表格的宽度
height: 表格的高度
border :边框
align     :表格水平位置
                               left   
                               center
                               right
<td>的属性:
              colspan  跨咧合并
              rowspan 跨行合并
HTML 的表单标签<form>
<form>常用属性:
        action属性:提交的路径,默认提交到当前页面
        method属性:请求的方式,GET和POST。默认是get
                  get跟POST区别:
                         get:数据会显示到地址栏中,有大小限制
                         post;数据不会显示到地址栏中,没有大小限制
  cellspacing   使表单 border 添加的表格双线框间距变大
表单输入
1, <input  type = "text"> :文本框  
        常用属性:
               name  :表单元素的名称,必须有name属性  后台才可以接受到数据
               value  : 默认值
               size    长度
               maxlength:文本框输入最大长度
               readonly  : 只读文本框
               desabled  废弃,不会提交 不能修改
  2,<input  type  = "password">:密码框
          常用属性:
               name  :表单元素的名称,必须有name属性  后台才可以接受到数据
               value  : 默认值
               size    长度
               maxlength:文本框输入最大长度
3, <input  type = "radio"> :单选按钮  
               name  :表单元素的名称,必须有name属性  后台才可以接受到数据
               value  : 提交到后台的值            
               checked   单选按钮默认一个被选中
  4,<input type = “button”>   : 普通按钮,空白按钮                        
  5,<input type = “submit”>  :提交按钮
  6,<input type = “reset”>     :重置按钮
  7,<input type = “file”>        :文件上传的表单项
  8,<input type = “hidden”>   :隐藏字段
  9,<input type = “image”>     :图片按钮
10,<select>            :下拉列表   
            <option>显示内容(下拉选项)</option>
               value :提交到后台的值   
               selected  默认当前值     
  11,<textarea>          : 文本域
                    cols   宽
                    rows   高
  12,<input type = :"checkbox> 复选按钮  
               name  :表单元素的名称,必须有name属性  后台才可以接受到数据
               value  : 提交到后台的值            
               checked   单选按钮默认一个被选中
               file             文件上传的表单项
               hidden     隐藏字段
               image     图片按钮
HTML的<frameset>框架:
            rows: 横向分割
            cols :  竖向切割
            <frame> 代表切割的每个部分(用来填充分割中间的内容)
HTML的块标签:
  • <div></div>         : 默认一个div独占一行
  • <span></span>   :默认在同一行

     CSS

CSS概述:
  • CSS指层叠样式表
  • 样式定义如何显示HYML元素
  • 样式通常存储在样式表中
  • 把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在CSS文件中
  • 多个样式定义可层叠为一

【CSS的基本语法】
CSS的基本语法通常包含两个部分:一个是选择器,一个声明.
* 选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】
Ø  行内样式:直接在HTML的元素上使用style属性设置CSS.
       <h1 style="color:red;font-size:200px ;">标题</h1>

Ø  页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.
        <style>
            h1{
                color:blue;
                font-size: 40px;
            }
        </style>

Ø  外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
CSS选择器
  •      元素选择器    空格
  •       ID选择器      #
  •       类选择器      .

CSS浮动属性
使用float完成浮动属性
     float属性取值
  • left   元素向左浮动
  • right  元素向右浮动
  • none 默认值  不浮动,会显示在其文本出现的位置
  • inherit  规定应该从父元素继承float属性的值

使用clear属性清除浮动效果
CSS其他选择器:
  • 属性选择器     input[type="text"]
  • 后代选择器     div span 查找的是所有div中的所有的span元素.
  • 子元素选择器   div > span找这个div中的第一层级的span元素.
  • 并列选择器     选择器,选择器{ }

CSS样式:
1,    背景:
         background:简写属性,作用是将背景属性设置在一个声明中
         background-attachment:背景图像是否固定或者随着页面的其余部分滚
                                                   动
        background-color:设置元素的背景颜色
       background-image:把图片设置为背景
        background-position:设置背景图像的起始位置
        background-repeat:设置背景图像是否及如何重复
2, 文本:
       color:设置文本颜色
       direction:设置文本方向
       line-height:设置行高
       letter-spacing:设置字符间距
       text-align:对齐元素中文本
       text-decoration:向文本添加修饰
       text-indent :缩进元素中文本首行
       text-shadow:设置文本阴影(CSS2包含该属性,CSS2.1没有保留)
       text-transform:控制元素中的字母
       unicode-bidi:设置文本方向
       while-space:设置元素中空白的处理方式
      word_spacing:设置字间距
  3,字体:
      font:简写,把所有针对字体的属性设置在一个声明中
      font-family:设置字体系列
      font-size:设置字体尺寸
      font-size-adjust;当首选字体不可用时,对替换字体进行智能缩放
      font-stretch:对字体进行水平拉伸(CSS2.1已经删除该属性)
      font-style:设置字体风格
      font-variant:以小型大写字体或者正常字体显示文本
      font-weight:设置字体的粗细
4,列表:
     list-style:简写,把所有用于列表的属性设置于一个声名中
     list-style-image:将图像设置为列表项标志
     list-style-position:设置列表中列表项标志的位置
     list-style-type:设置列表项标志的类型
CSS的盒子模型:

border:边框

盒子属性设置顺序:上 右,下,左(h1{padding:10px,20px,30px,40})
单边内边距属性
   padding:内边距:
  • padding-top   顶
  • padding-right 右
  • padding-bottom下
  • padding-left 左

  margin:外边距:
  • margin-top:
  • margin-right
  • margin-bottom
  • margin-left

CSS中的定位:
    position属性设置定位:
   relative:相对位置
           absolute:绝对位置
          使用两个方向属性:left,top
超链接伪类:使超链接外观发生一些改变
JS

JAVASCRIPT:

javascript是脚本语言,是一种轻量级的编程语言。
javascript适可插入HTML页面的编程代码
javascript插入HTML后,可由所有现代浏览器执行
javascript组成:
          ECMAScript :Javascript的基础语法
          DOM  :Document   Object   Model   浏览器模型
          BOM   : Browser     Object   Model  文本模型
JS用途:
          使页面更加丰富,使页面动起来。
JS基本语法
           1,区分大小写
                       与JAVA一样,变量名,函数名,运算符,以及其他一切东西都
                       是区分大小写的。
           2,弱变量类型语言(与JAVA不同):
                        var;
           3,分号可有可无
           4,变量名(命名规则):
  •   第一个字符必须是字母,下划线(_)或是美元符号($)
  • 余下的字符既可以是下划线,美元符号或者任意字母或数字                    

数据类型:
           1,原始类型:
                    undefined:未定义类型
                    boolean : 布尔类型
                    uumber: 数字类型
                    String  :字符或字符串
                    null:空
           2,引用类型:
                    对象类型,对象类型默认值是null
JS运算符:
JS的运算符与JAVA中基本一致
JS中有一个=== 全等于,全等于是类型和值都一样
JS通常开发步骤:
      JS通常都由一个事件触发
      触发一个函数,定义一个函数
      获得操作对象的控制权
     修改要操作的对象的属性或值
定义函数:
  1,  function  函数名(){
   //函数体
    }
2,   window.onload = function(){}
JS引入方式
    1,页面内直接编写JS编码,JS代码需要使用<script></script>
    2,在外面文件编写,然后引入


JS校验正则表达式只有两个方法:
      1,String对象中的match方法,
      2,正则对象中的test方法,
         str.match("正则表达式");正则.
Html的window对象(onload  加载触发)
     setInterval():按照指定周期来调用函数或计算表达式      
          clearInterval  清除定时
    setTimeout(): 在指定的毫秒数后调用函数或计算表达式   
          clearTimeout  清除定时


   配合CSS的显示和隐藏属性可以做页面定时弹出小广告,然后消失的特效:
       display:
                     block : 显示元素
                     none  : 隐藏元素


JS中的BOM对象( Browser 对象):
  • Window
  • Screen
  • History
  • Location
  • Naviqator        

   Window对象方法:
alert();                            弹出对话框(显示一段信息和确认按钮的
                                                             警告框,一般测试时候用)
定时操作:
SetInterval():                  按照指定周期来调用函数或计算表达式
SetTimeout():                        在指定的毫秒数后调用函数或计算表达式
清除定时操作:
clearInterval():                清除SetInterval的时间设置
clearTimeout():               清除SetTimeout的时间设置


open():                            打开一个窗口
confirm():                        弹出一个确认窗口
prompt():                         弹出一个可输入的对话框
              一般在删除某一条数据的时候用 confirm
            




History对象的方法:
back()
history.go(-1)/history.back();返回上一个页面
location.href=" "   进行页面跳转
Navigator对象属性:
  • appCoeName    返回浏览器的代码名
  • appMinorVersion  返回浏览器的次级版本
  • appName   返回浏览器的名称
  • appVersion 返回浏览器的平台和信息版本
  • browserLanquage  返回当前浏览器语言
  • cookieEnabled    返回知名浏览器中是否启用cookie的布尔值
  • cpuclass   返回浏览器系统的CPU等级
  • onLine     返回指明系统是否处于脱机模式的布尔值
  • platform  返回运行浏览器的操作系统平台
  • systemLanguage 返回OS使用的默认语言
  • userAgent  返回由客户机发送服务器的user-agent头部值
  • userLanguage 返回OS的自然语言设置

screen对象属性(用来获得屏幕信息):
  • availheight:返回显示屏幕的高度(除Windows任务栏之外)
  • availwidth:返回显示屏幕的宽度(除Windows任务栏之外)
  • bufferDepth:设置或返回调色板的比特深度
  • colorDepth:返回目标设备或缓冲器上的调色板的比特深度
  • deviceXDPI:返回显示屏幕的每英寸水平点数
  • deviceYDPI:返回显示屏幕的每英寸垂直点数
  • fontSmoothingEnabled:返回用户是否在显示控制面板中启用了字体平滑
  • height:返回显示屏的高度
  • loqicalXDPI:返回显示屏幕每英寸的水平方向的常规点数
  • loqicalYDPI:返回显示屏幕每英寸的垂直方向的常规点数
  • pixelDepth:返回显示屏幕的颜色分辨率(比特每像素)
  • updatInterval:设置或返回屏幕的刷新率
  • width:返回显示器屏幕的宽度

History对象方法(浏览器的历史对象):
  •     back():加载history列表中的前一个URL
  • forward():加载history列表中的下一个URL
  • go():加载history列表中的某个具体页面。

Location(包含URL)对象方法属性:
  • hash:设置或返回从井号(#)开始的URI
  • host:设置或返回主机名和当前URL的端口号
  • hostname:设置或返回当前URL的主机名
  • href:设置或返回完整URL
  • pathname:设置或返回当前URL的路径部分
  • port:设置或返回当前URL的端口号
  • protocol:设置或返回当前URL的协议
  • search:设置或返回从问号(?)开始的URL(查询部分)。

JS事件:
  • onload:页面加载
  • onclick :点击事件
  • onsubmit:提交事件
  • onfocus:获得焦点
  • onblur:失去焦点
  • onchange:下拉列表改变事件
  • ondblclick:双击事件

键盘操作事件:
  • onkeydown:某个键盘键被按下
  • onkeyup:   某个键盘键被松开
  • onkeypress:某个键盘键被按下并松开

鼠标操作事件:
  •   onmousemove:鼠标被移动
  • onmouseout: 鼠标从某个元素移开
  • onmouseover:鼠标移动到某个元素之上
  • onmousedown:鼠标按钮被按下
  • onmouseup:鼠标按键被松开

DOM常用操作:
  • 获得元素:

              * document.getElementById();        -- 通过ID获得元素.
              * document.getElementsByName();     -- 通过name属性获得元素.
              * document.getElementsByTagName();  -- 通过标签名获得元素.
  • 创键元素:

     * document.createElement();         -- 创建元素
     * document.createTextNode();        -- 创建文本
  • 添加节点:

* element.appendChild();            -- 在最后添加一个节点.
     * element.insertBefore();           -- 在某个元素之前插入.
  • 删除节点:

                     * element.removeChild();            -- 删除元素        
JS的内置对象(javaScript对象):
  • JS Array
  • JS Boolean
  • JS Date
  • JS Math
  • JS Number
  • JS String
  • JS RegExp
  • JS Function
  • JS Evebts

Array方法:
  • concat():连接连个或更多的数组,并返回结果。
  • join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分割
  • pop():删除并返回数组最后一个元素
  • push():向数组的末尾添加一个或更多元素,并返回新的长度
  • reverse():颠倒数组中元素的顺序
  • shift():删除并返回数组的第一个元素
  • slice():从某个已有的数组返回选定的元素
  • sort():对数组的元素进行排序
  • splice():删除元素,并向数组中添加新的元素
  • toSource():返回该对象的源代码
  • toString():把数组转换成字符串,并返回结果
  • toLocaleString():把数组转换成本地数组,并返回结果
  • unshift():向数组的开头添加一个或更多元素,并返回新的长度。
  • valueOf():返回数组对象的原始值

Boolean方法:
  • toSource():返回该对象的源代码
  • toString():把逻辑值转换为字符串,并返回结果。
  • valueOf():返回Boolean对象的原始值

Date:
  • Date():返回当日的日期和时间
  • getDate():从Date对象返回一个月中的某一天(1~31)
  • getDay():从Date对象返回一周中的某一天(0~6)
  • getMouth():congDate对象返回月份(0~11)
  • getFullYear():从Date对象以四位数字返回年份
  • getYear():用getFullYear()代替
  • getHours():返回Date对象的小时(0~23)
  • getMinutes():返回Date对象的分钟(0~59)
  • getSeconds():返回Date对象的秒数(0~59)
  • getMilliseconds():返回Date对象的毫秒(~999)
  • getTime():返回1970年1月1日至今的毫秒值
  • getTimezoneOffset():返回本地时间与格林威治标准时间(GMT)的分钟差
  • getUTCDate():根据世界时从Date对象返回月中的一天(1~31)
  • getUTCDay():根据世界时从Date对象返回周中的一天(0~6)
  • getUTCMouth():根据世界时从Date对象返回月份(0~11)
  • getUTCFullYear():根据世界时从Date对象返回四位数的年份
  • getUTCHours():根据世界时返回Date对象的小时(0~23)
  • getUTCMinutes():根据世界时返回Date对象的分钟(0~59)
  • getUTCSeconds():根据世界时返回Date对象的秒钟(0~59)
  • getUTCMilliseconds():根据世界时返回Date对象的毫秒(0~999)
  • parse():返回1970年1月1日午夜到指定日期(字符串)的毫秒值

JQuery

概述:

JQuery是一个JS的框架(JS的类库),对传统的JS进行了封装。

1.   JS常用框架:

          JQuery,EXtJS,Prototype....

2.  要用JQuery 第一步必须先引进JQuery的JS文件:

          <script src = "路径“></script>

3.JQuery的入口函数:

        传统的JS方式:页面加载的事件只能执行一次。   

        JQuery 的方式:相当于页面加载的事件,可以执行多次。效率比

  5,JQ显示和隐藏

           show():显示

           hide():隐藏

           slideDown():向下滑动

           slideUp():向上滑动

           fadeIn():淡入

           fadeOut():淡出

           animate():自定义动画

           toggle():单击切换函数

基本选择器:

Ø  id选择器

* 用法:$(“#id”)

Ø  类选择器

* 用法:$(“.类名”)

Ø  元素选择器

* 用法:$(“元素名称”)

Ø  通配符选择器

* 用法:$(“*”)

Ø  并列选择器

* 用法:$(“选择器,选择器,选择器”)

层级选择器:

  • 后代选择器:使用空格    所有后代包含孙子及以下的元素
  • 子元素选择器:使用>第一层的元素(儿子)
  • 下一个元素选择器:使用+     (空格)下一个同辈元素
  • 兄弟元素:使用~     (空格)后面所有同辈元素
基本过滤选择器:

  • first   :获取第一个元素
  • last  :获取最后一个元素
  • not(selector):去除所有与给定选择器匹配的元素
  • even:匹配所有索引值为偶数的元素,从0开始计数
  • odd:匹配所有索引为奇数的元素,从0开始计数
  • eq(index):匹配一个给定索引值的元素
  • gt(index):匹配所有大于给定索引值的元素
  • it(index):匹配所有小于给定索引值的元素
  • header:匹配如h1,h2,h3之类的标题元素
  • animated:匹配所有正在执行动画效果的元素
  • focus:匹配当前获取焦点的元素
内容选择器:

  • contains(text):匹配包含给定文本的元素
  • empty:匹配所有不包含子元素或者文本的空元素
  • has(selector):匹配含有选择器所匹配的元素的元素
  • parent:匹配含有子元素或者文本的元素
属性选择器:

  • [attribute]:匹配包含给定属性的元素
  • [attribute=value]:匹配给定的属性是某个特定的元素
  • [attribute!=value]:匹配所有不含有指定的属性,或者属性不等于特定值的元素
  • [attribute^value]:匹配给定的属性是以某些值开始的元素
  • [attribute$value]:匹配给定的属性是以某些值结尾的元素
  • [attribute*value]:匹配给定的属性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN]:复合属性选择器,需要同时满足多个条件时使用
表单选择器:

  • input:匹配所有 input, textarea, select 和 button 元素
  • text:匹配所有的单行文本框
  • password:匹配所有密码框
  • radio:匹配所有单选按钮
  • checkbox:匹配所有复选框
  • submit:匹配所有提交按钮
  • image:匹配所有图像域
  • reset:匹配所有重置按钮
  • button:匹配所有按钮
  • file:匹配所有文件域
  • hidden:匹配所有不可见元素,或者type为hidden的元素
表单属性选择器:

  • enabled:匹配所有可用元素
  • disabled:匹配所有不可用元素
  • checked:匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
  • selected:匹配所有选中的option元素











0 个回复

您需要登录后才可以回帖 登录 | 加入黑马