目录
一. HTML+css+javascript概述
1.1 HTML(超文本标记语言Hypertext Markup Language):
1.2 CSS(层叠样式表Cascading Style Sheets):
1.3 JavaScript(唯一能让浏览器支持运行的前端编程语言)
二.HTML+css+javascript简单示例
2.1 HTML和JS分析
2.2 css分析
三.外部引入css和js文件
四.查看浏览器HTML 代码
五.DOM和事件监听
5.1 DOM定义
5.2 一个使用DOM的例子-订阅按钮
5.3 dom常用方法
六. 前端框架
总结:
一. 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作画
最后写文章不易,点个关注吧!!😙😙