请注意，本文编写于 1561 天前，最后修改于 1558 天前，其中某些信息可能已经过时。

Day01

课程介绍

![1. web前端（学习如何开发页面）

MySQL数据库（学习如何对数据进行增删改查操作）
Servlet（学习如何获取客户端请求以及如何对该请求作出响应）][1]

安装HBuilderX

从doc.canglaoshi.org网站中找到常用下载->windows->HBuilder X
或从官网下载https://www.dcloud.io/hbuilderx.html
下载后解压到某个可以找得到的地方双击运行HBuilderX.exe
第一次关闭提示是否创建快捷方式点击是
Ctrl+M 显示项目管理器在左侧空白区域右键->新建->项目
在项目上右键新建目录day01

web前端

HTML（学习如何搭建页面结构和内容）举例：盖房子（毛坯房）
CSS （学习如何美化页面）举例：装修
JavaScript（学习如何给页面添加动态效果）
jQuery框架（简化原生JavaScript）
Bootstrap框架（综合的前端框架，简化前端开发）

HTML

Hyper Text Markup Language: 超文本标记语言
超文本：不仅仅是纯文本还包括：字体效果（大小，颜色，风格等）和多媒体信息（图片、音频、视频）
标记语言：由一对尖括号组成，有单标签<abc> 和双标签<xyz aaa='bbb'>xxx</xyz>
```
双标签之间的内容成为标签体,写在开始标签里面的键值对称为属性  
```
和XML不同点： XML是可扩展标记语言，标签可以随意写没有任何规范
学习HTML主要学习的就是有哪些HTML标签以及标签和标签之间的嵌套关系

创建第一个HTML页面

页面结构：

<!DOCTYPE html> 文档声明：告诉浏览器使用html的哪个版本的标准解析页面，此写法是告诉浏览器使用html5的标准解析页面
    <html> 根标签： 页面中级别最高的标签
        <head> 头标签：给浏览器看的内容写在头标签里面 
            <meta charset="utf-8"> 告诉浏览器页面内容使用的字符集是utf-8
            <title></title>页面标题
        </head>
        <body> 体标签：给用户看的内容写在体标签里面
        </body>
    </html>

写完html后如何测试

在HBuilder窗口右上角点击预览第一次点击会提示是否下载点击是，如果下载失败重试几次
在HBuilder菜单栏中点击运行-》运行到浏览器-》Chrome （前提是已经安装了Chorme浏览器）
```
从苍老师文档服务器中 找到 Chrome浏览器 下载
```

写在body中的常见标签有哪些？

注释快捷键 Ctrl+Shift+/

文本相关标签

内容标题h1-h6

字体加粗，独占一行，自带上下行间距

段落标签p
```
独占一行，自带上下行间距
```
水平分割线hr
换行br 在html中回车只能识别成一个空格如果需要换行使用br标签
加粗b 斜体i 小字small
删除线s 下划线u

列表标签

无序列表

<ul type="square"><!-- unordered list -->
            <li>刘备</li><!-- list item列表项 -->
            <li>关羽</li>
            <li>孙尚香</li>
            <li>诸葛亮</li>
            <li>刘禅</li>
</ul>

效果:

刘备
关羽
孙尚香
诸葛亮
刘禅

有序列表

<ol type="1" start="10" reversed="reversed"> 
          <li>打开冰箱门</li> 
          <li>把大象装进去</li>
          <li>关上冰箱门</li>
</ol>

效果：

打开冰箱门
把大象装进去
关上冰箱门

列表嵌套：有序和无序可以任意无限嵌套

图片标签img

支持的图片格式： jpg/jpeg, png, gif
src图片路径：
相对路径：访问站内资源时使用
1. 和页面同级目录：直接写图片名
2. 在页面的上级： ../图片名
3. 在页面的下级：文件夹名/图片名
  绝对路径：访问站外资源时使用，访问站外资源又称为图片盗链（好处：可以节省本站资源，坏处：有可能会找不到图片）
width/height:设置图片的宽高
两种赋值方式:1. 像素 2. 上级元素的百分比
如果只设置宽度,高度会等比例缩放
title: 鼠标在图片上悬停时显示的文本
alt: 图片不能正常显示时显示的文本

超链接a

href: 资源路径, 使用方式类似src,支持相对路径和绝对路径, 如果访问的资源浏览器支持浏览则直接浏览如果浏览器不支持浏览则触发下载
图片超链接: 用a标签包裹图片就是图片超链接
页面内部跳转: 在目的地标签里面添加id="xxx", 在点击的超链接中href="#xxx" 即可跳转到页面中id为xxx的元素位置

