前言

这篇文章是作者在学习黑马程序员javaweb中前端部分的学习笔记，希望对大家有所帮助，欢迎与作者进行交流学习

前端

前端代码是如何转化成网页的：
通过浏览器的转化（解析和渲染）转化成可视化网页，而对代码进行转化的部分称为浏览器的内核
不同的浏览器内核呈现的前端页面都不相同，为了能使有个统一的解析标准，Web提供了网页标准，有W3c（万维网联盟）制定
标准由三个组成部分：

• HTML：负责网页的结构（可视化页面）
• CSS : 负责网页的表现（外观样式）
• javaScript:负责网页的行为（用户交互）

注意：html与css的标签样式可以通过w3school进行查看

HTML&CSS

• html

超文本标记语言
超文本：超越文本的限制，还可以定义图片，视频，超链接，音频等；
标记语言： 由标签构成的语言，都是提前定义好的，可以通过浏览器进行解析

• CSS

层叠样式表，用于控制页面的样式

• html

html中的标签不区分大小写，属性可以使用双引号也可以使用单引号

html的语法结构松散

html的语法结构中含有头部标签<head>和身体标签<body>
VS Code对前端代码有非常强大的支持，提供强大的插件库，大大提高了开发效率
注意:软件开发所使用的软件建议都安装在一个不是中文，没有空格的目录下避免麻烦

基础标签及样式

这里以新闻网站的页面为例讲解常用的标签

• 标题元素
• 图片标签<img>属性:
  src :指定该图像的url（绝对路径/相对路径）
  width:图像的宽度（像素/相对于父元素的百分比）
  单位（px，像素；%，相对于父元素的百分比）
  height：图像的高度（像素/相对于父元素的百分比）
  单位(px,像素；%，相对于父元素的百分比)
  绝对路径：
  绝对磁盘路径：指文件在本地的磁盘路径
  绝对网络路径：指文件在网络中的绝对地址，将其写在html中表示每次需要从互联网中加载文件内容
  相对路径：
  ./：表示当前目录（此处符号可以省略）
  …/：表示上一级目录
• 标题标签：<h1>-<h6>:
  h1-h6标题逐渐变小
  +水平线标签<hr>
  通过hr标签可以生成一个水平的分割线

通过VS Code进行html的编辑，首先需要一个基础html结构，在VS code 中输入一个"！"
然后回车生成html 的基础结构，具体内容和解释看下方代码片段

<!-- VS Code中的注释快捷键是ctrl+shift+/ -->
<!DOCTYPE html>    <!--这句话表示当前文档为html格式  -->
<html lang="en">
<head>
    <!-- 表示当前文档的字符集使用UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置浏览器的兼容性 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻界面</title>
</head>
<body>
    <img src="./图片/u=1785207335,3397162108&fm=193&f=GIF.jfif" width="300px"> 
    <!-- 此处采取的单位为像素 -->
    <img src="./图片/u=338595665,4065109605&fm=193&f=GIF.jfif" width="30%" >
    <!-- 此处采取的单位为%，表示占整个body的百分之多少 -->
    <h1>今日热点新闻</h1>
    <hr>
    2024年3月20日 12：00分
    <hr> 
</body>
</html>

图片的属性宽度高度，一般每次都只设置一个，系统会根据你的设置自动等比例缩放

做完标题标签的基本内容之后对其进行美化，比如修改标题的字体颜色，通过CSS样式进行修改

• CSS引入方式:
  行内样式：写在标签的style属性中（不推荐）
  内嵌样式：写在style当中（可以写在页面的任何位置，但通常约定写在head标签当中）
  外联样式: 写在一个单独的.css文件当中（需要通过link 标签在网页中引用）

行内样式;

<h1 style="XXX:XXX;XXX:XXX;">新闻<h1>

style 后属性名：属性值（多个属性之间用;号隔开）

内嵌样式：

<style>
  h1{
  xxx:xxx;
  xxx:xxx;
  }
 </style>

