JavaWeb之HTML(HTML，CSS，JavaScript)
HTML
html
html是什么
是一门编程语言
编程语言是什么
java
sql
xml
html
都是编程语言
浏览器
浏览器是一个软件 : 能够解析html 展示数据
C/S
Client–server : 需要安装客户端,访问服务器
缺点
更新繁琐
优点
用户黏度高(手机app)
B/S
Brower-service : 安装浏览器即可
优点
(服务)更新方便,无需告知客户
缺点
手机时代不方便
主要用来开发 公司内部管理类软件
html入门
<html>
<head>
<meta charset="UTF-8">
<title>html 入门title>
head>
<body>
<font color='red'>这是我的第一个html网页font>
body>
html>
- 后缀名 .html 或 .htm
- 标签不区分大小写
- 语法松散(不严谨)
- 属性可以单引号也可以双引号
html 基础标签
标题 <h1> ~~~<h6>
横线 <hr>
字体 <font face="楷体" size="5" color="#ff0000">htmlfont>
注意:颜色可以在线搜索
换行 <br>
段落 <p>p>
加粗 <b>鹅鹅鹅b><br>
斜体 <i>曲项向天歌i><br>
下划线 <u>白毛浮绿水u><br>
文本居中
<center>
<b>红掌拨清波b>
center>
注意:
在html 中 不管写多少个空格,最终只会显示一个,想要显示多个空格 必须使用 表示空格
在html 中 必须使用 ”<“br”>“才能换行
多媒体标签
图片 <img src="">
音频 <audio src>
视频 <video src>
完整路径: http://ip地址:端口/资源…,学完web核心才会接触,今天了解
相对路径:
./ 表示当前路径 (可以省略)
…/ 表示上一级路径
…/…/ 表示上两级路径
超链接
<a href="https://www.baidu.com/" target="_self">点我有惊喜a>
<a href="https://www.baidu.com/" target="_blank">点我有惊喜a>
target="_self" 当前页
target="_blank" 新标签页打开
列表
<ol type="1">
<li>咖啡li>
<li>茶li>
<li>牛奶li>
ol>
<ul type="circle">
<li>咖啡li>
<li>茶li>
<li>牛奶li>
ul>
表格
<table border="1" cellspacing="0" width="500">
<tr>
<th >序号th>
<th>品牌logoth>
<th>品牌名称th>
<th>企业名称th>
tr>
<tr align="center">
<td>010td>
<td><img src="../img/三只松鼠.png" width="60" height="50">td>
<td>三只松鼠td>
<td>三只松鼠td>
tr>
<tr align="center">
<td>009td>
<td><img src="../img/优衣库.png" width="60" height="50">td>
<td>优衣库td>
<td>优衣库td>
tr>
<tr align="center">
<td>008td>
<td><img src="../img/小米.png" width="60" height="50">td>
<td>小米td>
<td>小米科技有限公司td>
tr>
table>
布局标签
<div style="background: red ;width: 50%" >
aaaasdfasdsa<br>
asdfsfa
div>
<div style="background: blanchedalmond" > aaadiv>
<span style="background: silver">bbbspan>
<span>bbbspan>
body>
html>
表单
<form action="/s" method="post">
<input type="text" name="uname">
<input type="text" name="pwd">
<input type="submit">
form>
get提交
post提交
开发人员工具 F12
表单项
CSS
CSS的作用
美化页面
CSS三种引入方式
- 内联样式优先级最高
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/* 选择器{样式的键: 样式的值 } */
div{
color: blue;
}
style>
<link rel="stylesheet" href="css/a.css"/>
head>
<body>
<div style="color: red"> aaadiv>
<div> aaadiv>
<div> aaadiv>
<hr />
body>
html>
选择器
任何一个标签都可以写 id 和class 属性
<div id="lq" class="sport qiu">篮球div>
<div id="pq" class="sport,qiu">排球div>
<div id="piq" class="qiu">皮球div>
CSS提供了三种主要的选择器选中元素
/* 元素选择器,写的 是html 标签名称*/
div{
color: red;
font-size: 1800px;
}
/*id选择器, 能唯准确一定位某个标签*/
#d1{
color: blue;
}
/*类选择器
此处这个类: 物以类聚,
html 标签中 提供了 class 属性来对标签进行分类
*/
.c1 {
color: aqua;
}
JS
什么是JS
JavaScript 是一门语言 ，JavaScript 是用来控制网页行为的，它能使网页可交互；
名称演变 JS-ES
Script ----------JavaScript(Jscript) ----> ECMAScript(JavaScript)
引入方式
<script>
alert("hello js1");
</script>
<script src="../js/demo.js"></script> //注意这里不要用自闭合标签
基础语法
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
-
注释
单行注释：// 注释内容
多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
-
大括号表示代码块
输出语句
<script>
window.alert("hello js~");//写入弹出框（常用）
document.write("hello js 2~");//写入html页面
console.log("hello js 3");//写入浏览器的控制台（常用）
</script>
变量定义
var
全局变量,变量可以重复定义
let
局部变量，不可以重复定义(for 循环建议使用let）
const
常量(类似java final)
数据类型 6种
undefined
null
number : 数字（整数、小数、NaN(Not a Number)）
string
object
boolean
typeof 变量
运算符
和java不同的
==:
- 判断类型是否一样，如果不一样，则进行类型转换
- 再去比较其值
===:全等于
-
判断类型是否一样，如果不一样，直接返回false
值 -
再去比较其值
类型转换
-
其他类型转为number：
string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。
一般使用parseInt(), parseFloat()
-
boolean: true 转为1，false转为0
其他类型转为boolean：
-
number:0和NaN转为false，其他的数字转为true
-
string:空字符串转为false，其他的字符串转为true
-
null:false
-
undefined:false
流程控制语句
if
for
while
switch
do while
函数
//方式1：
function add(a,b){
return a + b;
}
//方式2：
var add = function (a,b){
return a + b;
}
//方式3：(箭头函数)
//箭头函数： 当方法体只有一行 {} 和return 都可以省略
//缺点：
//阅读性差
var add = (a,b)=>{
return a + b;
}
var add = (a,b)=>a + b;
数组
//类似于 java 的List
//1. 长度不固定
//2. 类型任意
// 方式一
var arr = new Array(1,2,3);
// alert(arr);
// 方式二
var arr2 = [1,2,3];
String 对象
//方式一
var str1 = new String("abc");
//方式二
var str2 = "abc";
var str3 = 'abc';
//length
// alert(str3.length);
// trim():去除字符串前后两端的空白字符
var str4 = ' abc ';
alert(1 + str4.trim() + 1);
自定对象
// JSON: JavaScript Object Notation
// 1. 最早是 js用来 定义对象的
// 2. 随着发展,演变成,各个系统交互数据的标准格式
/*
格式:
{
key:value,
}
key :必须是字符串类型,引号可以省略
value : 可以是任意类型, 可以是函数或数组
多个key:value 之间用逗号分割
*/
// ES5
var person = {
name : "zhangsan",
age : 23,
hobby: ['篮球','皮球'],
eat: function (){
alert("干饭~");
}
};
// ES6 函数的定义可以简写
var person2 = {
name : "zhangsan",
age : 23,
hobby: ['篮球','皮球'],
eat(){
alert("干饭~");
}
};
BOM
Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象
BOM 中包含了如下对象：
- Window：浏览器窗口对象
- Navigator：浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location：地址栏对象
Window
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
windows
// alert
window.alert("abc");
// confirm，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");
if(flag){
//删除逻辑
}
// 定时器
/*
setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次
setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
clearInterval(): 取消由 setInterval() 设置的 timeout。
clearTimeout() :取消由 setTimeout() 方法设置的 timeout。
*/
// 每3s 打印一句话。 只打印3次
var num =0
var task = setInterval(function (){
console.log("itcast")
num++;
if(num>=3){
// 停止
clearInterval(task)
}
},1000)
// 结束任务
location
document.write("3秒跳转到首页...");
setTimeout(function (){
location.href = "https://www.baidu.com"
},3000);
DOM
docment 对象是 window 对象内的一个对象，可以获取页面元素，并操作（获取或修改）其属性或内容
获取
使用Document对象的方法来获取
- getElementById：根据id属性值获取，返回一个Element对象
- getElementsByTagName：根据标签名称获取，返回Element对象数组
- getElementsByName：根据name属性值获取，返回Element对象数组
- getElementsByClassName：根据class属性值获取，返回Element对象数组
//1. getElementById：根据id属性值获取，返回一个Element对象
var img = document.getElementById("light");
// 获取
var path =img.src;
// 修改
img.src = "../imgs/on.gif";
//2. getElementsByTagName：根据标签名称获取，返回Element对象数组
var divs = document.getElementsByTagName("div");
/*
style:设置元素css样式
innerHTML：设置元素内容
*/
for (let i = 0; i < divs.length; i++) {
divs[i].style.color = 'red';
divs[i].innerHTML = "呵呵";
}
//3. getElementsByName：根据name属性值获取，返回Element对象数组
var hobbys = document.getElementsByName("hobby");
for (let i = 0; i < hobbys.length; i++) {
//alert(hobbys[i]);
hobbys[i].checked = true;
//hobbys[i].value ="1";
}
//4. getElementsByClassName：根据class属性值获取，返回Element对象数组
var clss = document.getElementsByClassName("cls");
/*for (let i = 0; i < clss.length; i++) {
alert(clss[i]);
}*/
事件
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">
<a href="" >点击a>
<script>
//方式1
function on(){
alert("我被点了");
}
//方式2
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
script>
onsubmit
- onsubmit 是表单的时间 type=“submit” 的按钮只是触发了事件
- document.getElementById(“register”).onsubmit = function (){}
这句话改变了他的默认提交事件
true: 提交
false ： 不提交
<form id="register" action="#" >
<input type="text" name="username" id="username"/>
<input type="submit" value="提交">
form>
<script>
document.getElementById("register").onsubmit = function (){
//onsubmit 返回true，则表单会被提交，返回false，则表单不提交
// 校验内容
var username =document.getElementById("username").value;
//
if(username){
if(username.length>5){
return true;
}
}
alert("用户名不合法")
return false;
}
RegExp对象
什么是RegExp对象
RegExp 是正则对象，正则对象是判断指定字符串是否符合规则
在 js 中对正则表达式封装的对象就是正则对象
正则对象使用
创建对象
正则对象有两种创建方式：
直接量方式：注意不要加引号
var reg = /正则表达式/;
创建 RegExp 对象
var reg = new RegExp("正则表达式");
函数
test(str) ：判断指定字符串是否符合规则，返回 true或 false
正则表达式
什么是正则表达式
正则表达式定义了字符串组成的规则。也就是判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。
正则表达式是和语言无关的。很多语言都支持正则表达式，Java语言也支持，只不过正则表达式在不同的语言中的使用方式不同，js 中需要使用正则对象来使用正则表达式。
正则表达式常用的规则
-
^：表示开始
-
$：表示结束
-
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
-
.：代表任意单个字符，除了换行和行结束符
-
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
-
\d：代表数字字符： 相当于 [0-9]
量词：
-
+：至少一个
-
*：零个或多个
-
？：零个或一个
-
{x}：x个
-
{m,}：至少m个
-
{m,n}：至少m个，最多n个
// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;
var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);