Javaweb
- 一、HTML
- 二、CSS 技术
- 2.1 语法规则
- 2.2 选择器
- 三、JavaScript
- 3.1 与HTML代码结合的方式
- 3.2 变量
- 3.3关系运算
- 3.4 逻辑运算
- 3.5数组
- 3.6 函数（通过 function 来 构造函数）
- 3.7 自定义对象
- 3.8 事件
- 3.9 DOM模型
- 3.9.1 树形结构如下
- 3.9.2 结点
- 3.9.3 DOM方法与属性
- 3.10 正则表达式
- 3.10.1 语法
- 3.10.2 正则表达式模式
- 3.10.3 test() 方法
- 3.10.4 验证用户名是否有效
一、HTML
（1）页面由一对标签组成
<html> 开始
</html>结束
（2）<head></head> 头标签
（3）头标签里面可以放title 标签，表示网页的标题
（4）可以在meta标签中设置编码方式
（5）br表示换行
（6）p 表示段落标签
（7）img 图片标签
scr 属性 表示图片文件的路径
width height 表示大小
alt 表示图片的提示（鼠标停在图片上会有提示或者图片文件的路径错误也会显示提示）
（8）路径问题（我有点糊涂）
（9） h1 h2 h3……h6 标题标签
（10）列表标签
ol 表示有序列表
start 表示从哪里开始 type 显示的类型 ：A I a i 1（默认）
ul表示无序列表
type disc （默认） circle square
（11） u 下划线 b加粗 i 斜体
（12）上标 sup 下标 sub
（13）HTML中的实体 ：小于号 大于号 （需要时百度即可）
（14）span 不换行的块标记
（15）a 表示超链接
href 链接的地址
target ：
_self：在本窗口打开
_blank：在一个新窗口打开
_parent：在父窗口打开
_top：在顶层打开
（16）div 不换行的层
（17）表格 table
行 tr
列 td
表头列 th
有如下属性
border：表格边框的粗细
width：表格的宽度
cellspacing：单元格间距
cellpadding：单元格填充
居中 align --->center
rowspan ：行合并
colspan : 列合并
（18）表单(action 表示发送的目的地 method 表示发送的方式)
input type = "text" 表示文本框 name属性必须指定，否则数据不会发送给服务器
input type = ”password“ 表示密码框
input type = “radio ” 单选框，name属性保持一致，才会有互斥效果
input type = "checkbox" 复选框 ，name属性值建议保持一致
select 表示下拉列表 每一个选项是option ，value 是发送给服务器的值，selected 表示默认选中的值
input type = ”submitd“ 提交按钮
input type = “reset ” 重置按钮
input type = "button" 普通按钮
（19） frameset 表示页面框架 （已淘汰）
frame 表示框架中的具体页面引用
isframe 页面中嵌入小的页面一些效果
表单
<!--属性值必需打引号，不知道为什么我想过是不是可以不打引号，-->
<!--如果想让表单更加整齐一些可以将表单内容弄到表格哪里-->
<form action="" method="post">
用户名：<input type="text" name = "account" ><br>
密码：<input type="password" name = "password"><br>
性别：<input type="radio" name = "gender" value="boy" checked > 男
<!--checked 是可读可写的，我们可以修改checked的值-->
<input type="radio" name = "gender" value="girl"> 女<br>
爱好：<input type = "checkbox" name = "hobby" value="eating">吃饭<br>
<input type = "checkbox" name = "hobby" value="sleep" >睡觉<br>
<input type = "checkbox" name = "hobby" >打豆豆<br>
<input type = "checkbox" name = "hobby" value="null">无<br>
<input type = "submit" >
<input type = "reset" >
<input type = "button" value ="一般按钮"><br>
</form>表单没有发给服务器
- name没有设置，所以name一定要设置
- 单选复选下拉 value 属性要添加，以便发送给服务器
- 表单项不在form 标签中
GET 请求方式特点
- action 属性 + ？ + 请求参数 （name = value ）
- 不安全且请求参数长度有限制
POST
- 只有action 属性值
- 相对较安全
- 理论上没有长度的限制
二、CSS 技术
增强网页样式
2.1 语法规则
body {
background-color:#d0e4fe;
}
h1 {
color:orange; /*用分号*/
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}如何使用修改页面样式
- 在 html 文件中直接修改属性
- 在head 标签引入
<style type="text/css">/* style 标签专门定义css样式代码*/
body {
background-color:#d0e4fe;
}
h1 {
color:orange; /*用分号*/
text-align:center;
}
p {
font-family:"Times New Roman";
font-size:20px;
}
</style>- 生成一个CSS文件
通过link标签
<link rel="stylesheet" type="text/css" href="demo.css"> <!--前两个是固定的 ，后面的写自己css 文件的位置-->2.2 选择器
- 类选择器
class
.class名 - id选择器
id=“”
#id名字 - 标签选择器
直接选择标签
div{
} - 组合选择器 （可以让多个选择器共用同一个样式）
选择器1，选择器2，选择器n{
}
三、JavaScript
3.1 与HTML代码结合的方式
- 在head 标签 或者 body 标签 用script 标签
- 创建js文件，再引入
3.2 变量
JavaScript中特殊的值
undefined 未定义，所有js变量未赋予初始值的时候，默认都是这个
null 空值
NAN 全称是 Not a Number 非数值，比如一个 string 类型 + 数值类型
3.3关系运算
- == 等于 只比较数值表面
- === 我们一般认为的等于
3.4 逻辑运算
在js中 所有的变量，都可以作为一个Boolean 类型的变量来使用
0 null undifined “”(空串) 都被认为是false
3.5数组
var arr = []; 可以这样，里面可以不先说明创建多少个空间
我们可以通过数组下标赋值，不论是否越界，它会自动地给数组做扩容准备
var arr = []; //显然arr是一个长度为零的数组
arr[0] = 1; //但是我们可以这样赋值，此时数组的长度为 1
arr[3] = 40; //是不是很灵活，现在数组的长度已经自动扩容到 4 了
//而下标为 1 ，2的对应元素我们没有赋值，此时它们的值是undefined数组的遍历
for(var i = 0 ; i<arr.length;i++){ //如果是int i ，他会报错的，暂时不太清楚
alert("arr[i]"）;
}3.6 函数（通过 function 来 构造函数）
不允许函数重载
- 定义方式
1. 第一种
//1. 无参函数
function print(){
console.log("无参构造函数");
}
//2. 有参函数
function add(a,b){ //在其它语言中，如果是有参函数的话
//函数的话，形参前面我们需要定义数据类型，但是这里不需要欸
var c = a + b;
return c; //此函数有返回值，但是会发现add 前面没有说明返回值的类型是什么
}- 第二种
var 函数名 = function （形参列表）{
}
//1. 无参函数
var print = function(){
console.log("第二种无参函数");
}
//2. 有参函数
var add = function(a,b){
return a+b;
}- arguments 隐形参数
在 function 函数中不需要被定义，但是却可以用来直接获取所有参数的变量，有点像Java基础中的可变长参数，此隐形参数的操作类似于 数组
var sum = function (a,b){ //虽然我们只定义了两个形参，但是在调用的时候却可以传入不止两个参数
var c = 0;
d = arguments[0]; //1
e = arguments[1]; //2
f = arguments[2]; //3
g = arguments[3]; //4
h = arguments[4]; //5
i = arguments[5]; //6
for(var i = 0; i< arguments.length;i++){
c = c + arguments[i];
}
return c;
}
c = sum(1,2,3,4,5,6,7,8,9,10);3.7 自定义对象
- object 形式的自定义对象
var 变量名 = new Object();
变量名.属性 = 值；
变量名.函数名 = function（）{ }
var obj = new Object();
obj.name = "东方淮竹";
obj.age = 18;
obj.Info = function(){
alert("名字:"+this.name+"年龄:"+this.age);
}- 花括号自定义对象
let person={ //let 可被替换成 var
name:"东方淮竹", //属性之间用逗号隔开
age:18,
}
//增加属性
person.hobby="打游戏";
//删除属性
delete person.age;
//判断属性是否存在对象中
console.log("pwd" in person);3.8 事件
- 事件注册
- 静态
- 动态
- 事件
- onload 事件 (页面加载完成后，常用于做页面js代码初始化
function checkCookies()
{
if (navigator.cookieEnabled==true)
{
alert("Cookie 可用")
}
else
{
alert("Cookie 不可用")
}
}
```
2. onclick事件（单击事件，常用作按钮
```javascript
//静态注册
function onclickfun(){
alert("静态注册onclick事件");
}
<button onclick = "onclickfun();">按钮1</button>
//动态注册
window.onload = function(){
//1. 获取标签对象
var btn = document.getElementById("btn01");
//2. 通过标签对象.事件名 = function（）{}
btn.onclick = function(){
alert("动态注册onclick事件");
}
}
<button id= "btn01">按钮2</button>- onblur事件 (失去焦点事件，是输入框失去焦点并验证输入内容是否合法
//静态注册
function onblurFun(){
alert("静态注册onblur事件");
}
//动态注册
window.onload = function(){
//1. 获取标签对象
var passwordObj = document.getElementById("password");
//2. 通过标签对象.事件名 = function（）{}
passwordObj.onblur = function(){
alert("动态注册onblur事件");
}
}
<input type = "text" onblur = "onblurFun();"><br/>
<input id = "password" type = "password" ><br/>- onchange事件(内容改变发生改变事件，输入框，下拉列表改变时的操作
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<title></title>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>- onsubmit事件（表单提交事件 ，常用作验证表单项是否合法
//静态注册
function onsubmitFun(){
alert("静态注册onsubmit事件");
//经过一系列操作最终发现不合法
return false;
}
//动态注册
window.onload = function(){
//1. 获取标签对象
var formObj = document.getElementById("form01");
//2. 通过标签对象.事件名 = function（）{}
formObj.onsubmit = function(){
alert("动态注册onsubmit事件");
//经过一系列操作最终发现不合法
return false；
}
}
//return false 可以阻止表单提交
<form action = "",method = "" onsubmit = "return onsubmitFun();">
<input type = "text" value = "静态注册">
</form>3.9 DOM模型
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口,用一个类记录下HTML所有的信息
3.9.1 树形结构如下
3.9.2 结点
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 课程1</h1>
<p>Hello world!</p>
</body>
</html>比较简单，看截图就行我就不赘述了
3.9.3 DOM方法与属性
方法
需要在页面加载完成之后才会执行，页面加载执行顺序是从上到下，页面加载顺序HTML页面加载顺序
- getElementById(id) 获取带有指定 id 的节点（元素，返回的是一个dom对象
<script>
function onclickFun(){
var accountObj = document.getElementById("account");
//accountObj 是一个HTMLInputElement 对象
……………
}
</script>
<input type = "text" id = "account" value = "请输入账号">
<input type = "submit" onclick = "onclickFun">- getElementsByName(elementName) 获取带有指定 name 属性的节点（元素），是多个元素的集合，操作和数组一样，顺序是在HTML页面从上到下的顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<script type="text/javascript">
function checkAll(){
var hobbies = document.getElementsByName("hobby"); //看起来很神奇的样子，这样一看hobbies 一看就不是数组
for(var i = 0;i<hobbies.length;i++){ //可以像数组一样 .length
hobbies[i].checked = true; //可以这样索引，同时checked可读可写
}
}
function checkNo(){
var hobbies = document.getElementsByName("hobby");
for(var i = 0;i<hobbies.length;i++){
hobbies[i].checked = false;
}
}
</script>
</head>
<body>
<form action="" method="post">
爱好：<br>
<input type = "checkbox" name = "hobby" value="eating">吃饭<br>
<input type = "checkbox" name = "hobby" value="sleep" >睡觉<br>
<input type = "checkbox" name = "hobby" >打豆豆<br>
<input type = "checkbox" name = "hobby" value="null">无<br>
<button onclick="checkAll" >全选</button>
<button onclick="checkNo" >全不选</button>
</form>
</body>
</html>- getElementsByTagName(tagName) 获取带有指定标签的节点（元素）
- createElement(tagName) 给定一个标签名，创建一个标签对象
- appendChild(node) 插入新的子节点（元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<script type="text/javascript">
window.onload = function (){
//用js代码创建HTML标签，并显示在界面上
var divObj = document.createElement("div"); //在内存上创建一个div标签<div></div>
var textNodeObj = document.createTextNode("狐妖小红娘"); //创建一个文本节点对象 #狐妖小红娘
divObj.appendChild(textNodeObj); //内存中有<div>狐妖小红娘</div>
document.body.appendChild(divObj); //显示在界面上，给body标签添加一个子节点div
//单纯一个body.apendChild(divObj)就不行，不太清楚其实
}
</script>
</head>
<body>
</body>
</html>属性
- innerHTML 获取起始标签和终止标签中的内容
- innerText 获取起始标签和终止标签中的文本 （与上一个是有区别的）
- classname 获取设置标签的class属性
3.10 正则表达式
使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。
3.10.1 语法
var patt = new RegExp("e");
var patt1 = /e/;3.10.2 正则表达式模式
不同视频，所讲的模式不一样，浅找了一下
元字符
3.10.3 test() 方法
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
<script>
var patt1=new RegExp("e");
alert(patt1.test("The best things in life are free"));
</script>3.10.4 验证用户名是否有效
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<script type="text/javascript">
function onclickFun(){
//获取输入框的内容，要先获取此输入框对象，当我们要操作一个标签的时候，一定要先获取这个标签对象
var usernameObj = document.getElementById("username");
var usernameText = usernameObj.value;
var usernameSpanObj = document.getElementById("usernameSpan");
var patt = /^\w{5,12}$/;
if(patt.test(usernameText)){
//alert("此用户名合法"); 这是第一种方式，直接弹窗
//usernameSpanObj.innerHTML="此用户名合法"; innerHTML可读 可写 这是第二种方式，在文本框后面显示相关文字
usernameSpanObj.innerHTML="<img src='d.png' width='17' height='17'>"; //后面接图片感觉很神奇 这是第三种方式，通过图片来显示是否合法
}else{
//alert("此用户名不合法");
//usernameSpanObj.innerHTML="此用户名不合法";
usernameSpanObj.innerHTML="<img src='c.png' width = '17' height='17'>";
}
}
</script>
</head>
<body>
用户名：<input type = "text" id = "username" value ="" >
<span id="usernameSpan" style="color:red;"></span><br/>
<button onclick="onclickFun()">校验</button>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
