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+"&nbsp&nbsp");
    }
    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标签上，指定

posted on 2022-09-17 13:43 clinch 阅读(23) 评论(0) 编辑收藏举报

JavaWeb

HTML

html简介

tips：

基础标签

img、audio、video标签

tips：

超链接标签

列表标签

表格标签

布局标签

表单标签

表单项标签

CSS

JavaScript

基本概念：

功能：

javascript发展史：

基本语法：

事件的简单学习