前端语言串讲 学习笔记 ｜ 青训营

shankscy
65 阅读3分钟

本次前端语言串讲课程介绍三种核心前端技术：HTML、CSS和JavaScript。这些技术是构建现代网页和Web应用程序的基础。我们将深入了解它们的作用、语法和示例代码。

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

HTML是一种用于创建网页结构的标记语言。它由一系列标签组成，每个标签代表一个元素，如标题、段落、图像等。HTML结构化内容，定义了网页的布局和组织。

示例代码：

<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到我的网页！</h1>
<p>这是一个示例段落。</p>
<a href="https://www.example.com">访问示例链接</a>
<img src="example.jpg" alt="示例图片">
</body>
</html>

这段代码是一个简单的HTML页面示例对每个标签进行解释

  1. <!DOCTYPE html>这是HTML5的文档类型声明，它告诉浏览器正在使用HTML5版本解析页面。
  2. <html>这是HTML文档的根元素，所有HTML内容都包含在这个标签内。
  3. 在<head>标签内，我们可以设置文档的元数据和引用外部资源，例如样式表、JavaScript文件和图标等。在这里，我们设置了页面的标题，即浏览器标签页上显示的内容。 4.<title>标签用于设置页面的标题，这个标题将显示在浏览器标签页上。
  4. 在<body>标签内，我们编写页面的主要内容，包括文本、图片和链接等。
  5. <h1>是HTML的标题标签，表示一级标题。在这里，我们显示了一个欢迎消息作为一级标题。
  6. <p>是HTML的段落标签，用于定义一个段落。在这里，我们展示了一个示例段落。
  7. <a>是HTML的锚点标签，用于创建超链接。在这里，我们创建了一个链接，当用户点击它时，将跳转到www.example.com。
  8. <img>是HTML的图像标签，用于插入图像。src属性指定了图片文件的路径，alt属性为图像设置了替代文本，当图像无法显示时，将显示这段文本。

2. CSS (层叠样式表)

CSS是一种样式表语言，用于控制网页的样式和布局。通过CSS，我们可以为HTML元素应用样式，如颜色、字体、布局等，使得网页呈现更加美观和吸引人。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>样式示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        h1 {
            color: #007bff;
            text-align: center;
        }
        p {
            font-size: 16px;
            line-height: 1.6;
            color: #333;
        }
        img {
            width: 100%;
            max-width: 500px;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>欢迎来到样式示例！</h1>
    <p>这是一个用CSS样式美化的段落。</p>
    <img src="example.jpg" alt="样式示例图片">
</body>
</html>

通过<style>标签嵌入CSS样式。body选择器设置了字体和背景颜色，h1选择器定义了标题的颜色和居中对齐，p选择器设置了段落的字体大小、行高和颜色，img选择器定义了图片的宽度、最大宽度和居中对齐。

3. JavaScript

JavaScript是一种脚本语言，用于实现网页的交互和动态功能。通过JavaScript，我们可以对用户的操作做出响应，实现动态效果和数据交互，使得网页更加生动和互动。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript示例</title>
</head>
<body>
    <h1 id="title">点击按钮，改变标题颜色</h1>
    <button onclick="changeColor()">点击我</button>

    <script>
        function changeColor() {
            var titleElement = document.getElementById("title");
            titleElement.style.color = getRandomColor();
        }

        function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    </script>
</body>
</html>

在上面的示例中，我们定义了一个<h1>元素和一个按钮<button>，并在JavaScript部分定义了两个函数changeColor()和getRandomColor()。当用户点击按钮时，changeColor()函数会随机生成颜色并应用于标题，从而实现了点击按钮改变标题颜色的功能。

4.总结

在本次前端语言串讲课程中，我深入了解了HTML、CSS和JavaScript的作用、语法和示例代码。HTML用于构建网页结构，CSS用于样式美化，JavaScript用于实现网页交互和动态效果。这三种技术在前端开发中密切合作，共同构建出丰富多彩的网页和Web应用程序。

avatar
文章
阅读
粉丝