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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

龙飞520

初级黑马

  • 黑马币:22

  • 帖子:5

  • 精华:0

© 龙飞520 初级黑马   /  2017-11-19 10:28  /  810 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 2017-11-20 14:44 编辑

WEB1
HTML:  Hyper Text Markup Language 超文本标记语言;  不区分大小写
        标签语言:通过一组标签的形式描述事物的一门语言;
        超文本:比普通的文本更强大;
        
  1.作用:制作页面(静态页面);
     使用地方:做网页页面

  2.使用:
        HTML扩展名是.html或者.htm结尾
        
  3.结构:
    根标签<html></html>
                <html>
                        <head>头部</head>
                                <title>标题</title>
                        <body>身体</body>
                </html>
        
    4.HTML字体标签:
                <font>:字体标签
                <font></font>
                        font属性: <标签 属性名="属性值" 属性名="属性值"></标签>
                                属性:color属性:字体颜色
                                        英文单词设置:bleak,read,green
                                        使用16进制
                        <br/>换行标签
                        fice属性:字体
                        size属性:字体大小
                        
        5.排版标签:
                <h标题级别>:标题标签   <h1>一级标签</h1>
                <p>:段落标签
                <b>:字体加粗标签
                <i>:斜体标签
                <u>:下划线
                <hr>:横线
                <cunter>:居中标签(已过时)
                标签的嵌套:<b><i></i></b>合理嵌套
                <pre>原生标签,
               
*        6.图片标签:<img>
                属性:1.src: 图片的来源,路径(相对路径)
                                路径:
                                        在当前目录:直接文件名或./文件名
                                        上级目录:../文件名
                                        上两级目录:../../文件名   以此类推
                                        下级目录:上级文件夹/文件名
                                
                     2.width:宽度,默认px(像素点)
                         3.height:图片的高度
                         4.alt:图片找不到时显示的内容
               
*        7.列表标签:
                有序列表:
                        <ol>
                                <li>显示内容</li>
                        </ol>
                        属性:type
                                start:从几开始
                        
                无序列表:
                        <ul>
                                <li>显示内容</li>
                        </ul>
                        
                        <ul style="list-style:none">去除圆点
                        <ul>属性:disc实心点
                                        circle空心圆
                                        square方块
                                       
               
        8.超链接标签:<a>
                属性:
                        href:超链接,要跳转到的路径
                                相对路径:当前页面与跳转页面的相对路径
                        target:打开方式
                                _self:自身页面打开,默认的方式
                                _blank:在新窗口打开
                                _parent
               
*        9.表格标签:<table>
                <tr>行
                <tr>
                        <td><td>第一列
                        <td><td>第二列
                </tr>
               
                表格属性:
                        Width:宽度
                        Height:高度
                        Cender:
                        border:边框
                        align:表格水平位置
                        background:背景图片
                        
                <td>的属性
                        colspan:"列数"
                        rowspan:"行数"
               
***        10.表单标签:<form>
                属性:
                        action:提交的路径,默认提交到当前列面
                        method:请求的方式,默认的get
                                get方式和post的区别:
                                        get:数据会显示到地址栏中,提交有大小限制,
                                        post:数据不会显示到地址栏中,提交没有大小限制
                表单元素:
                        <input type="text">:文本框
                                常用属性:
                                        name:表单元素的名称,必须有name属性,后台才能接收数据
                                        value:文本框默认值
                                        size:文本框的长度
                                        maxlength:文本框最大输入长度
                                        readonly:只读文本框
                                        placeholder:提示
                        <input type="password">密码框
                                常用属性:
                                        name:表单元素的名称,必须有name属性,后台才能接收数据
                                        value:密码框文本框默认值
                                        size:密码框的长度
                                        maxlength:密码框最大输入长度
                        <input type="radio">单选按钮
                                常用属性:
                                        name:表单元素的名称,必须有name属性,后台才能接收数据,一组的name值相同
                                        value:单选框文本框默认值,必须有,否则后台接受不到,一组的name值相同,与外面定义值一样
                                        checked:单选按钮默认被选中.
                                       
                        <input type="CheckBox">复选按钮
                                常用属性:
                                        name:复单元素的名称,必须有name属性,后台才能接收数据
                                        value:复选框文本框默认值,必须有,否则后台接受不到,一组的name值相同,与外面定义值一样
                                        checked:复选按钮默认被选中.
                                       
                        <input type="button">普通按钮,没有功能,可以设置功能
                        <input type="submit">提交按钮
                        <input type="file">文件上传的表单项
                        <input type="hidden">隐藏字段
                        <input type="image">图片按钮
                        <input type="reset">重置按钮
                        <select> 下拉列表
                                常用属性:
                                        option:下拉区域选项,必须有value值
                                        selected:默认选中
                        <textarea>文本框
                                常用属性:
                                        cols : 文本占的行数
                                        rows : 文本占的列数
                11.html5特有的功能,但不是所有的浏览器都支持
                        <input type="email">只能输入数字
                        <input type="date">
                        <input type="number">
                        
                快速建表table> br*n >td*n  n为数字,再按Tab键
               
               
               
               