表示所有h1标签都采用此样式（元素选择器）

外联样式：

创建css文件夹，将style中的内容复制到新建的.css文件当中
通过link标签进行引用

<link rel="stylesheet" herf="./1.jpg">

rel表示样式层叠表，herf表示.css文件的路径

• 颜色表示
  
  当颜色无法判定的时候可以借助浏览器插件的拾色器进行颜色判定。
  当需要向没有标签表名的内容的颜色的时候，可以使用没有语义的标签<span>（组合行内元素的标签） 标签进行包裹再通过css进行添加样式，宽度与高度默认由内容撑开
• css选择器

当一行中出现两个用span包裹的标签这种情况时，我们只想为第一个包裹的span的内容进行颜色赋值。这时就需要css选择器

元素选择器：

元素名称{
    color:red;
}

id选择器：
给标签选定id，通过id来选择使用的css标签 id不能够进行重复

#id属性值{
    color:red;
}

类选择器：
通过标签当中选定的class来选择对应的css样式

.class{
    color:red; 
}

id选择器的优先级最高，其次时class选择器，最后是元素选择器

• 超链接<a>:
  href:超链接的目的地址
  target:指定超链接的打开方式，默认_self 在当前窗口打开 _ blank表示在一个新的标签页面中打开
  在设置超链接之后，字体会默认变成不一样的颜色，这时可以通过css的设置进行设置

 <span>2024年3月20日 12：00分</span> <a class=cla href="http://www.baidu.com">百度网</a>
通过css设置标签的样式显示正常
 .cla{
    color:black;
    text-decoration:none;
 }

• 视频标签： <video>
  src:规定视频的url
  controls：显示播放控件
  width：播放器的宽度
  height：播放器的高度
• 音频标签<audio>
  src:规定音频的url
  controls：显示播放控件
• 段落标签<p>
• 文本加粗标签: <b>/<strong>

    <video src="https://www.bilibili.com/video/BV1m84y1w7Tb/?p=10&spm_id_from=pageDriver&vd_source=f66a73ac38614340d8fc37243d140e82" controls width="950px"></video>
    <audio src="" controls></audio>

• 换行标签<br>

段落设置
  <p>
    sssssssssssssssssssssssssssssssssssssssssss <br>
    ssssssssssssssssssssssssssssssssss<br>
    sssssssssssssssssssssssssssssssssssssssssssssss
  </p>
  <p>
    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww<br>
    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
  </p>
  通过css样式进行段落设置
      <style>
        p{
            text-indent: 35px;/* 设置首行缩进 */
            line-height: 40px;/* 设置行间隔 */
            text-align: right;/*设置对齐方式*/
            
        }
    </style>

• 空格占位符&nbsp

• 盒子

页面中所有的元素（标签），都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局

盒子模型的组成：内容区域，内边距区域，边框区域，外边距区域

• 布局标签 <div> <span>
  div标签：
  一行只显示一个（独占一行）
  宽度默认是父元素的宽度，高度默认由内容撑开
  可以设置宽高（width,height）
  span标签：
  一行可以显示多个
  宽度和高度默认由内容撑开
  不可以设置宽高（width，height）
  盒子模型：
  

        div{
           width: 200px;
           height: 200px; /* 此处设置的宽度与高度是内容区区域的宽度与高度 */
           box-sizing: border-box;/* 指定width height为盒子的高宽，这时是整个border的宽度和高度，盒子不包括外边距 */
           background-color:aqua;/* 设置背景色 */
           padding: 20px;/* 内边距 上，下，左，右 */
           border: 10px solid red;/* 边框，宽度，线条，颜色 */
           margin: 30px 30px 30px 30px;/* 外边框 上 右 下 左 */
       }

这样的盒子模型为：

通过<div>可以设置页面布局，段落布局
通过div使页面居中：

        div{
            width:65%;
            margin: 0 auto;
        }
        auto的意思是左右边距平均分配

