The first day of front-end learning---02

01

Today, I mainly learned some basic knowledge of computer, URL address, website composition, and some basic grammar of html. Pay special attention to learning basic grammar.

web（*）

Website: Multiple web pages are combined to form a website.

World Wide Web: A collection of countless web sites and web pages. world wide web, Also abbreviated as 3wor wwwor web.

What is the front end (*)

The front end and the back end are like the relationship between a TV and a TV tower. The TV tower sends the signal, the TV receives the signal and amplifies the signal to show what is in the signal.

The back end will send some data, and the front end of the sent data needs to be displayed.

[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly

The importance of the front end (*)

Combined with the modern era background, the front-end has the following functions:

• Realize the design of website pages combined with the aesthetics of modern people (pages in the 90s, 00s, and 10s).

  • 1989 website interface (the original web interface)

    

  • Website interface in 2000:

    

  • Website interface in 2010

    

• Combine the front end of the website under the big data environment.

  

  Websites are getting bigger and bigger and users are getting more and more. It is necessary to guarantee the previous access speed under a large amount of access and large data volume.

Domain name and URL address (***)

What does our network rely on to access each other ( IP地址), but the IP address is not easy to remember, so there is a domain name and DNS

192.168.13.61 A

10.201.203.11 B

• domain name

  • Domain Name (English: Domain Name), abbreviated as domain name, domain name, is the name of a computer or computer group on the Internet composed of a series of names separated by dots, used to identify the electronic location of the computer during data transmission (sometimes Also refers to geographic location).

    www.baidu.com

    The complete domain name consists of three parts:

    • Top-level domain name: (first-level domain name)

      • com, commercial organization
      • cn, China
      • net, network organization
      • org, non-profit organization
      • edu, education
      • gov, national agency
      • mil, military organization
      • tech, learn

      https://wanwang.aliyun.com/domain/mobi/?spm=5176.76129.1001.14.2f0e554aTnXhJi

    • secondary domain

      We bought it ourselves.

    • CPU name

      www.baidu.com, There is a commercial organization called baidu. Visiting is the host of www in the website of baidu, a commercial organization.

  • Domain Name System (DNS, a distributed database that maps domain names and IP addresses to each other) is a core service of the Internet. It serves as a distributed database that can map domain names and IP addresses to each other, enabling People can access the Internet more conveniently without having to remember the number of IP addresses that can be directly read by the machine.

    www.baidu.com is a domain name that corresponds to the IP address 14.215.177.38. DNS is like a phone book. It allows us to directly enter the name www.baidu.com instead of the IP address 14.215.177.38. After we directly enter the domain name of the website, DNS will convert the name into an IP address that the machine can recognize.

• URL

  www.baidu.comCalled URL address (Uniform Resource Locator), it is used to indicate the specific address of the resource to be requested.

  http://www.ceshi.com:80/test/test.html?par1=var1&par2=var2#p

  • http: Protocol name, which tells the server what convention should be used to communicate with the client. httpIt is optional and httpwill be automatically added after you enter an address .

    http://localhost/

  • www.ceshi.com,server address. Which address should be specifically requested.

  • :80,port. Represents the window from which the data should be entered. Optional.

  • /test/test.html, File path, you use the file path to access the specified resource in the specified directory on the server, there can be multiple file paths.

    C:\xampp\htdocsWe become called the root directory of the website.

  • par1=var1&par2=var2, The query string. Used to pass values ​​to the server-side scripting language.

  • #p, The fragment identifier.

  https://www.baidu.com/

  https://www.baidu.com/s?
  ie=utf8&
  f=8&rsv_bp=1&
  rsv_idx=1&
  tn=baidu&
  wd=oaliyun&
  fenlei=256&
  oq=%25E9%2598%25BF%25E9%2587%258C%25E4%25BA%2591&
  rsv_pq=b8b7b03d00093b6a&
  rsv_t=7a80mEN03j6OQBWI75zBB6g%2FZwScCBnONj%2BDPdcJsw1ZaAfLpUwwc3cCLvA&
  rqlang=cn&rsv_enter=1&
  rsv_dl=tb&
  rsv_btype=t&
  inputT=2367&
  rsv_sug3=16&
  rsv_sug1=14&
  rsv_sug7=101&
  rsv_sug2=0&
  rsv_sug4=2367

  ​

Composition of network software (**)

The web also belongs to network software.

• What is the client and what is the server.

  • Client: The party that initiates the request and receives the message from the server port. In the web, it refers to our browser.
  • Server: Receive the request from the client and give a response.

• Composition of the website

  • Client-browser: The browser is the client of the www server. It sends various requests to the www server, interprets the responses returned by the server, and allows users to interact with these contents.

  • HTML (Hypertext Markup Language)

    The essence of a web page is HTML, which marks all parts of the web page for the browser to interpret.

  • CSS (Cascading Style Sheet)

    HTML is used to mark, but the content of each part of the mark is messy and the aesthetics is poor. So we use CSS for beautification.

  • Client-side scripting language (JavaScript)

    • Script: A program that cannot run independently and must have a carrier.
    • Client: browser.
    • Client-side scripting language: A program that runs on the browser.

    Control behavior, used to interact with the user.

    HTML, CSS, JavaScript: HTML is used for markup, CSS is used for beautification, and JavaScript is used for interaction. Their division of labor is very clear. HTML is like a rough house, CSS decoration, and JavaScript is like installing some switches.

  • Web server

    Also known as www server, usually what we call the server side refers to the web server, which is used to provide feedback to the requesting client.

    [External link image transfer failed. The source site may have an anti-leech link mechanism. It is recommended to save the image and upload it directly (img-6PLXC9v4-1614844662803)(_v_images/20210215173541201_23072.png)]

  • Server-side scripting language

    A language that works on the server side to assist the web server in completing business logic.

    Java PHP Python

  • database

    A warehouse for storing data.

How the web works today (**)

较为完整的webCan be divided into 浏览器, HTML, CSS, JavaScript, web服务器, 服务器端脚本语言, 数据库, and modern Web is used in the majority of the front and rear end of the separation of architecture.

The main things we learn at the front end are HTML, CSS, and JavaScript. As for the frameworks of Vue and React mentioned later, they are all frameworks encapsulated on top of JavaScript.

Browser (*)

The browser is the platform on which the webpage runs. Common browsers include IE, Firefox, Google (Chrome), Safari and Opera, etc. We usually call them the top five browsers. The sixth is the Edge browser, which is Microsoft's improved IE New built-in browser

The so-called five major browsers were created because of the difference in the kernel.

The so-called kernel refers to the rendering engine, which is responsible for the interpretation of web page syntax (such as an application of HTML, CSS, JavaScript under the standard universal markup language) and rendering (displaying) the web page. Therefore, the so-called browser kernel is usually the rendering engine used by the browser. The rendering engine determines how the browser displays the content of the web page and the format information of the page.

Different browser cores have different interpretations of webpage writing syntax. Therefore, the rendering (display) effect of the same webpage in browsers with different cores may also be different. This is also why webpage writers need to test webpages in browsers with different cores. Show the reason for the effect. But they all need to follow W3C standards (HTML5, CSS3, ES standards, etc.), so there will be some differences between browsers and browsers, but the difference is not big.

• IE IE is the Trident core. After the release of Window, after the release of Windows 10, IE named its built-in browser Edge. The most notable feature of Edge is the new kernel.

• Firefox (Firefox) Gecko kernel, Gecko's characteristic is that the code is completely open, so the degree of development is very high, programmers all over the world can write code for it, add functions, but unfortunately it has declined in recent years, such as slow opening speed and frequent upgrades , The teammate flash like a pig, the opponent chrome like a god.

• Safari uses the famous WebKit. Many people now wrongly call webkit chrome (even if the chrome kernel is already blink, the webkit kernel was used before).

• Chrome (Google) Blink kernel, developed the Blink kernel rendering engine (ie browser core) in the Chromium project, built into the Chrome browser, Blink is actually a branch of Webkit, most of the domestic browsers use the Blink kernel in the latest version

• The Opera Presto kernel (obsolete) is the "predecessor" kernel of the Norwegian browser Opera. Why is it called the "predecessor"? Because the latest Opera browser has long been abandoned and invested in Google's embrace, using Blink.

• Other domestic browsers have added their own UI shells to the cores of foreign browsers and become their own browsers.

Most of the development process now uses chrome. More than 90% of development will use chrome.

What is HTML (Hypertext Markup Language) (*)

Text markup language: the language in which the text is marked with a logo.

Super: The pants wear outside. Hypertext Markup Language has something more on the basis of text markup language, which can mark up pictures and videos.

Hyper Text Mark up Language (Hyper Text Mark up Language), which uses markup symbols to mark and display various parts of a web page. HTML is a standard and a specification.

History of HTML(*)

1. It was in 1991 that Tim-Lee wrote a document called HTML, in which he used more than 20 tags to mark the text. This is the legendary 1.0.
2. The earliest official HTML specification is HTML2.0 issued by IETF (Internet Engineering Task Force), in fact there is no HTML1.0
3. Following the IETF, W3C (World Wide Web Consortium) has become the follow-up standard maker of HTMl. After the mid-1990s, W3C upgraded HTMl several times until HTMl4.01 was released in 1999.
4. The revised version after HTMl4.01 is xhtml1.0 (x means extensible). In fact, the content of XHTML1.0 specification is exactly the same as HTML4.01, without adding any new elements or new attributes. The only two specifications The difference is that HTML grammar has made different regulations. HTMl provides developers with a lot of freedom to write elements and attributes according to their wishes. However, XHTML requires developers to comply with XML rules, and XHTML1.0 rules require stricter rules. , Requires all tags and attributes to be lowercase.
5. Later, in order to be more standardized, W3C released xhtml1.1, but many browser manufacturers did not cooperate and did not check the specification of xhtml
6. W3C started to develop XHTML2, but XHTML2 is not compatible with all web content, even the previous version of HTML.
7. At this time, some people began to oppose XHML 2.0, especially representatives from opera, apple, and moailla. They wanted to support the previous version and develop some new features, but they were rejected.
8. Later, they created the WHATWG organization and began to develop some specifications, which was the predecessor of HTML5. Later, because of the slow advancement of XHTML2.0, people were reluctant to use it. So W3C began to negotiate with the WHATWG organization to accept HTMl5.
9. On October 28, 2014, HTML 5.0, W3C officially released HTML 5.0 Recommendations

HTML5 is used by default during development, and other old browsers are only considered under special requirements.

Start withHTML4，CSS2, -》 HTML5、CSS3

HTML syntax (****)

1. Create a text file and change the suffix name toxxx.html

2. Open the html file and write a paragraph

3. Right-click in the editor-"Open in the browser (this way is to access through the server)

   http://localhost:52330/1.html

4. Plus <marquee>是我要标记出来的内容</marquee>, what's inside is <marquee>called a label. It is the most basic unit and the most important part of HTM.

5. <标签名></标签名>This format is called double label. The front <标签名>represents the beginning and </标签名>the end. The two English letters between the beginning and the end of them are the same. They appeared in pairs.

6. <标签名 />, This is called a single tag (self-closing tag), it does not appear in pairs, and the final result /can be added or not.

   <br />Newline label.

7. htmlThe label is not case sensitive. However, lowercase is recommended.

8. loop="3"This kind of attribute is used to modify and control the label. Even if you don't write a certain attribute, the attribute will have a default value.

   The format of the attribute:属性名="属性的值"

   • The attributes should be written in the label.
   • The attribute value can be enclosed in single quotes, double quotes, or without quotes. It is recommended to use double quotation marks.

9. Multiple attributes can be used in a label. And the order of multiple attributes is not distinguished.

10. How to represent the color:

    1. Use English words directly.

    2. It is represented by a 6-digit hexadecimal value.

       0~9

       0~9a~f

       Divide the 6 digits into three groups, and the sub-tables represent the ratio of red, green, and blue.

       <MARQUEE width="50" loop="3" bgcolor="#FFCD43">李沛华</MARQUEE>

11. HTML handling of spaces and carriage returns:

    1. One or more spaces in HTML will be treated as one space.
    2. A carriage return or multiple carriage returns in HTML will also be treated as a space.

12. entity

    There are some characters in HTML that are reserved by the system or cannot be printed out, so you need to use entities for these characters to be used normally.

    Entities: A string of special numbers and characters used to represent these special characters.

    format:&字母;

    Space: 

    <：<

    >：>

    &:&

    "："

    '：'

13. Label nesting

    Single tags can be nested inside double tags, or double tags can be nested. The code we write in the future is all label nesting.

14. to sum up:

    <标签名 属性1="值1" 属性2="值2">要标记的内容</标签名>

    <标签名 属性1="值1" 属性2="值2" />

15. Comment

    <!-- 要注释的内容 -->

    Some things are no longer wanted, but I don't want to delete them yet. You can comment it out at this time.

    1. Explain the meaning of the code.
    2. When debugging code.

    shift + alt + a

    ctrl + /

    ​

    ​

    ​

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<head>标签Content in (****)

<body>标签Content in ()