[学习交流] 【石家庄校区】Web前端1-5笔记

本帖最后由小石姐姐于 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文件：

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元素

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

[学习交流] 【石家庄校区】Web前端1-5笔记

0 个回复