1. HTML 标签基础HTML 的核心特征是用尖括号包裹的标签例如div、input。标签分为基础架构与元信息标签、文本与排版标签、表单相关标签、链接图像与表格标签、列表标签等几大类。1基础架构与元信息标签2文本与排版标签3表单相关标签4链接、图像与表格标签5列表标签2. 简单 HTML 页面架构一个最简单的 HTML 页面结构如下!DOCTYPE html html head meta charsetUTF-8 title标题/title /head body 内容 /body /html推荐使用 VS Code 作为编辑器。下面是一个带注释的入门示例!DOCTYPE html html head meta charsetUTF-8!--给浏览器发的翻译说明书按照UTF-8来读可以显示出中文-- title安全学习01/title /head body h1html学习/h1 p今天是我学习 Web 安全的第一天。/p input typetext placeholder试试在这里输入点什么!--text是输入的属性即文本框placeholder也是属性占位符当输入框为空时里面会显示这句灰色的提示语引导用户输入。-- /body /html在 input 输入框中输入恶意代码可以实现 SQL 注入攻击、XSS 攻击。问题Live Server 插件报错问题刚打开时只是新建了一个文件VS Code 没把它放进文件夹里所以 Live Server 不认。把文件放进了文件夹VS Code 默认觉得这个文件夹不安全所以自动把 Live Server 这个插件禁用了。在 VS Code 里右键代码区和右键左侧文件名弹出的菜单是完全不一样的要在文件名处右键。解决方法按 Ctrl Shift P打开命令面板的快捷键点击「工作区管理工作区信任」。先点「文件」→「打开文件夹」选中 WANGLUOANQUAN 文件夹然后再建新文件。右键文件选择 Live Server 打开网页。总结填了 input 输入框它是黑客的入口。3. 文本标签h1一级标题/h1 p段落/p br hr strong加粗/strong b加粗/b i斜体/i u下划线/u sup上标/sup sub下标/sub del删除线/del font size5 colorred字体/font pre预格式化文本/pre4. HTML 标签与 JS 代码!DOCTYPE html html head titleJS和HTML的关系/title /head body !-- 1. 这是 HTML在网页上画一个按钮 -- button idmyBtn点我/button !-- 2. 这是 JS写在 script 标签里用来控制上面的按钮 -- script // 找到 HTML 里那个叫 myBtn 的按钮 var btn document.getElementById(myBtn); // 给这个按钮加一个“点击”事件 btn.onclick function() { // 当用户点击时弹出一个警告框 alert(你点击了按钮这是 JS 在执行); }; /script /body /htmlHTML 写出来网页的长相实际交互有什么反应靠 JS 代码。HTML 里的 input 输入框就是黑客的攻击入口而 JS 代码因为直接运行在浏览器里很容易被黑客利用比如 XSS 攻击或者窃取敏感信息。5. Web 架构网站架构传统与 MVC每个页面都是一个文件或者在一个文件夹里至于是文件还是文件夹取决于它采用哪种前后端关系。前端是 HTML 代码后端是 PHP 代码。如果是前后端代码在一起就是一个文件这叫传统混合模式如 WordPress物理文件即入口。如果选择 MVC 就是一个文件夹三个文件还有路由文件。MVC 架构模型-视图-控制器。路由即网址。一个文件时它的网址是由文件名决定的。这叫直接映射物理路径路由服务器直接查硬盘。MVC 的网址是自己写的这叫自定义路由路由配置用来解耦 URL 和物理文件。在路由文件里保存路由和路由对应 C 的映射。这叫路由分发Routing Dispatch路由把请求指派给控制器。C 可以调用 V 和 M。这叫控制器调度Controller Orchestration控制器负责协调模型和视图。6. HTML 表单form 标签form action地址 methodpost enctypemultipart/form-data input typetext nameusername valueadmin input typepassword namepassword input typefile namefile input typehidden nameid value1 input typecheckbox namehobby value1 input typeradio namesex value男 input typesubmit value提交 input typereset value重置 input typebutton value按钮 /form6.1 form 标签的核心作用就是把用户在前端网页输入的数据按照指定规则action 地址、method 方式打包提交给后台服务器程序去处理。action数据要发给哪个后台地址。method用什么方式发GET 或 POST。enctype数据用什么格式打包普通文本或文件上传。6.2 GET 和 POST 的核心区别前端层面传输方式GET 数据拼在 URL 地址栏里可见像明信片POST 数据藏在 HTTP 请求的 Body 里不可见像信封。后端层面业务逻辑GET 本质是「查」向服务器要数据服务器不修改数据库只是把结果掏出来给你POST 本质是「改」给服务器交数据服务器要往数据库里写新记录、改旧记录或删记录。6.3 enctype 属性的作用作用决定表单在打包发送时使用哪种包装方式。application/x-www-form-urlencoded默认值最常用普通文本、密码。multipart/form-data上传文件专用只要表单里有input typefile必须写这个。text/plain极少用。6.4 表单属性1为什么有的 input 要给 value 值不给行不行分情况文本输入框text/password可以不给用户自己打字单选框/多选框radio/checkbox必须给用来区分用户选了哪一项提交后台的数据就是 namevalue按钮submit/reset/button给 value用来显示按钮上的文字。2value 和 name 的关系name 是给后台看的「标签」value 是给后台看的「内容」。假设用户密码输入了 123456提交时后台收到的数据就是 usernameadminpassword123456。3id、value 和 name 的关系单选框标签属性radio只能选一个相同的name是一组一组只能选一个多选框一组可以选多个7. 超链接标签aa hrefhttp://www.baidu.com百度/a a hrefhttp://www.baidu.com target_self当前窗口/a a hrefhttp://www.baidu.com target_blank新窗口/a a href#top返回顶部/a p nametop顶部锚点/phref 表示「指向某个资源」点击后跳过去即 hypertext reference超文本引用。8. 图像标签imgimg srcimg/logo.jpg width100 height100 altlogosrc 表示「把某个资源拿过来嵌入到当前页面」。9. 表格标签tabletable border1 cellpadding10 cellspacing10 caption标题/caption tr th表头/th /tr tr td数据/td /tr /table合并单元格td rowspan2纵向合并/td td colspan2横向合并/td10. 列表标签ul li无序列表项/li /ul ol type1 li有序列表项/li /ol11. 框架标签frameset rows20%,* frame srctop.html / frameset cols20%,* frame srcleft.html / frame srcmain.html namecontent / /frameset /frameset配对使用!-- 右侧框架 -- frame srcmain.html namecontent / !-- 左侧菜单 -- a href001.html targetcontent第一个页面/a a href002.html targetcontent第二个页面/a把网页分成三个模块每个模块对应一个网页。在左侧模块用 a href 设置两个超链接每个超链接是一个网页。点击超链接会跳转到右侧模块加载出来超链接指向 target 等于所指区域名称 name。