前端基础入门

1 篇文章 0 订阅


再次学习HTML ,css, js 笔记

首先是HTML,可以说是一个骨架罢了,主要是要记住一些标签

在标签里面一般是 title标签设置的是网页的加载栏里的名字,

其中还有charset =“utf-8” 的编码格式的设置,还有meta 用来表示提供文档信息

link:用来引入css文件

script:用来引入js文件 或者js代码

一个页面最好是只用一个h1标签,因为搜索引擎会获取到h1标签,要是有多个的话,会造成不必要的影响


标签的常见属性是 color size width

aligh = 设置的是分割线的对齐方式

在这里插入图片描述

这个是有序和无序列表的使用type这样的属性设置只能背下来

有序的默认是1,2,3, 无序的默认是实行圆点

div 标签要设置属性就要使用到 style标签,具体看下面这行已消失的例子

已消失

上面实际上也是可以加上align 设置内容左右对齐,或者是居中

span标签是行内标签,不会自动换行,也是双标签,并且不能设置宽高

格式化标签

01:

​ color :字体颜色

​ size : 字体大小

​ face : 字体风格

02: 预格式化标签,

在html里面的空格是不会显示的,所以要打空格的时候就要使用到

这个标签,也可以使用其他的方式,比若说,空格符

分号一定要有,不够这个只能一个字符对应一个空格,不太好用

使用格式:

 

03:文本标签

用法: 嵌套在其他的标签里面,是双标签,夹在中间的文本才会有效果

上标和下标可以写化合式,或者几次幂

常用标签

01: <! 超链接标签 关键字 默认是在当前页面刷新–>

还可以设置是打开方式,使用属性target

参数有 _self : 在当前窗口(默认方式)

_blank:在空白窗口

<! 关键字 -->

的另一种使用方法是 锚点,

实际上就是设置好的超链接是在本页面上面的一些内容,也就是刷新到那里,通常我们所见的返回顶部就是那样的东西,

设置方式是:

开头

内容

”# “号的意思就是会在当前的页面刷一下,也就直接返回最上面的地方了

02:

img 标签

在这里插入图片描述

03:

表格标签

在这里插入图片描述
在这里插入图片描述

style的参数表示合并表格的边框,一开始默认是没有边框的。

表单

form标签用于为用户输入创建HTML表单

在这里插入图片描述

正常情况下,get比post快两倍

###标签设置的name 或者id属性主要是看是想要怎么使用

name一般是后台操作用的

id是唯一标识,一般给前端操作使用

在这里插入图片描述

新增标签

html5版本中,新增了很多语义化的标签,这些语义化标签对内容是没有样式效果的,它们只是起到语义化的作用。比如:

css

三种,行内式,内链式,外链式

在这里插入图片描述

外链式,通过link导入,也是写在 头里面的
在这里插入图片描述

要改动的地方就只有 href的地址,要是自己准备好的样式表的位置

设置格式如下:

id选择器

#id属性值{

}

类选择器

选择设置过指定的class属性值的元素

设置格式如下:

.class属性值{

}

CSS盒子模型

标签的内外边距属性,是盒子模型的一个基础,主要是用来控制页面的布局,内外边距是相对的,这要看选择的主体标签是哪一个。

在这里插入图片描述

内边距(padding)

padding-bottom 设置元素的底填充
padding-top   设置元素的顶部填充
padding-left  设置元素的左填充
padding-right  设置元素的右填充

外边距(margin)

用法和上面的padding一样

在这里插入图片描述

要求能做出登录注册页面并用css美化,并且能够做表单

不同的位置做一样的效果

可以使用并集选择器

在这里插入图片描述

#是id选择器

javascript学习

概念:

一门客户端脚本语言,运行在客户端浏览器中的,每一个浏览器都有 JavaScript的解析引擎,所谓的脚本语言,就是不需要直接编译直接就可以被浏览器解析执行了。

功能就是增强用户和html界面的交互过程,可以控制html元素,让页面有一些动态的效果,增强体验。

