前端了解笔记

最新推荐文章于 2024-10-17 09:52:22 发布

RogueZby

最新推荐文章于 2024-10-17 09:52:22 发布

阅读量63

点赞数

分类专栏：学习笔记文章标签： html css jquery

本文链接：https://blog.csdn.net/weixin_50893467/article/details/126361573

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

HTML（一）

1.统一资源定位器

URL，又称“网址”

2.HTML标记

<!--基本格式-->
<标记>文件内容<\标记>
<!--包含属性的标记-->
<标记名称 属性1 属性2 ...>

3.HTML基本结构

起始标记、网页标题、文件主体

<html>
    <head>
        网页标题和属性
    <\head>
    <body>
        文件主体，要显示的内容
    <\body>
<\html>

4.HTML基本标签

<h1>...</h1> ~ <h6>...</h6>  <!-- 标题标签 -->
<p>  <!-- 段落标签 -->
<br/>  <!-- 换行标签 -->
<hr/>  <!-- 水平线标签 -->
<strong>...</strong>  <!--强调标签-->
<b>...</b>, <i>...</i>, <u>...</u>  <!--加粗、倾斜、下划线标签-->
&nbsp  <!--半个空格-->

5.图片标签

<img src = "绝对路径/相对路径"
     alt = "(图片无法正常显示时)图片的替代文字"
     title = "图片标题鼠标悬停时显示"
     width = "...px"
     height = "...px"
     ....>

6.超链接标签

<a href = "连接路径" target = "目标窗口位置">...</a>
<!-- target常用值为_self、_blank-->

7.清单标签

HTML中常用的清单有：

无序清单（unordered list）

<ul type = "...">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

有序清单（order list）

<ol type = "...">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

8.表格标签

<table border = "尺寸"> <!--定义表格-->
    <tr> <!--定义行-->
        <td>...</td> <!--定义列-->
        ...
    </tr>
    ...
</table>

HTML（二）

1.表单控件

2.表单的使用

<form method="get/post" action="发送地址">
	...
</form>

http请求中get和post的区别：

get是不安全的，因为在传输过程中，数据被放在请求的URL中，post的所有操作对用户来说都是不可见的
get传送的数据量较小，这主要是因为受URL长度限制；post传送的数据较大，一般默认为不受限制

3.`<input/>`标签

<input type="..." .../>

type用来决定具体是什么控件

4.`<iframe>`标签

用来规定一个可以显示多个界面的公共区域

CSS（一）

1.什么是CSS

CSS就是Cascading Style Sheets，层叠样式表，简称样式表，是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展，可以进一步美化HTML页面，统一风格

2.CSS基本语法

选择器 {属性:值; 属性:值; ...}

3.标签选择器

定位标签，当前页面所有的相同标签共享一个样式

<style>
    标签 {属性:值; 属性:值; ...}
</style>

4.行间样式

<标签 style="属性:值; 属性:值; ...">

5.外部样式表

在.css文件中直接写好样式代码，然后在.html文件中添加<link>标签导入写好的.css文件即可

6.类选择器

在标签中添加class属性设置它的类，然后在样式表中用类选择器定位到所有相同类的标签使用一个样式

<style>
    .类 {属性:值; 属性:值; ...}
</style>

7.id选择器

在标签中设置它的id，然后在样式表中用id选择器定位到该id的标签使用一个样式

<style>
    #id {属性:值; 属性:值; ...}
</style>

8.派生选择器（后代选择器）

在样式表中可以从父级标签开始层层定位标签

<style>
    父选择器 子级选择器 ... {属性:值; 属性:值; ...}
</style>

9.并列选择器

在样式表中可以并列使用选择器定位一些标签

<style>
    选择器1, 选择器2, ... {属性:值; 属性:值; ...}
</style>

10.通用选择器

<style>
	* {属性:值; 属性:值; ...}
</style>

CSS（二）

1.框模型（盒子模型）

2.CSS定位机制

普通流（默认）
绝对定位
相对定位

3.`z-index`属性

只有使用了定位的元素才能使用此属性，可以用来指定层叠标签的上下关系

JavaScript（一）

1.JavaScript

面向对象的基于事件驱动的客户端脚本语言

JavaScript代码可以写在HTML文件中，用<script>...</script>包括起来，也可以直接写在.js文件中，然后在HTML文件中用<script src="..."></script>来导入

window.alert();//弹窗打印显示，window可以省略
console.log();//在浏览器控制台打印显示，推荐这种调试方法

3.JavaScript变量

基本数据类型：Number（整数、小数），String（使用单引号或双引号括起来），Boolean（true和false），Undefined（只有undefined一个值），Null（设计时有歧义，只有null一个值）
引用类型：Object（对象），Array（数组），Function（函数）

声明任何变量都使用let关键字，变量的数据类型根据赋给它的具体值而定

typeof关键字可以返回变量的数据类型

4.JavaScript运算符

算术、逻辑、赋值、比较、三目

JavaScript中添加了===，既比较内容又比较类型，而普通的==只比较内容

5.函数

封装一段代码，代表能够完成的一种功能

<script>
	function 函数名(参数){
        ...
    }
</script>

形参不需要声明类型，也不需要用let声明

函数中可以有返回值，用return声明

函数必须被调用才能执行

6.事件

用户在网页上的某种操作，常用事件如：

onclick：当单击时
onchange：当内容发生改变时
onfocus：当获得输入焦点时
onblur：当失去焦点时

7.操作标签数据

在有value属性的标签中：对象名.value
在没有value属性的标签中：对象名.innerHTML

8.定位标签的多种方法

