DAY1

前端语言的基本能力

前端开发是构建Web应用程序用户界面的过程，涉及到多种前端语言和技术。以下是前端开发所需的基本能力：

1. HTML (超文本标记语言)

HTML是一种用于创建网页结构的标记语言。它使用标签来定义网页内容的不同部分，并确定它们在页面上的呈现方式。下面是一个简单的HTML示例：

html复制代码
<!DOCTYPE html>
<html>
<head>
  <title>我的网页</title>
</head>
<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <img src="image.jpg" alt="图片">
</body>
</html>

在上面的代码中，<html>标签包含整个HTML文档，<head>标签用于指定页面的标题和其他元信息，<body>标签包含页面的可见内容，例如标题、段落和图片。

2. CSS (层叠样式表)

CSS用于为HTML元素添加样式和布局。通过为标记语言添加样式规则，可以改变元素的颜色、大小、位置等，从而使网页具有吸引力并提供更好的用户体验。以下是一个简单的CSS示例：

css复制代码
h1 {
  color: blue;
  font-size: 24px;
}

p {
  color: green;
}

在上面的代码中，h1选择器选择所有<h1>标签，并指定了字体颜色为蓝色并设置字体大小为24像素。p选择器选择所有<p>标签，并将字体颜色设置为绿色。

3. JavaScript (JS)

JavaScript是一种用于在网页上添加交互性和动态功能的编程语言。它可以处理用户的操作、修改网页内容和响应事件。以下是一个简单的JavaScript示例：

javascript复制代码
function changeText() {
  var element = document.getElementById("myElement");
  element.innerHTML = "新文本";
}

在上面的代码中，changeText函数通过getElementById方法获取id为myElement的元素，并将其内容更改为"新文本"。

前端语言的协作配合

在实际的前端开发中，HTML、CSS和JavaScript通常会协同工作，相互配合以实现所需的功能和效果。

HTML负责定义页面结构和内容，提供了标记和语义化的元素，为CSS和JavaScript提供了操作的对象。
CSS负责设计和样式，通过选择器和属性来选择HTML元素并对其进行样式调整，使网页外观更加美观和易读。
JavaScript负责处理交互和动态性，可以通过监听事件、操作DOM元素和与后端进行数据交互等方式实现丰富的用户体验效果。

它们之间的配合是相互依赖的，通过分工合作来实现最终的前端开发目标。

你不知道的HTML

HTML是前端开发的基础，除了常见的标签外，还有一些你可能不知道的有用功能和标签：

<video>和<audio>：用于在网页中嵌入视频和音频，可以通过设置属性和源文件来控制播放、停止等操作，提供更丰富的媒体内容展示。

html复制代码
<video src="video.mp4" controls></video>
<audio src="audio.mp3" controls></audio>

<canvas>：用于在网页上绘制图形、动画和图表等，可以使用JavaScript进行绘制和交互。

html复制代码
<canvas id="myCanvas" width="400" height="200"></canvas>

<progress>：用于显示操作的进度，例如文件上传、资源加载等。可以通过设置value和max属性来指定当前值和最大值。

html复制代码
<progress value="50" max="100"></progress>

<details>和<summary>：用于创建可展开的内容区域，用户单击<summary>标签时，<details>内的内容将显示或隐藏。

html复制代码
<details>
  <summary>显示/隐藏内容</summary>
  <p>这是要显示或隐藏的内容。</p>
</details>

这些是一些你可能不知道的HTML功能和标签，它们可以帮助你更好地利用HTML来构建丰富多样的网页。通过结合CSS和JavaScript，你可以进一步扩展和定制这些功能，创造出令人惊叹的Web体验。

前端语言串讲 ｜ 青训营