WEB2        
               
                HTML   开源中国  网页字体最小是12px,一般取偶不取奇
1.常用标签 <div> <span> <ul> <a> <i>
框架标签:<frameset>,标签与body冲突,不能同时使用
                属性:
                        rows:行
                        cols:列

                (截图)

特殊字符标签:
                空格:
                <   :<
                >         :>
        常用标签:
                <div>块标签:块级元素,写两行自动换行,不独占一行,可以修改高度和长度
                                更加灵活并且解析加载速度快
                <span>块标签:行内元素,默认同一行,不可以修改修改高度和长度
                块级元素转行内元素添加属性display:inline;
                行内元素转块级元素添加属性display:block;
                行内块级元素:不独立占一行,并且可以修改高度和宽度 img display:inline-block;
               
                (截图)
               
                <ul>无序列表 :有默认边框,需要手动清除,用margin:0;

                (截图)
                <a>超链接
                <i>倾斜,也可能是做个图片
               
                div居中:
                        margin: 0 auto;
                        calc(% - px) div的百分比与px的计算,注意减号两边必须有空格
               

CSS:层叠样式表,任何网站都可以用CSS
                (截图)

        语法:包含两个部分,一个选择器,一个声明
                选择器{属性:属性值;属性:属性值...}

        行内样式:
直接在HTML的元素上使用style属性设置CSS,优先行内模式(只有一个标签使用一个样式)        

        页面样式:
在HTML的<head>内使用<style>标题设置CSS.再则页面模式(同一个HTML文件中使用同一
个样式)

        CSS的引入方式;创建CSS文件,再html中引入该CSS文件(多个HTML文件使用同一个样式)

                (截图)



浮动:
float        为了让某些标签横着显示
                (截图)

清空浮动
                                       

                (截图)



                在CSS中宽度可以继承,高度不可以继承
                        注意:浮动后的宽度不可以继承宽度,已经脱离HTML
                        
                alt shift+a:同时操作多行代码        
               
css选择器:

                元素(标签)选择器:通过元素找到所有要改的元素
                        border:四周都包含
                        border 下(英文):只包含下面
                (截图)
                ID选择器:
                        #id值

                (截图)

类选择器:
                        .divClass
                (截图)
               

属性选择器: 标签名[属性名='属性值']{}
                (截图)
               

后代(子孙)选择器: div a{}
                        div  spad查找的是所有div中的所有的span元素

                (截图)

子元素选择器: div > a{}               

        (截图)
并列选择器:        
选择器,选择器{
}
CSS样式               
        背景:
        (截图)
文本:
        (截图)

        字体:

        (截图)

        

style:字体(斜体/加粗/正常)    weight:粗细   size:大小   family:艺术字
列表:

        (截图)

        
盒模型:


        (截图)


                css 的内边距(盒子与泡沫的距离):padding
                        (截图)
宽度计算方式 padding-left + padding-right + border-left + border-right + content;
                        (截图)

                css 的外边距(盒子与盒子之间距离):marin
                        (截图)
             margin-left   与左边框的距离
                        (截图)