历史:

出现的原因:之前网络的速度传输漫,客户注册的时候不能进行本地效验,导致注册要花很长时间,于是js出现了,主要就是在客户端组织非法输入,不用传到服务器端再进行校验。

在这里插入图片描述

ecmascript:

客户端脚本语言的标准

基本语法:

01 与html结合的方式:

​ 1,内部js 定义

​ 2, 外部js 定义

内部js和外部js

在这里插入图片描述


02 注释的方式:

单行注释用 //

多行注释用 /* */


03数据类型:
  • 原始数据类型(java里面的基本数据类型)
  • 引用数据类型:对象(包括dom, bom)
  1. 原始数据类型有五种,number,string,boolean,null,undefined(变量没有初始化值,会默认赋值为undefined)

04变量:

js示弱类语言,体现在,c语言,java等初始化一个值的时候要声明它的数据类型,

以后要重新赋值的时候,也是要赋相同数据类型的值,而js不用,初始化是数字int,但是你再赋值的时候可以是一个字符串。

在这里插入图片描述

document.write()相当于就是我们system.out(),

alter(内容) 弹出内容

document.write(num+"<br>");   // 换行

变量的数据类型可以是用typeof(变量)查看

05运算符:

在这里插入图片描述


判断条件绕过
在这里插入图片描述


boolean转换

在这里插入图片描述


06js的特殊语法:
  • 代码以 ; 结尾, 如果只有一行语句,分号可以省去

  • 变量的定义使用var关键字(定义的是局部变量),也可以不使用(定义的是全局变量)

07流程控制语句:

if…else

while…

switch…

和java都是一样的,唯一的不同是switch开关函数的接收的开关可以是多种类型,而java里的只能是一种之前定义好的类型。

在这里插入图片描述


输出九九乘法表:

在这里插入图片描述

solid 表示实线, 1px表示一个像素


08函数对象:

方法定义是形参的数据类型不要写

01

function 方法名(a,b){
  alert(a + b);   // 函数里面写方法体

}

方法名(4,3);   // 调用

02

var 方法名 = function(形式参数列表){
    方法体;
}

定义的函数的参数列表 具有属性:length

alert(方法名.length)   //弹出的是定义的参数的个数

函数的重复声明被认为是覆盖掉

方法的调用只与形式参数列表有关 ,和实际参数列表无关,也就是实际参数多了的时候,多的只会被忽略

定义的方法里对形式参数列表有一个内置的arguments对象,这个对象是一个数组

在这里插入图片描述

09数组对象:

js里面的数组没有越界的说法,访问到下标默认不存在的,会返回的是undefined

也就是说array的长度是可变的

在这里插入图片描述

10日期对象:

Data:日期对象

  • 创建对象:var data = new Data();
  • 常见方法:toLocalString():返回当前对象对应的时间本地字符串格式

在这里插入图片描述

11math对象
  • 创建:不用创建,直接使用,格式: math.方法名字();
  • 属性: PI
  • 方法:

在这里插入图片描述

random函数只产生0到1的数,但是可以用综合表达式子产生1到100的数字


12 RegExp:正则表达式对象
  1. 正则表达式就是定义了字符串的组成规则,表单的校验依赖于它。

首先是单个字符的匹配:[ ]

 [a]  单个字符a 
 [ab]  单个字符a或者b
 [a-zA-Z0-9] a到z中的A到Z中的0到9中的单个字符
  \d : 单个数字字符
  \w: 单个单词字符,就是上面的3表达式

量词符号

  ?:表示出现零次或者一次
  *:表示出现零次或者多次
  +:出现一次或者多次
  {m,n}: 表示m<=数量<=n
   ^ : 匹配开始
   ¥: 匹配结束

正则对象

1:创建

  1. ​ var reg = new RegExp(“正则表达式”);
  2. var reg = /正则表达式/;

2:只有一个方法

  1. test(参数) :验证指定的字符串是否符合正则定义的规范

