一、前端技术结构分析
网页的结构（HTML）、表现(CSS)、行为(JS)
1.HTML定义界面整体结构
2.CSS定义页面样式
3.JS实现动态效果
二、HTML
2.1安装VS Code及前端开发插件
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- Code Spell Checker检查单词错误
- HTML CSS Support
- IntelliJ IDEA Keybindings
- JavaScript (ES6) code snippets
- Mithril Emmet
- Path Intellisense
- Path Intellisense
- VueHelper
10.Auto Close Tag
- Auto Rename Tag
- Beautify
- [Deprecated] Bracket Pair Colorizer 2
- open in browser
- Vetur
2.2新浪新闻页面结构分析
- 图片标签
2.3创建文件
<!-- 声明文档类型是html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>焦点访谈</title>
</head>
<body><!-- 01、绝对路径<img src="D:\Java\JavaWeb\Html_2024_8_7\news_logo.png"> --><!-- 02、相对路径 ./ 表示当前目录 ../表示上一级目录--> <!-- 宽度，高度：width height 单位：px像素 或者%百分比一般只设置一个另一个等比例缩放，百分比占的是整个body的大小 --><img src="./news_logo.png">新浪政务>正文<!-- 标题 --><h1>焦点访谈：关于开展学习运用“千万工程”经验加强金融支持乡村全面振兴专项行动的通知</h1><hr><!-- 水平分割线 -->原标题：中国人民银行、金融监管总局、中国证监会、财政部、农业农村部关于开展学习运用“千万工程”经验加强金融支持乡村全面振兴专项行动的通知<hr>
</body>
</html>
三、CSS
3.1引入CSS
3.1.1行内样式和内嵌样式
3.1.2外联模式引入（常用）
3.2引入标签span
当存在多个标签时如何选择让固定标签中内容使用css样式？
3.3选择器引入
类选择器的命名可以重复，id选择器不可以重复
h1{color: blueviolet;
}
.cls1{color: blueviolet;
}
span{color: aqua;
}
3.4超链接引入
a标签引入
a{color: black;/* 设置超链接没有下划线 */text-decoration: none;
}
3.5正文排版
3.5.1 br实现换行
<video src="./oceans.mp4" controls width="1000"> </video><br>2023年12月，石家庄市生态环境局执法人员对近年因出具虚假环境监测报告被依法处罚的第三方机构名单进行梳理，发现河北从瑞环保科技有限公司（以下简称从瑞公司）在2023年分别被石家庄、邯郸、保定等地生态环境部门处罚9次。经核查，从瑞公司的虚假报告均在2022年至2023年期间出具，并且在2023年1月9日、6月16日被地方生态环境部门分别实施两次行政处罚后，又于7月6日出具虚假报告，8月16日被石家庄生态环境局再次行政处罚。
3.5.2段落标签
p{text-indent: 35px;/* 设置首行缩进 */line-height: 40px;/* 设置行高 */}
3.6页面布局
3.6.1div与span
3.7表格标签
<table border="1px" width="300" cellspacing="0"> <!-- cellspacing="0"设置单元格之间的空白为0 --><tr><!-- 表头要用th --><th>Id</th><th>name</th></tr><tr><td>001</td><td>华为</td></tr><tr><td>002</td><td>小米</td></tr></table>
3.8表单
3.8.1get方式请求
请求结果会直接拼接到url后面
3.8.2post方式提交
<form action="" method="post">用户名：<input type="text" name="username">密码：<input type="text" name="password">年龄：<input type="text" name="age"><input type="submit" name="提交"></form>
两者区别：
- get：在url后面进行表单数据的拼接，但是url长度有限制，数据较多无法使用，
<form action="" method="post">即使method不设置，默认时get - post：在消息体（请求体）中传递，参数大小无限制
3.9表单项
四、JS
4.1引入Script
4.1.1内部脚本引入
4.1.2外部脚本引入
4.2基础语法
4.2.1输出语句
<!-- Js三种输出语句 --><!-- 弹出警告框 --><Script>window.alert("警告");</Script><!-- document --><script>document.write("hello JS")</script><!-- 浏览器控制台输出 --><Script>console.log("浏览器控制台输出")</Script>
4.2.2变量
不用指定数据类型，且定义的变量是全局类型
<script>/* 定义变量 */{var x=1;x="hello";/* 对数据类型没有要求 */}window.alert(x);/* 即使用括号括起来，var定义的变量默认是全局数据类型，仍然可以取到 */var x=20;/* 可以重复定义变量区别java */</script>
局部变量声明
常量声明
<body><!-- 局部变量声明let --><script>{var a=100;let x=10; }alert(a);alert(x);//访问不到</script>
</body>
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
4.2.3函数
**JavaScript 函数语法**
function name(参数 1, 参数 2, 参数 3) {要执行的代码
}
JS是弱类型语言，形参不需要指定类型，方法返回值类型也不用指定
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 xfunction myFunction(a, b) {return a * b; // 函数返回 a 和 b 的乘积
}
4.3JS对象
4.3.1常用基础对象
4.3.2Array数组对象
- 定义方式（区别Java中用的是大括号）
const cars = ["Tesla", "Volvo", "BMW"];
- 访问
数组索引从零开始：数组中的第一个元素是 0，第二个元素是 1，依此类推。
<script>var arr=new Array(1,2,3,4);console.log(arr[2]);//输出到控制台</script>
3. JS中的数组类似于java中的集合：长度和数据类型可变
<script>var arr=new Array(1,2,3,4);console.log(arr[2]);//输出到控制台//JS中的数组类似于java中的集合：长度和数据类型可变arr[5]="hello";//在java中会报错数组越界异常console.log(arr[5]);</script>
foreach只遍历数组中有值的元素，for循环会遍历所有值
<script>var arr=new Array(1,2,3,4);console.log(arr[2]);//输出到控制台//JS中的数组类似于java中的集合：长度和数据类型可变arr[5]="hello";//在java中会报错数组越界异常console.log(arr[5]);//forEach遍历数组console.log("forEach循环结果：");arr.forEach(element => {console.log(element);});//for循环console.log("for循环结果：");for (let index = 0; index < arr.length; index++) {console.log(arr[index]);}</script>
//添加值pusharr.push(10,11)//将项目添加到数组：arr.splice(2, 0, "Lemon", "Kiwi");console.log(arr);//在位置 2，添加新项目，并删除 1 个项目：var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2, 1, "Lemon", "Kiwi");console.log(fruits);//在位置 2，删除 2 个项目：var fruits2 = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];fruits2.splice(2, 2);
4.3.3String对象
4.3.4Json对象
JSON 是用于存储和传输数据的格式。
JSON 是文本，文本可以在任何地方传输，并可通过任何编程语言读取。
JavaScript 对象可以转换为 JSON，JSON 可以转换回 JavaScript 对象。
// JavaScript 对象...：
var myObj = { "name":"Bill", "age":19, "city":"Seattle" };// ...转换为 JSON：
var myJSON = JSON.stringify(myObj);
4.3.5BOM对象
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
以下为最主要的BOM对象
- Window对象
所有浏览器都支持 window 对象。它代表浏览器的窗口。
所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至（HTML DOM 的）document 对象也是 window 对象属性：
window.document.getElementById("header");
//等同于
document.getElementById("header");
其他窗口方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() -移动当前窗口
window.resizeTo() -重新调整当前窗口
4.3.6Dom对象
浏览器中会形成一个Dom树
JS主要实现网页行为的，主要就是通过Dom和事件监听机制实现网页动态行为
比如可以通过点击某按钮，对html中的元素内容和样式进行修改
Html-DOM使用，HtmlDOM将标签定义为了一个个的对象，以便Script中调用对象并对其相应的属性进行更改。
使用：
- 获取对象
<body><div id="h1">创智教育</div><br><div class="cls">黑马程序员</div><br><input type="checkbox" name="hobby">电影<input type="checkbox" name="hobby">旅游<input type="checkbox" name="hobby">游戏</body>
<!-- 可以定义在任何位置 --><!-- 获取Element（标签）元素 ,如果有多个返回值，返回的是数组-->
<script>
//01通过id获取
var H1 =document.getElementById("h1")
alert("通过id获取"+H1)
//02通过标签获取
var Tag1=document.getElementsByTagName("div")
for (let index = 0; index < Tag1.length; index++) {alert("通过标签获取:"+Tag1[index])}
//02通过name获取
var Name1=document.getElementsByName("hobby")
//02通过class获取
var Class1=document.getElementsByClassName("cls")
</script>
- 改变该对象的属性
var H1 =document.getElementById("h1")
H1.innerHTML="调用div对象后更改"
//获取的是div标签
找到div对象对于的属性
使用：innerHTML 属性设置或返回元素的 HTML 内容（内部 HTML）。
