目录1. 客户端、服务器、前端、后端1.1 核心概念与联系1.2 两层 B/S 架构与联系1.3 Web 开发框架简介2. HTMLHyperText Markup Language -- 超文本标记语言2.1 概念与本质2.2 基本结构2.3 基本语法2.4 基本标签2.5 表单标签与表单元素★网安学习输入点核心★3. CSSCascading Style Sheets -- 层叠样式表3.1 概念与基础语法3.2 CSS 基础选择器3.3 常用样式属性4. JSJavaScript4.1 概念与特征4.2 JS 的三大部分组成4.3 JS 注释与基本输出语句5. 变量与数据类型基础5.1 变量的基本使用5.2 核心数据类型补充6. 函数 function6.1 函数的概念与本质6.2 关键字形式函数的规范7. 事件 event 与 DOM 树操作7.1 事件Event概念7.2 JS 对象Object概念7.3 文档对象模型DOM树结构7.4 DOM 获取元素与属性操作1. 客户端、服务器、前端、后端1.1 核心概念与联系客户端Client指用户直接使用的设备或软件是与用户交互的“入口”前端Frontend属于客户端的“表面层”负责用户能看到、摸到的界面和交互常用 Web 前端语言有 HTML、CSS、JavaScript服务器Server / Web服务器指驻留于因特网上某种类型计算机的程序 。它负责处理浏览器等 Web 客户端的请求并返回相应响应 同时可以放置网站文件供全世界浏览或放置数据文件供下载后端Backend属于服务器的“内层”负责“幕后”的逻辑处理和数据管理用户看不到但离不开数据库Database负责后台数据的规范化持久存储1.2 两层 B/S 架构与联系Web万维网的组成构建主要包括客户端前端、服务器后端以及数据库用户通过前端操作发出请求Request通过网络发送给 Web 服务器后端处理后通过网络返回响应Response给浏览器进行渲染展示1.3 Web 开发框架简介定义与作用用于支持动态网站、网络应用和网络服务的开发软件框架 。它简化并加速了 Web 应用的开发过程能提高开发效率、简化流程、增强安全性并促进团队协作及代码复用前端框架代表Angular由 Google 开发并维护主要用于构建动态 Web 应用程序后端框架代表Yii基于 PHP 的高性能 Web 开发框架2. HTMLHyperText Markup Language -- 超文本标记语言2.1 概念与本质HTML 不是一门真正意义上的编程语言而是一种标记语言它通过带有尖角号的标签对文本进行标记从而实现网页结构的搭建2.2 基本结构当网页被加载时完整的 HTML5 文档必须遵循以下标准骨架 !DOCTYPE html html head meta charsetutf-8 title这里可以放内容/title /head body /body /html2.3 基本语法标签语法标签必须书写在成对的尖括号内部双标签由开始和结束两个标签符号组成语法为标签名内容/标签名如html,head,body,div,p 。结束标签必须要有关闭符号/单标签用一个标签符号即可完整描述某个功能语法为标签名 属性名属性值/如br,hr,img,input,link,meta属性语法属性是赋予标签特殊职能的键值对 必须放在开始标签或单标签的标签名后面以空格隔开。写法为属性名属性值。多个属性之间用空格隔开标签级别补充提升容器级标签元素内部除文本外还可以嵌套其他标签如div,ul,ol,dl,table,h1~h6文本级标签元素内部只能存放文本或文本级标签如span,p,img,input,a2.4 基本标签标题标签h1标题/h1到h6标题/h6一共六级均为双标签、容器级权重比别的标签高段落标签p第一个段落/p双标签、文本级用于添加完整段落的语义超链接锚点a hrefURL target_blank title提示显示文字/ahref超文本引用指定跳转的位置可以是绝对路径网址或相对路径 。页面内跳转时href后面加#id名可实现页面内锚点跳转target_blank作用是让链接在新的标签页中打开title鼠标移上文字之后的悬停文本提示图片单标签img src图片路径 alt替换文本 /src引入图片的路径 alt为图片加载不出来时的替换文本换行标签br单标签强制文本换行特殊字符实体补充替换键盘打不出或会被 HTML 误识别的符号空格nbsp;小于号lt;大于号gt;规定必须以开头;结尾2.5 表单标签与表单元素★网安学习输入点核心★表单是网页中提供用户进行点击或输入的控件是前端与后端交互传输数据的核心载体form标签容器标签form action提交位置 method提交方法action指定数据提交的位置后端接口地址method数据提交的方法属性值通常是get或postinput标签单标签通过type属性拓展不同的输入功能单行文本框input typetext placeholder占位符提示文字密码框input typepassword placeholder请输入密码输入后通过掩码形式加密遮蔽显示单选框input typeradio namesex必须设置相同的name属性才能实现多选一的互斥效果复选框input typecheckbox namehobby多选框同一组建议设置相同name默认选中属性给单选或复选框添加checkedchecked可实现默认选择提交按钮input typesubmit value登录用于将表单数据打包发送给后端3. CSSCascading Style Sheets -- 层叠样式表3.1 概念与基础语法CSS 是一种用来表现 HTML 样式的计算机语言能够对网页中元素的位置排版进行精确描述包括字体、颜色、大小、背景等效果CSS 语法结构选择器 { 属性名: 属性值; 属性名: 属性值; }样式属性和值写在大括号{}内部以键值对形式呈现3.2 CSS 基础选择器元素选择器标签选择器根据标签名称匹配语法标签名 {}如p {},div {}ID 选择器根据标签的id属性匹配。每个 ID 在页面中必须是唯一的语法#id值 {}定义时前缀用到井号#后面紧跟 ID 属性值类选择器Class选择器根据标签的class属性匹配类名可以多次复用在多个元素上语法.class值 {}定义时前缀用到英文句号., 后面紧跟类名3.3 常用样式属性尺寸样式宽度width: 100px;高度height: 100px;块状元素生效背景样式背景颜色background: red;或background-color: blue;文本样式字体颜色color: red;字体样式文字大小font-size: 100px;4. JSJavaScript4.1 概念与特征JavaScript 是一种轻量级、解释型或即时编译型的高级编程语言它主要作为客户端脚本语言嵌套在网页中负责行为层用来给网页添加动态交互效果4.2 JS 的三大部分组成JavaScript 通常由以下三个部分核心组成 核心ECMAScript由欧洲计算机协会定制的语法规范是“怎么写代码”的底层规则文档对象模型DOMDocument Object Model将网页构造为对象的树是“怎么操控和修改网页内容”的工具浏览器对象模型BOMBrowser Object Model是“怎么控制浏览器行为”的接口工具4.3 JS 注释与基本输出语句JS 注释单行注释使用双斜杠// 注释内容多行注释使用/* 注释内容 */基本输出语句alert()警告框浏览器自带的内置函数主要作用是在浏览器正上方弹出一个警示框document.write()文档写直接向 HTML 文档输出、写入内容5. 变量与数据类型基础5.1 变量的基本使用变量可以理解为一个承载数据的容器。使用变量时严格遵循以下三步规范 声明使用关键字var声明变量语法var userName;赋值使用等号赋值运算符将固定数值或计算结果装载进变量语法userName 小明;使用直接通过访问变量名字获取其存储的数值内容语法alert(userName);5.2 核心数据类型补充在 JS 世界中书写的数据拥有严格的类型划分5 个基本数据类型1 个引用类型 基本数据类型String字符串外层必须加单/双引号包裹控制台打印为黑色Number数字类型包含整数和小数控制台打印为蓝色Boolean布尔值true/falseUndefined未定义变量声明但未赋值时的初始值Null空对象指针类型引用数据类型Object包含函数、数组、JSON 以及接下来要操作的 DOM/BOM 元素对象6. 函数 function6.1 函数的概念与本质函数function就是将某一个常用的功能、代码块进行封装当需要使用这个特定功能的时候直接选择调用并执行该功能即可 。函数在 JS 当中本质上属于Object引用数据类型6.2 关键字形式函数的规范使用关键字function定义和使用函数分为明显的两部分 1. 声明定义函数function 函数名() { // 大括号内部结构体书写封装的代码、常用的功能 }2. 调用执行函数语法函数名();7. 事件 event 与 DOM 树操作7.1 事件Event概念JavaScript 中的事件是指发生在 HTML 文档或浏览器窗口中能够被 JS 侦测到的交互行为或其他动作常见动作用户的操作如鼠标点击按钮onclick、移动鼠标、按键等系统行为页面加载、滚动等响应机制只有标签节点才可以绑定事件绑定语法格式element.onxxxx function() { //触发时执行的代码 }7.2 JS 对象Object概念JavaScript 是一种基于对象的编程语言对象是具备特定性质的复合体主要由两部分组成 特征 / 属性静态的性质在 JS 中通过点语法属性名访问属性值行为 / 方法动态的功能在 JS 中方法后面一定要加上小括号()执行7.3 文档对象模型DOM树结构当网页被加载时浏览器会自动创建页面的文档对象模型HTML DOM 。DOM 模型在底层被构造为对象的树节点树DOM 树的最外层根元素元素对象是内置引用类型的document对象可以用它来操作和控制网页上的所有HTML 标签7.4 DOM 获取元素与属性操作在 JavaScript 当中操作、修改 HTML 文档时必须要遵循先获取元素后操作属性的原则通过 ID 获取标签元素使用document.getElementById(id属性值)方法无论标签在网页中的嵌套关系多么复杂都可以通过这个方法直接获取到目标节点对象代码演示示例// 1. 获取文档中 id 为 p1 的段落标签元素 var myElement document.getElementById(p1); // 2. 利用点语法获取或动态修改标签的属性值 console.log(myElement.id); // 获取当前节点的 id 属性值 // 3. 动态控制非表单标签的文本内容 myElement.innerHTML 文本已被 JS 动态修改啦; // 修改非表单元素的文本内容