css边框:border : 1px solid black;
                css 定位:
                        position属性设置定位
                                relative;相对定位
                                absolute:绝对定位,相对于body
                                使用时只需记住:子绝父相
                        (截图)


        超链接的伪类:顺序不能乱
        
        
        
        WEB3
                (截图)
        JavaScript是运行在浏览器的脚本语言
        (截图)
用途:页面更丰富,是页面动起来
语法:
1.区分大小写
2.弱变量类语言:(与java不同,变量全部用var,没有具体类型,根据 = 后面的值确定类型)
变量名:局部变量(定义在方法内部的变量)我们以_开头

3.分号可有可无(建议加,增强阅读性)
4.变量的命名要合法(与Java类似)
数据类型:
原始类型:
undefined:未定义赋值
boolean:布尔类型
number:数字类型
string:字符或字符串
null:空
引用类型:
对象类型:默认值是null
        (截图)
运算符:
        (截图)
语句:
跟Java的语句一致!
方法:
        (截图)
        (截图)

JS的通常开发步骤
1.由一个事件触发
2.触发一个函数,定义一个函数
3.获得操作对对象的控制权
4.修改要操作的对象的属性或值

常用事件:onclick 单击
ondblclick 双击
onmouseenter  鼠标悬停
onmouseleave(鼠标离开)                                                                                                                                 
onsubmit(提交事件)
onload :在HTML文本加载完毕后请求图片资源,图片请求回来之后才执行onload事件
JS的引入方式:
1.页面内直接编写JS代码,JS代码需要使用
        (截图)
2.
        (截图)


onsubmit(提交事件):必须有返回值否则默认true
        (截图)
JS校验正则表达式:
        (截图)
!!""  :判断字符串是否为空
空值: 0 , null , underfimed
        (截图)

HTML 的window对象
setInterval(): 每隔多少毫秒
()内""为JS代码
设置定时:
        (截图)
清除定时:
        (截图)
轮播图的实现:
        (截图)

使用js实现广告的定时弹出定时隐藏
        (截图)


站位的意思是后面的元素不向前移
position: fixed:不管浏览器滚动条怎么动,始终悬浮不动的属性,定位符
        (截图)
小手:
        (截图)

默认选中:
        (截图)

JS单词汇总:

        (截图)



web4

想要深入研究可看:javaS...权威指南
        (截图)
JS事件:
onfocus:获得焦点
onblur:失去焦点
onsubmit:提交的时候
onchange:下拉列表的改变事件
ondblclick:双击某个元素的事件
on

        (截图)
--------------------------------------------------------------------------------

        (截图)
        (截图)
        (截图)
        (截图)
        (截图)
thead:table表格的头
tbody:table表格的身
        (截图)
        (截图)
--------------------------------------------------------------------------------
表格的复选框的全选,全不选效果

        (截图)
        (截图)
--------------------------------------------------------------------------------
DOM
        (截图)
整个树状结构HTML文档  称之为document
文本用Text表示
         (截图)
        (截图)

        (截图)
DOM的使用:
知道document. element. attribute 中的属性方法

        (截图)
--------------------------------------------------------------------------------
省市联动
        (截图)


        (截图)


Date属性:
避免本地缓存,接收浏览器最新数据;
        (截图)
把字符串转int  float
        (截图)
编码和解码
        (截图)
evel函数
        (截图)
NaN == NaN  结果为float  唯一自己不等于自己的变量;
用isNaN() 判断是否为NaN
        (截图)
维数组:JS里所有对象都是维数组

        (截图)
红框向下top,绿框也会向下走,需要加pssotion:absolute
        (截图)
事件冒泡:
event 那一行代码是去除事件冒泡
        (截图)


WEB5

没有技术实现不了的东西,只要你给我充足的时间
window.onload  与  JQuery方式  的区别
(截图)
JS 与 JQuery 获取对象演示:
(截图)
将JQuery对象转JS对象(与上图相接):
(截图)
将JS对象转JQuery对象(与上图相接):
(截图)