表格table

标签: table tr表示行 td表示列 th表头(加粗并且居中) caption表格标题
属性: table:border边框 cellspacing单元格间距 cellpadding单元格距内容的距离 td:colspan跨列rowspan跨行

表单form

作用:用于获取用户输入的信息,并且将信息提交到服务器
学习表单就是学习表单中有哪些控件

HBuilder快捷键

格式化: Ctrl+Shift+f 前提需要把搜狗输入法的繁简切换快捷键去掉
显示项目管理器: Ctrl+M
代码注释: Ctrl+Shift+/
复制整行: Ctrl+insert

Day02

表单form

作用:用于获取用户输入的信息,并且将信息提交到服务器
学习表单就是学习表单中有哪些控件
文本框

<input type="text" name="username" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >

密码框

  <input type="password" name="pwd" value="xxx" maxLength="5" readonly="readonly" placeholder="xxxx" >

单选

  <input id="xxx" type="radio" name="xxx" value="xx" checked="checked">
      <label for="xxx">xxxx</label>

多选

  <input id="xxx" type="checkbox" name="xxx" value="xx" checked="checked">

日期

  <input type="date" name="xxx">

文件

  <input type="file" name="xxxx">

文本域

<textarea name="xxx" cols="20" rows="5" placeholder="xxxx"></textarea>

下拉选 city=bj

  <select name="city">
          <option value="bj">北京</option>
          <option>xxxx</option>
          <option>xxxx</option>
      </select>

分区标签

分区标签可以理解成是一个容器,对多个有相关性的标签进行统一管理
常见的分区标签div和span
1. div:块级分区元素, 特点:独占一行
2. span:行内分区元素,特点:共占一行
如何对页面内容进行分区?
一个页面至少分为三大区: 头体脚, 每个大区内再细分n个小的区域

<div>头</div>
<div>体</div>
<div>脚</div>

html5标准中新增了分区标签,作用和div是一样的主要是为了提高代码的可读性,包括: header头 footer脚 article正文 nav导航 section区域

<header></header>
<article></article>
或
<section></section>
<footer></footer>

实体引用(类似特殊字符)

空格: 如果html页面中连续出现多个空格,只能识别出一个,这个现象称为空格折叠现象. 如果需要显示多个空格使用以下内容进行转义
小于号: <
大于号: >

CSS

Cascading Style Sheet 层叠样式表. 作用: 美化页面
如何在html页面中添加css样式代码?总共有三种方式:
1. 内联样式: 在标签的style属性中添加css样式代码, 弊端:不能复用
2. 内部样式: 在head标签里面添加style标签,标签体内写样式代码,弊端:只能在当前页面复用
3. 外部样式: 在单独的css文件中写样式代码,在html页面中通过link标签引入css文件,可以实现多页面复用
  工作中外部样式用的最多,学习过程中更多使用内部样式

选择器

标签名选择器

格式: 标签名{样式代码}
作用: 选取页面中所有同名标签

id选择器

格式: #id{样式代码}
作用: 如果需要给页面中某一个元素添加样式,则给元素添加id属性,通过id选择器选中

class选择器

格式: .class{样式代码}
作用: 用于选取页面中多个元素(需要给多个元素添加相同的class属性值)

分组选择器

格式: div,#id,.class{样式代码}
作用: 可以将多个选择器合并成一个选择器

属性选择器

格式: 标签名[属性名='值']{样式代码}
作用: 可以通过元素的属性获取元素

子孙后代选择器

格式: body div span{样式代码}
作用: 选取body里面的div里面的所有span(包括子元素span和所有后代span)

子元素选择器

格式: body>div>span{样式代码}
作用:选取body里面的div里面的子元素span

伪类选择器

格式: 标签名:link/visited/hover/active{样式代码}
作用: 选取元素的状态状态包括(未访问状态,访问过状态,悬停状态,点击状态)

任意元素选择器

格式: *{样式代码}
作用: 选取页面中所有元素

颜色赋值

三原色: 红绿蓝,red green blue, rgb 每个颜色取值范围0-255,
颜色单词赋值 red
6位16进制赋值 #ff0000 红255 绿0 蓝0
3位16进制赋值 #f00 每一位重复一次 f00=ff0000
3位10进制赋值 rgb(255,0,0)
4位10进制赋值 rgba(255,0,0,0-1) a=alpha透明度取值0-1 值越小越透明

