[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript

目录

一 特色

 二  收获​编辑

 三 什么是web?

四 网站的工作流程

 五 web网站的开发模式​编辑

 六 web开发课程学习安排

 七、初始web前端

 八 HTML、CSS

8.1 什么是HTNL\CSS(w3cschool)

8.2 HTML快速入门

8.3 VS Code开发工具

8.3.1  插件

 8.3.2 主题(改变颜色)

8.3.3 设置

8.4 基础标签&样式

 8.4.1 标题排版

8.4.1.1分析:

 8.4.2.2 编码开始:

 8.4.2.3 总结​编辑

8.4.2 标题样式1- css样式控制

 8.4.2.1 分析

8.4.2.2 编码开始

8.4.2.3 总结

 8.4.3 标题样式2- css样式控制

8.4.3.1 分析​编辑

8.4.3.2 编码开始

 8.4.4 超链接

8.4.4.1 分析

8.4.4.2编码开始

8.4.4.3 总结

 8.4.5 正文排名

8.4.5.1 分析

8.4.5.2 编码开始

8.4.5.3 总结

 8.4.6 页面布局

8.4.6.1 分析

8.4.6.2 编码开始

8.4.6.3 总结

8.5 表格标签

8.5.1 表格

8.5.2 编码开始

8.5.3 总结 

8.6 表单标签

8.6.1 表单标签

8.6.1.1 分析 ​编辑

 8.6.1.2 编码开始 

8.6.1.3 总结  

8.6.2 表单项标签

8.6.2.1 分析

8.6.2.2 编码开始

8.6.2.3 总结 

 九 JavaScript 

 9.1 什么是JavaScript

9.2 js引入方式

9.3 js基础语法 

9.3.1 书写语法&& 输出语句

9.3.2 变量

9.3.2.1 全局 var

9.3.2.2 局部 let

9.3.2.3 常量 const

9.3.3 数据类型

9.3.4 运算符

 9.3.5 流程控制语句

9.4 js函数 

9.5 js对象 

9.5.1 Array数组

9.5.2  String字符串

 9.5.3 JSON

 9.5.4 BOM

9.5.5 DOM 

9.5.5.1 DOM

9.5.5.2 案例

9.6 js事件监听 

9.6.1 事件绑定

9.6.2 常见事件

9.6.3 案例


前言:跟着老师学开发,本课程主要以后端开发为主,加油.前端包含html、css、javascript

一 特色

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第1张图片

 二  收获[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第2张图片

 三 什么是web?

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第3张图片

四 网站的工作流程

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第4张图片

 五 web网站的开发模式[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第5张图片

 六 web开发课程学习安排

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第6张图片

 七、初始web前端

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第7张图片

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第8张图片

 八 HTML、CSS

8.1 什么是HTNL\CSS(w3cschool)

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第9张图片

8.2 HTML快速入门

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第10张图片

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第11张图片  

8.3 VS Code开发工具

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第12张图片

8.3.1  插件

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第13张图片

1 Chinese (Simplified) Language Pack for Visual Studio Code(中文语言包)

2 Code Spell Checker

3 HTML CSS Support

4 JavaScript(ES6) code code snippets

5 Mithril Emmet

6 Path Intellisense

7 Vue 3 Snippets

8 VueHelper

9 Auto Close Tag

10 Auto Rename Tag

11 Beautify (停止维护了)

12 Bracket Pair Colorizer(提示已内置于vscode 有人推荐Bracket Pair Colorizer 2)

13 open in browser

14 Vetur

15 IntelliJ IDEA Keybindings


=====自己

16 Duplicate action  # 右击文件复制

 8.3.2 主题(改变颜色)

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第14张图片

8.3.3 设置

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第15张图片

改变字体大小等

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第16张图片

8.4 基础标签&样式

 8.4.1 标题排版

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第17张图片

8.4.1.1分析:

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第18张图片

 8.4.2.2 编码开始:

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第19张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第20张图片

 选择自己设置的文件夹VSCODEWORK,

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第21张图片

 新建一个文件01.新浪新闻-标题排版.html

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第22张图片

 输入 ! + Enter  一键生成初始化标签

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第23张图片

 加注释,ctrl + /  同IDEA (前面装插件实现的)





    
    
    
    
    焦点访谈:中国底气 新思想夯实大国粮仓


     
    

     新浪政务 > 正文
    

焦点访谈:中国底气 新思想夯实大国粮仓


2023年08月15日 23:30 新华社

 8.4.2.3 总结[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第24张图片

8.4.2 标题样式1- css样式控制

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第25张图片

 8.4.2.1 分析

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第26张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第27张图片

8.4.2.2 编码开始

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第28张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第29张图片




    
    
    访谈:底气 新思想夯实大国粮仓
     
     
  
  



     新浪政务 > 正文
  
    
    
    

访谈:底气 新思想夯实大国粮仓


2023年08月15日 23:30 菠菜社

8.4.2.3 总结

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第30张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第31张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第32张图片

 8.4.3 标题样式2- css样式控制

8.4.3.1 分析[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第33张图片

8.4.3.2 编码开始




    
    
    访谈:底气 新思想夯实大国粮仓
     
     
  
  



     新浪政务 > 正文
  
    
    
    

焦点访谈:底气 新思想夯实大国粮仓


2023年08月15日 23:30 菠菜社

8.4.3.3 总结

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第34张图片

 8.4.4 超链接

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第35张图片

8.4.4.1 分析

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第36张图片

8.4.4.2编码开始




    
    
    访谈:底气 新思想夯实大国粮仓
     
     
  
  



     新浪政务 > 正文
  
    
    
    

访谈:底气 新思想夯实大国粮仓


2023年08月15日 23:30 菠菜社

8.4.4.3 总结

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第37张图片

 8.4.5 正文排版

8.4.5.1 分析

 

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第38张图片

 

8.4.5.2 编码开始




    
    
    焦点访谈:中国底气 新思想夯实大国粮仓
     
     
  
  



     新浪政务 > 正文
  
    
    
    

焦点访谈:中国底气 新思想夯实大国粮仓


2023年08月15日 23:30 央视网

央视网消息(焦点访谈):党中央始终把解决粮食安全问题作为治国理政的头等大事, 重农抓粮一系列政策举措有力有效,我国粮食产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中, 为保障经济社会发展提供了坚实支撑,为应对各种风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢?


人勤春来早,春耕农事忙。立春之后,由南到北,我国春耕春管工作陆续展开,春天的田野处处生机盎然。

今年,我国启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。2015年以来,我国粮食产量连续8年稳定在1.3万亿斤以上, 人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。

国务院发展研究中心农村经济研究部部长叶兴庆:“我们研究粮食安全的人有一个概念,1000亿斤是一个台阶,这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的, 是在极端天气事件多发、频发的情况下取得的,是在从事农业生产的人口减少的条件下取得的,这在中国粮食生产发展历史中是一个了不起的成就。”

国家仓廪充实,为经济社会行稳致远夯实了根基。14亿人口要吃饭,这是中国最大的国情。党的十八大以来,书记四次出席中央农村工作会议并发表重要讲话, 对“三农”工作和粮食生产、粮食安全作出一系列重要指示。2013年12月召开的中央农村工作会议上,书记把“确保我国粮食安全”放在首位。

中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展,意味着我们要立足国内,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮食安全是一个永恒的课题,任何时候都不能放松。在以同志为核心的党中央坚强领导下, 亿万中国人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这一“国之大者”,把中国人的饭碗牢牢端在自己手中,夯实中国式现代化基础。

责任编辑: 王树淼 SN242

8.4.5.3 总结

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第39张图片

 8.4.6 页面布局

8.4.6.1 分析

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第40张图片

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第41张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第42张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第43张图片

8.4.6.2 编码开始




    
    
    焦点访谈:中国底气 新思想夯实大国粮仓
     
     
  
  



  
新浪政务 > 正文

焦点访谈:中国底气 新思想夯实大国粮仓


2023年08月15日 23:30 央视网

央视网消息(焦点访谈):党中央始终把解决粮食安全问题作为治国理政的头等大事, 重农抓粮一系列政策举措有力有效,我国粮食产量站稳1.3万亿斤台阶,实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中, 为保障经济社会发展提供了坚实支撑,为应对各种风险挑战赢得了主动。连续八年1.3万亿斤,这个沉甸甸的数据是如何取得的呢?


人勤春来早,春耕农事忙。立春之后,由南到北,我国春耕春管工作陆续展开,春天的田野处处生机盎然。

今年,我国启动了新一轮千亿斤粮食产能提升行动,这是一个新的起点。2015年以来,我国粮食产量连续8年稳定在1.3万亿斤以上, 人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤,粮食产量提高了1500亿斤。

国务院发展研究中心农村经济研究部部长叶兴庆:“我们研究粮食安全的人有一个概念,1000亿斤是一个台阶,这就是说我们用十年时间使粮食产量上了一个半台阶。这是在化肥和农药开始减量的情况下取得的, 是在极端天气事件多发、频发的情况下取得的,是在从事农业生产的人口减少的条件下取得的,这在中国粮食生产发展历史中是一个了不起的成就。”

国家仓廪充实,为经济社会行稳致远夯实了根基。14亿人口要吃饭,这是中国最大的国情。党的十八大以来,书记四次出席中央农村工作会议并发表重要讲话, 对“三农”工作和粮食生产、粮食安全作出一系列重要指示。2013年12月召开的中央农村工作会议上,书记把“确保我国粮食安全”放在首位。

中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展,意味着我们要立足国内,解决14亿多人吃饭的问题。仓廪实,天下安。保障粮食安全是一个永恒的课题,任何时候都不能放松。在以同志为核心的党中央坚强领导下, 亿万中国人民辛勤耕耘、不懈奋斗,我们就一定能够牢牢守住粮食安全这一“国之大者”,把中国人的饭碗牢牢端在自己手中,夯实中国式现代化基础。

责任编辑: 王树淼 SN242

8.4.6.3 总结

8.5 表格标签

8.5.1 表格

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第44张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第45张图片

8.5.2 编码开始




    
    
    
    HTML-表格
    


    
    
序号 品牌Logo 品牌名称 企业名称
1 华为 华为技术有限公司
2 阿里 阿里巴巴集团控股有限公司

8.5.3 总结 

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第46张图片

8.6 表单标签

8.6.1 表单标签

8.6.1.1 分析 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第47张图片

 8.6.1.2 编码开始 




    
    
    
    HTML-表单


       

    
用户名: 年龄:

8.6.1.3 总结  

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第48张图片

8.6.2 表单项标签

8.6.2.1 分析

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第49张图片

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第50张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第51张图片

8.6.2.2 编码开始




    
    
    
    HTML-表单项标签




姓名:

密码:

性别:

爱好:

图像:

生日:

时间:

日期时间:

邮箱:

年龄:

学历:

描述:


8.6.2.3 总结 

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第52张图片

 九 JavaScript 

 9.1 什么是JavaScript

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第53张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第54张图片

9.2 js引入方式

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第55张图片




    
    
    
    JS-引入方式
    


    
    
    
    
    
    



9.3 js基础语法 

9.3.1 书写语法&& 输出语句

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第56张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第57张图片




    
    
    
    JS-基本语法


   
    
   

9.3.2 变量

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第58张图片

9.3.2.1 全局 var

9.3.2.2 局部 let

9.3.2.3 常量 const




    
    
    
    JS-变量


  




9.3.3 数据类型

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第59张图片




    
    
    
    JS-数据类型





 

9.3.4 运算符

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第60张图片




    
    
    
    JS-运算符 流程控制


    


 9.3.5 流程控制语句

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第61张图片

9.4 js函数 

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第62张图片

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第63张图片




    
    
    
    JS-函数


    


9.5 js对象 

JavaScript 和 HTML DOM 参考手册

 本文主要讲三类(基础对象、浏览器对象、dom对象)[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第64张图片

9.5.1 Array数组

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第65张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第66张图片




    
    
    
    JS-对象-Array


    


9.5.2  String字符串




    
    
    
    JS-对象-String


    


 9.5.3 JSON

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第67张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第68张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第69张图片




    
    
    
    JS-对象-JSON


    


 9.5.4 BOM

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第70张图片

 Window

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第71张图片

 Location

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第72张图片




    
    
    
    JS-对象-BOM


    


9.5.5 DOM 

9.5.5.1 DOM

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第73张图片

演示案例代码




    
    
    
    JS-对象-DOM演示



    
课程表
学号 姓名 分数 评语
001 张三 90 很优秀
002 李四 92 优秀
003 王五 83 很努力,不错
004 赵六 98 666

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第74张图片

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第75张图片

获取元素代码 【重点】




    
    
    
    JS-对象-DOM



      

传智教育

黑马程序员

电影 旅游 游戏

9.5.5.2 案例

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第76张图片




    
    
    
    JS-对象-DOM-案例



      

传智教育

黑马程序员

电影 旅游 游戏

9.6 js事件监听 

 [JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第77张图片

9.6.1 事件绑定

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第78张图片




    
    
    
    JS-事件-事件绑定



    
    



9.6.2 常见事件

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第79张图片




    
    
    
    JS-事件-常见事件




    



学号 姓名 分数 评语
001 张三 90 很优秀
002 李四 92 优秀

9.6.3 案例

[JavaWeb]【一】入门JavaWeb开发总概及HTML、CSS、JavaScript_第80张图片




    
    
    
    JS-事件-案例



     




电影 旅游 游戏

你可能感兴趣的:(java,java,vue,html,css,javascript)