JQuery的入口函数: DOM树加载完之后就加载
(截图)
JQuery与window.onload的加载顺序( 下图从左到右)
(截图)
JQuery对象,实际上是一个DOM,我们操作JQuery对象,实际上是操作里面的每一个元素,只有被$()包裹起来的才是JQ对象

(截图)



可以当数组用,也可以当集合用
(截图)

JQ 的现实和隐藏
slow(慢显示),normal(一般速度显示),fast(快显示)
show(传入毫秒值)  X秒钟慢慢的显示    (执行过程)
(截图)
了解:(截图)

了解:(截图)


使用JQUERY完成定时弹广告

(截图)






动画:   $()里的内容用 , 隔开(例width , heigth)
(截图)
opacity:透明度
(截图)

单线程 与 异步线程
setTimeout 为异步线程  执行时先放异步线程池里,先执行下一个语句,大约一秒钟后再执行setTimeout里内容
                                单线程是等setTimeout 内容显示完后在执行下一条语句
(截图)

JQuery中事件名没有on
JQ基本选择器:()
● 基本选择器
      ○ id选择器
          ■ 用法 $("#id")
      ○ 类选择器
          ■ 用法 $(".类名")
      ○ 元素选择器
          ■ 用法 $("元素名称")
      ○ 通配符选择器
          ■ 用法 $(" * ")
      ○ 并列选择器
          ■ 用法 $("选择器, 选择器, 选择器")


层级选择器:


(截图)

基本过滤选择器:
***  :eq()  选取  (前面不加空格 )   
:even 偶数选择器
:odd 奇数选择器


(截图)

属性选择器:
input[ type=[ ' ' ]

(截图)
表单选择器:
:input表单
:text文本
:checked选中
(截图)
快速建表:

(截图)

--------------------------------------------------------------------------------

隔行换色

没有设置背景色时可以用CSS设置背景色,已经设置好背景色要用选择器修改

(截图)
***    为表格绑定一个事件格式

(截图)
--------------------------------------------------------------------------------
使用JS 完成复选框全选全不选

*****开发只用on方式
$(function(){
                                $("#selectAll").on('click',function(){  //为id选择器选中的对象添加个事件,function     1                                                                                        里为处理函数
                                        var _this = $(this);   //把DOM对象转为JQ对象
                                        $("input[name='chick']").prop('checked',_this.prop('checked'));   //通过表2 2                                                                         单选择器获取所有name为chick对象,利用prop修改值
                                })
                        })
name一致是因为定义同一个复选框

prop:非自定义属性
attr:自定义属性

(截图)
--------------------------------------------------------------------------------
利用JQ完成省市联动
JQ中DOM操作:
append():添加内容  (当append添加已有元素时,append就变成移动)
html():覆盖内容
remove:删除元素
(截图)
A.append(B)  =   B.appendTo(A)  可以互换
(截图)
遍历:
$().each(function(index,element){
//遍历内容
};     //index为索引,element为DOM对象

(截图)
省市联动:
(截图)



事件委派(给动态的对象添加事件):
(截图)
attr:自定义
val:只是val值
prop:所有软件定义值



WEB6


代码:
(截图)

(截图)

--------------------------------------------------------------------------------
JQ事件切换(晚补图)
JQ事件切换:
toggle(): 单击事件切换
hover(): 鼠标悬停切换
(截图)
--------------------------------------------------------------------------------
***JQ表单校验
事件查找:
find():里面传选择器
parent():
children():

(截图)
事件处理:

trigger:调用别的事件
了解:triggerHandler(type,[data]) 与 trigger 区别:
trigger:支持事件冒泡调用完后会触发默认
(截图)


$('button').trigger('click') == $('button').('click')

步骤分析:

(截图)

步骤1
(截图)
步骤2
(截图)

--------------------------------------------------------------------------------
Bootstrap

为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。
(截图)
引入:
(截图)
Bootstrap的全局CSS


(截图)


栅格系统
(截图)
td{
                cursor:pointer;
}
指针变小手
JQ全选全不选

2 个回复

倒序浏览
你这有瑕疵啊?截图...{:8_469:}
回复 使用道具 举报
总结确实很仔细,如果把截图都加上那就更好了
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马