背景图片

background-image:url(路径); 设置背景图片
background-size:200px 300px; 设置背景图片尺寸
background-repeat:no-repeat; 禁止重复
background-position:50% 100%; 背景图片位置

如何查看目标页面元素样式

使用谷歌浏览器

在元素上面右键->检查
右侧窗口出现后点击小箭头拾取器选中想查看的元素

文本和字体相关

文本修饰: text-docoration:overline上划线/underline下划线/line-through删除线/none去掉修饰
文本对齐方式: text-align: left/right/center;
文本颜色: color:red;
文本阴影: text-shadow: 颜色 x偏移值 y偏移值浓度(值越大越模糊)
行高: line-height:20px; 可以通过行高实现垂直居中
字体大小: font-size:20px;
字体加粗: font-weight:bold加粗/normal去掉加粗;
字体设置: font-family:xxxx,xxx,xxx,xxxx; font:20px xxx,xxx,xxx;
斜体: font-style: italic;

元素显示方式display

block: 块级元素 ,独占一行,可以修改宽高, 包括: div h1-h6 p
inline: 行内元素, 共占一行,不能修改宽高, 包括: span b i small 超链接等
inline-block:行内块元素,共占一行,并且可以修改宽高, 包括: 图片img, input

每个元素都有自己默认的显示方式,但是有些场景需要修改元素的显示方式,比如行内元素是不能修改宽高的如果有需求必须改宽高则只能先修改元素的显示方式为block或inline-block

圆角

border-radius:5px; 值越大越圆当值大于宽高一半时为圆形

盒子模型

盒子模型=宽高+外边距+边框+内边距
宽高: 控制元素大小
外边距: 控制元素的位置
边框: 控制边框效果
内边距: 控制元素内容的位置

盒子模型之宽高

width/height赋值,赋值方式两种:

像素
上级元素百分比

行内元素是不能修改宽高的

盒子模型之外边距

外边距:元素距上级元素或相邻兄弟元素的距离称为外边距. 作用: 控制元素的显示位置
赋值方式:

单独某个方向赋值 margin-left/right/top/bottom: 10px;
四个方向赋值 margin:10px;
上下和左右 margin:10px 20px; 上下10 左右20 margin:0 auto; 块级元素居中
上右下左四个方向 margin:10px 20px 30px 40px 顺时针上右下左

Day03

课程回顾

CSS 层叠样式表负责美化页面
引入方式:

内联样式:在标签的style属性里面写样式代码,不能复用
内部样式:在head标签里面添加style标签,在标签体里面写样式代码, 只可以在当前页面复用
外部样式:在单独的css样式文件中写样式代码,在html页面中通过link标签引入

选择器

标签名选择器 div{}
id选择器 #id{}
class选择器 .class{}
分组选择器 div,#id,.class{}
属性选择器标签名[属性名='值']{}
子孙后代选择器 div span{}
子元素选择器 div>span{}
伪类选择器 a:link/visited/hover/active{}
任意元素选择器 *{}

颜色赋值:

颜色单词 red
6位16进制 #ff0000
3位16进制 #f00
3位10进制 rgb(255,0,0)
4位10进制 rgba(255,0,0,0-1)

背景图片

background-image:url(路径) 设置背景图片
background-size: 200px 300px 背景图片尺寸
background-repeat: no-repeat; 禁止重复
background-position: 50% 50%; 位置

文本和字体相关

文本修饰 text-decoration: overline/underline/line-through/none;
文本对齐方式 text-align: left/right/center;
文本颜色 color:red;
文本阴影 text-shadow: 颜色 x偏移值 y偏移值浓度(值越大越模糊)
行高 line-height:20px; 可是实现垂直居中
字体大小 font-size:20px;
加粗 font-weight:bold/normal去掉加粗;
斜体 font-style: italic;
字体设置 font-family:xxx,xxx,xxx; font: 20px xxx,xxx,xxx;

显示方式display

任何元素都有自己默认的显示方式
block: 块级元素,独占一行,可以修改宽高包括: h1-h6,div,p
inline: 行内元素,共占一行,不可以修改宽高包括: span,b,i,small,a等
inline-block: 行内块,共占一行并且可以修改宽高包括:img,input等

盒子模型

盒子模型包括:宽高,外边距,边框,内边距
宽高: width/height 两种赋值方式:1. 像素 2. 上级元素百分比
行内元素不能修改宽高
外边距:元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置
margin-left/right/top/bottom:10px; 单独某一个方向赋值

