web前端的入门-----基础知识

最新推荐文章于 2024-09-06 19:40:02 发布

2024510

最新推荐文章于 2024-09-06 19:40:02 发布

阅读量1.8k

点赞数 54

文章标签：前端

本文链接：https://blog.csdn.net/weixin_72299343/article/details/141305590

版权

对于web前端来说，想要去学习或者走上这条路，当然要先去了解清楚这是什么，前提是你要确保，你能够去理解这些东西能学进去，而我将会以css,html,js这些为例子，带你深入了解前端的一些基础知识。

首先呢要先去了解他们的构建是什么，一个基础的网页，他一定会会有html,css,js这三种元素，先以html为例，什么是html，HTML（HyperText Markup Language，超文本标记语言）是一种用来结构化网页的标准标记语言。你可以把它想象成一栋大楼的蓝图，它告诉浏览器如何显示网页的内容。

HTML 的作用

构建网页结构: HTML 元素就像网页的骨架，定义了网页的标题、段落、列表、表格等基本结构。
描述内容: HTML 元素可以为网页内容添加语义，告诉浏览器哪些内容是标题，哪些是正文，哪些是链接等等。
嵌入其他元素: HTML 可以嵌入图片、视频、音频等多媒体元素，以及 JavaScript 代码来实现动态效果。

HTML 的特点

标记语言: HTML 使用标签（tag）来标记网页中的不同元素，例如 <p> 标签表示段落，<img> 标签表示图片。
简单易学: HTML 的语法相对简单，容易上手。
跨平台: HTML 文件可以在不同的浏览器上显示，实现跨平台兼容。
标准化: HTML 遵循 W3C 制定的标准，保证了网页的兼容性和可访问性。

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网页！</h1>
  <p>这是一个段落。</p>
</body>
</html>

以基础的为例，其运行出来的结果如下

这便是html的格式，其中要记得可以没有css,js但一定要有html.

如果说以html为基础框架的话，那么css的话就是渲染，就好比一个空白的页面。html建立好了每个区域的规划，而css则需要让他有色彩，有相应的尺寸大小等

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
	background-color:#d0e4fe;
}
h1 {
	color:orange;
	text-align:center;
}
p {
	font-family:"Times New Roman";
	font-size:20px;
}
</style>
</head>

<body>

<h1>CSS 实例!</h1>
<p>这是一个段落。</p>

</body>
</html>

其运行结果如下

进行了一些颜色背景字体等等这些调试

JavaScript，简称JS，是一种广泛用于创建动态交互式网页的编程语言。它让网页变得生动活泼，不再是静态的文本和图片。

JavaScript 的主要作用

让网页动起来: 创建动画、滑块、下拉菜单等动态效果。
与用户交互: 响应用户的点击、输入等操作，实现表单验证、游戏等功能。
操作DOM: DOM（Document Object Model）是 HTML 文档的编程接口，JavaScript 可以通过 DOM 来操作网页中的元素，改变样式、添加内容等。
异步编程: 允许 JavaScript 在不阻塞其他代码执行的情况下，进行耗时的操作，例如发送网络请求。

JavaScript 的特点

解释型语言: 代码不需要预编译，可以直接在浏览器中运行。
弱类型语言: 不需要显式声明变量的类型。
基于原型: JavaScript 使用原型机制实现面向对象编程。
单线程: JavaScript 在浏览器中是单线程执行的，但可以通过异步编程来处理并发任务。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>