通过id属性定位对象

let 变量名 = document.getElementById("id")；

通过class属性定位对象

let 变量名 = document.getElementsByClassName("class");

通过name属性定位对象

let 变量名 = document.getElementsByName("name");

通过标签名定位对象

let 变量名 = document.getElementsByTagName("标签名");

JavaScript（二）

1.DOM 0级事件绑定

在JS代码中进行事件绑定，将JS与HTML隔离，便于维护

2.网页加载事件

浏览器执行前端代码是从头到尾依次执行，如果将JS代码写在HTML代码之前，那么就有可能出现获取不到标签对象的情况，此时，可以将JS代码写在最后，或将JS代码与window.onload事件绑定，即等网页元素都加载完之后就会调用JS代码

推荐永远把JS代码与onload绑定

3.`this`关键字

写在哪个事件绑定中就代表哪个事件绑定的对象

4.`onchange`事件

内容改变事件，通常用于下拉框

5.`onfocus`事件

事件在对象获得焦点时发生

6.`onblur`事件

事件在对象失去焦点时发生

7.`onmouseover`事件

事件会在鼠标指针移动到指定的元素上时发生

8.`onmouseout`事件

事件会在鼠标指针移出指定的对象时发生

9. Java操作CSS

标签对象.style.样式 = "..."

JavaScript（三）

1.常用对象API

Date对象表示当前日期和时间，在使用前必须new实例化：

getFullYear();//获取当前年份
getMonth();//获取当前月份，从0开始
getDate();//获取当前日期
getHours();//获取当前小时数
getMinutes();//获取当前分钟
getSeconds();//获取当前秒钟
toLocaleString();//获取格式化的日期和时间
toLocaleDateString();//获取当前日期的标准格式
toLocaleTimeString();//获取当前时间的标准格式

Math类提供静态函数：

Math.random();//产生一个0~1的随机小数
Math.PI;//π的值
Math.sin(x);//正弦
Math.cos(x);//余弦

String对象的常用方法：

str.length;//获取字符串的字符个数
str.charAt(i);//获取索引出的字符
str.substring(i,j);//获取从索引i开始取j个字符的字符串

2.BOM浏览器对象模型

window对象是JavaScript中的核心顶级对象，它表示一个浏览器窗口。

window对象下还有多个子对象，常用的如history对象、document对象、location对象等

3.`window`对象常用方法

alert();//弹出警告框
open(url, name, args);//默认在新窗口中打开URL地址
close();//关闭窗口
setInterval(fun, n);//每隔n毫秒执行一遍fun函数
setTimeout(fun, n);//设定n毫秒之后才执行fun函数
clearInterval();//关闭定时器

4.`location`对象

BOM中的location对象代表了当前网页的地址信息

使用location对象中的href属性可以跳转到其他页面

5.DOM文档对象模型

网页中被浏览器引擎加载解析成一个个对象的HTML代码，称为DOM文档对象模型（DOM树）

6.元素节点之间的关系

7.动态操作DOM元素

动态生成DOM对象
```
document.createElement("标签名");
```
添加一个DOM元素
```
父级元素.appendChild(子元素);
```
删除一个DOM元素
```
父级元素.removeChild(子元素);
```

JavaScript（四）

1.数组

JavaScript中的数组都是Array类的对象，数组元素的索引从0开始，在使用时有两种方式实例化数组

let arr1 = new Array();//定义一个空数组，能够存放的元素个数不固定
let arr2 = new Array(n);//定义一个初始长度为n的空数组，数组长度可变化

let arr1 = [];//定义一个空数组，长度不固定
let arr2 = [a1, a2, ...];//定义一个存放了元素的数组

2.数组常用方法

push()：将新元素添加到数组的末尾
pop()：弹出数组末尾的元素，弹出后末尾元素将移除
join()：将数组所有元素连接成一个字符串
indexOf()：在数组中搜索元素并返回其位置
lastIndexOf()；在数组中搜索元素，从末尾开始，并返回其位置
splice(index, num, item1, item2, ...)：从数组中添加或删除元素，参数1指定操作的位置，参数2指定要删除的元素个数（0代表不删除元素），后面的参数是要添加的元素

3.JavaScript对象

JavaScript中的引用数据类型

let 对象 = {"属性名1":"属性值", "属性名2":"属性值"};//Object类的对象
console.log(对象.属性名);
console.log(对象["属性名"]);

4.JSON

JSON就是JavaScript Object Notation（JavaScript对象表示法）

JSON是轻量级的文本数据交换格式

JSON

5.JSON常用方法

JSON字符串转成对象：JSON.parse(JSON字符串)
对象转成JSON字符串：JSON.stringify(对象)

6.正则表达式

正则表达式描述了一种字符串匹配的模式

特殊字符
- /^：正则表达式的开始
- $/：正则表达式的结束
- ()：标记一个子表达式的开始和结束
- []：标记一部分可选字符
- .：匹配除\n外的所有字符
- |：逻辑或
限定表达式的出现次数
- *：出现任意次
- ?：出现一次或不出现
- +：至少出现一次
- {m}：出现m次，m是自然数
- {m,}：至少出现m次，m是自然数
- {m,n}：出现m~n次，m和n都是自然数
普通字符
- 包括所有的大写和小写字母字符，所有数字，所有标点符号以及一些特殊符号
非打印字符
- [abc]：表示要么是a，要么是b，要么是c
- ^：表示逻辑非
- \w：匹配包括下划线的任何单词字符，等价于[A-Za-z0-9_]
- \W：匹配任何非单词字符，等价于[^A-Za-z0-9_]
- \d：匹配数字