margin:10px 四个方向赋值
margin:10px 20px 上下10 左右20
margin:0 auto: 块级元素居中
margin:10px 20px 30px 40px; 上右下左顺时针

CSS的三大特性

继承:元素可以继承上级元素的文本和字体相关样式,部分标签自带效果不受继承影响比如:超链接的字体颜色 h1-h6字体大小都不受继承影响
层叠:多个选择器有可能选择到同一个元素,给元素添加样式时,如果添加的样式不同则全部层叠生效,如果样式相同则只能生效一个,由优先级决定哪一个生效
优先级:作用范围越小优先级越高, id>class>标签名>继承(属于间接选中)

盒子模型之外边距

元素距上级元素或相邻兄弟元素的距离为外边距.用来控制元素的显示位置
margin-left/right/top/bottom:10px; 单独某一个方向赋值

margin:10px 四个方向赋值
margin:10px 20px 上下10 左右20
margin:0 auto: 块级元素居中
margin:10px 20px 30px 40px; 上右下左顺时针

左右相邻外边距累加,上下相邻外边距取最大值
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距,会出现粘连问题,通过给上级元素添加overflow:hidden方式解决
行内元素上下外边距无效

盒子模型之边框

赋值方式:
1. border: 粗细边框样式颜色; 四个方向添加边框
2. border-left/right/top/bottom: 粗细边框样式颜色; 单独某个方向添加边框
圆角: border-radius:5px; 值越大越圆

盒子模型之内边距

什么是内边距: 元素边缘距内容的距离, 用来控制元素内容的位置
赋值方式:(类似外边距)
1. padding-left/right/top/bottom: 10px; 单独某个方向赋值
2. padding:10px; 四个方向赋值
3. padding:10px 20px; 上下10 左右20
4. padding:10px 20px 30px 40px; 上右下左
如果需要移动元素的子元素位置有两种方式:
1. 给元素添加内边距移动,会影响元素宽高
2. 给子元素添加外边距移动,不会影响元素宽高,但是需要考虑粘连问题

盒子模型回顾:

宽高width/heigh: 控制元素的显示大小
外边距margin:控制元素的显示位置
边框border: 控制边框效果
内边距padding:控制元素内容的位置

定位方式:

文档流定位(默认)

又称为静态定位,元素默认的定位方式为文档流定位
格式: position:static;
元素显示特点: 块级元素从上往下排列行内元素从左向右排列
如何控制元素的显示位置?
通过给元素添加外边距

相对定位

格式: position:relative;
元素显示特点: 元素不脱离文档流(不管元素移动到什么位置原来的位置仍然占着)
如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于初始位置做位置偏移.

绝对定位

格式: position:absolute;
显示特点: 元素脱离文档流(元素会把之前所占位置让出)
如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于窗口或某一个上级元素做位置偏移(需要给上级元素添加position:relative)

固定定位

当元素需要固定在窗口的某个位置的时候使用固定定位
格式: position:fixed;
显示特点:元素脱离文档流
如何控制元素的显示位置?
通过left/right/top/bottom 让元素相对于窗口做位置偏移

浮动定位

-格式: float:left/right;

显示特点: 元素脱离文档流,元素从当前所在行向左或向右浮动,当撞到上级元素边缘或其它浮动元素停止.
当需要将纵向排列的元素改成横向排列时使用浮动定位
如果元素的所有子元素全部浮动则自动识别的高度为0,给元素添加overflow:hidden;解决此问题
浮动元素受上级元素宽度影响,如果一行装不下会自动换行,换行时有可能被卡主

行内元素的垂直对齐方式vertical-align

baseline 基线对齐 (横格本第三条线)
top 上对齐
middle 中间对齐
bottom 下对齐

z-index样式

通过此样式控制元素显示层级,层级越高元素显示越靠前
需要结合position属性使用,一般position:relative; 因为使用其它值元素会脱离文档流会对之前效果产生影响.

overflow溢出设置

hidden: 超出范围隐藏
visible(默认):超出范围显示
scroll: 超出范围滚动显示

JavaScript

给页面添加动态效果
JavaScript是一门编程语言,和Java没有关系,为了蹭热度.
语言特点:

属于脚本语言,不需要编译直接解析执行.
基于面向对象
属于弱类型语言,

强类型:int x=10; String s = "abc"; int y;
弱类型:var x=10; var s = "abc"; var y;

