目录
- 一、web标准
- 二、什么是HTML
- 三、什么是CSS
- 四、什么是JavaScript
黑马JAVAWeb飞书在线讲义地址： https://heuqqdmbyk.feishu.cn/wiki/LYVswfK4eigRIhkW0pvcqgH9nWd
一、web标准
Web标准也称网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。它主要包括三个组成部分：
-
HTML：负责网页的结构（页面元素和内容）。HTML是一种标记语言，用于定义网页的内容和结构，如标题、段落、列表等。 -
CSS：负责网页的表现（页面元素的外观、位置等页面样式，如颜色、大小等）。CSS是一种样式表语言，用于控制网页的布局和样式，使网页看起来更美观。 -
JavaScript：负责网页的行为（交互效果）。JavaScript是一种编程语言，用于实现网页上的动态效果和交互功能，如响应用户操作、动画效果等。
通过这三种技术的结合使用，可以创建出结构清晰、样式美观且具有交互性的网页。
二、什么是HTML
什么是HTML
HTML（HyperText Markup Language）是一种超文本标记语言。它主要用于创建和设计网页内容。
超文本
- 超文本：超越了普通文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
- 例如，你可以使用HTML在网页中插入图片、播放音频或视频，甚至嵌入其他网页。
标记语言
- 标记语言：由标签（
<标签名>）构成的语言。- HTML中的标签通常成对出现，如
<p>和</p>用于表示段落，<img>用于插入图片等。 - 这些标签告诉浏览器如何显示页面上的内容。
- HTML语法参考网站
- HTML中的标签通常成对出现，如
示例代码
<!DOCTYPE html>
<html>
<head><title>我的第一个HTML页面</title>
</head>
<body><h1>欢迎来到我的网站！</h1><p>这是一个简单的HTML页面。</p><img src="example.jpg" alt="示例图片"><audio controls><source src="example.mp3" type="audio/mpeg">您的浏览器不支持音频元素。</audio><video controls width="320" height="240"><source src="example.mp4" type="video/mp4">您的浏览器不支持视频元素。</video>
</body>
</html>
<!DOCTYPE html>：声明文档类型为HTML5。<html>：HTML文档的根元素。<head>：包含文档元数据，如标题。<title>：设置页面的标题。<body>：包含页面的实际内容。<h1>：一级标题。<p>：段落。<img>：插入图片。<audio>：插入音频文件。<video>：插入视频文件。
通过这些标签，HTML可以创建丰富的网页内容，并且可以通过CSS和JavaScript进一步增强页面的功能和样式。
HTML标签的特点
- 不区分大小写：HTML标签在书写时不区分大小写，但建议使用小写。
- 属性值的引用：HTML标签的属性值可以使用单引号（'）或双引号（"），两者都可以。
- 语法结构松散：HTML的语法结构相对松散，但这并不意味着可以随意书写。为了代码的可读性和规范性，建议遵循一定的书写规范。
三、什么是CSS
CSS（Cascading Style Sheet）是一种层叠样式表，用于控制网页的样式（表现）。它允许开发者定义页面元素的外观，如颜色、字体、布局等，从而使得网页内容更加美观和易读。
主要特点
- 样式控制：CSS可以控制HTML元素的样式，包括颜色、字体、边框、背景等。
- 分离内容与样式：通过将样式从HTML内容中分离出来，CSS使得网页更容易维护和更新。
- 层叠性：多个CSS规则可以层叠在一起，浏览器会根据优先级决定最终应用哪个规则。
- 继承性：子元素会继承父元素的部分样式属性。
示例代码
/* CSS 样式 */
body {background-color: lightblue;
}h1 {color: navy;margin-left: 20px;
}p {font-family: verdana;font-size: 20px;
}
<!DOCTYPE html>
<html>
<head><title>我的第一个CSS页面</title><style>body {background-color: lightblue;}h1 {color: navy;margin-left: 20px;}p {font-family: verdana;font-size: 20px;}</style>
</head>
<body><h1>欢迎来到我的网站！</h1><p>这是一个使用CSS样式的HTML页面。</p>
</body>
</html>
body：设置整个页面的背景颜色为浅蓝色。h1：设置一级标题的颜色为海军蓝，并且左边距为20像素。p：设置段落的字体为Verdana，字体大小为20像素。
通过这些CSS样式，可以有效地控制网页的外观，使其更加美观和专业。
四、什么是JavaScript
JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，主要用于控制网页行为，实现页面的交互效果。JavaScript和Java是完全不同的语言，不论是概念还是设计，但基础语法类似。
组成：
-
ECMAScript：
- 规定了JavaScript基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
-
BOM（Browser Object Model）：
- 浏览器对象模型，用于操作浏览器本身，如页面弹窗、地址栏操作、关闭窗口等。
-
DOM（Document Object Model）：
- 文档对象模型，用于操作HTML文档，如改变标签内的内容、改变标签内字体样式等。
示例代码
HTML 文件 (index.html)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript Example</title>
</head>
<body><h1 id="greeting">Hello, World!</h1><button onclick="changeGreeting()">Click Me!</button><script>function changeGreeting() {var greeting = document.getElementById('greeting');greeting.innerHTML = 'Welcome to JavaScript!';}</script>
</body>
</html>
-
HTML 结构：
- 页面包含一个标题
<h1>和一个按钮<button>。 - 标题的
id属性设置为greeting，以便在JavaScript中引用。
- 页面包含一个标题
-
JavaScript 代码：
- 定义了一个函数
changeGreeting()。 - 使用
document.getElementById('greeting')获取标题元素。 - 使用
innerHTML属性更改标题的内容。
- 定义了一个函数
-
事件处理：
- 按钮的
onclick属性绑定到changeGreeting()函数。 - 当用户点击按钮时，会触发该函数，从而更改标题的内容。
- 按钮的
)