返回值是boolean类型ture/false

在这里插入图片描述

弹出的是false


Global对象:

1.特点

全局对象,这个Global中封装的方法不需要新建对象就可以直接调用,格式直接是:

  • 所有内建的javascript对象.方法名()

2.方法

gbk编码一个汉字占两个字节

utf8编码一个汉字站四个字节

常用的方法有:

01:encodeURL() :url编码

02:decodeURL() : url解码

浏览器数据的传输不能传汉字,所以需要先进行url编码,

对汉字进行转码,首先是写成二进制的数字,然后转成十六进制的数,每两个数字用百分号 % 隔开

在这里插入图片描述

03:encodeURLComponent(): url编码,编码的字符更多,包括冒号(%3A),斜杠(%2F),问号(%3F),等于号(%3D)等

04:decodeURLComponent(): ~~

05:parseInt() : 将字符串转成数字 (i是大写的)

   * 逐一判断每一个字符是不是数字,直到不是数字为止,将前边的数字部分转成number
   * 适用于定义了字符串里面含有数字,想要转变类型使用,非数字部分不会被返回。
   * 如果一个数字都没有的话,直接返回NaN.

06: eval() : 将 javascript字符串 作为 脚本代码来执行

在这里插入图片描述

就是这个函数,可以实现绕过,进行一些危险的操作。

Bom简单学习:
简介:

01功能:控制html文档的内容

02代码:获取页面标签(元素)对象Element

document.getElementById("id值") :通过元素的id获取元素对象

03操作对象(获取对象之后的操作):

  • 修改属性值:明确获取的对象是哪一个,查看帮助文档,找出该标签那些属性是可以更改的
  • 修改标签内容: 利用到innerHTML属性修改

在这里插入图片描述

放的位置要注意,一般是要放在最后的,要是放在html代码前面了,因为代码执行顺序,就不能达到我们原来的目的。

事件简单学习

01功能:某些组件被执行了某些操作之后,触发某些代码的执行。

02如何绑定事件:

  • 直接在HTML标签上,指定事件的属性(操作),属性值就是js代码
事件:onclick--- 单击事件 
<img id = "light" src="图片路径" onclick="alert("我被点了");">

在这里插入图片描述

  • 通过js获取元素对象,指定事件属性,设置一个函数

在这里插入图片描述

第二种事件绑定对html的侵入度很低,耦合度就小了,利于维护和分工协作

实现点击切换图片

在这里插入图片描述

只切换一次,如果想要每次点击都切换一次,可以设置一个flag变量标记控制。

在这里插入图片描述

在这里插入图片描述

Bom正式入门
  • 概念:browser object model 浏览器对象模型,将浏览器各个组成部分封装成对象

浏览器可以分成五个对象

  1. window
  2. navigator(浏览器对象)
  3. screen(屏幕对象)
  4. history
  5. location(地址栏对象)
    在这里插入图片描述

dom对象是window窗口对象的子集,因为很重要,所以自成一派。


window:窗口对象
  • 属性
  1. window对象不需要创建,可以直接使用 : window.方法名();
  2. window可以省略
  3. 获取其他bom对象
获取history对象
var h1 = window.history;
var h2 = history;

4.获取dom对象

window.document.getElementById("");  -- dom对象是window对象的子集
document.getElementById("");   -- 省略模式
  • 方法

    1. alert()显示带有一段消息和确认按钮的警告框

      2.confirm() 显示带有一段消息及确认按钮和取消按钮的对话框

在这里插入图片描述

点击确定返回ture,取消返回false。

​ 3.prompt() 显示可提示用户输入的对话框。返回值是用户输入的值。

4.open()

打开新的窗口

通过按钮操控打开新窗口

在这里插入图片描述

