前端开发基础
大家好，欢迎阅读我在这个平台上的第一篇文章，也是“前端开发基础”系列的第一篇文章。
在本系列中，我们将介绍开始前端开发之旅的基本概念。主题包括 **HTML**、**CSS** 和 **JavaScript** 的基础知识。对于那些对构建 **Flask** 应用程序感兴趣的人，我们将以一篇专门介绍该内容的文章作为结束。介绍完基础知识后，我们将使用 **HTML/CSS/JS** 和 **Flask** 应用程序构建一个具有核心功能的简单网站。
在这篇文章中，我们将重点讨论**HTML 基础知识**。
什么是 HTML？
**HTML**（超文本标记语言）是用于创建网页的标准标记语言。它构成了任何网站的骨干——从您阅读的文本到按钮和表格，所有内容都使用 HTML 构建。简而言之，HTML 是支持网页内容和布局的骨架。
网站的部分
HTML 文档分为两个主要部分：**head** 和 **body**。这两个部分都包含在外部 `` 标签中。
这是一个简单的例子：
Page 1
Your main webpage content goes here
笔记：
HTML Elements
An **HTML element** consists of a **start tag**, **content**, and an **end tag**. The content is placed between the tags. For example, a paragraph element looks like this:
This is a paragraph.
Types of HTML Elements
1. Headers
Header tags define headings for sections of a webpage. They range from `
` (the largest) to `` (the smallest). Headers are used to organize and structure content. Here's an example:Main Header
Subheader
Main Header
Subheader
Use the appropriate header tag depending on the level of importance. For example, `
` is typically used for the main title, while `` and others are used for subsections.2. Paragraphs
2. Paragraphs
The `
` tag is used to define a paragraph of text. It helps group text into readable chunks and allows for easier styling.
This is a paragraph of text.
3. Lists
HTML supports two types of lists:
- ): Lists that have a specific order (e.g., steps in a tutorial).
- ): Lists with no specific order (e.g., a shopping list).
Each list item is enclosed in an `
**Ordered list example:**
- Step 1: Learn HTML
- Step 2: Learn CSS
- Step 3: Learn JavaScript
**Unordered list example:**
- Eggs
- Bread
- Milk
4. Text Area
The `
You can also set attributes like `placeholder` and `id` for additional functionality:
5. Buttons
To create a button, you can use the `
You can also assign an `id` to the button to style or interact with it via JavaScript.
6. Hyperlinks
Hyperlinks (`` tags) allow users to navigate between pages or to external sites. The `href` attribute defines the destination URL.
Click here to visit Example
You can also control whether the link opens in the same window or a new tab using the `target` attribute:
Visit Example
By default, the link opens in the same tab (`_self`), but using `_blank` opens the link in a new tab.
7. Images
To display images, use the `` tag, with the `src` attribute pointing to the image source (URL or file path). The `alt` attribute provides a description for the image (useful for accessibility).
8. Divs
The `
About Us
We are a company that...
9. Text Formatting
HTML offers a variety of tags to format text. Some of the most commonly used are:
Examples:
This is bold text
This is important text
This is italic text
This is emphasized text
This text is highlighted
This is smaller text
This text is crossed outWater is H2O
E = mc2