• 表格标签<table>

在网页中以表格（行，列）形式整齐展示数据

• 表单标签<form>

在网页中主要负责数据采集功能，像注册，登录等数据采集

表单项：
不同类型的input元素，下拉列表，文本域等
<input>:定义表单项，通过type属性控制输入形式
<select>:定义下拉列表
<textarea> 定义文本域
form表单属性：
action：规定提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式。Get,Post

注意：如果action不指定，则将数据提交到本界面当中

get提交:在url后面拼接表单数据 ：?username=“”&age=10;url的长度是有限制的，同时get也是method的默认值
post：在消息体中（请求体）中传递的，参数是没有大小限制的

注意：表单项中必须有属性name才能够进行提交

表单项中通过type属性控制输入形式
表单实例：

<form action="" method="get">
        用户名<input type="text" name="username"><br><br>
        &nbsp;密码 <input type="password" name="password" ><br><br>
        <!-- 单选框表单 -->
        &nbsp;性别<label ><input type="radio" name="xingbie" value="1">男</label>
        <label ><input type="radio" name="xingbie" value="2">女</label><br><br>
        <!-- 复选框表单 -->
        &nbsp;爱好<label><input type="checkbox" name="xuanze" value="java">java</label>
        <label><input type="checkbox" name="xuanze" value="game">java</label>
        <label><input type="checkbox" name="xuanze" value="sing">java</label>
        &nbsp;文件<input type="file" name="wenjian"><br><br>
        &nbsp;生日<input type="date" name="shengri"><br><br>
        &nbsp;时间 <input type="time" name="shijian" ><br><br>
        &nbsp;日期时间 <input type="datetime-local" name="xianziashijian"><br><br>
        &nbsp;邮箱 <input type="email" name="email"><br><br>
        &nbsp;年龄 <input type="number" name="age"><br><br>
        &nbsp;学历<select name="duoxuan" >
            <option value=""> ---------请选择----------</option>
            <option value="1">大专</option>
            <option value="2">本科</option>
            <option value="3">研究生</option>
            <option value="4">博士</option>
        </select><br><br>
        &nbsp;描述 <textarea name="miaoshu"  cols="30" rows="10"></textarea><br><br>
        <!-- 隐藏提交 -->
        <input type="hidden" name="id" value="1">
        <!-- 表单提交按钮 -->
        <input type="button" value="按钮">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>

表单元素以及表单项中都必须存在属性name，如果没有name那么不会提交成功
<label>标签会使得包裹中的内容区域内都会使得选框选中
单选框，复选框的属性name都必须是一样的
按钮中的hidden是隐藏提交，就是不会显示在界面上，但提交的时候会将数据提交

JavaScript

是一门跨平台，面向对象的脚本语言，控制网页的交互行为，不需要进行编译，由浏览器直接进行解释

• JavaScript引入方式
  内部脚本：
  JavaScript代码必须放在位于<script>标签之中
  在html文件当中，可以任意地方，放置任意数量的<script>
  一般会把脚本置于<body>元素的底部，可改善显示速度
  外部脚本：
  将js代码定义在外部的js文件中，在html中进行引用
  外部js文件中，只包含js代码，不包含<script>标签
  <script>标签不能自闭合（自闭合就是<script/>）

• js书写语法
  区分大小写：书写过程中区分大小写
  每行结尾的分号可有可无
  注释：
  单行注释 //
  多行注释 /**/

• js输出语句
  使用window.alter()写入警告框
  使用document.write()写入html输出
  使用console,log()写入浏览器控制台

• 变量
  js中使用var关键字来声明变量 var声明的变量是一个全局变量
  js是一门弱语言类型，变量可以存放不同类型的值
  变量名需要遵循规则：
  组成字母可以是任何字母，数字，下划线或美元符号
  数字不能开头
  建议使用驼峰命名
  注意：
  新增了let关键字来声明变量，let关键字声明的变量只在所在的代码块中有效，且不允许重复声明
  新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变

