javaWeb学习笔记1—前端三件套 HTML CSS JavaScript

学习视频地址

javaWeb学习笔记—前端三件套 HTML CSS JavaScript

- 1.字体标签
- 2. 字符实体
- 3.标题标签
- 4.超链接
- 5.列表标签
- 6. img标签
- - 路径
- 7.表格
- 8.iframe框架标签（内嵌窗口）
- 9.表单
- 10其他
二.CSS
三.JavaScript
- 1.特点
- 2.使用方式
- 3.变量
- 4.关系运算
- 5.逻辑运算
- 6.数组
- 7.函数
- 8. js的自定义对象
- 9.js的事件
- 10.DOM模型(重点)
- - （1）.document对象
  - （2）.验证用户名输入合法
  - （3）.正则表达式
  - （4）getElementsByName
  - （5）getElementsByTagName
  - （6）节点的常用属性和方法
  - （7）. 添加子节点

一.html

基本规范

注释：

<!-- -->

浏览器查看源码可见

标签

单标签

  <hr/> 水平线

双标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hello</title>
</head>
<body onclick="alert('大佬')" bgcolor="#faebd7"><!-- 基本属性和事件属性-->hello<hr/>
<button onclick="alert('大佬')" > hello</button>
</body>
</html>

属性必须有值必须加双引号

浏览器会帮你解释当时还是要保证语法正确

1.字体标签

2. 字符实体

常用的特殊字符集

类似于转义字符

在html 空白连续空格只会显示一个

那么就需要用多个  表示多个空格

3.标题标签

h1 到 h6

 <h1 align="left">标题1</h1> <!-- 默认左对齐--><h2 align="right">标题2</h2><h3 align="center">标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>

4.超链接

<a href="https://www.baidu.com">百度</a><br/>
<a href="https://www.baidu.com" target="_self">百度</a><br/> <!--当前页面跳转 -->
<a href="https://www.baidu.com" target="_blank">百度</a> <!--新页面跳转 -->

必须加https://

错误：

5.列表标签

有序列表
无序列表

 有序列表<ol></ol>无序列表<ul></ul><li> abc <li>列表项

<body><ul><li>a</li><li>b</li><li>c</li><li>d</li></ul><ol><li>a</li><li>b</li><li>c</li><li>d</li></ol>
</body>

6. img标签

<img src="" width="" heigth="">

src属性设置路径

路径

在web中路径两种分为

相对路径

. 表示当前文件所在的目录

… 表示当前文件所在的上一级目录

文件名表示当前文件所在的目录的文件相当于./文件名省略了./
绝对路径

格式：http://ip:port/工程名/资源路径

在javaSE也分为这两种

相对路径

从工程名开始算
绝对路径

盘符+文件名

<img src="../img/img.png" width="500" heigth="500" border="1" alt="找不到图片">

alt属性：找不到路径图片时的代替显示的文本

border属性：边框大小默认0

7.表格

<table align="center" border="1" width="300" height="300" cellspacing="0"><tr><td align="center"><b>1.1</b></td><th>1.2</th><th>1.3</th></tr><tr><td>3.1</td><td>2.2</td><td>2.3</td></tr><tr><td>3.1</td><td>3.2</td><td>3.3</td></tr></table>

<th></th>表头相当于<td align="center"><b>1.1</b></td>b加粗和居中

cellspacing="0"单元格间距为0

<body>
<table align="center" border="1" width="300" height="300" cellspacing="0"><tr ><th colspan="2">1.1</th><th>1.2</th></tr><tr><td colspan="2">3.1</td><td>2.2</td></tr><tr><td rowspan="2">3.1</td><td>3.2</td><td>3.3</td></tr><tr><td>4.2</td><td>4.3</td></tr></table>
</body>

跨行和跨列可以对同一个td使用。

8.iframe框架标签（内嵌窗口）

在页面开辟一个小区域比如b站pc端选集位置

<body>我是一个单独的完整的页面<br/><iframe src="demo标题.html" width="500" height="400"></iframe>
</body>

<iframe src="demo标题.html" width="500" height="400" name="abc"></iframe><ul><li ><a href="demo列表.html" target="abc">demo列表.html</a></li><li ><a href="demo标题.html"  target="abc">demo标题.html</a></li><li ><a href="表格.html"  target="abc" >表格.html</a></li>
</ul>

使用 name和target 联合，改变iframe内容

9.表单

收集信息发送给服务器

1.文本框

<input type="text" value="默认值"><br>

2.密码框（掩码）

<input type="password" value="默认值">

3.单选按钮

 <input type="radio" name="sex" > <input type="radio" name="sex"><br>

4.下拉选择

     <select>  <option>abc</option>  <option>abc</option>  <option>abc</option>  </select><br>

5.复选框

     <input type="checkbox">abc   (abc 为举例)<input type="checkbox">abc  <input type="checkbox">abc<br>

6.文本域

 <textarea row="5" cols="50">  abc  </textarea><br>

7.文件上传

 <input type="file">

