自学Javaweb笔记

今天也是不卷的一天

已于 2022-09-17 11:49:13 修改

阅读量681

点赞数

文章标签：前端

于 2022-05-04 10:08:58 首次发布

本文链接：https://blog.csdn.net/qq_63116880/article/details/124560058

版权

文章目录

HTML
CSS
JavaScript

HTML

配置idea的默认网页

idea更改默认浏览器，如果想改edge为默认浏览器.
file - settings - Tools - Web Browsers and Preview
第一步：把里面所有的都点 ‘ - ’删掉，
第二步：添加一个Name为 Edge， Family 为 Internet Explorer 路径自己找
默认下载在C:\Program Files (x86)\Microsoft\Edge\Application\
这个路径下的一个exe文件添加到Path里。
这时候如果直接保存执行HTML的话会出现Must be at least one browser per family的问题，
需要在下面再添加一个Chrome 路径和edge一样
在这里插入图片描述

一、HTML的书写规范

<!DOCTYPE html><!--约束 声明-->
<html lang="en"><!-- html标签表示html开始   lang="zh_CN"表示中文    html标签中一般分为两部分，分别是head和body-->
<head><!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码 -->
    <meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集-->
    <title>CSDN</title><!-- 表示标题 -->
</head>
<body><!--是整个html页面显示的内容-->
    hello <HTML></HTML>
<button onclick="alert('你真帅')">点这里</button>
</body>
</html><!--整个html页面的结束-->

二、基础语法

1.HTML标签：

（1）标签的注意事项

标签不能交叉嵌套不能一个双标签包着另一个双标签的头或尾 //不过浏览器会帮你修复代码
标签必须正确的关闭和闭合双标签必须有头有尾 单标签必须有** / ** //浏览器也会帮你修复
属性必须有值，属性值必须用加引号
注释不能嵌套
双标签：<标签></标签>
单标签<标签/>

（2）基本标签

		<!-- 标题只有h1 - h6
			h1最大
			h6最小
			align="left"    左对齐（默认）
			align="center"	居中
			align="right"	右对齐
			-->
		<h1>标题1<h1>
		<h2>标题2<h2>
		<h3>标题3<h3>
		<h4>标题4<h4>
		<h5>标题5<h5>
		<h6>标题6<h6>

		<!--段落标签-->
		<p>小了白了兔      白了又了白</p>
		<p>清了蒸了红了烧了炖了起了来</p>
		<p>放了葱了姜了蒜了盖了锅了盖</p>
		<p>端了上了桌了来了真了好了吃</p>
		
		<!--水平线标签-->
		<hr/>


		<!--换行标签-->
		小了白了兔      白了又了白 <br/>
		清了蒸了红了烧了炖了起了来 <br/>
		放了葱了姜了蒜了盖了锅了盖 <br/>
		端了上了桌了来了真了好了吃 <br/>
		
		<!--样式标签-->
		<strong>i love you</strong> <br/>
		<em>i love you</em> <br/>
		
		<!--特殊符号-->
		空格：&nbsp;
		<br/>
		大于号：&gt;
		<br/>
		小于号:&lt;
		<br>

（3）超链接（重点）

在网页中所有点击以后可以跳转的内容都是超链接
<a></a>标签为超链接
href属性设置连接的地址
target属性设置哪个目标进行跳转
_self 表示当前页面（默认值）
_blank 表示打开新页面进行跳转

<a href="https://blog.csdn.net/qq_63116880?spm=1011.2124.3001.5343" >小绿龙</a>
    <a href="https://blog.csdn.net/qq_63116880?spm=1011.2124.3001.5343" target="_self">小绿龙</a>
    <a href="https://blog.csdn.net/qq_63116880?spm=1011.2124.3001.5343" target="_blank">小绿龙</a>

锚链接：
1.需要一个锚标记
2.跳转到标记#

（3）列表标签

① 无序列表

<!--无序列表-->
 <ul type="none">
        <li >张三</li>
        <li>李四</li>
        <li>王麻子</li>
    </ul>

② 有序列表

 <!--有序列表-->
  <ol type="none">
        <li >张三</li>
        <li>李四</li>
        <li>王麻子</li>
    </ol>

③自定义列表

<!--自定义列表
dl:标签
dt:列表名称
dd:列表名称
-->
<hr/>
<dl>
    <dt>语言</dt>

    <dd>Java</dd>
    <dd>C/C++</dd>
    <dd>Python</dd>
    <dd>JavaScript</dd>
</dl>

