本帖最后由 小石姐姐 于 2018-1-18 15:20 编辑
WEB阶段day01-day04笔记
## 第1天 WEB01-HTML篇
【HTML的概述】
什么是HTML
HTML:Hyper Text Markup Language --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
HTML的作用;
HTML是用来制作页面(静态页面).
HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
*【HTML的使用】
HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
* HTML的结构标签*
* 跟标签:<html></html>
* <head> -- html的头标签
* <body> -- html的体标签
【HTML的字体标签】
<font>标签:HTML中的字体标签.
使用：<font>文字</font>
* <font>标签的属性:
* <标签 属性名=”属性值” 属性名=”属性值”></标签>
* 属性:
* color属性:字体颜色
* 英文单词设置:black,red,green,blue...
* 使用16进制数设置:#FFFFFF , #FFF
* size属性:字体的大小
* face属性:字体
* 基本使用：
<font>我是HTML!</font> <br/>
<font color="red">我是HTML！</font><br/>
<font color="#FF0000" size="1">我是小红！</font><br/>
<font color="#00FF00" size="7">我是小绿！</font><br/>
<font color="#0000FF" size="100">我是小蓝！</font><br/>
* HTML的排版标签
标题标签：h标签<h1>...<h6>
<!-- HTML的标题标签 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
段落标签：p标签
字体加粗标签：b标签
<b>黑马训练营</b>
字体斜体标签：i标签
<i>黑马训练营</i>
字体下划线：u标签
<u>黑马训练营</u>
居中标签：<center>标签
<center>内容</center>
## 第2天WEB02-CSS&JS篇
## CSS：
* CSS的概述：层叠样式表.
* 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
* 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
* 行内样式：在html元素上使用style属性设置
* 内部样式：在html中使用<style></style>进行设置
* 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
* CSS的选择器：(****)
* 元素选择器:
* ID选择器：
* 类选择器：
* 后代选择器：
* 子元素选择器：
* CSS的样式：
* 文本
* 背景
* 字体
* 列表
* CSS的盒子模型：
* 内边距：padding
* 边框：border
* 外边距：margin
* CSS的悬浮和定位：
* 悬浮：float属性设置悬浮.
* 清除悬浮：clear属性清除.
* 定位：position属性设置定位.
* 使用left和top属性控制位置.
* display属性：控制元素的显示方式：
* block--显示的, none--隐藏的,inline--显示到一行.
# JS:
* JS的概述：JavaScript运行在浏览器端脚本语言.
* JS的历史：由网景公司研发的.由ECMA组织统一标准:ECMAScript.
* JS的组成：ECMAScript，BOM，DOM.
* JS的语法：
* JS的变量声明:
* JS的数据类型：
* 原始类型：undefined,boolean,string,number,null
* 引用类型：
* JS的运算符：
* 与java中基本一致.有一个 === 类型与值都相同的情况下才会为true.
* JS的语句：
* 与Java中的语句一致.
* 简单的表单校验：
* 正则的校验：使用String的match方法和正则中的test方法.
## 第3天WEB03- JS篇
* JS中的Window对象的定时的操作
* 设置定时的方法
* setInterval() : 按照指定的周期(以毫秒计算)来调用函数或计算表达式.
* setTimeout() : 在指定的毫秒数后调用函数或计算表达式.
* 消除定时的方法
* dearInterval();
* dearTimeout();
* JS的输出
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
* JS的事件
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
* JS的事件的总结：
* onload :
* onclick :
* onsubmit :
* onfocus :
* onblur :
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
## JS中的DOM对象：
# DOM的概述
* 什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
* DOM的使用：
知道document，element，attribute中的属性和方法
* DOM的常用的操作
* 获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
* 创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
* 添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
* 删除节点：
* element.removeChild(); -- 删除元素
## 第4天 WEB04- JQuery篇
* JQuery：
* JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装.
* 常见的JS的框架：
* JQuery，ExtJS，DWR，Prototype...
* JQuery的使用:
* 引入JQuery的JS.
* window.onload和$(document).ready(function(){});区别?
* onload页面加载完成后才会执行.执行一次
* ready在页面的DOM树绘制完成就会执行.执行多次.
* JS对象与JQuery对象的转换.
* JS-->JQuery: $(JS的对象)
* JQuery-->JS: JQ对象.get(0), JQ对象[0]
* JQuery的选择器：(*****)
* 基本选择器：
* ID选择器，类选择器，元素选择器，通配符选择器，选择器并列.
* 层级选择器：
* 空格 ,> ,+ ,~
* 过滤:
* :first,:last,:eq(),:even,:odd...
* 属性选择器:
* [属性名],[属性名=’属性值’]...
* 表单选择器:
* :input,:text,:password,:radio...
* 可见性:
* 表单对象属性：
* :checked,:selected,:enable,:disable
* JQuery实现效果:
* show(),hide(),slideDown(),slideUp(),fadeIn(),fadeOut(),animate()
* JQuery样式操作:
* css();
* JQuery属性操作的方法:
* attr(),removeAttr(),prop(),removeProp(),html(),text(),val(),addClass(),removeClass()
* JQuery文档处理:
* append(),appendTo(),insertBefore(),insertAfter(),remove(),clone(),replaceAll()
* JQuery的事件:
* click(),change(),submit(),dblclick(),keyUp(),keyDown()...
* toggler(),hover() ---进行事件的切换.
|
|
收藏
淘帖
踩
