💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
[TOC] # 课程目标 * [ ] 课程目标1:能够运用前端技术相关知识对给定的B/S系统的前端部分进行**审查、识别和分析**,并能对某系统的前端页面、样式、脚本等进行描述、表达和分析。 * [ ] 课程目标2:能够使用前端开发技术来设计满足特定需求的网页、脚本、模块或组件,并能够综合运用知识进行B/S系统的前端**开发**。 * [ ] 课程目标3:能够按照特定的前端开发需求,对B/S系统的前端部分问题进行分析、确定方案、**开展实验**,并能对实践过程进行纪录、总结和评价。 * [ ] 课程目标4:能够在前端开发实践过程中遵守工程**职业道德和规范**,能够判断所选解决方案和技术是否符合职业道德和规范,并在前端开发中自觉遵守。 # 课程考核 ## 过程考核40%+期末考核60% ## 1. 过程考核 根据当期次超星学习通过程考核设置进行考核。 ## 2. 期末考核 ### 1. 判断题 考查课程目标1,来源于章节测试。 ### 2. 选择题 考查课程目标1,来源于随堂考试。 ### 3. 简答题 考查课程目标1,来源于课堂讲解。 ### 4. 编程题 考查课程目标2,来源于课题讲解。 * [ ] HTML(根据要求设计表单) * [ ] CSS(根据要求编写内部样式表) * [ ] JavaScript(根据要求编写内部脚本) * [ ] Ajax(根据要求向服务器请求数据并展示) * [ ] jQuery(根据要求编写内部脚本) # 推荐教材 ![](https://img.kancloud.cn/2a/85/2a85fd8a4434ed271b152ce6c8280a2f_400x562.jpg) ![](https://img.kancloud.cn/43/ec/43ec9a02ffcf85682d0a2c8ef3ab0ee7_400x560.jpg) # 推荐资料 https://developer.mozilla.org/zh-CN/docs/Web https://www.runoob.com/ https://www.w3school.com.cn/ # 案例1:软件架构模式 * 安全性 * 成本 * 性能 ![](https://img.kancloud.cn/bf/03/bf035cf540feca77191f6f4bd07a7eb1_635x805.png) # 案例2:网页呈现过程 ![](https://img.kancloud.cn/eb/b2/ebb2739d44de3f4176259ad840565c04_987x807.png) # 案例3:URL格式 ![](https://img.kancloud.cn/cd/af/cdafa8996f665dcfec98f277d6b03438_802x217.png) ![](https://img.kancloud.cn/ea/e1/eae1c41f0ef55dad00b38d4a840251b6_996x370.png) # 案例4:URI、URL、URN ![](https://img.kancloud.cn/37/b6/37b6fabdb7b4288820b95e60b9f21a6c_650x394.png) > URL只能使用ASCII字符集进行发送,如果不是ASCII字符集将对字符进行转换,如%D6%D0%B9%FA。 > URL中空格一般使用“+”代替。 # 案例5:服务器状态码 ![](https://img.kancloud.cn/66/02/6602781ba55190ee070d575c949c0bfd_849x504.png) [服务器状态码:https://www.runoob.com/http/http-status-codes.html](https://www.runoob.com/http/http-status-codes.html) # 案例6:网站首页 ![](https://img.kancloud.cn/4a/57/4a576c13b83541a46b0c8ced09b798a0_667x313.png) # 案例7:MIME ![](https://img.kancloud.cn/14/25/1425065f11bb3477c73345ed3403c483_1009x600.png) # 案例:其他概念 ## 1. 超文本 线性结构→非线性结构 ## 2. 超媒体 非线性结构组织文本、视频、图片、音频等。 ## 3. WWW World Wide Web ## 4. HTTP/FTP HTTP HTTPs FTP ## 5. 前端开发技术 HTML/CSS/JavaScript ## 6. 服务器端开发技术 JSP ## 7. 浏览器与内核 ![](https://img.kancloud.cn/f2/ea/f2eabea78e3525f114789b933800f456_824x178.png) ## 8.开发工具 1. Nodepad++ 2. Visual Studio Code 3. Sublime Text 4. WebStorm 5. HBuilder/HBuilderX [HBuilderX-高效极客技巧 (dcloud.io)](https://dcloud.io/hbuilderx.html)