Javawed第一章:Web前端的入门理论

这篇具有很好参考价值的文章主要介绍了Javawed第一章:Web前端的入门理论。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言

一.wed

💖wed是什么?

💖 wed的分类

二.HTML 和 CSS

💖HTML的介绍

HTML的标签

💖CSS的介绍

常用基本标签

💖实践

HTML结构标签特点

三.JavaScript

💖JavaScript的介绍

💖JS的学习内容

四.Vue

💖Vue的介绍

 MVVM(Model-View-ViewModel)思想介绍

💖Vue的代码样式

安装Vue.js方法及其使用

 代码展示

五.VS Code

总结


🎁个人主页:tq02的博客_CSDN博客-C语言,Java,Java数据结构领域博主
🎥 本文由 tq02 原创,首发于 CSDN🙉
🎄 本章讲解内容:JavaWed的前端扫盲知识点

🎁欢迎各位→点赞👍 + 收藏⭐ + 评论📝+关注

Javawed第一章:Web前端的入门理论

 编译器:VS Code


前言

        JavaWeb,是用Java技术来解决相关web互联网领域的技术总和。Java Web应用程序通常由动态生成的网页组成,与静态的HTML页面不同。 JavaWeb应用程序可以用于各种类型的应用程序,例如:淘宝、博客等。博主准备先讲述概念,之后会从HTML入手开始逐步讲解直到掌握Javawed

注:一定要下载VS Code(文章结尾有教程)

一.wed

💖wed是什么?

        wed:全球广域网,通过浏览器访问的网站

例如访问京东网:使用浏览器,浏览器也是一个程序,通过浏览器可以远程访问京东那边的程序。

问:网页包含什么?

答:文字、图片、音频、视频、超链接.........

问:那么网页背后的本质是什么呢?

答:  前端代码

那么关键就来了,我们是怎么通过浏览器来获取网页的呢?

Javawed第一章:Web前端的入门理论

文字解析(重点),例如:访问淘宝的步骤:

  1. 使用浏览器输入淘宝的链接,然后申请访问淘宝的前端服务器。 
  2. 前端服务器会响应,并且返回前端代码,浏览器的解析引擎自动解析前端代码,从而展示出对应的框架样式,并且在前端代码中含有 数据获取路径
  3. 数据获取路径中访问后端服务器。
  4. 后端服务器会继续访问数据库服务器。
  5. 数据库服务器会将数据传递给后端服务器。
  6. 后端服务器再将数据传递给浏览器。

结论前端相当于空白框架,而后端相当于往空白框架中输入数据。


💖 wed的分类

从开发网站的方面wed细分为2种:wed前端   与  wed后端

而这两种所需要掌握的技术不同

  1. 前端wed:HTML、Css、JavaScript、Vue 、element 、Niginx
  2. 后端wed:Maven、springboot wed、MySQL、springboot  mybatis、springboot wed开发篇 、springboot  wed进阶篇

而若是学习Javawed,重点了解后端wed,但是为了更好的理解,我们依然需要学习前端wed知识,但是只需要理解一下

前端wed主要介绍:

HTML:负责网页结构(页面元素和内容)   

CSS:负责网页的表现(页面元素的外观、位置。如颜色、大小)

JavaScript:负责网页的行为(交互效果)

Vue:一套用于构建用户界面的渐进式JavaScript框架

element:基于Vue封装的桌面端组件库

而至于后端wed,我们是需要详细学习的,在之后的学习当中会逐步了解的。


二.HTML 和 CSS

💖HTML的介绍

 HTML:文本标记语言,分为2个部分组成:超文本标记语言


文本和文本的主要区别:除了文字信息,还可定义图片、音频、视频等内容

标记语言:由标签构成的语言

  1. HTML标签是预定义好的。使用标签来展示图片、音频等
  2. HTML代码语言直接在浏览器中运行,浏览器解析。

HTML的标签:

 标签一般分为2种:

  1.  带有标签体的标签< a>标签体< /a >
  2. 不带标签体的标签(自结束标签)< br/>,< hr/>

Javawed第一章:Web前端的入门理论

看不懂没关系,先了解到什么是标签就行。例如<html>和</html>是成对出现的,开始标签和结束标签。 

💖CSS的介绍

CSS:层叠样式表,用于控制页面的样式

就是在标签的基础上,控制内容的颜色、大小

 例子:

Javawed第一章:Web前端的入门理论

常用基本标签

1.标题标签(h1--h6)Javawed第一章:Web前端的入门理论

 2.字体标签(font)

设置字体的大小、颜色与类型

Javawed第一章:Web前端的入门理论

 3.段落标签(p)

