JavaWeb
HTML
html简介
html是一门语言,所有的网页都是html这门语言编写出来的,html是超文本标记语言。
- 超文本:除了文字信息还有图片音频等
- 标记语言:由标签构成的语言
html运行在浏览器上,有浏览器来解析这些标签
html标签都是预定义好的,例如 展示图片
w3c标准:网页主要由三部分组成
- 结构:html
- 表现:css
- 行为:javascript
tips:
- html文件用 .htm .html 为扩展名
- html结构标签
- html标签属性值 单双引号杰克
- html语法松散
基础标签
- h1-h6 定义标题 h1最大 h6最小
- font 定义文本字体 尺寸 字体颜色 face size color
- b 加粗
- i斜体
- center 定义文本居中
- p 定义段落
- br 换行
- hr 定义水平线
img、audio、video标签
img: 定义图片
- src:规定显示图像的url
- height : 定义图像的高度
- width: 定义图像的宽度
audio:定义音频。支持的音频格式:mp3、wav、ogg
- src:规定音频的url
- controls:显示播放控件
video:定义视频。支持的音频格式:mp4、webm、ogg
- src:规定视频url
- controls:显示播放控件
tips:
- html的尺寸: px %
超链接标签
a 定义超链接
- href 指定访问资源的url
- target 指定打开资源的方式: _self :默认值,在当前界面打开 _black: 在空白页面打开
列表标签
有序列表
<ol>
<li>dwa</li>
<li>dwa</li>
<li>dwa</li>
</ol>
无序列表
<ul>
<li>dwa</li>
<li>dwa</li>
<li>dwa</li>
表格标签
table:定义表格
- border:规定规格边框的宽度
- width:规定表格的宽度
- cellspacing : 规定单元格之间的空白
tr:定义行
- align:定义表格行的内容对齐方式
td: 定义单元格
- rowspan:规定单元格可以横跨的行数
- colspan: 规定单元格可以横跨的列数
课表练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>kebiao</title>
</head>
<body>
<table border="1" cellspacing="0" width="800">
<tr align="center">
<th colspan="2"></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr align="center">
<td rowspan="4">上午</td>
<td>早自习</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td colspan="7" >午休</td>
</tr>
<tr align="center">
<td rowspan="4">下午</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
布局标签
div
span
表单标签
form:
action:指定表单数据提交的url
- 表单项数据要想被提交,测必须指定其name属性
method:指定表单提交的方式
- 默认get :1、请求参数会拼接在url的后边 2、url长度有限制4kb
- post:1、请求参数会在http请求协议的请求体中 2、请求参数无限制
表单项标签
- input :表单项,通过type属性控制输入形式
- select:定义下拉列表,用option定义列表项
- textarea:文本域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="#" method="post">
<label for="username">用户名:<input type="text" name="username" id="username"></label><br>
<label for="password">密码:<input type="text" name="password" id="password"></label><br>
<input type="radio" name="sex" id = "male" value="1"><label for="male">男</label>
<input type="radio" name="sex" id = "female" value="2"><label for="male">女</label><br>
<input type="checkbox" name="duoxuan" id = "lvyou" value="lvyou"><label for="lvyou">旅游</label>
<input type="file"><br>
<input type="reset"><br>
<input type="submit"><br>
<input type="button"><br>
</form>
</body>
</html>
CSS
概念:页面美化和布局控制
好处:
- 功能强大
- 将内容展示和样式控制分离:降低耦合度(让分工写作更加容易)
- 提高开发效率
使用css的三种方式:
- 内联样式:直接将css定义在html的标签中
- 内部样式:在head标签内,定义stple变迁,styple标签的内容就是css代码
- 外联样式:定义一个css文件,在head标签中,使用link标签引入外部的文件
css基本语法:
格式
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
选择器:筛选具有相似特征的元素
注意:每一对属性需要使用分号;隔开,最后一个属性不需要
基础选择器:
- id选择器:语法 #id{}
- 元素选择器: 标签名称{}
- 类选择器:选择具有相同的clss属性值的元素: .class{}
注意:id选择器的优先级高于元素选择器
类选择器的优先级高于元素选择器
扩展选择器:
- 选择所有元素: *{}
- 并集选择器: 选择器1,选择器2{}
- 子选择器: 筛选选择器1元素下的选择器2元素 选择器1 选择器2{}
- 父选择器:筛选选择器1元素上的选择器2元素 选择器2 > 选择器1{}
- 属性选择器: 选择元素名称,
属性:
字体、文本
-
font-size:字体大小
-
color : 文本颜色
-
text-align:对齐方式
-
line-height:行高
背景
background
边框
- border:设置边框、符合属性
尺寸
-
width
-
height
盒子模型:控制布局
- margin:外边距
- padding:内边距 :默认情况下内边距会影响整个盒子的大小,可以使用box-sizing:border-box 设置盒子的属性,让width和height就是最终盒子的大小
JavaScript
基本概念:
- 一门客户端脚本语言,每一个浏览器都有一个js的解析引擎
- 脚本语言:不需要编译的,直接就可以被浏览器解析执行了
功能:
- 可以来增强用户和html页面的交互过程, 来控制html元素,让页面有动态效果,增强用户体验
javascript发展史:
- 1992年,nombase公司,开发出第一们客户端脚本语言,专门用于表单的校验。命名:c--后来更名为:ScriptEase
- 1995年,Netsape网景公司,开发了一门客户端脚本语言,起名:LiveScript,后来,请来sum公司的专家,修改LiveScript,命名为:javascript
- 1996年,微软抄袭了javascript开发出jscript语言
- 1997年,ECMA欧洲计算机制造协会:ECMAScript所有客户端脚本语言的标准
- javascript= ecmascript + javascript自己特有的东西:bom+dom
学习步骤:ECMAScript----BOM---DOM
ECMAScript:客户端脚本语言标准
基本语法:
与html结合方式
- 内部js:定义script,标签体内容就是js代码
- 外部js:定义script,通过src属性引入外部的js文件
- 注意:script标签可以定义在html的任意位置,但是定义的位置会影响html执行先后顺序
注释
- 单行注释: //
- 多行注释: /**/
数据类型
- 原始数据类型:基本数据类型(number整数小数、string:"abc" 'a'、boolean: true/false、null对象为空的占位符、underfined未定义:如果一个变量没有给默认赋值就会默认underfined)
- 引用数据类型:对象
变量
- 变量:一小块存储数据的内存空间
- java语言是强类型的语言,js是弱类型的语言:强类型在开辟变量存储空间的时候,定义了空间将来存储的数据的数据类型,只能存储固定类型的数据,弱类型在开辟变量存储空间的时候,不定义空间将来的存储数据类型,可以存放任意类型的数据
运算符
- 一元运算符: ++ -- +
- 算数运算符 + - * / % ....
- 赋值运算符: = +=
- 比较运算符: < > <= >= ===全等于
- 类型相同:直接比较,字符串会逐一比较字符串中的字母
- 类型不同:先进行类型转换,再比较: ===全等于,在比较之前先判断类型,如果类型不一样则直接返回false
- 逻辑运算符: && || !
- number: 0为假 非零为真
- sting:除了空字符串,剩下的都是true
- 对象: 所有对象都是true
- 三元运算符: ? :
注意: 在js中,如果运算的数字不是运算符所要求的类型,那么js引擎会自动的将运算数进行转换,
- String类型转number类型的时候会按照字面值转换,如果字面值不是数字,那么就会转为NaN:不是数字的数字
- bolean转number,true转为1,false转为0
注意:
-
语句以;结尾,如果一行只有一条语句可以省略;但是不推荐省略
-
变量的定义使用var关键字,当然也可以不使用var直接定义
- 用:定义的变量是局部变量
- 不用:定义的变量是全局变量,不建议使用
流程控制语句
- if else
- swith
- 在js中,swith语句可以接受任意类型的数据
- do while
- for
使用for循环打印九九乘法表
for(var i = 1;i<=9;i++){
for(var j =1;j<=i;j++){
document.write(j+"*"+i + "=" +i *j+"  ");
}
document.write("<br>");
}
基本对象
-
Function对象:函数(方法)对象
- 创建:三种方式
- var fun = new Function(形式参数列表,方法体); //忘掉
- function 方法名称(形式参数列表){方法体} //最常见的方式
- var 方法名 = function(形式参数列表){方法体};
- 方法
- 属性: length属性代表形参的个数
- 特点:
- 方法定义的时候,形参的类型不用写
- 方法是一个对象,如果定义名称相同的方法,会覆盖先前的方法
- 在js中,方法的调用只是与方法的名称有关,和参数列表无关
- 在方法声明中,有一个隐藏的内置对象,arguments封装了所有的实际参数
- 调用 :
- 方法名称(实际参数列表)
- 创建:三种方式
-
Array:数组对象
- 创建
- var arr = new Array(元素列表);
- var arr = new Array(默认长度);
- var arr = [元素列表];
- 方法
- join可以让数组按照指定的元素进行拼接,默认是用逗号拼接成字符串
- push类似于java中的add方法,向数组的尾部添加一个元素
- 属性
- 特点:数组中数组元素的类型是可变的
- 创建
-
Boolean
-
Date
-
Math
-
Number
-
String
-
RegExp:正则表达式对象
-
单个字符[]:
- \d 单个数字
- \w 单个单词字符
-
量词符号
- ?:表示出现0次或者1次
- *:表示出现0次或者多次
- +:出现1次或者多次
-
开始结束符号
- ^开始
- $结束
正则对象的创建:
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
var reg1 = new RegExp("\\d{6,12}"); //注意在第一种声明正则表达式的时候,使用\w的时候必须要加一个\,因为在字符串中\表示转义 var reg2 = /^\d{5,12}$/; //注意在第二种声明过程中一定不能加入"" var username = "123456"; var flag1 = reg1.test(username); var flag2 = reg2.test(username); alert(flag1); alert(flag2);
-
-
Global
- 他是全局对象,这个global中封装的方法不需要对象就可以直接调用 方法名();
Dom简单学习:为了满足案例的要求
- 功能:控制html文档的内容
- 代码:获取页面标签对象 element
- document.getElementById(id值); 通过元素的id获取元素对象
- 操作element对象
- 修改属性值
- 修改标签体内容
事件的简单学习
功能:某些组件被执行了某些操作后,触发某些代码的执行
绑定事件:
- 直接在html标签上,指定
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步