JavaWeb笔记

梦想成为CtrlCV工程师

已于 2024-04-11 17:02:32 修改

阅读量271

点赞数 5

文章标签：笔记 java 前端

于 2024-04-02 17:30:05 首次发布

本文链接：https://blog.csdn.net/weixin_68850609/article/details/137274731

版权

本文详细介绍了HTML的基本结构、CSS样式控制、JavaScript的基础语法和常用功能，包括HTML标签如超链接、表格和表单，CSS的选择器和布局，以及JavaScript的引入、基础语法、函数、数组、字符串处理、对象和事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一丶HTML

1.HTML

<title>网页的名字</title>

<h1>网页的大标题</h1>

标题从大到小为<h1-h6>

<img src"图片">文字

相对路径: ./ : 当前目录 , ./ 可以省略的 ../: 上一级目录

2.CSS

行内样式 <h1 style="样式要求">

内嵌样式 <style>h1{样式要求}</style>

外联样式需要引入的htlm文件中 <link rel="stylesheet" href="css的路径">

创建一个css文件h1{样式要求}

文字颜色rgb表示rgb(0,0,0)到(255,255,255)

3.css选择器（选取需要改变样式的范围）

定义的时候

<span class = "类名" 或者id="">文字内容</span>

元素选择器：div{样式要求}

id选择器：#id{}

类选择器：.class{}

设置字体大小font-size: 数字px;

4.超链接

<span><a href="网址" target="控制打开新网页的位置">超链接的文字</a>

5.正文

视频<video> 音频<audio>

<br>换行：第一行<br>第二行

加粗：<b>文字</b> 倾斜：<i> 下划线：<u> 删除线<s>

text-indent:段落首行缩进
line-height:设置行高
text-align:设置对齐方式，可取值为 left/center /right

空格占位符（ ）

盒子模型

<p>一个段落，内容都在一段中，每一对都会开启新的一段，主要是文本内容</p>

<div>每一对都会开启新的一行，主要是把一整块包裹下来作为一个整体实现布局等</div>

<span>不会开始新的一行，直到一行写不下才会换行,每对span都在一起</span>

span可以放在p里，span相当于是隔离出一段话来实现效果

6.表格标签

定义表格：<table border="边框宽度px" cellspacing="单元格之间的空间" width="表格宽度px">>

表格行数据<tr> 每个行的单元格是<td> 表头单元格<th>有加粗效果

<tr>

<th>品牌logo</th>

</tr>

<tr>

<td>华为</td>
<td>华为技术有限公司</td>

</tr>

7.表单标签

定义表单<form action="要提交的URL" method="get是拼在URL后面有长度限制或者post在请求体中无限制">

用户名:<input type="text"name="username")
年龄:<input type="text"name="age">
<input type="submit" value="提交">

二丶JS

1.引入方式

JS是控制页面显示效果的，两种引入方式，alert控制弹出框

内部引入 <script> alert("弹出的文字") </script>

外部引入在HTML中引入语句<script> src="js文件的路径" </script> ，在JS文件中写alert("弹出的文字")

2.基础语法

window.alert() 警告框

document.write()直接显示在网页上

console.log()写在浏览器控制台

var定义的全局变量，可以重复定义，新的会覆盖掉旧的。let定义的局部变量，不能重复定义。const定义常量，不可以改变。

typeof 要查看的数据类型

把其他类型转换为数值类型parseInt ("要转换的数据类型")

alert(parseInt("23"));//23
alert(parseInt("acb"));//NaN
alert(parseInt("23c"));//23
alert(parseInt("sda1"));//NaN

：0,null,undefined,"",NaN理解成false，其余为true

3.函数

定义方法一 function 函数名（参数1，参数2...）{要执行的代码}
调用 var reslut = 函数名（参数1，参数2...）；
alert(reslut)

定义方法二 var 函数名=function（参数1，参数2...）{要执行的代码}

调用 var reslut = function（参数1，参数2...）;

alert(reslut)

Array数组

定义 var 变量名 = [数组，元素]；

访问变量名[索引]=值；

遍历数组中有值的元素数组名.forEach(function e ){console e};

添加元素到数组末尾数组名.push(元素1,元素2);

删除元素 splice(开始索引，删几个);

String

var 变量名 ="内容”;

获取指定索引位置的字符字符串名.charAt();

检索某个字符串的位置字符串名.indexOf("字符串");

去除字符串两侧的空格,需要一个新变量接收新的字符串字符串名.trim()；

截取一个子字符串，含头不含尾 substrin(开始索引，结束索引)；

4.自定义对象

var 对象名 = {

属性名1：属性值1，

属性名2：属性值2

函数名：function(形参){要执行的代码 }

};

调用对象名.属性名；

对象名.函数名( )；

5.JSON对象

var 变量名 = {"属性名1"："属性值1"，"属性名2"：数字，"数组":["元素1"，"元素2"] };

JSON字符转转换为js对象        parseJSON.parse(变量名);

调用变量名.属性

js对象转为json字符串        JSON.stringfy(变量名);

6.BOM对象

浏览器窗口对象window.可以省略 window.属性或方法;

弹出对话框 confirm( )

周期性的执行某个函数 setInterval (执行的函数function( ){ },隔多少秒执行一次)；

setTimeout(执行的函数function( ){ },多少秒后执行函数);

地址栏属性 location.属性;

7.DOM对象

根据ID获取单个element对象 var h1 = document.getElementById('id名');

根据标签名获取element对象数组 var divs = document.getElementsByTagName('标签名');

根据name获取element对象数组 var hobbys = document.getElementsByName('hobby');

根据class获取element对象数组 var clss = document.getElementsByClassName('cls');

设置或者返回元素内容元素名.innerHTML = "更改的内容"；

<font> color = '改变的颜色'>文字的内容</font>

变量名.checked = true//复选框选中

8.JS事件监听

事件绑定

方法一

<input type="button" id = "btn1" value="事件绑定1" οnclick="on()">
function on (){
alert("1被点击")
}

方法2

<input type="button" id = "btn2" value="事件绑定2">
document.getElementById('btn2').onclick = function (){
    alert("2被点击")
}