什么是JavaWeb三剑客？
JavaWeb三剑客：
HTML(超文本标记语言 —— HyperText Markup Language)
CSS(层叠样式表 —— Cascading Style Sheets)
JS(JavaScript)
如果以“人”来形容，那么HTML就是支撑人的骨架，CSS则是修饰人的皮囊，那么JS可以看作是人的灵魂。
1.HTML
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。
元素
举例：当你想表达一段文字：
不聊了，手机没电了，只剩98%了
可以将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：
<p>不聊了，手机没电了，只剩98%了</p>这个元素的主要部分有：
- 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。(使用IDEA或VScode等自动生成)
- 内容（Content）：元素的内容，本例中就是所输入的文本本身。
- 元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素。
元素也可以有属性（Attribute）：
<p id = "phone" class = "chat">不聊了，手机没电了，只剩98%了</p>属性包含了关于元素的一些额外信息，这些信息本身不应显现在内容中。本例中，id 和class 是属性名称，phone 和 chat 是属性的值 。id和class 属性可为元素提供一个标识名称，以便进一步为元素指定样式或进行其他操作时使用。
属性应该包含：
- 在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
- 属性的名称，并接上一个等号。
- 由引号所包围的属性值。
嵌套元素
也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明电量其实很多，就是不想和对方聊天，可以将 “98%” 用 <strong> 元素包围，将突出显示：
<p>不聊了，手机没电了，只剩<strong>98%</strong>了</p>显示效果：
必须保证元素嵌套次序正确：本例首先使用 <p> 标签，然后是 <strong> 标签，因此要先结束 <strong> 标签，最后再结束 <p> 标签。
元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测。
空元素
不包含任何内容的元素称为空元素。比如 <img> 元素：
<img src="data:images/test.png" alt="测试图片">本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。
2.CSS
和 HTML 类似，CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，这也就是说人们可以用它来选择性地为 HTML 元素添加样式。举例来说，要选择一个 HTML 页面里所有的段落元素，然后将其中的文本改成粉色，可以这样写 CSS：
p {color: pink;
}显示效果：
让我们来仔细看一看上述CSS：
整个结构称为 规则集（通常简称“规则”），各部分释义如下：
选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如 color: pink; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 pink 之外还有很多属性值可以用于 color ）。
注意其他重要的语法：
- 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（
{}）。 - 在每个声明里要用冒号（
:）将属性与属性值分隔开。 - 在每个规则集里要用分号（
;）将各个声明分隔开。
如果要同时修改多个属性，只需要将它们用分号隔开，就像这样：
p {color: pink;width: 500px;border: 1px solid black;
}显示效果：
多元素选择
p, li, h1 {color: pink;
}盒子模型(Box)
编写 CSS 时你会发现，你的工作好像是围绕着一个一个盒子展开的——设置尺寸、颜色、位置，等等。页面里大部分 HTML 元素都可以被看作若干层叠的盒子。
并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：
padding：即内边距，围绕着内容（比如段落）的空间。border：即边框，紧接着内边距的线。margin：即外边距，围绕元素外部的空间。
JS
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。它是标准 Web 技术蛋糕的第三层.
- HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。
- CSS 是一种样式规则语言，可将样式应用于 HTML 内容， 例如设置背景颜色和字体，在多个列中布局内容。
- JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）
JS可以干什么？
客户端（client-side）JavaScript 语言的核心包含一些普遍的编程特性，以让你可以做到如下的事情：
- 在变量中储存有用的值。比如上文的示例中，我们请求客户输入一个新名字，然后将其储存到
name变量中。 - 操作一段文本（在编程中称为“字符串”（string））。
- 运行代码以响应网页中发生的特定事件。
- 以及更多
JavaScript 语言核心之上所构建的功能更令人兴奋。应用程序接口（Application Programming Interfaces（API））将为你的代码提供额外的超能力。
API 是已经建立好的一套代码组件，可以让开发者实现原本很难甚至无法实现的程序。就像现成的家具套件之于家居建设，用一些已经切好的木板组装一个书柜，显然比自己设计，寻找合适的木材，裁切至合适的尺寸和形状，找到正确尺寸的螺钉，再组装成书柜要简单得多。
JS对页面做了什么？
让我们简单回顾一下，浏览器在读取一个网页时都发生什么。浏览器在读取一个网页时，代码（HTML, CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页）。
在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前，网页的结构和样式已经就位。
这样很好，因为JavaScript 最普遍的用处是通过 DOM API 动态修改 HTML 和 CSS 来更新用户界面 （user interface）。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。
解释代码VS编译代码
作为程序员，你或许听说过这两个术语：解释（interpret）和 编译(compile)。在解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式（text form）被接收和处理。
相对的，编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成汇编语言，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。
JavaScript 是轻量级解释型语言。浏览器接受到JavaScript代码，并以代码自身的文本格式运行它。技术上，几乎所有 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。
两种类型的语言各有优势，根据实际情况进行选择。
动态代码VS静态代码
“动态”一词既适用于客户端 JavaScript，又适用于描述服务器端语言。是指通过按需生成新内容来更新 web 页面 / 应用，使得不同环境下显示不同内容。服务器端代码会在服务器上动态生成新内容，例如从数据库中提取信息。而客户端 JavaScript 则在用户端浏览器中动态生成新内容，比如说创建一个新的 HTML 表格，用从服务器请求到的数据填充，然后在网页中向用户展示这个表格。两种情况的意义略有不同，但又有所关联，且两者（服务器端和客户端）经常协同作战。
没有动态更新内容的网页叫做“静态”页面，所显示的内容不会改变。
什么是JavaWeb三剑客？相关推荐
- JAVA爬虫三剑客,JAVAWEB三剑客之Filter
Filter是什么 什么是Filter,看名字就是过滤器的意思,主要是针对用户发起的请求进行拦截预处理,常见的Filter应用有检查当前请求是否登录,记录请求日志,设置上下文信息等等,当然Filter ...
- JavaWeb、前端三剑客
目录 一.HTML 1.HTML定义 2.HTML快速入门 3.基础标签 4.图片.音频.视频标签 5.超链接标签 6.列表标签 7.表格标签 合并单元格 8.布局标签 9.表单标签 二.CSS 1. ...
- 学javaweb要先学java吗_怎么入门Java Web,我应该先学什么？
想要学习Java Web,JavaSE的知识肯定是少不了的 学习Java Web的第一步肯定要知道什么是servlet,什么是tomcat,然后Java Web里面还有JSP,在学习之前你也需要学习前 ...
- 【JavaWeb】JavaWeb与JavaWeb技术栈
JavaWeb与JavaWeb技术栈 1.JavaWeb概述 1.1 Web和JavaWeb的概念 1.2 什么是服务器与客户端 1.2.1 线下的服务器与客户端 1.2.2 线上的服务器与客户端 1 ...
- JavaWeb核心技术——Web概述
目录 1,Web概述 1.1 Web和JavaWeb的概念 1.2 JavaWeb技术栈 1.2.1 B/S架构 1.2.2 静态资源 1.2.3 动态资源 1.2.4 数据库 1.2.5 HTTP协 ...
- JavaWeb之 HTML概念各类标签详解（上）
HTML 一.Web概念概述 1)JavaWeb:使用Java语言开发基于互联网的项目 2)软件架构: 1.C/S: Client/Server 客户端/服务器端 即在用户本地有一个客户端程序,在远程 ...
- JavaWeb项目之Servlet+Mysql快递驿站(后台管理端+微信端)
JavaWeb快递驿站(后台管理端+微信) 一.主要技术及平台: Java11 Tomcat8.5.34 Servlet Mysql8 Navicat15 IDEA2021 前端三剑客以及layui ...
- JavaWeb学习笔记总结(一）
前言:因为我是大三,这学期开课是JavaWeb,前端三剑客html+css+js,还有一个springboot框架的课,大二下学期才学的java跟sql,所以跨度直接到springboot有点大吧,s ...
- javaWeb——Servlet
Servlet 系统架构 B/S结构的系统通信原理(没有涉及到Java小程序) 关于WEB服务器软件 实现一个最基本的web应用(这个web应用中没有java小程序) 对于一个动态的web应用来说,一 ...
最新文章
- 桌面笔记工具KeepNote
- Linux编译安装Python3
- shell脚本中if的相关参数
- [转]我们为什么要用vue，他解决了什么问题，如何使用它？
- 条件变量 ---C++17 多线程
- PHP商城数据库安全事务处理方法
- jQuery Easy UI Accordion(可伸缩的面板)包
- 如何测试软件的性能瓶颈,性能测试如何定位瓶颈
- 【英语】The Little Prince
- 原生JS封装运动框架。
- Vs code 通用插件
- 电脑计算机未输出任何信号 键盘没亮,戴尔计算机不显示信号，为什么计算机屏幕不显示...
- SpringBoot 启动时自动执行代码的几种方式
- 【AI】CV开山之作：《AlexNet》论文解读与代码实现
- 随机过程（1.2）—— 数学期望与条件期望
- 【IoT】产品设计：结构设计之什么是堆叠设计（一）
- 计算机硕士论文导师评语,硕士论文指导教师评语
- 计算机显卡内存分布查看,Win10电脑查看显卡内存的详细教程
- grub加密 bios加密 linux
- java导入带图片的excel表格（工具HSSFWorkbook-HSSFSheet）（支持一条数据（单元格）可以导入多个图片，）