Primary front-end learning is divided into four parts: html, css, js and jQuary
1. Getting to know HTML
1.1 Introduction to HTML
The full name of HTML is HyperText Mark-up Language, translated into Hypertext Mark-up Language, and tags are also called tags or elements. HTML is one of the most widely used technologies on the Internet and one of the main cornerstones of web documents. HTML text is a descriptive text composed of HTML tags. HTML text can explain text, graphics, animations, sounds, tables, links, etc.
The structure of HTML includes two parts: head and body. The head describes the information required by the browser, while the body contains the specific content to be explained. It should be noted that HTML is not a programming language, but a descriptive language used to describe the display of content in hypertext.
1.2 History of HTML
The predecessor of HTML is the SGML language, and the predecessor of SGML is the GML language. HTML appeared in 1990, and Tim Berners-Lee, the father of the web, published the paper "HTML Tags", borrowing the markup syntax of SGML. IETF (Internet Engineering Task Force) launched HTML2.0, and it is gradually improving. With the development, the W3C organization replaced the IETF organization to become the new HTML standard, and the subsequent HTML has developed rapidly. By 1999, the release of the HTML4.01 standard became a very important milestone in the development of HTML. It was widely used in the web and is still in use today.
Since then, the W3C organization released XHTML1.0, hoping to use the XML standard to constrain the HTML to be more standardized, and the syntax of HTML is very strict, but no new tags or features have been added. To some extent, this is a good thing, standardizing HTML syntax. However, next, W3C launched its XHTML2.0 very boldly, and it is not forward compatible, so that it is not even compatible with HTML. This is the catastrophe of the web.
In 2004, Lan Hickson of Opera company launched an activity on HTML extension and web application adaptation, which was rejected by W3C. So Opera, Apple, and Mozilla spontaneously organized the WAHTWG organization to maintain the new HTML standards by themselves, and began to develop HTML5 syntax standards based on the web forms 2.0 and web app 1.0 standards. In contrast, W3C has been bumpy on the road to XHTML. Finally, around 2010, W3C announced that it would stop the continued maintenance of XHTML2. Started to develop the HTML 5 grammar standard based on the research of WAHTWG. So far, HTML 5 has been compatible with most browsers and is widely used in web sites. Here is how HTML has evolved:
1.3 HTML Features
simple and flexible
Scalable
platform independence
2. Preparation for development
2.1 Environment installation and configuration
The normal Windows 10 Home Chinese version can be used as the basic environment
2.1.1 Development environment
As the cornerstone of web development, HTML has always been known for its simplicity, so you only need a simple notepad tool to develop HTML, such as: Notepad++, VSCode, etc. Of course, most of the mainstream programming IDEs support HTML development, such as : eclipse, IntelliJ IDEA, pycharm, etc. Of course, there are also IDEs for front-end development--WebStorm, Hbuilder, etc. It is recommended to use the Notepad tool in the early stage of development, so as to practice the feel of the code. After the basic skills are laid, you can use it These IDEs are developed to improve the efficiency of development.
2.1.2 Operating environment
HTML is the cornerstone of web pages, so the operating environment is the mainstream browser. It is recommended to use Google's Chrome browser, or Firefox or Edge.
2.2 Browser history
In the middle and late 20th century, the Internet has begun to take shape. By the 1990s, the world entered the Internet era, and browsers became an indispensable tool for people to obtain Internet information. After decades of development, the browser technology has become more mature, and the products are also diversified. The mainstream products include Microsoft's Internet Explorer, Apple's Safari, Mozilla's Firefox, and Opera developed by Opera. browser and the Chrome browser launched by Google.
The history of browsers dates back to 1990, when browsers could only display plain text. In 1993, the National Center for Supercomputing Applications at Illinois State University released Mosaic, the first browser that supports graphics rendering. Since then, the Internet has grown explosively, and the Mosaic browser was born as a graphical Web design lays the groundwork.
In 1994, Netscape released the Navigator browser. The browser inherited the business model established by Mosaic, that is, distributing products for free on the Internet to build a broad user base. Navigator quickly replaced Mosaic as the user's first choice.
However, this state did not last long. Soon, Microsoft saw the potential of the Internet, and in 1995 they developed the IE (Internet Explorer) browser. Since Microsoft bundles IE with the popular desktop operating system Windows, users can browse the web conveniently without installing a third-party browser. As the number of Windows operating system users continues to increase, the user base of Internet Explorer continues to grow, and it continues to erode the browser market occupied by Netscape. In the first browser war, Microsoft's IE browser won a big victory, and Netscape went bankrupt. Finish.
Netscape then adjusted its strategy, opened its source code, and established Mozilla to deal with Microsoft's challenge. Although this move failed to restore Netscape's market share, it gave birth to the popular Firefox browser today. In the early days of Mozilla's establishment, the Mozilla project attracted a large number of developers to contribute code and wisdom. By 2002, it had developed into a stable and powerful Internet suite. The emergence of Mozilla 1.0 is regarded as its milestone; in the same year, Phoenix was derived (later renamed Firebird, and finally changed to Firefox). Then the widely known browser Firefox 1.0 was finally officially released in 2004.
In addition, the open source browser engine WebKit is also used by many browser products. The predecessor of WebKit is the HTML rendering engine (KHTML) and JavaScript execution engine of the KDE project. Apple ported WebKit to Mac OS and released the WebKit-based Safari browser in 2003. The Chrome browser launched by Google in 2008 also uses the WebKit kernel.
In the second browser war started by Google, Microsoft's IE browser failed, and Google's Chrome browser became the big winner. In 2010, with the development of the mobile Internet, Microsoft also gave up the development and maintenance of the IE browser, and developed a new generation of browser Edge browser using the WebKit kernel, trying to recreate its own browser market. , the probability of success is not high.
2.3 Several major browsers
At present, Google's Chrome browser has the highest market share, followed by Microsoft's Edge browser, Apple's Safari browser, and Mozilla Firefox.
In the development of browsers, there are several mainstream browsers that will definitely be written into the history of Internet development. These browsers include: Mosaic browser, Netscape Navigator, IE browser (Internet Explorer), Opera browser, Mozilla Firefox browser, Chrome, etc.
2.4 Introduction to W3C (World Wide Web Consortium)
2.4.1 Origin of W3C
The World Wide Web was developed as a project of CERN, where Tim BernersLee developed the prototype of the World Wide Web. Tim Berners-Lee - Inventor of the World Wide Web - is currently Director of the World Wide Web Consortium. W3C was created in 1994 as a collaborative effort between the Massachusetts Institute of Technology (MIT) and the European Research Institute for Nuclear Physics (CERN), with support from the U.S. Defense Advanced Research Projects Agency (DARPA) and the European Commission. (European Commission) support.
World Wide Web Consortium (W3C), also known as the W3C Council. Established in October 1994 at the MIT Computer Science Laboratory. Founded by Tim Berners-Lee, inventor of the World Wide Web.
The World Wide Web Consortium is the most famous international standardization organization. Since its establishment in 1994, nearly a hundred standards related to the World Wide Web have been released so far, making outstanding contributions to the development of the World Wide Web. At present, the World Wide Web Consortium has more than 400 member organizations from 40 countries around the world, and has established offices in 16 regions around the world. On April 28, 2006, the World Wide Web Consortium established its first office in mainland China.
2.4.2 Contribution of W3C
In order to solve the incompatibility problems caused by different platforms, technologies and developers in Web applications, and ensure the smooth and complete circulation of Web information, W3C has formulated a series of standards and urged Web application developers and content providers to follow these standards. The content of the standard includes the specification of the language used, the guidelines used in the development and the behavior of the interpretation engine and so on. W3C has also formulated many far-reaching standard specifications including XML and CSS. However, the web standards developed by the W3C do not appear to be mandatory but recommended. Therefore, some websites still cannot fully implement these standards. In particular, web pages designed using early WYSIWYG web page editing software often contain a large number of non-standard codes.
The most important work of W3C is the development of Web specifications (called Recommendations), which describe the communication protocols of the Web (such as HTML and XHTML) and other building blocks. The development of each W3C Recommendation is done through working groups composed of members and invited experts. Working groups are funded by companies and other organizations, and create a working draft and, finally, a recommendation. Generally, recommendations are submitted to W3C Members and Directors for formal approval.
2.5 HTML syntax
Grammatical structure: HTML tags.
Format: <label attribute="value">content</label>
<p></p>是HTML中的段落标签，我们以<p></p>标签作为示例来解答语法结构
Tags usually appear in pairs, which are divided into start tag <p> and end tag</p>. The end tag is just a slash "/" before the start tag. Labels can have the attribute align, which must have the value "center". The content contained in the start tag and end tag is called a region. Tags are case insensitive, p and P are the same.
2.6 Web page classification
HTML uses tags to write web pages, and web pages can basically be divided into 2 categories.
Static webpage HTML Static webpage means that without modifying the source file of the webpage, no matter when and where the webpage is browsed, the same content will be displayed, and the content of the webpage will not change. The extensions of static web pages include html, htm, etc.
Dynamic interactive web pages Interactive web pages refer to the information that users can provide to the website, and the website responds to the user's request according to the information submitted by the user. Such as online registration, forums, surveys, etc. In the final part of the course we will experience interactive web pages, which will be studied in depth in the second semester. The file extensions of interactive web pages include aspx, jsp, php, asp, etc.
3. Common HTML tags
3.1 The first HTML program
Step 1: Create a text document and name it xxx.html. The name is arbitrary (English as much as possible), but the suffix must be .html.
Step 2: Find the corresponding software to open this text document, and write the following code in it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页...</title>
</head>
<body>
这里可以编写网页的内容，是网页内容的主体...
</body>
</html>Run the code, select the browser to run:
We used six basic tags in the above example, including doctype head tags, meta tags, title tags, and tags that make up the HTML document structure. The HTML document structure includes three parts:
HTML tags
html标签表示网页文件的开始,应该把它放在文档的最外层（doctype不算），其他所有的标签都应 该放在 <html>和</html>结束标签之间。
HEAD标签
head表示头部标签，head标签中通常放title标签、meta标签、style标签等。所以head标签主要用来放定义页面属性的标签。
HODY标签
body表示主体标签，网页上所有要显示的内容都放在这个标签内。
代码讲解：（只是作为讲解，复制请复制上边实例）
<!DOCTYPE html> <!-这里是声明html编写网页所使用的版本以及规范->
<html> <!-表示网页的开始->
<head> <!-表示头部的开始->
<title>HTML 的标签</title> <!-这里写你想的网页标题，例如百度一下，会显示在浏览器的标题栏->
</head> <!-表示头部的结束->
<body> <!-表示正文部分的开始->
<!—在这里写注释--> <!- 注释的格式 ->
我的第一个网页
</body> <!-表示正文部分的结束->
</html> <!-表示网页的结束->注：html开始和结束标签可以不写，内容可以运行，但是会出现乱码（非utf-8部分）
META标签
网页的 标签中除了包含 title 标签外还包括了 meta 标签， meta 标签提供了关于网页的 信息，包括作者、关键字、网页编码、自动刷新等。
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
charset="UTF-8"/> ①
<title>HTML 简介</title>
</head>
<body>
使用 meta 标签确定编码格式。
</body>
</html>
这是 标签，标签中的 charset 表示当前网页的编码格式，值 UTF-8 表示通用字符，也就是说网页中的文字显示为UTF-8中有的字符，这时就要求操作系统中安装 UTF-8字符集，否则就会显 示乱码，不过操作系统中一般已经安装了。如果在英文操作系统中浏览了 GB2312 编码的网页就会出现 乱码，因为英文操作系统中没有GB2312 字符集。我们在浏览网页时偶尔会遇到网页显示乱码，多数是 因为 META标签中的编码设置不正确。现在一般建议都设置为UTF-8这种Unicode编码。常见的编码见下 表：
网页的常用编码有 GB2312、UTF-8、BIG5、GBK： |
||||||
1． GB2312 是简体中文字符集，主要用于中国大陆和新加坡。 |
||||||
2. UTF -8 可以理解为通用字符集。 |
||||||
3． BIG5 是繁体中文字符集，主要在台湾和香港地区使用。 |
||||||
4． GBK 是 GB2312 的后续标准，添加了更多的汉字和特殊符号。 |