安全性高: JavaScript语言只能访问浏览器内部的数据,浏览器以外的数据不允许访问.
交互性高: 可以将JavaScript语言嵌入到html页面中和用户直接交互

如何在html页面中写JavaScript代码

内联:在标签里面添加事件属性,在属性中写样式代码.
<input type="button" value="内联按钮"
```
    onclick="alert('内联触发!')"/>
```
内部:在html页面中任意位置添加script标签,在标签体内写js代码.
外部:在单独的js文件中写js代码,在html页面中通过script标签引入,好处:可以多页面复用,可以将html代码和js代码分离 ###语法

包括: 变量数据类型运算符各种语句方法面向对象

变量声明和赋值

JavaScript语言属于弱类型语言
java: int x=10; String name="小明"; x="abc";(报错类型不匹配)
Person p=new Person();
JS: var x=10; var name="小明"; x="abc";不报错 var p = new Person();

数据类型

JS中只有对象类型
常见的几种对象类型:

数值:number 相当于Java所有数值类型的总和
字符串:string 可以用单引号或双引号修饰字符串 var s = "abc"/'abc';
布尔值:boolean true/false
未定义:undefined var x; 变量只声明不赋值时为未定义类型
自定义:object Person Car Hero

运算符 + - * / % > < >= <= = != ==

和Java大体相同
==和===的区别: ==会先统一等号两边变量的类型再比较值, ===是先比较类型,如果类型相等后再去比较值. 666==“666” true 666===“666” false
除法运算: js中会自动根据除法结果转换整数和小数
java:int x=5; int y=2; x/y=? 2;
js: var x=5; var y=2; x/y=2.5; x=6 x/y=3
typeof x; 获取变量的类型 typeof 66+6 = "number"+6 = "number6"

语句 if else for while do while switch case

和Java中大体相同
for循环中 int i 改成var i

方法

java: public 返回值类型方法名(参数列表){方法体}
JS: function 方法名(参数列表){方法体}
如何声明常见的四种方法:

无参无返回值
无参有返回值
有参无返回值
有参有返回值

三种声明方法的方式:
1. function 方法名(参数列表){方法体}
2. var 方法名 = function(参数列表){方法体}
3. var 方法名 = new Function("参数1","参数2","方法体");

页面相关的方法

通过元素id获取页面中的元素对象
<div id="d1">abc</div>
var d = document.getElementById("d1");
获取和修改元素的文本内容
d.innerText = xxxx; 修改
d.innerText 获取
获取和修改文本框的值
i1.value="xxx"; 修改
i1.value 获取
获取和修改元素的html内容
i1.innerHTML=""; 修改
i1.innerHTML+=""; 追加

NaN

Not a Number 不是一个数
isNaN(x) 判断变量x是否是NaN true代表是NaN(不是数) false代表不是NaN(是数)

JavaScript对象分类

内置对象:number/string/boolean等
浏览器相关对象BOM: Browser Object Model 浏览器对象模型
页面相关对象DOM: Document Object Model 文档对象模型

BOM浏览器相关内容

window: 该对象的属性和方法称为全局属性和方法,访问时可以省略掉window.

window中常见的方法:

window.isNaN(); 判断变量是否是数值
window.parseInt(); 把字符串或小数转成整数
parseInt(Math.random()*100)

parseInt(i1.value) + parseInt(i1.value)

window.parseFloat("2.38"); 把字符串转成小数
window.alert(); 弹出提示框
window.confirm("您确认离开吗?"); 弹出确认框
window.prompt("想吃什么?"); 弹出文本框
window.setInterval(方法,时间间隔); 定时器
当需要每隔一段时间重复做某件事的时候,使用定时器

var timer = setInterval(方法,时间间隔);
clearInterval(timer); 停止定时器
setTimeout(方法,时间间隔); 只执行一次的定时器

window中常见的属性

history:历史(当前窗口历史,关闭窗口历史会删除)
history.length 获取窗口历史页面数量

history.back() 返回上一页面等效<-
history.forward() 前往下一页面等效->
history.go(n) n代表前进和后退的数值 n=1代表前进1个页面 2代表2个页面 n=-1代表后退一个页面 -2后退两个页面 0刷新

location:位置
location.href 获取和修改浏览器的访问地址

hocation.reload(); 刷新页面

screen:屏幕
screen.width 屏幕的宽度

screen.height 屏幕的高度

navigator导航/帮助
navigator.userAgent 获取浏览器的版本信息