• 数据类型

js中分为：原始类型和引用类型

number：数字（整数，小数，NaN）
string:字符串，单双引用都可
boolean：布尔型
null：对象为空
undefined：当声明的变量未初始化时，该变量默认值是undefined

typeof 可以获取后面常量的数据类型

alert(typeof 3);
注意：
如果是null，会返回obiect
alert(typeof null);

为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误，然后被 ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

• 运算符
  与常规逻辑运算符一样，当时在js当中存在===运算符
  区别： ==在比较的时候会进行类型转换，===在比较的时候不会进行类型转换

类型转换：
将字符串字面值转换为数字。如果字面值不是数字，则转换为NaN

alert(parseInt("12"));转换后为12
alert(parseInt("12A12"));转换后为12
alert(parseInt("A45"))；转换后为NaN

其他类型的转换为boolean：
number：0和NaN转换为false，其余均转换为true
string：空字符串为false，其他均转为true
Null和undefined：均转换为false
如何转换：

if(0){
alert("0被转换为false")；
}
if(NaN){
alert("NaN 转换为false");
}
if(-1){
alert(“除了0和NaN外其余数字都转为true”)；
}

第一个第二个都不会显示，只会显示第三个，证明上述成立

• 函数

js函数通过function关键字进行定义，语法为：

function functionName(参数1,参数2..){
//要执行的代码
}

注意：
形式参数不需要类型，因为javascrpt是弱类型语言
返回值也不需要定义类型，可以在函数内部直接使用return返回
第二种函数定义形式：

var add=function(a,b){
return a+b;
}

注意：在进行函数调用的时候可以传入多个参数，但是有可能不会被接收

• js 对象
• Array

js中用于定义数组

第一种方式
var 变量名=new Array(元素列表);//方式一
var arr=new Array(1,2,3,4);
第二种方式
var 变量名=[元素列表];
var arr=[1,2,3,4];

数组的访问：

arr[索引]=值；
arr[10]="hello";

在js当中定义的数组，长度可变，类型可变
Array中的属性length，设置或返回数组中元素的数量
Array对象中的方法：

foreach:

arr.forEach(function (e) ){
   console.log(e);
}

forEach只遍历数组中有值的数据，并且每遍历一次函数都会调用一次函数方法，函数方法进行自定义
ES6中提供了箭头函数，会使得函数进行简化

arr.forEach((e)=>{
   console.log(e);
})

push:

添加元素到数组末尾
arr.push(7,8,8);
console.log(arr);

splice:

arr.splice(2,2);  表示从索引为2的地方开始删除，删除两个数据。 

箭头函数：
用来简化函数定义语法：具体形式为（…）=>{…}

• string 对象

两种创建方式 第一种：
var 变量名=new string("...");
方式二：
var 变量名="...";

string 的属性length长度。
string方法：

charAt//返回指定位置的字符
console.log(arr.charAt(3));
indexof//检索字符串,返回检索到的位置
console.log(arr.indexof("l")); 
trim//去除字符两边的空格
 var s=arr.trim();
 console.log(s);
 substring//截取字符串
 console.log(arr.substring(0,5)) //第一个参数是开始索引，第二个参数是结束索引

• js自定义对象

var 对象名 ={
属性名1：属性值1；
属性名2：属性值2；
函数名称：function（形参列表）{}
}
调用格式：
对象名.属性名；
对象名.函数名（）；

json

js对象标记法，json是通过javascript对象标记法书写的文本

json语法简单，属性与值都用双引号括起来，现在多用于数据载体，在网络中进行传输

用途：
当前端服务器需要请求后端的时候，需要前端继续数据传递给后端的时候，xml是一种数据传递的途径，但是其中包裹的标签太多，不是非常方便， 然后现在采用json来作为数据载体进行传递

• json语法：

var 变量名='{"key1":value1,"key2":value2}'