（4） img标签

img标签是图片标签，用来显示图片
scr属性可以设置图片的路径
width属性可以修改图片的宽
height属性可以修改图片的高
alt属性可以设置如果图片找不到现实的东西

在JavaSE中路径也分为相对路径和绝对路径
相对路径：从工程名开始算

绝对路径：盘符：/目录/文件名

在web中路径分为绝对路径和相对路径两种

相对路径：
. 表示当前文件所在的目录
… 表示当前文件所在的上一级的目录
文件名表示当前文件所在的目录的文件，相当于./文件名./可以省略

绝对路径：
正确格式是：http://ip:port/工程名/资源路径

(5) 表格标签

①.table标签

<table>是表格标签
① border设置表格标签
② width 设置表格宽度
③ height 设置表格高度
④align设置表格相对于页面的对齐方式
⑤cellspacing设置单元格间距
<tr> 是行比奥前
<th>是表头标签
<td>是单元格标签
① align设置单元格文本对齐方式
<b>是加粗标签

②.跨行跨列标签

colspan 属性设置跨列
rowspan属性设置跨行

(6) iframe标签

iframe标签可以在页面上开辟一个小区域显示一个单独的页面
iframe标签和和a标签的组合使用步骤如下:
① 在iframe标签中使用name属性定义一个名称
② 在a标签的target属性上设置iframe的name的属性值

(7) 表单

readonly 只读
disable 禁用
hidden 隐藏域
placeholder 提示默认信息
required 非空判断
pattern 正则表达式

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post,get 提交方式
    get方式提交：我们可以在url中看到我们提交的信息。不安全 但是高效
    post方式提交:比较安全，传输大文件
-->

<form action="1.我的第一个网页.html"></form>

<!--文本输入框：input type="text"-->

<p>名字：<input type="text" name="username"></p>

<!--密码框：type="password"-->
<p>密码：<input type="password" name="password"></p>

<!--单选框标签
input type="radio"
value: 单选框的值
name：表示组
-->
<p>
    <input type="radio" value="boy" name="sex">男
    <input type="radio" value="girl" name="sex">女
</p>

<!--多选框
input type="checkbox"
-->
<p>
    <input type="checkbox" value="sleep" name="hobby">睡觉
    <input type="checkbox" value="code" name="hobby">敲代码
    <input type="checkbox" value="play" name="hobby">打游戏
    <input type="checkbox" value="chat" name="hobby">聊天
</p>


<!--按钮
input type="text" 普通按钮
input type="image"  图片按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
-->
<P>按钮
    <input type="text" name="btn1" value="点击">
    <input type="image" src="../resources/image/1.png">
</P>

<p>
    <input type="submit">
    <input type="reset" value="清空">

</p>
<!--
下拉框
列表框
-->

<p>语言
    <select name="列表名称">
        <option value="Java">Java</option>
        <option value="C/C++">C/C++</option>
        <option value="Python">Python</option>
        <option value="JavaScript">JavaScript</option>
    </select>
</p>

<!--文本域
cols
rows
-->
<p>
    <textarea name="" id="" cols="30" rows="10">Hello World</textarea>
</p>

<!--文件域
input type="file"
-->

<p>
    <input type="file">
</p>

<!--邮件验证
-->
<p>邮箱：
    <input type="email" name="emile">
</p>

<!--url-->
<p>url:
    <input type="url" name="url">
</p>

<!--数字-->
<p>
    <input type="number" name="number">
</p>

<!--滑块-->
<p>音量
    <input type="range" name="voice" min="0" max="100" step="2">
</p>

<!--搜索框-->

<p>
    <input type="search" name="search">
</p>

CSS

选择器{
	声明1;
	声明2;
	声明3;
}

优先级：就近原则，离代码越近，就按谁的来

1.选择器

1.标签选择器

选择一类标签

<style>
        h1{
            color: blueviolet;
        }
        p{
            color: green;
        }
    </style>
</head>
<body>

    <h1>Hello World</h1>
    <h1>Hello World</h1>

    <p>hello world</p>

2. 类选择器class

在标签中声明class元素，在css中通过.class名选择

<style>
        .c1{
            color: #ff4b80;
        }
        .c2{
            color: #1d2fd2;
        }
    </style>
</head>
<body>
    <h1 class="c1">标题1</h1>
    <h1 class="c2">标题2</h1>
    <h1 class="c3">标题3</h1>

3.ID选择器

在标签中声明ID元素，在CSS中通过#id名选择