事件

什么是事件:事件是系统给提供的一些特定时间点, 包括:鼠标事件/键盘事件/状态改变事件

鼠标事件:
- onclick 点击事件
- onmouseover 鼠标移入事件
- onmouseout 鼠标移出事件
- onmousedown 鼠标按下事件
- onmouseup 鼠标抬起事件
- onmousemove 鼠标移动事件
键盘事件:
- onkeydown 键盘按下事件
- onkeyup 键盘抬起事件
状态改变事件:
- onload 页面加载完成事件
- onchange 值改变事件
- onresize 窗口尺寸改变事件

事件绑定(给元素添加事件的方式)

事件属性绑定
动态绑定(通过js代码给元素添加事件) 好处:能将html代码和js代码分离
####事件传递(事件冒泡)

当某一个位置有多个事件需要响应,则事件的响应顺序是从最底层往上层传递,类似气泡从下往上所以称为事件冒泡.

DOM文档对象模型

页面相关内容

通过id获取元素 document.getElementById("");
获取和修改元素文本内容 innerText
获取和修改元素html内容 innerHTML
获取和修改文本框的值 value

jQuery框架

作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率
jQuery就是一个通过js语言所以写的框架
由于jQuery框架就是js语言所写,引入框架和引入普通的js文件一样
js对象的方法和jq对象的方法不能混着调用,各自调用各自独有的方法和属性

js对象和jq对象互相转换

js转jq: var jq = $(js);
jq转js: var js = jq[0]; jq本质上就是一个数组里面装的是js对象

jq中的选择器

基础选择器写法和css一样

标签名选择器 $("div")
id选择器 $("#id")
class选择器 $(".class")
分组选择器 $("div,#id,.class")
任意元素选择器 $("*")

层级选择器

$("div span") 匹配div里面所有的span(子孙后代选择器)
$("div>span") 匹配div里面的span子元素(子元素选择器)
$("div+span") 匹配div的弟弟span
$("div~span") 匹配div的弟弟们span
层级相关的方法:
1. $("#abc").prev("span") 匹配id为abc元素的哥哥元素
2. $("#abc").prevAll("div") 匹配id为abc元素的哥哥们元素
3. $("#abc").next("div") 匹配id为abc元素的弟弟元素
4. $("#abc").nextAll("div") 匹配id为abc元素的弟弟们元素
5. $("#abc").siblings("div") 匹配id为abc元素的兄弟元素
6. $("#abc").parent() 匹配id为abc元素的父元素
7. $("#abc").children("div") 匹配id为abc元素的子元素们

过滤选择器

$("div:first") 匹配第一个div
$("div:last") 匹配最后一个div
$("div:eq(n)") 匹配下标为n的div n从0开始
$("div:lt(n)") 匹配下标小于n的div
$("div:gt(n)") 匹配下标大于n的div
$("div:even") 匹配下标为偶数的div
$("div:odd") 匹配下标为奇数的div
$("div:not(.abc)") 匹配class值不等于abc的div

Web笔记

Day01

课程介绍

安装HBuilderX

web前端

HTML

创建第一个HTML页面

写完html后如何测试

写在body中的常见标签有哪些？

注释快捷键 Ctrl+Shift+/

文本相关标签

列表标签

效果:

效果：

图片标签img

超链接a

表格table

表单form

HBuilder快捷键

Day02

表单form

分区标签

实体引用(类似特殊字符)

CSS

选择器

颜色赋值

背景图片

如何查看目标页面元素样式

文本和字体相关

元素显示方式display

圆角

盒子模型

盒子模型之宽高

盒子模型之外边距

Day03

课程回顾

CSS的三大特性

盒子模型之外边距

盒子模型之边框

盒子模型之内边距

盒子模型回顾:

定位方式:

文档流定位(默认)

相对定位

绝对定位

固定定位

浮动定位

行内元素的垂直对齐方式vertical-align

z-index样式

overflow溢出设置

JavaScript

如何在html页面中写JavaScript代码

变量声明和赋值

数据类型

运算符 + - * / % > < >= <= = != ==

语句 if else for while do while switch case

方法

页面相关的方法

NaN

JavaScript对象分类

BOM浏览器相关内容

事件

事件绑定(给元素添加事件的方式)

DOM文档对象模型

jQuery框架

js对象和jq对象互相转换

jq中的选择器

js实现动态打字效果

Java调用Github API实现上传文件到Github仓库

此处评论已关闭