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。
企业数字化 ERP 产品动态
相关推荐
Yii 2 框架入门：定位、核心特性、版本演进与运行环境要求 后端Web框架 【免费下载链接】yii2 Yii 2: The Fast, Secure and Professional PHP Framework 项目地址： https://gitcode.com/gh_mirrors/yi/yii2 点击查看 免费下载 Yii 2 是一款高性能、基于组件架构的 PHP 全栈框架，其官方指南开篇（docs… · 2026/9/24 9:25:35
【Coze】【视频】火柴人减肥励志工作流 今天给大家演示一个 火柴人减肥励志 Coze 工作流，它通过大模型生成口语化的减肥励志文案，并结合图像生成、语音合成、剪映插件等节点，将文字、音频、矢量图整合，最终快速生成适合短视频平台的励志类成品视频。这个流程让创作者能够更高效地完成从文案到视频的全链路创作。 … · 2026/9/24 13:50:34
【Dify】自动修复不规范JSON数据应用 结构化数据处理中，格式不规范的 JSON 数据经常影响正常分析与开发。自动修复工具成为数据处理流程中的刚需。
本文聚焦于基于 Python json-repair 库的自动化工作流，梳理核心节点设计、执行流程及典型应用场景，为有数据清洗和规范化需求的开发实践提供一套高效解决方案。 文… · 2026/9/24 13:50:34
【Coze】【视频】火柴人认知觉醒工作流 今天给大家演示的是一个 火柴人认知觉醒 Coze 工作流，它将认知觉醒类的文案生成、字幕处理、图像生成以及语音合成结合在一起，形成了一套完整的内容生产链路。通过大模型与图像、音频等多模态工具的联动，这个工作流能快速产出带有火柴人极简插画、双语字幕和口播音频的视频素… · 2026/9/24 13:50:34
【Dify】智能信息抽取与网页内容摘要应用 近年来，随着信息量的持续增长，自动化处理网页数据和高效获取内容摘要成为实际需求。通过智能工具集成，实现网页信息的快速检索、正文抓取与结构化摘要，极大提升了内容整合的效率。
本文围绕Dify智能信息抽取与内容摘要工作流，介绍流程架构、核心节点、应用场景及实际操作… · 2026/9/24 13:50:34
【Dify】JSON批量翻译自动化 多语言环境下，内容自动化翻译成为高效管理和应用数据的关键工具。随着网站、App、配置文件等产品对国际化需求持续增加，智能翻译工作流方案得到广泛关注。
本文介绍一种基于节点化自动处理的JSON批量翻译工作流，涵盖文本抽取、机器翻译、结构化回填等完整过程，适用于多场景… · 2026/9/24 13:50:34
基于YOLOv8的渔船作业监控系统：从环境搭建到边缘部署全流程 简介：这是一套面向计算机、人工智能、自动化等专业学生与教师的毕业设计级项目资源，围绕YOLOv8实现渔船作业监控系统，可用于毕设、课程设计、大作业或项目立项演示。压缩包共97个文件，约24.21MB，以70个Python源码文件为… · 2026/9/24 0:00:13
1D-CNN时间序列建模实战：从Conv1d原理到工业落地 简介：面向时间序列数据建模的一维卷积神经网络完整实现，适合深度学习入门者及需要快速验证时序模型的研究者，能够从音频、文本、传感器或股价等序列中挖掘局部特征与时间依赖。压缩包体积很小，只有3KB，内含3个Python脚… · 2026/9/24 0:00:26
柔软的L：汉语语流中被忽视的舌肌张力控制 1. 这个“L”不是字母表里的L，而是舌尖上的L最近在几个方言群和语音教学社群里，反复看到有人发一句：“也说字母L：柔软的长舌”。初看以为是英语发音课笔记，点开才发现全是方言爱好者、播音系学生、语言康复师甚至戏曲演… · 2026/9/24 0:00:44
