"Web Page Design and Production" is the content of static web pages in web front-end development technology, mainly including the static content parts in HTML, CSS, and JS. It is a professional basic course.

With the advent of the 5G era, the rapid development of the industry combining artificial intelligence and the Internet of Things, and the rise of more Internet. This is definitely accompanied by the demand for new development scenarios in the mobile Internet field, which requires a large amount of front-end and mobile front-end development to present. [As technology becomes more mature, it becomes more important to display each web page to users and improve user needs]

In today's society, we can shop on online platforms, make appointments, share information, watch news, etc. without leaving home. Every web page in this is a web front-end page, which means that the web front-end is every page displayed to The user's network page, and the needs that the user can complete on the page.

1.1 – Simple presentation

[HTML]: This picture will == use 0 seconds == jump directly to Sohu
【This picture willUse 0 secondsJump directly to Sohu website]

I found three internet images, typed them out and added a title and three paragraphs of text.

WebIntroduction

Web front-end development is a complex and rapidly evolving field. Modern web applications are built using a variety of technologies, including HTML, CSS, JavaScript ¹ , and various front-end frameworks such as React, Angular, and Vue.

One of the biggest trends in web front-end development in recent years has been the rise of mobile-first design. As more and more people access the internet on mobile devices, it becomes increasingly important for websites to be optimized for smaller screens and touch-based interactions.

Another trend in web front-end development is the increasing use of serverless architecture. With serverless, developers can build and deploy applications without having to worry about managing servers or infrastructure.

Overall, the field of web front-end development is constantly evolving, and developers need to stay up to date with the latest trends and technologies in order to build modern, responsive, and user-friendly web applications.
Insert image description here

Web 1.0时代是指互联网早期的时期，1990年代中期到2000年左右。网站主要由静态HTML页面组成，没有太多的动态交互和个性化设计。
Web 2.0时代的网站具有更多的动态交互和个性化设计，用户可以更加积极地参与其中，而不仅仅是被动地浏览内容。具有以下特点：
	更多的动态交互和个性化设计，用户可以更加积极地参与其中。
	更多的社交功能，如用户评论、分享和社交媒体集成。
	更多的多媒体内容，如视频、音频和动画。
	更多的移动设备支持，如响应式设计和移动应用程序。

What web 3.0 will look like in the future:

Web 3.0是指下一代互联网，也被称为“语义Web”。Web 3.0的主要目标是使互联网更加智能化，使计算机能够更好地理解和处理人类语言和行为。
Web 3.0的核心技术包括人工智能、机器学习、自然语言处理和语义Web技术。

But we are still working hard [there is a long way to go]:

我们还没有完全到达Web 3.0时代。目前，Web 3.0的技术和应用还在不断探索和发展中，还没有一个统一的标准和实现。
一些相关的技术和项目已经出现，如以太坊、Polkadot、Filecoin等。

Tool Preparation: Our Choice

Tool selection:
Hbuilder X is a cross-platform development tool based on HTML5, mainly used for the development and debugging of mobile applications. It is a domestically developed software that is fast and powerful and is very popular in domestic front-end development.
There are many other tools and frameworks to choose from, such as Webpack, Gulp, Grunt, etc.

2.1-Download

Search the HBuilderX official website. There is a website called dcloud.io.
Next, enter this page.

Click on the more in the middle
to findSuitable version for yourselfMy device is windows and I chose the official version of zip

I put it on the E drive and decompressed it:

We can open it directly if we find the green icon.

Theme is optional:

2.2-Create new file

Click File – New – Project

Next: Directory – (I chose) Ordinary Project – Basic HTML Project (this is the project that has been packaged) [An empty project has nothing】
Change the path to English for convenience.

The last page: We just select what we need in the angle brackets <index.html>

If you need to run it: click Run – Run to the browser – (Click on the browser you have, if you don’t have it, you have to download it) – I chose edge

Sample code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行和水平线标签</title>
  </head>
  <body><br>
    firstPara1 <br>
    secondPara2
    <hr>
  </body>
</html>

The web front-end page contains three parts: structure layer, presentation layer, and behavior layer.
HTML belongs to the structural layer and is responsible for describing the structural framework of the content.
CSS belongs to the presentation layer and is responsible for "how to display relevant content."
JavaScript belongs to the behavioral layer and is responsible for "how the content should react to events" [interaction].
(1) What is HTML?
HTML, the full name is "Hyper Text Markup Language (Hyper Text Markup Language)". Simply put, web pages are made in HTML language. HTML is a descriptive language and a very easy language to get started with.
(2) CSS
CSS, the full name is "(Cascading Style Sheet)". In the future, we will see "cascading style sheets" and "CSS styles" elsewhere, which refers to CSS.
(3) JavaScript
JavaScript is a scripting language. Through these three technologies, a web page is completed and the designed web page is displayed in different browsers through the www web client. This is the relationship between the World Wide Web, web and html. ↩︎

"Web Design and Production-Elementary"