<style>
        #i1{
            color: #f7899c;
        }
        #i2{
            color: #53d262;
        }
        #i3{
            color: #d21210;
        }
        #i4{
            color: #d28d25;
        }
    </style>
</head>
<body>
    <h1 id="i1">标题1</h1>
    <h1 id="i2">标题2</h1>
    <h1 id="i3">标题3</h1>
    <h1 id="i4">标题4</h1>
    <h1 id="i5">标题5</h1>

高级选择器

1.层次选择器

以下面的html代码为例

<p>p1</p>
    <p class="active>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            <p>p6</p>
        </li>
    </ul>

1.1后代选择器

body + 空格 + 选择的标签

body p{
            background: #f7899c;
        }

1.2子选择器

body + > + 选择的标签

body>p{
            background: #53d262;
        }

1.3相邻兄弟选择器

当前选择元素的向下的一个兄弟元素

.active + p{
            background: #d21210;
        }

1.4通用兄弟选择器

当前选择元素的向下的所有兄弟元素

.active ~ p{
            background: aquamarine;
        }

4.结构伪类选择器

以下面的html代码为例

<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>

 		/*ul的第一个子元素*/
        ul li:first-child{
            background: #f7899c;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #53d262;
        }

        /*选中p1：定位到父元素，选择当前第一个元素
        选中当前p元素的父级元素，选中父级元素的第一个，并且是当前标签元素才生效
        */
        p:nth-child(2){
            background: #d28d25;
        }
        /*选中父元素下的p元素的第二个，类型p*/
        p:nth-of-type(2){
            background: #d21210;
        }

5.属性选择器（常用）

id + class结合
用法：
a[id]{}
属性名：属性名 = 属性值（正则）

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

2.美化网页元素

1.字体样式

font-family: 字体
font-size: 字体大小
font-weight: 字体粗细
color: 字体颜色

2. 文本样式

1.颜色

1.1 单词color
1.2 RGB 0-F
1.3. RGBA A：0-1（透明度）

2. 文本对齐方式

text-align:center 居中

3. 首行缩进

text-indent:2em

4. 行高

line-height

5. 装饰

text-decoration

6. 文本图片水平对齐

vertical-align:middle

`盒子模型（常用）`

内容区：content
内边距:padding
边框:border
外边距:margin
内容区：
width和height设置内容区的大小
边框
边框会影响盒子大小
border-width边框的宽度
border-color边框的颜色
border-style边框的样式
内边距
内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上
外边距
外边距不会影响盒子的大小但是会影响盒子的位置

flex布局

设置方式：

display: flex
display: inline-flex

`flex-direction`:

/*
flex-direction 指定容器中弹性元素的排列方式
可选值：
row:默认值：弹性元素在容器中水平排列（左向右）
row-reverse: 弹性元素在容器中水平反向排列（右向左）
			-主轴自右向左
colum：弹性元素在容器中纵向排列（自上向下）
colum-reverse： 弹性元素在容器中纵向排列（自下向上）
			-主轴自下向上
			-父元素的剩余空间会按照比例进行分配
主轴：
弹性元素的排列方式成为主轴
侧轴：
与主轴垂直的方向的轴叫做侧轴
*/

/*
弹性元素的属性
flex-grow：指定元素生长的系数
			-当父元素有多余空间时，子元素如何伸展
flex-shrink：指定元素收缩系数
			-当父元素的空间不足以容纳所有子元素时，如何对子元素进行收缩
*/

/*
flex-direction: column
flex-warp:设置元素是否在弹性容器中自动换行
可选值：
nowarp：元素不会自动换行
warp：元素沿着辅轴方向换行
warp-reverse：元素沿着辅轴反方向换行

flex-flow：同时设置warp和direction的简写属性

justify-content：
如何分配主轴的空白空间
可选值
flex-start：元素沿着主轴起点排列
flex-end元素沿着主轴终边排列
center：元素剧中排列
space-around：空白分配到元素的两侧
space-between：空白均匀分布到元素间
space-evenly：空白分配到元素内测
*/

/*
align-items：
元素在辅轴上如何对齐
元素间的关系
- 可选值
	- stretch 默认值 将辅轴的长度设置为相同的值
	- flex-start 元素不会拉伸 沿着辅轴的起边对齐
	- flex-end 沿着辅轴终边对齐
	- center 居中对齐
align-content:辅轴空白空间的分布
align-self:覆盖align-itmes
*/

/*
弹性元素上的样式
*/

JavaScript

1.基本语法