8.提交按钮

 <input type="submit" value="abc"><!--acb会呈现在按钮上 -->

9.重置按钮

 <input type="reset" value="abc">

10.如何跳转网页

 <form action="receive.html"><input type="submit" value="注册"></form>

提交

注意：

区别：

10其他

     <p>这是一个段落</p><div>这是一个块</div><span>密码必须是6位</span><span>用户名不为空</span><label>这个是标签 </label>

二.CSS

行内样式：放在标记的style属性里，行内样式优先级最高

<body><div style="border: 1px solid red;"> div标签1</div><div style="border: 1px solid red;"> div标签2</div><span style="border: 1px solid red;"> span标签1</span><span> span标签2</span>
</body>

页内样式：放在head之间，用style标记

style 里的属于css 注释使用/* 注释 */

外部样式：放在独立的.css文件中，在网页上用link标签引入

CSS选择器（*****）

标记（标签）选择器如上
id选择器

3. class选择器

一个标签只能使用一个id选择器，但是可以使用多个class

ID和class的优先级不同，当你同时使用两个时，ID优先作用

组合选择器

下图是是这个类然后后代必须a标签， a的后代必须有span标签，满足所有条件的使用这个样式。

三.JavaScript

1.特点

1.交互性(它可以做的就是信息的动态交互)
2.安全性 (不允许直接访问本地硬盘)
3.跨平台性(只要是可以解释JS的浏览器都可以执行，和操作系统无关)

2.使用方式

使用script标签

<script type="text/javascript">
alert("hello javaScript")
</script>

使用script标签单独引入js代码文件与css类似

可以再写一个script标签（先执行前面的）

3.变量

<head><meta charset="UTF-8"><title>变量</title><script type="text/javascript">var i;i=12;alert(typeof (i));i="asd"alert(typeof (i));</script>
</head>

<script type="text/javascript">var a=1;var b="a";alert(a* );</script>

NaN 是非数字非数值。

4.关系运算

基本与Java一样

不一样的：

5.逻辑运算

nan也是

进行布尔值的且和或的运算。当运算到某一个变量就得出最终结果之后，就返回哪个变量

6.数组

元素类型可以不一致

<script type="text/javascript" >var arr =[];alert(arr.length); // 0arr[0] =12;alert(arr[0]); //12alert(arr.length); //1arr[3]="a";alert(arr[2]);//undefinedalert(arr.length);//4</script>

读操作辉自动扩容，读的时候越界不会扩容（undefined）

7.函数

返回值直接retun 不需要说明类型，形参直接写名字，不需要说明类型

    <script type="text/javascript">function fun() {alert("无参函数调用")}// fun();function fun2(a,b) {alert("有参函数调用 a="+a+"b="+b)}// fun2(1,5);function sum(num1,num2){return num1+num2;}alert(sum(100,30)) //130</script>

java 函数可以重载 js不可以函数重载，会覆盖前面的函数
隐形参数

就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。操作类似数组
像java中的可变长参数

<script type="text/javascript">function fun(){alert(arguments);alert(arguments.length);for (var i= 0 ;i<arguments.length;i++){alert(arguments[i]);}}fun();//[object Arguments]  0fun(1,"g",true);//[object Arguments] 3</script>

就算是fun(a,b,c);有参数也不会影响arguments使用。a 就是arguments[0];

如果数值和字符串相加和java一样，就是拼接

8. js的自定义对象

object形式的自定义对象

对象的定义：

var 变量名 = new Object(); //对象实例（）

变量名.属性名 =值；//定义一个属性

变量名.函数名 = function（）{}//定义一个函数

对象的访问：

变量名.属性名

变量名.函数名

{}花括号形式的自定义对象

属性和方法之间，属性和属性之间用逗号隔开最后一个不用。

对象的访问：

变量名.属性名

变量名.函数名

9.js的事件

电脑输入设备和页面进行的交互的响应叫事件。点击，双击，划过键盘点击等等