open() 里面可以设置参数成 open(“https://www.baidu.com”);

5.close()

关闭当前调用这个方法的窗口,不过通过之前open()方法生成的新窗口会返回一个window对象,所以可以这样操作:

var newWindow;
newWindow = open("https://www.baidu.com");
newWindow.close();

setTimeout(): 一次性定时器

两个参数,

  • js代码/函数方法
  • 毫秒值

在这里插入图片描述

有一个返回值 – 定时器的编号

clearTimeout():

var id = setTimeout(js/方法, 2000);
clearTimeout(id);

setInterval(): 循环定时器

clearInterval():

和上面的一组一样的操作,第二个参数设置的时间是每隔那么久执行一次。

window01 —轮播图案例制作 – 能力要求

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述



location:(地址栏对象)
  • 创建:

window.location

location

  • 方法:

reload() 重新加载当前文档/刷新

href 设置或返回完整的 url。(不带括号)

location.href = "https://www.baidu.com";  -- 可以和按钮事件相绑定
location01 — 跳转首页案例

在这里插入图片描述

在这里插入图片描述

history:(历史记录对象)

这个历史记录是指当前打开的网址之前打开的记录,不是指以前至浏览器打开的所有记录。

  • 创建:
	window.history
    history
  • 属性:

    length 返回当前窗口历史列表中的url数量

  • 方法:

在这里插入图片描述


Dom学习
概念:

Document object model (文档对象模型)

将标记语言文档的各个组成部分,封装为对象,可以使用这些对象,对标记语言文档进行增删改查(CRUD)的动态操作。

在这里插入图片描述

Document : 文档对象

  • 创建:

window.document

document

  • 方法
  1. 获取Element对象:
    • getElementById():查找具有指定的唯一 id 的元素
    • getElementsByTagName() : 根据元素名称获取元素对象们,返回值是一个数组
    • getElementsByClassName() : 根据class属性值获取元素对象们,返回值是一个数组
    • getElementsByName() : 根据name属性值获取元素对象们,返回值是一个数组
  2. 创建其他Dom对象:

在这里插入图片描述

Element : 元素对象

  1. 获取/创建 : 通过document来获取和创建
  2. 方法:
  • 属性

在这里插入图片描述

动态赋予属性:

在这里插入图片描述

在这里插入图片描述

Node : 节点对象,其他五个的父对象

在这里插入图片描述

在这里插入图片描述

javascript:void(0)   -- 消除href跳转网页的属性


html dom
  1. 标签体的设置和获取:innerHTML

  2. 使用html元素对象的属性

  3. 控制样式

  4. 案例,表格的动态添加内容:

在这里插入图片描述

2.属性值直接查表

3.通过style.方法来控制

在这里插入图片描述

第二种方法更适合大工程,就像是css外链式一样的书写格式

js框架 jquery学习
概念

所谓框架就是半成品的软件,适用框架可以简化书写,简化js开发

本质上就是 一些js文件,封装了js的原生代码而已。

下载

有两个js文件,

在这里插入图片描述

导入

下载好的jquery-min。。。文件复制到项目下面的js文件夹,然后再html里导入,一样的方法

使用
js和jquery
  • jquery对象在操作时,更加方便
  • jquery对象和js对象方法不通用
  • 两者可以相互转换
  1. js --> jquery :$(js对象)
  2. jquery – >js : jquery对象[索引] 或者 jquery对象.get(索引)
选择器:

筛选具有相似特征的元素(标签)

基本语法学习:

  • 事件绑定
<body>
<input type="button" value="按钮" id="b1">    
</body>

<script>  // 给b1按钮增加单击事件,匿名函数定义
$("#b1").click(functin(){
         alert("hello");      
               })
</script>

js要注意顺序,如果放在前面的话可以这样:

(window.onload = 只定义一次,如果定义多次,后面的会把前面的覆盖掉)

在这里插入图片描述

  • 入口函数(可以多次使用)
<script>  //jquery入口函数,dom文档加载完之后执行函数里面的代码,不用注意顺序
$(function(){
    
});
</script>
  • 样式控制

jquery对象有css()方法可以控制样式

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值