黑马程序员技术交流社区

标题: [石家庄校区]web阶段笔记 [打印本页]
作者: 韶华白首zy    时间: 2018-5-3 15:39
标题: [石家庄校区]web阶段笔记
本帖最后由 小石姐姐 于 2018-5-4 09:46 编辑

                                                      web阶段学习笔记                                                                      

                                                                                                                   HTML A:HTML的概述：
    HTML：Hyper Text Markup Language.
    HTML就是由一组标签所组成的.
B:HTML的字体标签:
     <font>标签:
       属性：color,size,face
C:HTML的排版标签:
    h标签：标题标签.
     p标签：段落标签.
     b标签：加粗标签.
     i标签：斜体标签.
     u标签：下划线标签.
     br标签：换行.
     hr标签：水平线.
D: HTML的图片标签:
     img标签:
         属性:
             src属性:图片的路径.
             相对路径:  ./ 代表当前目录   ../上一级目录   
             width,height,alt.
E:HTML的超链接标签:
     a标签:
        属性：
             href:链接的路径.
             target:链接打开的方式. _self,_blank,_parent
F:HTML的列表标签:
   　 无序列表:<ul>(只是没有前标并不是乱排序)
      有序列表:<ol>
G: HTML的表格标签：
      table标签:
          tr标签：表格的行.
          td标签：表格的列.
H: HTML的表单标签：(重点掌握)
      form标签：
          action属性：表单提交的路径
          method属性：表单的提交的方式.
              GET和POST：
                  GET：地址栏上会显示提交的数据的信息,大小限制.
                  POST：地址栏不会显示提交的数据的信息,没有大小限制.
I: <input>
         type=”text”:文本框
         type=”password”:密码框.
         type=”radio”:单选按钮.
         type=”checkbox”:复选框.
         type=”file”:文件上传.
         type=”hidden”:隐藏字段.
         type=”submit”：提交按钮.
         type=”reset”:重置按钮.
         type=”button”:普通按钮.
         type=”image”:图片按钮.
J: <select>:下拉列表.
K: <textarea>:文本区
L: HTML的框架标签:
         <frameset>
         <frame>
CSS
A 概述
Css就是层叠样式表,使用来美化页面的
B 基本语法
选择器{属性:属性值,属性:属性值};    属性:属性值(叫做声明)
C 引入的样式
行内引入:直接在HTML的元素上使用style属性设置CSS
页面引入:<head>标签使用style属性设置CSS
外部引用:单独定一个.css的文件.在HTML中引入该CSS文件
             <link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
D选择器
  元素选择器
   类选择器
   Id选择器
E浮动
使用float属性就可以完成浮动
可以使用clear就可以清除浮动
F:CSS的样式
背景:background
文本:text.....
字体:font
列表:list
G盒子模型
     内边距：padding
     边框：border
     外边距：margin
     定位:position属性设置定位：
         relative:相对定位
         absolute:绝对定位
         使用另外两个属性:left,top
JScript
A概述
      是运行在浏览器端的脚本语言
B:JS的组成
      ECMAScript，BOM，DOM
C语法ECMAScript
      (1)Js是弱变量型语言.变量的种类是根据等号另一边的数据类型来确定的.var=xx
      (2)数据类型
          原始类型：
          undefined：未定义类型
          boolean:布尔类型
          number:数字类型
          string:字符或字符串.
       (3)运算符:  ===全等  只有数据类型和数据值完全相同才为true
       (4)语法:和java差不多
       (5)开发的步骤: 定义一个事件,当时间触发时会触发一个函数,然后由函数来改变原                                             来的值
                     Function(){
                               函数体};
       (6)js的引入方法:
              页面内直接编写<script></script>
              在外部编写然后倒入HTML文件
D:BOM
      页面的对象
      (1)window:
alert();                --弹出对话框
setInterval();
setTimeout();
clearInterval();
clearTimeout();
confirm();        --弹出一个确认窗口
prompt();                --弹出一个可输入的对话框
open();                --打开一个新窗口
      (2)Navigator ：包含的是浏览器的信息.
      (3)Screen:用来获得屏幕信息:
      (4)History:浏览器的历史对象:back()返回上一页面
      (5)Location:包含URL信息的对象