总结与Java类似

1.变量类型

var
所有变量都可以用var，他可以自动识别并转化为对应的类型

2.数据类型

number
js不区分小数和整数，Number

123//整数
123.1//浮点数
1.123e3//科学计数法
-99//负数
NaN	//not a number
Infinity //无穷大

3.字符串

'abc' "abc"

4.比较运算符

= // 赋值
== //（等于）类型不一样，值一样，也会判断为true
=== // 绝对等于，类型一样，值一样为true

注意
NaN === NaN，这个所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断
尽量避免使用浮点数进行运算，会出现精度损失的问题

null和undefined
null是空的意思
undefined是未定义的意思

5.数组

var arr = [1,2,3,4,5,'hello',null,true]

注意：如果给arr.length赋值，数组的长度会发生变化

6.对象

1.对象赋值

var Person{
	属性名:属性值,
	属性名:属性值,
	属性名:属性值
}

2.使用一个不存在的对象属性，不会报错！undefined
3.动态的删减属性

delet person.name
true

4.动态的添加：给新的属性赋值即可
5.判断属性值是否在这个对象中
javascipt中所有的键都是字符串，值是任意对象

'age' in person
true
//继承
'tostring' in person
true

6.判读一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('tostring')
false
person.hasOwnProperty('age')
true

7.forEach循环

var age = [12,3,5,6,8,7,5,3]

age.forEach(function (value){
	console.log(value)
])

8.map
与Java类似

var map = new map([['tom',10],['jim',5]])
var name = map.get('tom')
map.set('jack',20)

9.set
无序，不可重复集合

2.内部对象

1.Date

var now = new Date();
now.getDate(); //日
now.getFullYear(); //年
now.getMonth();//月
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳

2.JSON

var user = {
            name:'xiaolvlong ',
            age:3,
            sex:'男'
        }
        //对象转化为JSON字符串
        var jsonstring = JSON.stringify(user);
        //JSON字符串转化为对象
        var obj = JSON.parse(jsonstring);

3.面向对象

3.1.class关键字

1.定义一个类，属性，方法

class Student {
            constructor(name) {
                this.name = name;
            }

            hello(){
                alert('hello');
            }
        }

2.继承
本质：查看对象原型

class littleStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade = grade;
            }

            myGrade(){
                alert('我叫' + this.name + ',我是一名小学生' + ',我今年上' + this.grade + '年级');
            }
        }
        var xiaohong = new littleStudent('小红',1);

4.BOM对象

JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
BOM：浏览器对象模型

IE 6-11
Chrome
Safari
FireFox
Opera

window(重要)

window代表=浏览器窗口

Navigator

Navigator封装了浏览器的信息
大多数时候不会使用Navigator对象，因为会被人为的修改！
不建议使用

screen

代表屏幕尺寸

location(重要)

location代表当前页面的URL信息

document

代表当前页面HTML DOM文档树
获取具体的文档树节点
获取cookie

document.cookie
'uuid_tt_dd=10_19***********'

服务端可以设置cookie:httpOnly 防止cookie被劫持

history

history代表浏览器的历史记录

history.back()
history.forward()

5.操作DOM对象

DOM：文档对象模型

核心
浏览器网页就是一个dom树形结构！

更新：更新Dom节点
遍历dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点
要操作一个Dom节点，就必须先获得这个Dom节点
使用document.getElementsByXXX的方式来获取Dom节点对象
之后尽量使用jQuery()

更新节点

id1.innerText='456'修改文本的值
id1.innerHTML='<strong>123</strong>'可以解析文本标签

操作css

id1.style.color='red';//属性使用字符串包裹
id1.style.fontSize='20px'//- 转驼峰命名
id1.style.padding = '2em'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
	<h1>标题一</h1>
	<p1 id ="p1">p1</p>
	<p2 class="p2">p2</p>
</div>
<script>
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(p1)
</script>

插入节点

我们获得了某个Dom节点，假设这个Dom是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在的元素，会直接覆盖原有的元素

今天也是不卷的一天

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
自学Javaweb笔记

自学Javaweb笔记：1.idea更改默认浏览器，如果想改edge为默认浏览器，file - settings - Tools - Web Browsers and Preview 第一步：把里面所有的都点 ‘ - ’删掉，第二步：添加一个Name为 Edge， Family 为 Internet Explorer 路径自己找默认下载在C:\Program Files (x86)\Microsoft\Edge\Application\ 这个路径下的一个exe文件添加到Pat
复制链接

扫一扫