目录
1.1 HTML（超文本标记语言Hypertext Markup Language）：
1.2 CSS（层叠样式表Cascading Style Sheets）：
1.3 JavaScript（唯一能让浏览器支持运行的前端编程语言）
一. HTML+css+javascript概述
我是学化工的海潮，分享下自己学习前端的知识。
在现代的网页开发中，HTML、CSS 和 JavaScript 被默认称为前端三大件，。它们共同构成了构建互联网世界的基石，也是是vue,react等热门前端框架的基础，为我们创造出美观、交互性强的网页和应用程序。
1.1 HTML（超文本标记语言Hypertext Markup Language）：
是一种用于描述网页结构的标记语言，它通过使用各种标签和元素来定义网页的内容。通过 HTML，我们可以创建标题、段落、图像、链接等元素，将信息有条理地展现给用户。
可以总结为create context of website 创建网页内容
1.2 CSS（层叠样式表Cascading Style Sheets）：
则是一种用于描述网页样式和布局的语言。它通过选择器和属性来选择网页中的元素，并定义它们的外观和排版。借助 CSS，我们可以改变文本的颜色、调整元素的大小和位置，甚至创建动画效果，使网页更加吸引人。
可以总结为change the appereace 对特定内容改变外观和布局的选择器表。
1.3 JavaScript（唯一能让浏览器支持运行的前端编程语言）
是一种用于为网页添加交互和动态功能的脚本语言。它使我们能够对用户的操作做出响应，实现表单验证、网页动态更新以及与后端服务器进行数据交互等功能。JavaScript 的强大之处在于它能够使网页实时、动态地响应用户的操作，提升用户体验。
可以总结为 make website interactive 编写代码控制网页行为，负责网页的交互。
二.HTML+css+javascript简单示例
看下面的简单例子
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS REVIEW</title>
<style>
body{
background-color: pink;
}
.hellotest{
background-color: white;
width: 500px;
text-align: center;
}
</style>
</head>
<body>
<div class="hellotest">
<p>hello word</p>
<button>你好</button>
</div>
<script>
alert('hello wolld');
</script>
</body>
</html>
HTML文件是css和js代码的入口，上面一个包括了css和js代码的HTML文件。css代码在<style></style>标签里，JavaScript代码在<script></script> 标签里 。当然先要新建一个test.html的文件，输入上面的代码。
2.1 HTML和JS分析
对HTML文件的结构进行分析，开始分析代码
首先是<!DOCTYPE html>，这是标准的文档类型声明。它指示浏览器使用 HTML5 规范解析文档。
然后是大的框架，在<html></html>里有head 和body两个主要的部分。head部分里面放style标签，就是css代码的部分，也放title和一些外部引入的link;
body就是这个html的主体，大部分要显示的内容都放在这里，一般内容是由无数个嵌套或并列的div组成，div是容器，本身没有特殊意义，但可以添加其他的各种属性对div修改，div修改后对容器类的内容就也会修改。body和div容器里放的内容有非常多，比如<p>段落、<button>按钮、<a>超链接、<input>文本框、<img>图片等标签。
body里一般在最下面放<script></script>标签，作为html里JavaScript的入口，在运行html文件后会优先运行js代码。
好了，开始运行代码
js分析：运行后首先是弹出窗口，hello wolld。这是优先执行了<script></script>里的"alert('hello wolld');'这句代码。并且head里的<title></title>标签也优先运行了，显示了网页显示的名字HTML CSS REVIEW。
因为alert函数还没有运行完，其他部分暂时未显示
点击确定后，开始显示body里的内容，并附加<style></style>标签里的css样式后运行。显示如下
对照html代码
<body>
<div class="hellotest">
<p>hello word</p>
<button>你好</button>
</div>
</body>分析这个html网页，可以看到在粉色的body里有一个白色的div容器，在div的正中间有<p>hello word</p>段落和 <button>你好</button>按钮，这就是html通过不同的标签组合和css来对网页内容进行展示。
常用的html标签
- <html>：定义 HTML 文档的根元素。
- <head>：定义文档的头部，包含了文档的元信息。
- <title>：定义文档的标题，显示在浏览器的标题栏或标签页上。
- <body>：定义文档的主体内容。
- <h1> 到 <h6>：定义标题，从大到小表示不同级别的标题。
- <p>：定义段落。
- <a>：定义链接，用于创建文本或图像的超链接。
- <img>：定义图像。
- <ul>：定义无序列表。
- <ol>：定义有序列表。
- <li>：定义列表项。
- <div>：定义文档中的一个区块，用于组合其他元素。
- <span>：定义文档中的一个行内元素，用于对文本进行样式设置。
- <table>：定义表格。
- <tr>：定义表格中的行。
- <td>：定义表格中的单元格。
- <form>：定义表单，用于收集用户输入的数据。
- <input>：定义表单中的输入字段。
- <button>：定义按钮。
- <textarea>：定义多行文本输入框。
2.2 css分析
css是改变html内容的颜色布局样式的表，也有他的语法格式，css语法主要是由选择器、属性和属性值组成，分析上面的css代码
body{
background-color: pink;
}是把主界面body选择器的background-color背景颜色的属性设成pink粉红。
.hellotest{
background-color: white;
width: 500px;
text-align: center;
}因为body只有一个，而div、button等标签有无数个，为了区分我们用id选择器或者class选择器
重新命名后进行区分。
如<div class="hellotest"></div>这句就是为该div创建了一个命名为hellotest的class选择器，
然后在css里为该选择器设置了一些属性，分别是背景颜色 白色、宽度 500px、水平对齐 中间。
css的属性有很多，常用的以下
- color：设置文本颜色。
- background-color：设置元素的背景颜色。
- font-size：设置字体大小。
- font-family：设置字体系列。
- font-weight：设置字体粗细。
- text-align：设置文本的对齐方式。
- padding：设置元素内边距。
- margin：设置元素外边距。
- border：设置元素边框。
- width：设置元素的宽度。
- height：设置元素的高度。
- display：设置元素的显示方式（如块级、内联等）。
- position：设置元素的定位方式（如相对定位、绝对定位等）。
- float：设置元素的浮动方式。
- opacity：设置元素的透明度。
- box-shadow：设置元素的阴影效果。
- text-decoration：设置文本装饰效果（如下划线、删除线等）。
- transition：设置过渡效果。
- animation：设置动画效果。
- transform：设置元素的变形效果。
html和css的使用这里只是概述了一下，细节有机会才做分享。
三.外部引入css和js文件
看下面的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML + CSS + JavaScript 知识概览</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- 在这里编写你的内容 -->
</body>
</html>在实际的生产编写代码过程，因为css代码和js代码一般很长，所以都是分别放在另外上午.css和.js文件中，然后通过类似上面的代码引入。
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script><meta>标签是给浏览器看的，显示文档元信息的标签并提供有关文档的信息，以帮助浏览器和搜索引擎正确地处理和呈现网页。
四.查看浏览器HTML 代码
在浏览器如谷歌浏览器右上角三点按钮点进去开发者选项，能打开工作区的控制台，查看HTML代码；或者右键点击网页，在。
如上图最下方的一排按钮，控制台可以让你输入js代码和输出结果，第三个元素能让你查看html的结构，第一个按钮点击后可以让你检查网页中的任一个元素。
可以试试点击不同的网站分别分析一下网页的结构。
五.DOM和事件监听
在我们使用网页时，很重要的一个体验就是网页交互，而交互就意味着变化，变化基本都是
由js代码控制的，在js编程语言和html文档之间交互有一个媒介就是dom,有了dom才允许js改变网页。
5.1 DOM定义
DOM 是 Document Object Model（文档对象模型）的缩写。它是一种将 HTML 或 XML 文档表示为树状结构的方式，使开发者可以使用脚本语言（如 JavaScript）来访问和操作文档的内容、结构和样式。
DOM 将文档的每个元素、属性、文本和注释都表示为对象，这些对象可以通过编程语言（如 JavaScript）进行访问和操作。每个对象都有与之相关联的属性和方法，可以用于获取、修改或删除元素的内容和属性，添加或移除元素，以及响应用户事件等。
通过 DOM，开发者可以使用脚本语言与网页进行交互。例如，可以通过 DOM 查询和修改网页中的元素内容、样式和属性，动态地创建、删除或移动元素，以及响应用户的点击、鼠标移动等事件。
DOM 提供了一种平台无关的方式来表示和操作文档结构，因此它在不同的编程环境和语言中都得到了广泛应用。尤其在 Web 开发中，DOM 是非常重要的，因为它允许开发者通过 JavaScript 等脚本语言来操作网页的结构和内容，实现动态交互和动画效果。
5.2 一个使用DOM的例子-订阅按钮
<!DOCTYPE html>
<html>
<head>
<title>DOM Projects2</title>
<style>
body{
font-family: Arial;
}
.subscribe-button{
border: none;
background-color: black;
color: white;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
margin-bottom:30px;
}
.is-subscribed{
background-color: yellow;
color: black;
border: none;
}
</style>
</head>
<body>
<p> Subscribe Button</p>
<button onclick="
subscribe();
" class="js-subscribe-button subscribe-button">subscribe</button>
<script>
window.document;
window.console.log(window.document);
window.console.log(window);
function subscribe(){
const buttonElemnt =document.querySelector('.js-subscribe-button');
if(buttonElemnt.innerHTML === 'subscribe'){
buttonElemnt.innerHTML='haveSubcribed';
buttonElemnt.classList.add('is-subscribed');
}else{
buttonElemnt.innerHTML='subscribe';
buttonElemnt.classList.remove('is-subscribed');
}
}
</script>
</body>
</html>
以上代码通过DOM实现了一个简单的订阅按钮，点击按钮时会触发onclick事件，在该事件中有一个subscribe()函数，所以点击回切换按钮的文本和样式类，展示订阅状态的变化。
其中document.querySelector（）是dom的一个查询元素的方法
点击按钮后，改变按钮的文本和样式类
5.3 dom常用方法
除了document.querySelector（）, dom的常用方法还有如下
- document.getElementById('id')：根据元素的 id 属性获取对应的元素节点。
- document.getElementsByClassName('class')：根据元素的 class 属性获取对应的元素节点列表。
- document.getElementsByTagName('tag')：根据元素的标签名获取对应的元素节点列表。
- document.querySelector('selector')：根据 CSS 选择器获取第一个匹配的元素节点。
- document.querySelectorAll('selector')：根据 CSS 选择器获取所有匹配的元素节点列表。
- element.appendChild(child)：将一个元素节点作为子节点添加到另一个元素节点的末尾。
- element.removeChild(child)：从父节点中移除指定的子节点。
- element.setAttribute('attribute', 'value')：设置元素的属性值。
- element.getAttribute('attribute')：获取元素的属性值。
- element.innerHTML：获取或设置元素的 HTML 内容。
- element.textContent：获取或设置元素的文本内容。
- element.style.property：获取或设置元素的样式属性。
- element.classList.add('class')：为元素添加一个 CSS 类。
- element.classList.remove('class')：从元素中移除指定的 CSS 类。
- element.addEventListener('event', callback)：为元素添加事件监听器。
- element.removeEventListener('event', callback)：从元素中移除事件监听器。
六. 前端框架
实际的应用非常复杂，js的dom很难满足复杂的变化要求，所以基于前端三大件发展出了前端框架。
最常用的前端框架有尤神的vue.js、谷歌的Angular和mata的react.js。
- 前端框架是构建 Web 应用程序的工具，它们通常基于原生的 JavaScript 和 HTML。前端框架通过提供封装和抽象，简化了开发者对于复杂的 Web 应用程序的构建和管理。
- 前端框架通常提供了一套组件和工具，用于处理视图层的渲染、数据绑定、路由管理、状态管理等功能。这些框架通常采用了自己的语法和规则，开发者需要按照框架的要求进行开发。
- 前端框架通常会直接操作原生的 JavaScript 和 HTML，它们使用 JavaScript 作为主要的编程语言，并通过 DOM（文档对象模型）来访问和操作 HTML 文档的结构和内容。
- 前端框架可以被看作是对原生 JavaScript 和 HTML 的扩展和增强。它们提供了更高级的抽象和功能，使开发者能够更高效地构建复杂的 Web 应用程序。
- 开发者可以选择使用原生的 JavaScript 和 HTML 进行开发，这需要开发者自行处理各种复杂的任务，如手动管理 DOM、事件处理、数据绑定等。原生开发可以提供更大的灵活性，但在处理大型应用程序时可能会更加繁琐。
比如Vue 的虚拟 DOM 是对实际 DOM 的抽象表示，通过比较虚拟 DOM 的差异并将更新应用到实际 DOM 上，实现了高效的渲染和更新机制。组件化编程解耦减少代码量。
只用dom写和使用前端框架的对比
前端源代码到app代码的打包过程
总结：
无论是开发简单的静态网页还是复杂的网络应用程序，熟练掌握 HTML、CSS 和 JavaScript 都是至关重要的。它们的组合使用让我们能够构建出精美、功能丰富的网页，将我们的创意和想法传达给全世界。
在本文中，我们将带您大概了解 HTML、CSS 和 JavaScript 的基础知识和常用技巧。无论您是初学者还是有一定经验的开发人员，本文都将为您提供一个基本的概述，帮助您更好地理解和应用这些关键技术。有更多兴趣可以看我分享的一些其他小项目。
让我们开始探索 HTML、CSS 和 JavaScript 的精彩世界吧！
封面:Ai作画
最后写文章不易，点个关注吧！！😙😙
2224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