E:DOM
     文档对象模型,将一个HTML文档加载到内存形成一个树形结构,从而操作树形结构就  可以改变HTML文档
     (1)常用的操作
           获得元素：
document.getElementById();                -- 通过ID获得元素.
document.getElementsByName();                -- 通过name属性获得元素.
document.getElementsByTagName();        -- 通过标签名获得元素.
            创建元素：
document.createElement();                        -- 创建元素
document.createTextNode();                -- 创建文本
            添加节点：
element.appendChild();                        -- 在最后添加一个节点.
element.insertBefore();                        -- 在某个元素之前插入.
            删除节点：
element.removeChild();                        -- 删除元素
F:JS的常用事件
* onload        :页面加载
* onclick        :单击
* onsubmit        :提交表单
* onfocus        :获得焦点
* onblur        :失去焦点
* onchange        :下拉列表改变事件.
* ondblclick:双击某个元素的事件.

键盘操作事件:
* onkeydown        :按下键盘
* onkeyup        :按键向上
* onkeypress:

鼠标操作事件：
* onmousemove：鼠标移动
* onmouseout：鼠标离开
* onmouseover：鼠标悬停
* onmousedown
* onmouseup


                  
   

      
JQuery
A 概述
      是js的框架  对传统js进行封装,大大简化了前端的开发,提高了效率
B 使用
      (1)首先要引入jq的js文件
          <script src="../../js/jquery-1.11.3.min.js"></script>  
      (2)写入口函数
          $(function (){})
C注意事项
       JQ可以进行多次的操作,效率比较高
       JQ是等页面的DOM树绘制完成后执行
       $就相当于JQuery
D JS对象和JQ对象的互相转换
       $(JS对象)  //JS转化为JQ对象
       $对象名[0]     $.get(0)
E  JQ的效果操作
     Show();
       使用一:JQ对象.show()
       使用二:JQ对象.show(“slow”);缓慢的  还可以填fast ;normal
       使用三:JQ对象.show(毫秒值);
       使用四:JQ对象.show(毫秒值,function(){});
hide();
slideDown();        向下滑动
slideUp();         向上滑动
fadeIn();                淡入
fadeOut();        淡出
animate();        自定义动画
toggle();                单击切换函数
F 选择器
     id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
G 层级选择器
       后代选择器：使用空格        所有后代包含孙子及以下的元素
       子元素选择器：使用>        第一层的元素（儿子）
下一个元素:使用+                下一个同辈元素
兄弟元素:使用~                后面所有的同辈元素
H 基本过滤选择器
      First  第一次出现
      Last 最后一次出现
      Odd  奇数
      Even 偶数
I内容选择器
       Contains(text)  匹配包含指定文本的元素
       Empty         匹配所有不包含子元素或者文本的空元素
       Has(selector)    匹配含有选择器所匹配的元素的元素
       Parent         匹配患有子元素或者文本的元素
J属性选择器
K表单选择器
        Input
        Text
Password
Radio
Checkbox
Submit
Image
Reset
Button
File
Hidden
L  JQ对属性的操作方法
        prop();新版本的方法.
          使用方法一：$(“”).prop(“src”);
          使用方法二：$(“”).prop(“src”,”test.jpg”);
          使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
removeProp();
addClass()
removeClass();
M  JQ的DOM操作
        常用的方法:
              append();                        ---在某个元素后添加内容.        
              appendTO();                ---将某个元素添加到另一个元素后.
              remove();                        ---将某个元素移除.
N  JQ的遍历
      遍历的方式一：
   * $.each(objects,function(i,n){
    });
      遍历的方式二:
* $(“”).each(function(i,n){

});


BootStrap
A概述
      是来自Twitter的前端框架,是基于html,js,css的.利用它可以设计出响应式页面.就是在不同的设备上页面也可以完好的加载
B使用
      先要引入文件,添加一个meta标签
C栅格系统
     BootStrap提供了一套响应式,移动设备优先的流式栅格系统,随着系统屏幕大小的增加,他会自动变化成最多有12列存在
     格式:定义列
          Col-lg-n最大宽度
          Col-md-n中等屏幕
          Col-sm-n小屏幕
          Col-xs-n超小屏幕

        





作者: cyahua    时间: 2018-5-9 15:34
给力呀大兄弟,66666
作者: 韶华白首zy    时间: 2018-5-9 15:35
非常6666666666



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2