onload

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<!--静态注册onload-->
<!--tip:最外层是双引号那么里面就得用单引号不然解析不了-->
<body onload="alert('静态注册onload事件');"></body>
</html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onloadFun() {alert('静态注册onload事件,大量代码');}</script>
</head>
<!--静态注册onload-->
<body onload=onloadFun()></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload =function (){//固定格式alert('动态注册onload事件');}</script>
</head>
<body></body>
</html>

onclick

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun(){alert("静态注册按钮1onclick")}//动态注册onclick事件window.onload = function (){/** document js语言提供的对象（文档） 表示整个页面* Element 元素 就是标签* 通过id属性获取标签*///获取标签对象var btnObj =document.getElementById("btn02")//通过标签对象.事件名 =function(){}btnObj.onclick =function (){alert("动态注册的onclick");}}</script>
</head>
<body><!--静态注册onclick事件--><button onclick="onclickFun()">按钮1</button><button id="btn02">按钮2</button>
</body>
</html>

onblur

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onblurFun(){console.log("静态注册onblur");//类似sount//console 是js提高的向浏览器的控制台打印输出，用于调试}window.onload = function (){var obj=document.getElementById("psw");obj.onblur=function (){console.log("动态注册onblur");}}</script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"><br/>
密码：<input type="password" id="psw"><br/></body>
</html>

onchange

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onchangeFun() {alert("静态注册onchange,男神已经改变了")}window.onload =function (){var nanshengobj = document.getElementById("nansheng");nanshengobj.onchange =function (){alert("动态注册onchange,男神已经改变了")}}</script>
</head>
<body>选择你心中的男神<select onchange="onchangeFun()"><option>--d--</option><option>--o--</option><option>--n--</option><option>--g--</option></select>选择你心中的男神2<select id="nansheng"><option>--z--</option><option>--i--</option><option>--z--</option><option>--h--</option></select></body>
</html>

onsubmit

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onsubmitFun() {//验证所有表单信息是否合法，如果有不合适的就提醒并阻止提交alert("静态注册表单提交事件");return false;}window.onload =function (){var subObj =document.getElementById("submit");subObj.onsubmit =function (){alert("动注册表单提交事件");return false;}}</script>
</head>
<body>
<!--
return false 可以阻止表单提交
<form action="http://localhost:8080" method="get" οnsubmit="return false">-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()"><input type="submit" value="静态注册"/>
</form>
<form action="http://localhost:8080" method="get" id="submit"><input type="submit" value="动态注册"/>
</form>
</body>
</html>

10.DOM模型(重点)

html就是html文档

（1）.document对象

document对象方法介绍：

id使用需要唯一

（2）.验证用户名输入合法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun() {//获取这个标签对象 uname就是一个dom对象var uname = document.getElementById("username");/*alert(uname.id); //unamealert(uname.type) //text*///可以读输入框的值//alert(uname.value)var unameText = uname.value;//正则表达式验证 字母 下划线 数字 组成5到12位var patt = /^\w{5,12}$/;// alert(typeof (patt));//objectif (patt.test(unameText)){alert("输入合法");}else {alert("输入不合法");}}</script>
</head>
<body>用户名：<input type="text" id="username" value="输入用户名"/><button onclick="onclickFun()">校验</button></body>
</html>

改进版：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun() {var uname = document.getElementById("username");var unameText = uname.value;//正则表达式验证 字母 下划线 数字 组成5到12位var patt = /^\w{5,12}$/;var unameSpanObj = document.getElementById("userSpan");//innerText 表示起始标签和结束标签的内容// alert(unameSpanObj.innerHTML);// alert(typeof (patt));//objectif (patt.test(unameText)){unameSpanObj.innerHTML="<img src=\"right.png\" width=\"15\" height=\"15\"/>";}else {unameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"15\" height=\"15\"/>";}}</script>
</head>
<body>用户名：<input type="text" id="username" value="输入用户名" onblur="onclickFun()"/><span id="userSpan" style="color: red;"><!-- <img src="right.png" width="15" height="15"/>--></span><!-- <button οnclick="onclickFun()">校验</button>--></body>
</html>

（3）.正则表达式

 <script type="text/javascript">//是否包含字母evar patt =new RegExp("e");var patt = /e/; //一样与上面//要求是否包含a或b或cvar a =/[abc]/;//要求是否包含a或b或d或e............var b =/[a-z]/;//是否包含任意数字var c =/[0-9]/;// \w元字符用于查找单词字符。//单词字符包括:a-z.A-Z.0-9, 以及下划线,包含_ (下划线)字符。var d=/\w/;//是否包含至少一个avar e=/a+/;//是否包含0个或多个avar f =/a*/;//是否包含0个或1个a 他们都是检索到符合条件就会停止var G =/a?/; // 123654aaaa78 返回t//是否包含连续3个a x个nvar h =/a{3}/;//是否包含 至少3个连续的a 最多5个连续的avar i =/a{3,5}/; //"aaaaaaaaaa" 也会返回t，看var h//必须以a结尾var j= /a$/;//必须以a开头var j= /^a/;//从头到尾都必须完全匹配 至少3个连续的a 最多5个连续的avar h =/^a{3,5}$/// alert(h.test("1aa2aa"))</script>

（4）getElementsByName

是有序的是从上到下的顺序

与ById的区别就是获得的是一个对象数组，然后对数组里的对象的属性进行操作

（5）getElementsByTagName

3个查询方法

优先级：

id>name>tagname

加载完成后才可以查询

代码从前到后执行，如果不在点击方法里，在外面查到是null. 如下：

解决方法：

页面加载完会执行这个方法

（6）节点的常用属性和方法

![image-20220130105908354](https://img-blog.csdnimg.cn/img_convert/832c12cd4af518d9343c07fe68fcd51a.png)

理解：

city 有9个孩子节点

空格算成了单独的文本节点，属性和文本都算在标签节点里面了

只要获取孩子节点，具体的文字包括li的属性都是孙节点了

（7）. 添加子节点

<!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"); //在内存中divObj.innerHTML= "donggei"; //在内存中 没放在bodydocument.body.appendChild(divObj);}</script>
</head>
<body></body>
</html>