The three front-end foundations refer to: 1. Hypertext Markup Language HTML, which is a language for constructing web pages; 2. Cascading Style Sheet CSS, which is a structural language for defining styles; 3. Embedded Scripting language Javascript is an interpreted scripting language used to achieve a real-time, dynamic interactive relationship between users and web pages.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5&&javascript version 1.8.5, Dell G3 computer.
Nowadays, the popularity of front-end is beyond the imagination of developers. It is obviously just a simple development of a page, and it is not as popular as what is said on the market. In fact, lines are separated like mountains. Many times when we stand outside the door, we cannot understand the actual situation inside the door.
The reason why the front end is becoming more and more important is actually that the user experience has been raised to a very high level. This is thanks to Gang Leader Qiao. Without him, we might still be in the world of Symbian. Difficulty moving.
The front-end field that directly interacts with users has reached jaw-dropping heights. Even so, the foundation of the front-end, that is, the core technology of the front-end has not changed.
The languages that make up the daily front-end development are still HTML, CSS, and Javascript.
1. HTML-Hypertext Markup Language
HTML (Hyper Text Markup Language): is a language for constructing web pages. Display images, sounds, pictures, text and other content through tag commands (Tag). It stipulates its own language rules and is used to express richer meaning items than "text".
HTML5: The latest standard for html, formulated and released in 2014. HTML5 adds some new semantic tags to support video, audio, canvas/webgl and other capabilities.
HTML basic tags: head, body, html, title (h1-h7), paragraph (p), link (a), image (image), table (table), list (ul, ol), etc. .
The basic structure of an html document:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello</title> </head> <body> <p>Hello</p> <a href="http://www.baidu.com"></a> </body> </html>
2. CSS-cascading style sheet
Although it has been developed for many years, it is The language still has little say, the language was actually created to solve the problem of bloated HTML tags (tab elements), and the language design is really great. The core of CSS is the definition and selector of document flow. By redefining HTML documents, the concept of document flow is introduced, and the original bloated tags can be used to modify the style of page content through flexible selectors. What needs to be focused on is the definition of document flow, the element box model, and the destruction and modification of document flow.
CSS (Cascading Style Sheets): Cascading Style Sheets, a structural language that defines styles, such as fonts, colors, and positioning, which describe how to format and display information on a web page.
CSS3: the latest standard of css. CSS3 adds new features such as animations and selectors. A major change in the evolution of CSS3 is the W3C's decision to break CSS3 into a series of modules. It mainly includes modules such as box model, list module, hyperlink mode, language module, background and border, text effects, multi-column layout and other modules. Dividing it into several smaller modules is more conducive to timely updating and releasing of specifications. Manufacturers can also choose to support some CSS3 module capabilities to facilitate the promotion of CSS3.
The writing position of css in html:
1), written in line (not recommended)
<h1 id="haha">haha</h1>
2), written in htmI In the style tag (not recommended)
<style>
h1{
color:red
}
</style>3), link method (recommended)
<link rel="stylesheet" type="text/css" href="style.css">
3, Javascript-embedded scripting language
Initially, because Javascript ran in the browser, it was often called an embedded script, but it still did not affect Javascript becoming a powerful programming language. This language mainly implements the response problem of user behavior, so it responds to different operation results based on user behavior events. This language is the focus of the front-end because all user experiences require Javascript to be implemented. The language is becoming more and more complete and gradually moving towards static.
1), library
The library is an encapsulation implementation for a specific function, such as an encapsulation implementation for file upload scenarios, which is called a file upload class library. This is by way of example, but not limited to this.
2), Framework
The framework is an encapsulated implementation to solve more problems. For example, the jQuery framework is a framework that implements Javascript’s API compatibility on the PC side ( Zepto (for mobile terminals), the MVVM framework is designed to quickly build an encapsulated implementation of the interface. By encapsulating DOM operations, it reduces manual DOM operations and focuses on the implementation of data structure and business logic.
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of What are the three foundations of the front-end?. For more information, please follow other related articles on the PHP Chinese website!
5个常见的JavaScript内存错误Aug 25, 2022 am 10:27 AMJavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。
Node.js 19正式发布，聊聊它的 6 大特性！Nov 16, 2022 pm 08:34 PMNode 19已正式发布，下面本篇文章就来带大家详解了解一下Node.js 19的 6 大特性，希望对大家有所帮助！
实战：vscode中开发一个支持vue文件跳转到定义的插件Nov 16, 2022 pm 08:43 PMvscode自身是支持vue文件组件跳转到定义的，但是支持的力度是非常弱的。我们在vue-cli的配置的下，可以写很多灵活的用法，这样可以提升我们的生产效率。但是正是这些灵活的写法，导致了vscode自身提供的功能无法支持跳转到文件定义。为了兼容这些灵活的写法，提高工作效率，所以写了一个vscode支持vue文件跳转到定义的插件。
聊聊如何选择一个最好的Node.js Docker镜像？Dec 13, 2022 pm 08:00 PM选择一个Node的Docker镜像看起来像是一件小事，但是镜像的大小和潜在漏洞可能会对你的CI/CD流程和安全造成重大的影响。那我们如何选择一个最好Node.js Docker镜像呢？
【6大类】实用的前端处理文件的工具库，快来收藏吧！Jul 15, 2022 pm 02:58 PM本篇文章给大家整理和分享几个前端文件处理相关的实用工具库，共分成6大类一一介绍给大家，希望对大家有所帮助。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
SublimeText3 Linux new version
SublimeText3 Linux latest version
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
WebStorm Mac version
Useful JavaScript development tools
SublimeText3 English version
Recommended: Win version, supports code prompts!
