黑马Web前端基础学习笔记

最新推荐文章于 2024-11-11 21:32:38 发布

无用之人003

最新推荐文章于 2024-11-11 21:32:38 发布

阅读量70

点赞数

文章标签：学习笔记

本文链接：https://blog.csdn.net/weixin_65412794/article/details/133975140

版权

学习目录

Web前端基础
- Web标准

Web前端基础

Web标准

Web标准也叫网页标准，大部分由W3C(万维网联盟)制定
基本组成：
- HTML：负责网页的结构（页面元素和内容）
- CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）
- JavaScript：负责网页的行为（交互效果）

HTML：超文本标记语言

超越了文本的限制，可以定义图片、视频等
由标签构成的语言
- 标签都是预定义好的
- HTML代码直接在浏览器中运行，标签由浏览器解析
- 一些常见标签：

<span>空白标签，仅仅把文字包裹，
<video>视频标签，src指定路径
<audio>音频标签，src指定路径
<p>段落标签
<a>链接标签
<ul>
	<li></li>无序列表标签
</ul>
<ol>
    <li></li>有序列表标签
</ol>
<table>表格标签
<tr>表格的行
<td>表格的每一个格子
<form>表单标签

CSS：网页的表现

引入CSS的三种格式
CSS选择器选择标签的三种方式
最后值得注意的是CSS的盒子模型：

盒子：页面中的所以元素（标签），都可以看成是一个盒子，由盒子的时间更方标的进行页面布局
盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）
例如

<html>
		<head>
				<title>HTML 快速入门</title>
				
		<style>
			div {
				word-break:break-all;
				width: 200px;
				height: 200px;
				box-sizing: border-box;
				background-color: aquamarine;

				padding: 20px;
				border: 10px solid red;
				margin: 30px;
			}
		</style>
		</head>
		<body>
			<div>AAAAAAAAAAAAAAAAAAAAAAAAA</div>
		</body>
</html>

它的结果是：
在这里插入图片描述

JavaScript：网页的行为

JavaScript的引入

内部脚本：写在<script></script>之间
外部脚本：<script src=".js"></script> ，不能自闭合

基本语法与函数定义

JavaScript是弱类型语言，使用 var来声明全局变量，len声明局部变量
运算符和语法基本和Java一样，区别就是：
- ==比较前会类型转换
- ===比较前不会转换
函数定义有两种方式：
- function functionName(参数1，····){}
- var functionName = function(参数1，···){}
数据类型，类的声明和Java相似，这里只介绍JavaScript的原始类型：

JavaScript的六种对象：

Array
- 声明：var arr = [····]
- 常见属性与方法：
  - push函数：添加到尾部splice删除元素
  - push(i,j)，包含i，也包含j
  - for与forEach(Function (e){})前者会根据索引一个个遍历，后者只会遍历有值的项
String
- 声明、属性与方法：
- substring 简单来说就是截取，含头不含尾
- indexof 可以检索多个字符串
- trim 可以去除多个空格
自定义对象
- 声明与调用属性、方法
  
  也可以用 var 对象名 = new 类名()
JSON
- 语法格式简单就是：key:value，必须双引号
- JSON通常用来前后端传送数据
- JSON语法与常用函数
BOM
- 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装成对象
- 组成：Window、Navigator、Screen、History、Location。其中重要的是Window、Location
- Window常见属性和方法：
- Location属性：
DOM
- 可以获取文档中的元素，从而通过改变文档来改变浏览器页面
- 常用的获取对象Element的方法：
- 获取了文档对象就可以通过通过相关文档查看修改函数，例如文本可以通过innerHTML函数重新赋值
事件监听
- 事件：HTML事件是发生在HTML元素上的“事情”。例如
  - 按钮被点击
  - 鼠标移到元素上
  - 按下鼠标按键
- 事件监听：JavaScript可以在事件被检测到时执行代码
- 事件绑定的两种方法：
- 常见事件如下：