返回

写前端页面的三个代码：html、css、js，初级前端必学知识

见解分享

#

#

#

作为一名前端开发人员，我们的核心工作就是编写页面。页面主要由两部分组成：展示和交互。一个页面由三种代码支持：页面组件代码html、页面样式代码CSS以及页面控制代码JavaScript。HTML根据语义去理解就可以，它用来搭建页面的基本结构，例如标题、段落、表格等。CSS用于修饰HTML元素的外观，例如颜色、字体、大小等。JavaScript用于添加交互性，例如按钮点击、表单提交、动画效果等。

HTML

HTML是超文本标记语言的缩写，它是一种标记语言，用于创建网页。HTML元素被用来定义网页的结构和内容。常见的HTML元素包括：

  • <html>：定义网页的根元素
  • <head>：定义网页的头部信息，如标题、元数据等
  • <body>：定义网页的主体内容
  • <h1> 到 <h6>：定义标题
  • <p>：定义段落
  • <a>：定义链接
  • <img>：定义图片
  • <table>：定义表格
  • <form>：定义表单

CSS

CSS是层叠样式表的缩写，它是一种样式表语言，用于修饰HTML元素的外观。CSS规则由选择器和声明块组成。选择器用于选择要修饰的HTML元素，声明块用于定义要修饰的样式。常见的CSS属性包括：

  • color：定义文本颜色
  • font-family：定义字体
  • font-size：定义字体大小
  • background-color：定义背景颜色
  • margin：定义元素的边距
  • padding：定义元素的内边距
  • border：定义元素的边框

JavaScript

JavaScript是一种脚本语言，用于添加交互性到网页中。JavaScript代码可以在HTML页面中嵌入，也可以在外部JavaScript文件中引用。常见的JavaScript事件处理函数包括：

  • onclick：当元素被点击时触发
  • onmouseover：当鼠标悬停在元素上时触发
  • onmouseout：当鼠标离开元素时触发
  • onload：当页面加载完成时触发
  • onsubmit：当表单被提交时触发

如何构建一个简单的网页

现在，我们已经了解了HTML、CSS和JavaScript的基础知识，我们可以尝试构建一个简单的网页了。

  1. 首先，我们需要创建一个HTML文件，并在其中添加以下代码：
<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是我的第一个网页，我很高兴能与你分享。</p>
</body>
</html>
  1. 接下来，我们需要创建一个CSS文件，并在其中添加以下代码：
body {
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  color: #000000;
  font-size: 24px;
}

p {
  color: #000000;
  font-size: 16px;
}
  1. 最后，我们需要将CSS文件链接到HTML文件中。我们可以在HTML文件的<head>元素中添加以下代码：
<link rel="stylesheet" href="style.css">
  1. 现在，我们可以保存HTML文件和CSS文件，然后在浏览器中打开HTML文件。我们应该可以看到一个简单的网页，上面有一个标题和一段文字。

结语

以上只是前端开发的基础知识。要成为一名合格的前端开发人员，还需要学习更多的知识，如JavaScript高级编程、前端框架等。但只要你掌握了基础知识，就可以开始构建自己的网页了。