浅学一下前端三剑客

小卡斯蒂
191 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情 虽然是后端，但是也需要学习一些前端知识

前端三剑客

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的

HTML(HyperText Markup Language):超文本标记语言 超文本:超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言:由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析

HTML标签都是预定义好的。例如:使用展示图片

W3C标准:网页主要由三部分组成 结构:HTML

表现: CSS

行为: JavaScript

基础标签

image.png

<!DOCTYPE html>

用来表示html的版本号 html表示颜色: 1．英文单词: red , pink , blue. . .

2.rgb(值1,值2,值3):值的取值范围:0~255

3．#值1值2值3:值的范围: 00~FF

转义字符如下

image.png

图片，音频，视频标签

image.png img:定义图片 src:规定显示图像的URL(统一资源定位符)

height:定义图像的高度

width:定义图像的宽度

audio:定义音频。支持的音频格式:MP3、WAV、OGG src:规定音频的URL controls:显示播放控件 video:定义视频。支持的音频格式:MP4, WebM、OGG src:规定视频的URL controls:显示播放控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>图片，音频，视频标签</h1>
<img src="小哀.jpg" width="123" height="123">
<audio src="Screenrecorder-2022-05-02-17-47-09-251_20220503_093833.mp3" controls="controls"></audio>
<video src="Death%20Stranding%202021-07-09%2014-12-02.mp4" controls></video>
</body>

超链接标签

image.png href:指定访问资源的URL

target:指定打开资源的方式

self:默认值，在当前页面打开

blank:在空白页面打开

列表标签

image.png

表格标签

image.png

image.png 小原一下(不是)

布局标签

<div表示占满一行的布局

<span表示不会占满一行

表单标签

image.png

image.png 为了让两个或以上的单选框达到互斥的效果，需要加上相同的name值

还要加上value值使得服务端可以识别

再设置id="xxx"就能使在点击该表单时也能选中标签

sumit reset button都可以用value设置按钮呈现的文字

CSS

CSS导入方式

1.内联样式：

在标签内部使用style属性，属性值是css属性键值对

image.png 2.内部样式:

定义标签，在标签内部定义css样式

image.png 3.外部样式:

定义link标签，引入外部的css文件

image.png

CSS选择器

概念:选择器是选取需设置样式的元素(标签)

分类:

image.png id选择器一般只能唯一

类选择器可以同时设置不同的标签

CSS属性

了解即可

JavaScript

JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互

W3C标准:网页主要由三部分组成 结构:HTML 表现: CSS 行为:JavaScript JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

JavaScript(简称:JS)在1995年由Brendan Eich发明, 并于1997年成为一部ECMA标准。

ECMAScript 6 (ES6)是最新的JavaScript 版本（发布于2015年)。

JavaScript引入方式

1．内部脚本:将JS代码定义在HTML页面中

image.png 2．外部脚本:将JS代码定义在外部JS文件中，然后引入到HTML页面中

image.png

JavaScript基础语法

输出语句

使用window.alert()写入警告框

使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

变量

image.png

数据类型

image.png typeOf用来

运算符

==:1．判断类型是否一样，如果不一样，则进行类型转换

2．再去比较其值

===:全等于

1．判断类型是否一样，如果不一样，直接返回false

2．再去比较其值

类型转换

其他类型转为数字:

1.String:将字符串字面值转为数字。如果字面值不是数字，则转为

NaN。一般使用parselnt方法进行转换

2.boolean:true转为1，false转为0

其他类型转为boolean

1.number: o和NaN转为false，其他的数字转为true

2.string:空字符串转为false，其他字符串转为true

3.null:转为false

4.undefined:转为false

流程控制语句

太简单就不做笔记了

函数

image.png

image.png

JavaScript对象

Array对象

var arr = [1,2,3];

访问与java一致

JavaScript中的数组相当于Java中的集合

push():添加元素

splice(从哪开始删,删除几个元素):删除元素

自定义对象

image.png

BOM

Browser Object Model浏览器对象模型 JavaScript将浏览器的各个组成部分封装为对象。组成:

Window:浏览器窗口对象

Navigator:浏览器对象

Screen:屏幕对象

History:历史记录对象

Location:地址栏对象

Window

image.png confirm()点击确定，返回true，点击取消，返回false

setInterval(function,毫秒值)

setTimeout(function,毫秒值):

image.png

History

image.png

Location

image.png

DOM

Document Object Model文档对象模型将标记语言的各个组成部分封装为对象

Document:整个文档对象

Element:元素对象

Attribute:属性对象.

Text:文本对象

Comment:注释对象

image.png

image.png JavaScript通过DOM，就能够对HTML进行操作了

改变HTML元素的内容

改变HTML元素的样式(Css)对HTML DOM事件作出反应

添加和删除HTML元素

image.png

获取Element对象

Element:元素对象 获取:使用Document对象的方法来获取I

  1. getElementByld:根据id属性值获取，返回一个Element对象
  2. getElementsByTagName:根据标签名称获取，返回Element对象数组
  3. getElementsByName:根据name属性值获取，返回Element对象数组
  4. getElementsByClassName:根据class属性值获取，返回E lement对象数组

常见HTML Element对象的使用

查阅文档即可

事件监听

事件:HTML事件是发生在HTML元素上的“事情”。

比如:·按钮被点击

鼠标移动到元素之上

按下键盘按键

事件监听:JavaScript可以在事件被侦测到时执行代码

事件绑定

image.png

常见事件

onsubmit()返回true，则表单会被提交，返回false，则表单不提交

image.png

表单验证

用来处理不符合规范的表单输入

案例:

1 当输入框失去焦点时，验证输入内容是否符合要求 2 当点击注册按钮时，判断所有输入框的内容是否都符合要求，如果不合符则阻止表单提交

image.png

正则表达式

image.png

avatar
文章
阅读
粉丝