黑马程序员技术交流社区

标题: 【石家庄校区】JavaWeb阶段day01-day04总结 [打印本页]

作者: Miracle22 时间: 2018-1-17 16:14
标题: 【石家庄校区】JavaWeb阶段day01-day04总结
本帖最后由小石姐姐于 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();          -- 删除元素

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

黑马程序员IT技术论坛 X3.2