01. Introduction to
Web front-end development 1. Overview of Web front-end development
1) What is Web development?
Front-end development is the process of creating front-end interfaces such as Web pages or apps and presenting them to users. Through HTML, CSS, JavaScript, and various derived technologies, frameworks, and solutions, the user interface interaction of Internet products is realized.
It has evolved from the production of web pages, and the name has obvious characteristics of the times. In the evolution of the Internet, web page production is a product of the Web1.0 era. The main content of the early websites was static, with pictures and text as the main part, and users ’use of the website was also based on browsing.
With the development of Internet technology and the application of HTML5 and CSS3, modern web pages are more beautiful, with significant interaction effects and more powerful functions.
The mobile Internet has brought a large number of high-performance mobile terminal devices and fast wireless networks. HTML5 and node.jS are widely used, and various framework libraries are emerging.
2) Web front-end development core technology
"1" HTML language (hypertext markup language, equivalent to a whole frame, very important)
Mastering HTML is the core of a web page, a standard language for making web pages, and a language used by web browsers, which eliminates the barriers to information exchange between different computers. Therefore, it is the most widely used language on the Internet and the main language that constitutes web documents. Learning HTML is a basic condition for becoming a web developer.
HTML is a markup language that can implement Web pages and display them in a browser. As the latest version of HTML, HTML5 introduces a number of new technologies, which greatly enhances the ability to support applications, so that Web technology is no longer limited to presenting web content.
With the development of CSS, JavaScript, Flash and other technologies, the Web's processing power for applications has gradually increased, and the user's experience of browsing web pages has been greatly improved. However, several new technologies in HTML5 have achieved qualitative breakthroughs, making Web technology for the first time considered to be close to native native application technology, and developing Web applications has truly become a choice for developers.
HTML5 can greatly simplify the work of developers. In theory, a single development can run on different platforms with the help of browsers, reducing development costs. This is also one of the main advantages of HTML5 technology that the industry generally believes. AppMobi, Motorola, Sencha, Appcelerator and other companies have launched relatively mature development tools to support the development of HTML5 applications.
"2" CSS (cascading style sheets, used to decorate HTML frames, equivalent to makeup, decoration)
Learning CSS is an important aspect of web page appearance. CSS can help make the web page look more beautiful.
"3" JavaScript (front-end programming language, used to make the page interact, dynamically display, and let the designed things live to be interactive)
When using JavaScript, it is very low-level, and it is too slow to develop. In order to make the development page faster, it actually encapsulates some frameworks of JS, similar to modules in python, such as jQuery, viewe.js, etc.
HTML, CSS, and JavaScript are called three swordsmen for front-end development.
"4" operating system
Need to understand the basic knowledge of Unix and Linux.
"5" Web Server
Understand the web server, including the basic configuration of Apache, mastering of htaccess configuration skills.
2. Web Origin
In 1984, Tim Berners Lee created the world's first World Wide Web navigation site, the world's first website
In 1989, the team led by Tim Berners-Lee at CERN (European Institute of Particle Physics) submitted a new protocol for the Internet and a document system using the protocol. The team named this new system World Wide Web, which The purpose is to enable scientists around the world to use the Internet to communicate their work documents.
This new system is designed to allow any user on the Internet to search and retrieve documents from the database of many document-serving computers. At the end of 1990, the basic framework of this new system has been developed and implemented in a computer in CERN. In 1991, the system was transplanted to other computer platforms and officially released.
3. Characteristics of the
Web The Web is a graphical and easy-to-navigate
Web and has nothing to do with the platform. The
Web is a distributed structure. The
dynamic
Web is interactive. A
little common sense is added here:
C / S framework: Client / Server (client / server)
We usually play games, the downloaded package is relatively large, requires a series of environments, the client configuration requirements are very high, and different platforms have to develop different software.
B / S framework: Browser / Server (browser / server)
online game, the client does not need too much configuration, just have a browser, you can access the content shared by the server, now mostly use this.
4. How Web works For
example, a question often asked during interviews: What is the overall process performed after entering www.baidu.com in the browser?
The browser sends a request to the DNS server to resolve the domain name; the
DNS server resolves the domain name to the corresponding IP address and returns it to the client; the
browser establishes a TCP connection with the server (the default port is 80); the
browser sends an HTTP request message;
The server replies with the HTTP response message; the
browser parses the response message and displays it on the Web page; after
receiving and sending the message, the TCP connection is released.
The protocols involved are:
Application layer: HTTP (WWW access protocol), DNS (domain name resolution service)
Transport layer: TCP (provide reliable data transmission for HTTP), UDP (DNS uses UDP transmission)
Network layer: IP (IP data packet transmission and routing ), ICMP (provides error detection during network transmission), ARP (maps the IP address of the destination host to a MAC address)
5, URL introduction
URL (uniform resource locator) unified resource locator, that is, the URL, used to access the page content
Composition:
protocol type: // server address (you can write IP or host name) (port number) / path / file name If you
do not write the port number, it is the default port number of the protocol.
For example: http://www.westos.org /bbs/index.html
Let's review the common ports:
http: 80
https: 443
ssh: 22
mysql: 3306
redis: 6379
ftp: 21
02. HTML webpage structure
1. HTML introduction
HTML (Hyper Text Mark-up Language) is a hypertext markup language. A language that describes the structure and presentation of page documents by using markup tags, which is then parsed by the browser and then Display the results on the webpage.
Hypertext refers to hyperlinks
Tags refer to tags.
Common editors and browsers:
Note:
1). HTML files opened with an editor display text, which can be edited in text.
2). The HTML file is opened with a browser, and the browser will render the file into a web page according to the content of the label description.
2. The basic structure of HTML
As shown in the following figure, it is the frame content of HTML. When we write HTML documents, we add them according to this template.
As follows, we create a relatively simple .html file according to this template:
<!--注释在这里写，写完直接按ctrl+/ -->
<!--声明html-->
<!DOCTYPE html>
<!--表示是html文档-->
<html lang="en">
<!--html的头部，在页面中不会显示-->
<head>
<!-- 这里声明html文档的编码格式-->
<meta charset="UTF-8">
<!-- 编辑整个页面的标题-->
<title>标题示例</title>
</head>
<!--html的主体，在页面中真正显示的内容-->
<body>
<!-- <h1></h1>：是一级标题，里面还可以进行设置格式颜色等-->
<h1 style="color: crimson">标题一</h1>
</body>
</html>
Here introduces a software dedicated to Web front-end development-WebStorm, this software can be downloaded and installed directly on the official website. (The official website interface is as follows), this software is more convenient in the Web front-end development process, and it is also relatively lightweight.
3. Document types
The two commonly used document types are: html5 and xhtml 1.0
Here briefly talk about the difference between XHTML1.0, HTML4.01 and HTML5:
XHTML1.0 is an XML style HTML4.01.
XHTML1.1 is mainly preliminarily modularized.
HTML5 is the next generation of HTML, replacing HTML4.01.
Before the rise of XHTML, its position was replaced by HTML5. HTML5 stipulates two forms of serialization, one is loose HTML style, and the other is strict XML / XHTML style.
Most enterprises will use html5, and the ones that use xhtml1.0 are generally the display pages of relevant government departments.
The following figure illustrates the entire development process of HTML:
4. Document specifications and comments
xhtml has formulated the document writing specifications. HTML5 can be partially or fully observed, depending on the development requirements.
All tags must be lowercase.
All attributes must be enclosed in double quotes.
All tags must be closed.
Img must be added with alt attribute (description of the picture)
. You can insert comments in the HTML document code. The comments are explanations and explanations of the code. It will not be displayed on the page, the method of inserting comments in the html code is:
<!-This is a comment->
For example: In the figure below, the first and third lines are comments.
03, HTML tags
1, text tags
2. Line break label
The display is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实验效果</title>
</head>
<>
<body>
<h1 style="color: blueviolet">标题一</h1>
<h2 style="color: red">标题二</h2>
<h3 style="color: yellow">标题三</h3>
<h4 style="color: green">标题四</h4>
<h5 style="color: black">标题五</h5>
<h6 style="color: blue">标题六</h6>
<br>
<i>斜体</i>
<em>斜体</em>
<b>加粗字体</b>
<strong>加粗字体</strong>
<cite>引用</cite>
<sub>下标</sub>
<sup>上标</sup>
<tt>居中显示</tt>
<u>字体加下划线</u>
<s>字体加删除线</s>
<strike>字体加删除线</strike>
s<sub>1</sub> = pi * r<sup>2</sup>
原价：<del>$100</del>
现价:<b style="color:red">$50</b>
<i>斜体</i>
<br/>
<em>斜体</em>
<br/><hr>
<br>
<p>
总想在一场如酥如丝的春雨中，撑着油纸伞穿梭于江南。可能没有布满青苔的大石板，没有杨柳拂堤的断桥，没有一个且行且谈笑的好友。就一个人，静静的起行。在那里，我可以遇到破土而出、正展现着它勃勃生机的小草，遇到拂身而来、吹面不寒的二月春风，遇到一个促膝而谈、志同道合的友人。
有人说，遇见，不过是在一定的地点，一定的时间，遇到一定的人或物，或许还有事情。但是在茫茫人海中，无数次擦肩的人又有几个是隐隐约约还存留着记忆的呢?没有心灵上的刻印，或许算不上是遇见吧。西湖三月，白素贞一袭轻衣走过，邂逅了一个儒雅书生，从此写就了一段刻骨铭心的爱情。草桥之上，梁山伯遇见祝英台，从十八里相送，到坟前的双双化蝶，为他们的爱情点开凄美的涟漪。
最美的遇见，不过初见。我们之所以愿意去记忆那些初遇的一颦一笑，只是因为这是两颗陌生而又神秘的心在相互碰撞。如春风吹着云，又如蜻蜓点着水，青涩而又温馨。有多少人曾怀念着往昔，怀念的第一次相逢，第一次微笑，因为在各自心里，那里承载的是心的起点。人生若只如初见，最美的画面不会因为时间的推移而消散殆尽，反而会因此愈念愈浓，直至如梦如画，直至永恒。
最暖的遇见，不过偶遇。如果说每一次初遇是云与风的交汇，那么我会相信每一次偶遇便是流星划过。没有计划、不经商量的，就那么匆匆地到来，该是有多欢喜。人生最大的悲痛永远不过是未知，然而最大的快乐也是未知。我们不能预知下一秒将遇到哪个人，也不能预测到你想遇见的人在何时遇到。人海还不一定茫茫，但机会总是渺渺。于是乎，我们不再刻意，一切都托付与机缘。当有一天，我们不期而遇，我们会发现这比任何一次彩排、任何一次计划都来得随意简单，但却是最为温暖。
</p>
<p>
佛祖座下弟子阿难曾说：我愿化身石桥，受那五百年风吹，五百年日晒，五百年雨淋，只求她从桥上经过。 因为在他看来，每一次遇见都足以永恒，哪怕那时的他已经是一座沧桑的古桥。我收起伞，尽管天上还飘着雨丝。我纵身于雾汽之中，听着雨珠在发间流淌的声音。蓦然回首，仅莞尔一笑，愿我以最美的姿态遇见你。
</p>
</body>
</html>
Web page display results:
