本帖最后由 小石姐姐 于 2018-1-18 15:22 编辑
JavaWeb阶段day01-day04总结
## Day01##
1. HTML的定义
* Hyper Text Markup Language --- 超文本标记语言.
* 标记语言：指的是通过一组标签的形式描述事物的一门语言.
* 超文本：比普通的文本更强大.
2. HTML的作用
* HTML是用来制作页面(静态页面).
3. HTML的结构标签
* 跟标签:
<html></html>
<head> -- html的头标签
<body> -- html的体标签
4. HTML的字体标签
* <font>标签:HTML中的字体标签.
* 使用：<font>文字</font>
5. HTML的排版标签
* 标题标签：h标签 <h1>...<h6>
* 段落标签：p标签 <p>文本</p>
* 字体加粗标签：b标签 <b>文本</b>
* 字体斜体标签：i标签 <i>文本</i>
* 字体下划线：u标签 <u>文本</u>
* 居中标签：center标签 <center>文本</center>
6. HTML的图片标签
* 图片标签:<img>
* 属性:
* src :图片的来源. 掌握路径寻找方式
* width :图片的宽度.
* height:图片的高度.
* alt :图片找不到显示的内容.
* 图片的引入的路径问题:
* 路径：相对路径.
* 如果引入的图片和html文件在同一级路径。
* 直接写文件名或者./文件名
<img src="cs10006.jpg" />
<img src="./cs10006.jpg" />
* 如果引入的图片在html文件的上一级路径。
* <img src="../cs10006.jpg" />
* 如果引入的图片在html文件的下一级路径。
* <img src="img/cs10006.jpg" />
7. HTML的列表标签
* 有序列表
<ol>
<li></li>
</ol>
* 无序列表
<ul>
<li></li>
</ul>
8. HTML的超链接标签
* HTML的超链接标签：<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
9. 无序列表的属性
* type属性
* disc ：实心点.
* circle ：空心圆
* square ：方块.
有序列表的属性:
* type属性:
* 1：数字类型
* a：英文类型
* i：罗马字符
* start属性:从哪开始
超链接的target属性:
* _self
* _blank
* _parent
10. HTML的表格标签<table>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
* 属性:
* width :表格宽度
* height :表格高度
* border :边框
* align :表格水平位置:
* left
* center
* right
<td>的属性:
* colspan=”列数”
* rowspan=”行数”
11. HTML的表单标签
* HTML的表单标签：<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
* GET方式和POST方式的区别?
* GET:数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST:数据不会显示到地址栏中.POST方式提交的是没有大小限制.
12. HTML中表单元素：
* <input type=”text”>:文本框.
* 常用属性:
* name:表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value:文本框的默认值.
* size:文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”>:密码框.
* 常用属性:
* name:表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value:密码框的默认值.
* size:密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”>:单选按钮.
* 常用的属性:
* name:表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value:单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name:表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”>:普通按钮.没有任何功能的按钮.
* <input type=”submit”>:提交按钮.
* <input type=”reset”>:重置按钮.
* <input type=”file”>:文件上传的表单项.
* <input type=”hidden”>:隐藏字段.
* <input type=”image”>:图片按钮
* <select>:下拉列表.
* <textarea>:文本域.
13. HTML5扩展的表单标签
* <input type=”email”>
* <input type=”date”>
* <input type=”number”>
* <input type=”color”>
## Day02##
1. HTML的框架标签
框架标签:<frameset>,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签，frame代表切分的每个部分.
2. 特殊字符的标签
空格 :
< :<
> :>
3. HTML的块标签
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
4. CSS的定义
CSS:层叠样式表
HTML相当于网站的骨架~CSS对骨架进行美化~
5. CSS的基本语法
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
* 选择器{属性:属性值;属性:属性值...}
6. CSS的引入的方式
* 行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="属性">标题</h1>
* 页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>h1{属性}</style>
* 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="#" rel="stylesheet" type="text/css" />
7. CSS的选择器
* 元素选择器：
div{
属性
}
* ID选择器:
#d1{
属性
}
* 类选择器：
.divClass{
属性
}
8. CSS的浮动
使用float属性可以完成DIV的浮动.
float属性的取值:left,right,none,inherit
清除浮动效果：使用clear属性进行清除:left,right,none,inherit,both
9. CSS的其他选择器
属性选择器;
后代选择器;
子元素选择器;
并列选择器
10. CSS中的盒子模型
内边距：padding
边框：border
外边距：margin
11. CSS中的定位
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
12. 超链接的伪类
a:link
a:visited
a:hover
a:active
## Day03##
1. JavaScript的定义
运行在浏览器端的脚本语言
2. JavaScript的组成
ECMAScript：JavaScript的基本的语法
BOM：Browser Object Model
DOM：Document Object Model
3. JS的数据类型
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
4. JS的运算符
JS中的运算符与Java中基本一致！
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
5. JS的通常开发的步骤
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
6. JS的引入方式
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用<script></script>.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
7. 正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
## Day04##
1. HTML的window对象
* setInterval(); :每隔多少毫秒执行某个表达式.
* setInterval(“change()”,1000);
* setTimeout(); :隔多少毫秒执行一个该表达式.
* setTimeout(“change()”,1000);
2. JS中的Window对象的定时的操作
setInterval;
setTimeout;
clearInterval;
clearTimeout;
3. CSS的显示和隐藏的属性
display
* block：显示元素：
* none：隐藏元素：
4. JS中的BOM对象
Browser对象:Window,Navigator,Screen,History,Location
Window:
* alert(); --弹出对话框
* setInterval();
* setTimeout();
* clearInterval();
* clearTimeout();
* confirm(); --弹出一个确认窗口
* prompt(); --弹出一个可输入的对话框
* open(); --打开一个新窗口
Navigator ：包含的是浏览器的信息.
Screen:用来获得屏幕信息.
History:浏览器的历史对象.
Location:包含URL信息的对象
5. JS的事件
* onload
* onclick
* onsubmit
* onfocus
* onblur
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown
* onkeyup
* onkeypress
鼠标操作事件：
* onmousemove
* onmouseout
* onmouseover
* onmousedown
* onmouseup
6. JS中的DOM对象
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用：
document，element，attribute中的属性和方法的了解
7. DOM的常用的操作
获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
删除节点：
* element.removeChild(); -- 删除元素
|
|
收藏
淘帖
踩