value值处根据数据类型的不同进行书写的格式变化：

json字符串转化为JS对象

var jsobject=JSON.parse(userstr);

JS对象转化为JSON字符串

var jsonstr=json.stringify(jsobject);

• BOM对象

浏览器对象模型，允许js与浏览器进行对话，js将浏览器各个组成部分封装成对象

组成：
window：浏览器窗口对象
Navigator：浏览器对象 封装浏览器的应用名称，版本，内核
screen：屏幕对象
history：历史记录对象
location：地址栏对象

• window浏览器窗口对象
  获取：直接使用window，其中window可以省略
  属性：
  history：对history对象只读引用
  location：用于窗口或框架的location对象
  navigator：对navigator对象的只读引用
  方法：
  alert（）：显示带有一段信息和一个确认按钮的警告框
  confirm（）：显示带有一段信息以及确认按钮和取消按钮的对话框
  setinterval（）：按照指定的周期（以毫秒计）来调用函数或计算表达式
  setTimeout（）：在指定的毫秒数后调用函数或计算表达式

<script>
//获取
window.alert("Hello world");
//方法
var flag=confirm("您确定删除记录吗？");
alert(flag);
//周期定时器 setinterval();
var i=0;
setInterval(function(){
     i++;
     console.log("定时器执行了"+i+"次")}，2000）；
}
//定时器-setTimeout--周期性的执行某一个函数
var i=0;
setInterval(function(){
   i++;
   alert("JS");
},3000);
//location对象
alert(location.href); //得到地址栏的中的url
location.href="http://www.baidu.com" //设置地址栏中的地址，并自动进行跳转
</script> 

• DOM对象

将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象

将整个html文档封装到该对象中，由大量的标签组成

Element:元素对象

将每一个标签都封装成一个Element对象

Attribute：属性对象

将标签中的属性都封装成一个属性对象

Text:文本对象

例如<h1>你好<h1>中的你好就会被封装到一个Text文本对象当中

Comment:注释对象

将文档中的注释封装到注释对象当中

在完成封装之后可以在浏览器内形成一个DOM结构,称为(DOM树)
举例:

js通过DOM,可以进行对网页的操作:
改变html的内容
改变html元素的样式
对html DOM事件作出反应
添加和删除HTML元素

Document对象中提供了以下获取内容Element元素对象的函数:

根据id值获得单个Element对象
var h1=document.getElementByid('h1');
根据标签名称获取,返回Element对象数组
var divs=document.getElenmentByTagName('div');
根据name属性值获取,返回Elemnet对象数组
var hobbys=documnet.getElementByname('hobby');
根据class属性值获取,返回Element对象数组
var class=document.getElementByclassname('cls');

可以参照文档中的方法对html内容进行更改
操作示例:

//1.点亮灯泡:就是一张未点亮的照片同点亮的照片进行切换
<img id='h1' src='off.jpg'>
var img=document.getElementByid('h1');
img.src="on.jpg";
刷新界面灯泡就会被点亮.

操作示例：

在所有的div标签后添加红色的very good
var div =document.getElementByTagName('div');
for(let i=0;i<div.length;i++){
const divs=div[i];
divs.innerHTML+="<font color='red'>very good</font>";
}

操作实例：

使所有的复选框呈现选中状态
var s=document.getElementByname('hobby');
for(let i=0;i<s.length;i++){
const check=s[i];
check.checked=true;
}

• 事件监听

事件：HTML上发生的事件

事件监听：js可以在事件被监听时执行代码

事件绑定的两种方法：
第一种：
通过html标签中的时间属性进行绑定

     <input type="submit" onclick="on()" value="提交">
    <script>
        function on(){
            alert("我被点击了");
        }
    </script>

第二种方式：
通过DOM进行绑定

    <input type="submit" id="uid" value="提交">
    <script>
        document.getElementById('uid').onclick=function(){
            alert('我被点击了');
        }
    </script>

事件监听种类：