javaweb前端基础
- 前端开发初知
- HTML
- HTML快速入门
- 前段开发工具
- 常见标签和样式
- 常见的三种选择器
- 盒子模型
- 案例
- 顶部导航栏
- 搜索表单区域
- 表格数据展示区域
- 底部版权区域
- 总结
- JS
- JS课程介绍
- js核心语法
- 引入方式
- 基础语法
- 变量
- 数据类型
- 函数
- 自定义对象
- json
- DOM
- js事件监听
- Vue
- vue快速入门
- vue常用指令
- Ajax
前端开发初知
一个网页是由三个部分组成：
HTML：负责网页的结构
CSS：负责网页的表现
JavaScript：负责网页的行为（动作）
HTML(HyperText Markup Language):超文本标记语言。
超文本：除了文字，还能定义图片，音频，视屏等内容
标记语言：由标签"<标签名>"构成的语言
CSS：层叠样式表，用于控制页面的样式（表现）。
HTML
HTML快速入门
HTML基本骨架标签：
<html><head><title>HTML快速入门</title></head><body><h1>Hello HTML</h1><img src="D:\下载的东西\01. 前端Web基础(HTML+CSS)\资料\6. 图片\1.png"></body>
</html>
HTML标签特点：
1.不区分大小写
2.不分单引号和双引号
3.html语法结构松散（没有结束标签也行）
前段开发工具
VScode
常见标签和样式
-
标题的级数 target有两种常见的打开方式： _blank:在一个新的空白页打开 _self：在当前页面打开 
<html><head><meta charset="UTF-8"><title>央视新闻</title><!-- 第二种：内嵌样式 --><style>span{/* color:gray; *//* rgb表示法 *//* color:rgb(155,120,0); *//* rgba表示法 a代表的是透明度 *//* color:rgba(255,120,0,0.7); *//* 十六进制表示法 */color:#00f;}</style><!-- 第三种：外部样式<link rel="stylesheet" href="css/news.css"> --></head><body><h1>央视新闻</h1><a href="https://www.cctv.com/" target="_blank">央视网</a> <!-- 第一种：行内样式 --><!-- <span style="color:gray">2024年05月15日 20:07</span> --><span> 2024年05月15日 20:07</span></body></html>
常见的三种选择器
元素选择器：标签名 {…}
id选择器：#id名 {…}
类选择器：.类名 {…}
优先级：id选择器->类选择器->元素选择器
<style>/* id选择器 */#time{color:ff0000;}/* 元素选择器 */a{text-decoration:none;}/* 类选择器 */.cls{color:gray;}</style>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>#div1{width: 500px;height: 500px;background-color: #00ff00;/* margin: 20px 30px 40px 50px; *//* margin: 20px 30px 40px; *//* margin: 20px 30px; *//* margin: 20px; *//* margin: 20px auto; *//* margin: 20px auto 20px; */margin:0 auto;padding:50px 30px;border :#00ffff solid 30px;box-sizing: border-box;}</style></head>
<body><div id="div1">A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A AA A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A </div><!-- <div>A A A A A A A A A A A A A A A A A A A A A A A A A A A </div><span>B B B B B B B B B B B B B B B B B </span><span>B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B B</span> --></body>
</html>
案例
顶部导航栏
搜索表单区域
表格数据展示区域
底部版权区域
总结
对于前端的内容都是固定的，没有很多的逻辑，只需要看懂ai和会借助ai生成前端的代码就行。
JS
JS课程介绍
javascript的一门跨平台，面向对象的脚本语言，是用来控制页面行为，实现页面的交互效果
javascript和java是两种完全不同的语言，就语法有些相似
js核心语法
引入方式
内部脚本
<script>alert("hellow world");</script>
外部脚本
<script src="./12-js练习.js"></script>
基础语法
变量
数据类型
函数
// 有名函数
function 函数名(参数...){
...return 返回值
}// 匿名函数：
let ret = function(参数...){函数体return 返回值;
}
// 箭头函数
let ret = (参数)=>{函数体return 返回值;
}注意：js是弱类型语言，定义函数时，形参，返回值都是无需要指定类型的
自定义对象
<script>let ret = {name:"zhangsan",age:18,gender:'男',show() {console.log(this.name+" "+this.age+" "+this.gender);},add(a,b) {return a + b;}}ret.show();console.log(ret.add(1,2));</script>json
json的特点：所有的key都需要用双引号包含起来
json的两个方法：
JSON.parse()：把字符串解析为js对象
JSON.Stringify():将js对象转化为json字符串
let person = {name:"zhangsan",age:18,gender:'男'}alert(JSON.stringify(person));alert(JSON.parse('{"name":"zhangsan","age":18,"gender":"男"}').name);
DOM
获取第一个匹配到的选择器的对象
document.querySelector(选择器);
获取到所有的匹配到的选择器 返回一个伪数组，有索引
document.querySelectorAll(选择器)；
<script>// let h1 = document.querySelector('h1');let h1 = document.querySelectorAll('h1');let h2 = document.querySelector('#itheima');h2.innerHTML = "99999";h1[1].innerHTML = "被修改之后的内容";</script>
js事件监听
语法：
事件源.addEventListener(‘事件类型’,要执行的函数);
document.querySelector("#btn1").addEventListener('click',()=> {console.log("点击了1");})
鼠标事件：
click:鼠标点击
mouseenter:鼠标移入
mouseleave:鼠标移出
键盘事件：
keydown:键盘按下
keyup:键盘松开
焦点事件：
focus:获取焦点触发
blur:失去焦点触发
表单事件：
input：用户输入时触发
submit:用户提交时触发
//click: 鼠标点击事件document.querySelector('#b2').addEventListener('click', () => {console.log("我被点击了...");})//mouseenter: 鼠标移入document.querySelector('#last').addEventListener('mouseenter', () => {console.log("鼠标移入了...");})//mouseleave: 鼠标移出document.querySelector('#last').addEventListener('mouseleave', () => {console.log("鼠标移出了...");})//keydown: 某个键盘的键被按下document.querySelector('#username').addEventListener('keydown', () => {console.log("键盘被按下了...");})//keyup: 某个键盘的键被抬起document.querySelector('#username').addEventListener('keyup', () => {console.log("键盘被抬起了...");})//blur: 失去焦点事件document.querySelector('#age').addEventListener('blur', () => {console.log("失去焦点...");})//focus: 元素获得焦点document.querySelector('#age').addEventListener('focus', () => {console.log("获得焦点...");})//input: 用户输入时触发document.querySelector('#age').addEventListener('input', () => {console.log("用户输入时触发...");})//submit: 提交表单事件document.querySelector('form').addEventListener('submit', () => {alert("表单被提交了...");})
Vue
vue快速入门
vue常用指令
v-for = “(item,index) in items” : key = “item.id”
插值表达式的内容不能直接在标签的内部 用v-bind可以给标签绑定属性值
v-bind : 属性:“变量”
v-if 和 v-show的作用：
根据条件判断，是否展示莫元素
v-if与v-show的区别：
v-if如果条件不成立直接不渲染这个元素（适合不频繁切换的场景）
v-show:通过css样式，来控制元素的显示与隐藏（适用频繁切换的场景）
Ajax
异步请求：在等待服务器处理数据的同时，可以继续执行其它的操作