Javawed第一章:Web前端的入门理论

 4.换行标签(br)

   直接使用<br/>

5.水平线标签

需要设置水平线的长度、颜色、宽度,以及从哪端开始划线。

例如:<hr  size="10" color="颜色"  width="50%"  align="left"/>

6.背景音乐(audio)

l例如:< audio src="音乐"  autoplay="autoplay"   loop="loop"/ >

下面是更加全面的标签和css,建议收藏哦

标签大全的参考手册:HTML 标签参考手册 (w3school.com.cn)

CSS大全参考手册:CSS 参考手册 (w3school.com.cn)

💖实践

        第一步,建立一个文本文档,将后缀改为.html

Javawed第一章:Web前端的入门理论

        第二步,在文本文档里输入语法格式

Javawed第一章:Web前端的入门理论          第三步,点击文件,形成对应的网页

Javawed第一章:Web前端的入门理论

注:语法格式,浏览器要求不严,甚至有时候缺少一个>"都可以显示成功,因为浏览器的内核很厉害,会自动补全。

HTML结构标签特点

  1. 不区分大小写
  2. 单双引号都可以
  3. 语法松散

三.JavaScript

💖JavaScript的介绍

  • JavaScript (简称:JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的,它能使网页可交互
  • JavaScript和Java 是完全不同的语言,不论是概念还是设计。但是基础语法类似
  • JavaScript在1995年由 Brendan Eich 发明,并于1997年成为ECMA标准
  • ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)。

ECMA:ECMA国际(前身为欧洲计算机制造商协会),制定了标准化的脚本程序设计语言 ECMASript,这种语言得到广泛应用。而Javascript是遵守ECMAScript的标准的。

什么是网页行为呢?

Javawed第一章:Web前端的入门理论

如上述动态图,点击上、下一张照片时,便是控制网页行为。🌟:水印不会去、视频内容来源百度 

💖JS的学习内容

1.JS的引用方式

        由介绍中,我们可以发现,JS可以控制网页行为,也就是说和HTML进行结合使用。

2.JS的基础语法

       JS是一门编程语言,需要学习它的基础语法,例如变量的控制、运算符等等。

3.JS函数

       例如Java中的方法,我们需要学会使用函数、调用函数。

4.JS对象

        JS当中提高了很多对象,需要学会如何使用常用的对象。

5.JS监听

       最重要的监听,监听:当事件发生的时候,会产生对应的行为。


四.Vue

💖Vue的介绍

  • Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。
  • 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上。

注:框架是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效.

 MVVM(Model-View-ViewModel)思想介绍

Javawed第一章:Web前端的入门理论

 解析:

  1. Model,数据模型,包含了很多业务数据以及数据的处理方法
  2. View,视图层,只负责数据的展示,也就是数据展示HTML标签,Dom元素
  3. ViewModel是view和Model的通信桥梁。通过它可以完成二者之间的数据绑定。

重点:绑定之后,如果Model的数据发生了改变,ViewModel会自动更新View的展示。而如果view的数据发生改变,ViewModel也会改变Model中的数据。

💖Vue的代码样式

安装Vue.js方法及其使用

Javawed第一章:Web前端的入门理论

安装:点击官网,前往下载:安装 — Vue.js   注:如果链接失效了,可以搜索官网,进行下载。

使用:当创建项目时,将vue.js文件放在自己创建的文件夹当中。博主下载的是vue 2,你可以下载新版本。


 代码展示

  • 先新建一个HTML页面,以便引入Vue.js文件
<script src="js/vue.js"></script>

  • 在]S代码区域,创建Vue核心对象,定义数据模型
<script>
    new Vue({
      el:"#app"
        data: {
            message:"Hello Vue!"
        }
    })
</script>
  • 编写视图
<div id="app">
    <input type="text" V-model="message">
    {{ message }}
</div>

注:{{ 表达式 }} 。表达式可以是变量、三元运算符、函数调用以及算术运算


五.VS Code

        从实践当中,我们会发现使用记事本效率极低,并且没有任何提示,俗话说的好,工欲善其事必先利其器,所以我们需要下载一个帮助我们更快了解,编程效率高的代码编辑器---VS Code。

我们这就简单的介绍一下,什么是VS Code?

Visual Studio Code(简称:VS Code)是Microsoft于2015年4月发布的一款代码编辑器。


VS Code对前端代码有非常强大的支持,同时也可以使用其他编程语言(例如:c++、Java等)

VS Code提供了非常强大的插件库,提高了开发效率。

在前端开发当中,HTML、JavaScript等,都可以依赖于VS Code。

VS Code下载指南:http://t.csdn.cn/HM2Oq

