前端基础解析

A_cot

于 2024-09-05 09:10:11 发布

阅读量495

点赞数 16

文章标签：前端开发语言

本文链接：https://blog.csdn.net/A_cot/article/details/141919001

版权

一、HTML 基础

HTML（HyperText Markup Language）即超文本标记语言，是构建网页的基础。它通过各种标签来定义网页的结构和内容。

1. 常用标签

<html>：定义整个 HTML 文档。
<head>：包含文档的元数据，如标题、样式表链接、脚本链接等。
<title>：定义网页的标题，显示在浏览器标签页上。
<body>：包含网页的可见内容。
<h1> - <h6>：定义标题，从一级标题到六级标题，字号逐渐减小。
<p>：定义段落。
<a>：定义链接。
<img>：插入图片。

2. 代码示例

以下是一个简单的 HTML 页面示例：

<!DOCTYPE html>
<html>

<head>
  <title>我的第一个网页</title>
</head>

<body>
  <h1>欢迎来到我的网页</h1>
  <p>这是一个段落。</p>
  <a href="https://www.example.com">点击这里访问示例网站</a>
  <img src="image.jpg" alt="一张图片">
</body>

</html>

二、CSS 基础

CSS（Cascading Style Sheets）层叠样式表，用于控制网页的外观和布局。

1. 选择器

元素选择器：选择特定的 HTML 元素，如 p 选择所有 <p> 标签。
类选择器：通过给元素添加 class 属性，然后使用 .classname 来选择具有该类的元素。
ID 选择器：使用 #idname 选择具有特定 id 属性的元素。

2. 属性

color：设置文本颜色。
background-color：设置背景颜色。
font-size：设置字体大小。
margin：设置外边距。
padding：设置内边距。

3. 代码示例

以下是一个使用 CSS 美化 HTML 页面的示例：

<!DOCTYPE html>
<html>

<head>
  <title>CSS 示例</title>
  <style>
    h1 {
      color: blue;
      font-size: 36px;
    }

    p {
      color: green;
      font-size: 18px;
    }

   .highlight {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <p class="highlight">这是一个突出显示的段落。</p>
</body>

</html>

三、JavaScript 基础

JavaScript 是一种用于网页开发的编程语言，可以实现网页的交互效果。

1. 变量和数据类型

变量：使用 let、const 或 var 声明变量。
数据类型：包括数字、字符串、布尔值、数组、对象等。

2. 函数

定义函数：使用 function 关键字定义函数。
调用函数：通过函数名加上括号来调用函数。

3. 事件处理

监听事件：使用 addEventListener 方法监听特定的事件，如点击事件、鼠标移动事件等。
处理事件：在事件处理函数中编写代码来响应事件。

4. 代码示例

以下是一个使用 JavaScript 实现点击按钮改变文本颜色的示例：

<!DOCTYPE html>
<html>

<head>
  <title>JavaScript 示例</title>
</head>

<body>
  <button id="myButton">点击我</button>
  <p id="myParagraph">这是一段文本。</p>
  <script>
    document.getElementById('myButton').addEventListener('click', function () {
      let paragraph = document.getElementById('myParagraph');
      paragraph.style.color = 'red';
    });
  </script>
</body>

</html>

以上对是对 HTML、CSS 和 JavaScript 的简介，希望对您有所帮助。

A_cot

关注

16
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础解析

HTML（HyperText Markup Language）即超文本标记语言，是构建网页的基础。它通过各种标签来定义网页的结构和内容。CSS（Cascading Style Sheets）层叠样式表，用于控制网页的外观和布局。以上对是对 HTML、CSS 和 JavaScript 的简介，希望对您有所帮助。JavaScript 是一种用于网页开发的编程语言，可以实现网页的交互效果。
复制链接

扫一扫