一、PC 端两大应用开发架构C/S、B/S 解析目前用户对PC端应用的开发结构模式主要分为C/S和B/S结构C/S(客户机/服务器)常见的C/S架构应用如美团、淘宝等一般需要安装并且与服务器进行网络通信的都属于C/S。B/S浏览器/服务器)分为web浏览器、服务器程序、数据服务三部分是对C/S架构的一种改进由于所有的业务逻辑都由服务器处理所以客户端仅用浏览器就可以完成所有的操作大大降低了客户端的维护成本。架构优点缺点C/S1.大部分业务都可以在客户端完成充分利用本地的计算机资源2.响应速度快3.个性化定制能力强4.面向相对固定的用户群对信息安全的控制能力强1.需要安装客户端才能使用2.维护成本高任何⼀台电脑上的客户端出现问题都需要进行维护升能过程繁琐B/S1.客户端零维护只需要安装⼀个浏览器即可2.所有业务都集中在服务器端业务扩展非常方便3.维护成本低只需要维护服务器即可1.服务器安全与业务处理能力需要花费很大精力与成本2.不同浏览器支持不尽人意二、HTML超文本标记语言2.1 HTML文本的基本结构运行结果html标签是整个html文件的根标签head标签中写页面属性body标签中写的是页面显示内容title标签中写页面标题2.2 HTML常见标签2.2.1 标题标签数字越大字体越小h1hello/h1 h2hello/h2 h3hello/h3 h4hello/h4 h5hello/h5 h6hello/h6展示2.2.2 段落标签pp段落1/p p段落2/p p段落3/p展示2.2.3 换行标签br换行1br/ 换行2br/ 换行3br/展示这里与p标签放在一起便于大家查看两者区别2.2.4 图片标签img注要把图片文件放到和html中的同级目录中img标签还有width/height两个属性可控制图片大小img src微信图片_20251020194420_1_1.jpg width250 height250展示2.2.5 超链接a外部链接 a hrefhttp://www.baidu.com 百度/a 内部链接 //在一个目录中先创建一个demo1再创建一个demo2 a hrefdemo2.html点我跳转到demo2/a 空链接 a href#空链接/a展示2.2.5 表格标签tabletr表示表格的一行td表示一个单元格table border1 cellpadding20 cellspacing0 tr td姓名/td td性别/td td年龄/td /tr tr td小美/td td女/td td18/td /tr tr td小帅/td td男/td td20/td /tr /table展示2.2.6 表单标签表单域: 包含表单元素的区域. 重点是 form 标签.表单控件: 输入框, 提交按钮等. 重点是 input 标签.input标签//文本框 input typetext //密码框 input typepassword //单选框 input typeradio namesex男 input typeradio namesex checkedchecked女 //复选框 input typecheckbox 吃饭 input typecheckbox 睡觉 input typecheckbox 打游戏 //普通按钮 input typebutton value我是个按钮 //提交按钮 form actiontest.html input typetext nameusername input typesubmit value提交 /formselect标签下拉菜单 //option 中定义 selectedselected 表⽰默认选中. select option北京/option option selectedselected上海/option /select三、CSS层叠样式表3.1 CSS 是什么CSSCascading Style Sheets层叠样式表是一种用于描述网页外观和格式的样式表语言。它负责控制网页的视觉呈现包括布局、颜色、字体、间距等从而实现内容HTML与表现CSS的分离。简单来说HTML 定义了网页的“骨架”结构而 CSS 则为其穿上“衣服”样式使其更加美观、易读。3.2 CSS 基本语法一条 CSS 规则由选择器和声明块两部分组成选择器 { 属性: 值; 属性: 值; }选择器指定要应用样式的 HTML 元素。声明块包含在一对花括号{}内由一个或多个“属性: 值”对组成每条声明以分号;结尾。示例将所有段落文字设置为红色、字体大小为 16px。p { color: red; font-size: 16px; }3.3 CSS 的引入方式有三种主要方式将 CSS 样式应用到 HTML 文档中方式语法/描述示例特点行内样式直接在 HTML 元素的style属性中编写 CSS。p stylecolor: blue;蓝色文字/p优先级最高但不利于维护和复用仅适用于简单、临时的样式。内部样式表在 HTML 文档的head部分使用style标签定义样式。style p { color: green; } /style适用于单个页面比行内样式更易于管理但无法跨页面复用。外部样式表将 CSS 代码保存在独立的.css文件中通过link标签引入。link relstylesheet hrefstyles.css最佳实践。实现样式与结构的彻底分离便于维护、缓存和复用。3.4 核心 CSS 选择器选择器是 CSS 的基石用于精准地选中需要添加样式的元素。以下是几种最常用的选择器元素选择器直接使用 HTML 标签名。p { color: gray; } /* 选中所有 p 标签 */类选择器使用点号.加上类名。一个类可以被多个元素使用。.highlight { background-color: yellow; } /* 选中 classhighlight 的元素 */ID 选择器使用井号#加上 ID 名。ID 在页面中应是唯一的。#header { font-size: 24px; } /* 选中 idheader 的元素 */后代选择器用空格分隔选择某个元素内部的所有特定后代元素。div p { margin: 10px; } /* 选中所有在 div 内部的 p 元素 */群组选择器用逗号分隔同时选中多个元素。h1, h2, h3 { font-family: Microsoft YaHei; } /* 同时选中 h1, h2, h3 */3.5 常用 CSS 属性示例掌握一些基础属性是进行网页美化的第一步color设置文本颜色。值可以是颜色名如red、十六进制值如#ff0000或 RGB 值如rgb(255, 0, 0)。font-size设置字体大小。常用单位有像素px、相对单位em,rem。background-color设置背景颜色。margin与padding控制元素的外边距和内边距用于布局和间距调整。border为元素添加边框。可分别设置宽度、样式和颜色如border: 1px solid black;。width与height设置元素的宽度和高度。综合示例创建一个带有样式的卡片。div classcard h3卡片标题/h3 p这是一段卡片内容。/p /div.card { width: 300px; padding: 20px; margin: 15px auto; border: 2px solid #ddd; border-radius: 8px; background-color: #f9f9f9; box-shadow: 2px 2px 5px rgba(0,0,0,0.1); } .card h3 { color: #333; margin-bottom: 10px; } .card p { color: #666; line-height: 1.6; }通过 CSS开发者可以精细地控制网页的每一个视觉细节从宏观布局到微观的文本阴影创造出丰富多样的用户体验。四、JavaScript4.1 JavaScript 是什么JavaScript简称 JS是一种轻量级、解释型或即时编译型的编程语言主要用于为网页添加交互功能。它是 Web 开发的三大核心技术之一与 HTML结构和 CSS样式共同构建现代网页。简单来说HTML 定义了网页的“骨架”CSS 为其穿上“衣服”而 JavaScript 则赋予网页“生命”使其能够响应用户操作、动态更新内容、验证表单数据等。4.2 JavaScript 的基本语法JavaScript 代码可以直接嵌入在 HTML 文件中也可以写在独立的.js文件中。4.2.1 变量声明在 JavaScript 中可以使用var、let或const来声明变量。// 使用 var旧方式存在作用域问题现代开发中较少使用 var name 张三; // 使用 let推荐块级作用域 let age 25; // 使用 const声明常量值不可重新赋值 const PI 3.14159;4.2.2 数据类型JavaScript 是一种动态类型语言常见的数据类型包括字符串String文本数据用单引号或双引号包裹。数字Number整数或浮点数。布尔值Booleantrue或false。数组Array有序的数据集合。对象Object键值对的集合。未定义Undefined变量已声明但未赋值。空Null表示空值。let str Hello World; // 字符串 let num 100; // 数字 let isStudent true; // 布尔值 let fruits [苹果, 香蕉, 橙子]; // 数组 let person { name: 李四, age: 30 }; // 对象 let x; // 未定义undefined let y null; // 空值4.2.3 函数函数是一段可重复使用的代码块用于执行特定任务。// 函数声明 function greet(name) { return 你好 name ; } // 函数调用 let message greet(王五); console.log(message); // 输出你好王五 // 箭头函数ES6 新语法 const add (a, b) { return a b; }; console.log(add(5, 3)); // 输出84.3 JavaScript 的引入方式与 CSS 类似JavaScript 也有多种方式嵌入到 HTML 中方式语法/描述示例特点行内脚本直接在 HTML 元素的属性如onclick中编写 JS 代码。button onclickalert(点击了)点击我/button简单直接但代码与 HTML 混合不利于维护仅适用于极简单的交互。内部脚本在 HTML 文档的script标签内编写 JS 代码。script console.log(页面加载完成); /script适用于单个页面比行内方式更清晰但无法跨页面复用。外部脚本将 JS 代码保存在独立的.js文件中通过script src...标签引入。script srcscript.js/script最佳实践。实现行为与结构的分离便于维护、缓存和复用。4.4 基础 DOM 操作DOM文档对象模型是 HTML 文档的编程接口。JavaScript 可以通过 DOM 来访问和操作网页的元素、属性和样式。4.4.1 获取元素// 通过 id 获取元素 let titleElement document.getElementById(myTitle); // 通过类名获取元素返回集合 let items document.getElementsByClassName(item); // 通过标签名获取元素返回集合 let paragraphs document.getElementsByTagName(p); // 通过 CSS 选择器获取第一个匹配元素 let firstButton document.querySelector(.btn); // 通过 CSS 选择器获取所有匹配元素 let allButtons document.querySelectorAll(.btn);4.4.2 修改元素内容与样式// 修改元素文本内容 let element document.getElementById(demo); element.textContent 新的文本内容; // 或 element.innerHTML strong加粗的文本/strong; // 修改元素样式 element.style.color red; element.style.backgroundColor #f0f0f0; element.style.fontSize 20px;4.4.3 事件处理事件是用户或浏览器执行的某种动作如点击、鼠标移动、键盘按下。JavaScript 可以监听这些事件并做出响应。// 方法1通过 HTML 属性不推荐混合了结构与行为 // button onclickhandleClick()按钮/button // 方法2通过 DOM 属性推荐 let myButton document.getElementById(myButton); myButton.onclick function() { alert(按钮被点击了); }; // 方法3使用 addEventListener最灵活可添加多个监听器 myButton.addEventListener(click, function() { console.log(按钮被点击了); }); myButton.addEventListener(click, function() { this.style.backgroundColor blue; });五一个简单的交互页面下面是一个结合了 HTML、CSS 和 JavaScript 的简单计数器示例HTML 结构 (index.html)!DOCTYPE html html langzh-CN head meta charsetUTF-8 title简单计数器/title link relstylesheet hrefstyle.css /head body div classcounter-container h1 idcountDisplay0/h1 div classbuttons button iddecreaseBtn-/button button idresetBtn重置/button button idincreaseBtn/button /div /div script srcscript.js/script /body /htmlCSS 样式 (style.css)body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f5f5f5; } .counter-container { text-align: center; background: white; padding: 40px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } #countDisplay { font-size: 4rem; margin: 20px 0; color: #333; } .buttons { display: flex; gap: 15px; justify-content: center; } button { padding: 12px 24px; font-size: 1.2rem; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; } #decreaseBtn { background-color: #ff6b6b; color: white; } #resetBtn { background-color: #4ecdc4; color: white; } #increaseBtn { background-color: #1dd1a1; color: white; } button:hover { opacity: 0.9; }JavaScript 逻辑 (script.js)// 1. 获取 DOM 元素 const countDisplay document.getElementById(countDisplay); const decreaseBtn document.getElementById(decreaseBtn); const resetBtn document.getElementById(resetBtn); const increaseBtn document.getElementById(increaseBtn); // 2. 初始化计数器 let count 0; // 3. 更新显示的函数 function updateDisplay() { countDisplay.textContent count; // 根据数值改变颜色 if (count 0) { countDisplay.style.color #1dd1a1; // 正数为绿色 } else if (count 0) { countDisplay.style.color #ff6b6b; // 负数为红色 } else { countDisplay.style.color #333; // 零为黑色 } } // 4. 为按钮添加事件监听器 decreaseBtn.addEventListener(click, function() { count--; updateDisplay(); }); resetBtn.addEventListener(click, function() { count 0; updateDisplay(); }); increaseBtn.addEventListener(click, function() { count; updateDisplay(); }); // 5. 初始化显示 updateDisplay();效果说明页面加载后显示数字 0。点击“-”按钮数字减1点击“”按钮数字加1点击“重置”按钮数字归零。数字的颜色会根据正负变化。六、总结这段时间天天海投也没什么人理我就想着感觉学习吧。参加了一次面试才发现自己真的很差大佬太多了还是要狠狠沉淀再去找吧。想吃西瓜想吃蓝莓想吃帆帆冒菜