总结

        想学好Javawed,我们应该先了解wed,了解wed的前后端,有了更好的前端知识,对于后端的部分,就更加容易理解。

                                                                                                        ----------------懒惰的tq02文章来源地址https://www.toymoban.com/news/detail-502900.html

到了这里,关于Javawed第一章:Web前端的入门理论的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【扩频通信】第一章 扩频通信理论基础

    扩频的定义 信号频谱用某特定扩频函数扩展后成为宽频带信号 接收端利用相同扩频函数将扩展的频谱进行压缩,恢复为原来待传信号的带宽,从而达到传输信息的目的 判断扩频通信系统准则 传输信号带宽远大于被传输的原始信号带宽 传输信号带宽主要由扩频函数决定,同

    2023年04月08日
    浏览(47)
  • 全文检索工具elasticsearch:第一章:理论知识

    cluster 整个elasticsearch 默认就是集群状态,整个集群是一份完整、互备的数据。 node 集群中的一个节点,一般只一个进程就是一个node shard 分片,即使是一个节点中的数据也会通过hash算法,分成多个片存放,默认是5片。 index 相当于rdbms的database, 对于用户来说是一个逻辑数据库

    2024年04月16日
    浏览(47)
  • 第一章前端开发ES6基础

    认识ES6 概述 ES6表示ECMAScript规范的第六版,正式名称为 ECMAScript 2015 ,ECMAScript是由ECMA国际标准组织制定的一项 脚本语言 的标准规范化,引入了许多新特性和语法。 其中包括 箭头函数、let和const声明、类、模板字符串、解构赋值、参数默认值、展开操作符、Promise 等等。这些

    2024年02月08日
    浏览(50)
  • 《前端与SEO》—— 第一章:什么是 SEO

    SEO是 Search Engine Optimization 的缩写,翻译过来就是 搜索引擎优化 。我们对搜索引擎搜并不陌生,日常遇到不懂的东西,都会说“百度一下”、“Google 一下”。百度、Google 之类的网站就是搜索引擎网站,其 内核就是搜索引擎 。搜索引擎会不断的去搜集网络上的信息、网站进行

    2024年02月09日
    浏览(58)
  • 前端工程化第一章:webpack基础(上)

    Webpack 是一个现代 JavaScript 应用程序的静态模块 打包器 。它是一个用于 将代码编译成浏览器可识别的格式 的工具。 webpack 可以实现以下的功能: 代码转换 : TypeScript 编译成 JavaScript 、 SCSS 、 less 编译成 CSS 等。 文件优化 :压缩 JavaScript 、 CSS 、 HTML 代码, 压缩合并图片

    2024年02月17日
    浏览(47)
  • 第一章 MATLAB入门

    MATLAB(矩阵实验室的简称)是一种专业的计算机程序,用于工程科学的矩阵数学运算。但 在以后的几年内,它逐渐发展为一种极其灵活的计算体系,用于解决各种重要的技术问题。 Matlab程序执行MATLAB语言,并提供了一个极其广泛的预定义函数库,这样就使得技术工作 变得简

    2024年02月05日
    浏览(41)
  • 第一章 小程序入门

    小程序的基本结构 小程序的页面组成部分 JSON 配置文件的作用 app.json 配置文件 project.config.json 配置文件 sitemap.json 配置文件 页面 .json 配置文件 什么是 wxml wxml 和 html 的区别 什么是 wxss wxss 和 css 的区别 通信模型 小程序的启动过程 页面渲染过程 button 按钮的基本使用 img 组件

    2024年02月08日
    浏览(60)
  • 第一章 快速入门

    TypeScript是JavaScript的超集。 它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。 TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。 TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。 相较于JS而言,TS拥有了静态类型,更加严格的语法,更

    2024年02月01日
    浏览(35)
  • 第一章:SpringBoot基础入门

    Spring 能做什么 Spring 的能力 Spring 的生态 网址: https://spring.io/projects/spring-boot 覆盖了: Web 开发、数据访问、安全控制、分布式、消息服务、移动开发、批处理等。 Spring5 重大升级 响应式编程 内部源码设计 基于 Java8 的一些新特性。 为什么用 SpringBoot ​ Spring Boot makes it eas

    2024年02月12日
    浏览(45)
  • ElasticSearch第一章(入门介绍)

    ElasticSearch(弹性搜索),简称ES。 ES是一个分布式,RESTFul风格的搜索和数据分析引擎 ,能够解决不断涌现出的各种用例。作为 Elastic Stack(Elastic技术栈简称ELK) 的核心,Elasticsearch 会集中存储您的数据,让您飞快完成搜索,微调相关性,进行强大的分析,并轻松缩放规模。 我

    2024年02月22日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包