1, HTML related introduction
What is HTML? Html is a hypertext markup language. HTML5 is the fifth version of HTML language. Explain hypertext and markup language respectively
Hypertext means that there can be pictures, links, music, programs and other non text elements in a page. What is markup language?
Markup language is a combination of text and other information to show computer text coding about document structure and data processing details
Let's briefly talk about the bumpy development history of HTML
In 1982, Tim Berners Lee established HTML
In 1993, Marc Andreessen, a college student, added a tag to his Mosaic browser to browse pictures on the web
In June 1993, HTML was published by the IETF working group
In October 1994, W3C was established, and the standards and specifications for network application development were formulated and promoted by W3C Association
In November 1995, HTML2.0 was declared obsolete in June 2000
In January 1996, HTML3.2 was recommended as a standard by W3C. In 1997, HTML4.0 was recommended as a standard by W3C
In December 1999, HTML4.01 was rebuilt with XML syntax, which is more strict and is recommended by W3C
January 2000, XHTML 1.0, W3C recommendations may 2001, XHTML 1.1, W3C recommendations
From 2004 to 2009, the WHATWG group was established, which was composed of major browser developers to regain the HTML4 specification and develop the HTML5 specification; W3C conceded 2, admitted that XTHML2.0 would not succeed, re established the HTML working group and fully invested in the development of HTML5 specification.
In 2011, Google announced the full adoption of HTML5 technology
In 2012, HTML5 was selected as a candidate standard
On October 28, 2014, HTML5.0, W3C officially released HTML5.0 recommendation!
2, B/S architecture
B is all clients (some mobile apps and applets) used by browser users. We can regard it as a browser, and S is a server. Working mechanism: the browser sends a request to the S-end server through http and other Internet protocols, the S-end sends the web page file to the front end, and the b-end browser receives it
After accessing the file, the browser parses it into a graphical interface for user operation.
!DOCTYPE html> <!-- html5,html The fifth version of the language Hypertext markup language One release,You can see it everywhere Above is html5 Identification of,Tell the browser this is according to HTML5 Standard written--> <html> <head> <!-- Header, settings on page background --> <meta charset="utf-8"> <!-- meta Meta tag --> <!-- charset Coding format--> <!-- GB-2312 national standard GBK National standard extension package --> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello,World!</title> </head> <body> <div>Meaningless label</div> <p>Paragraph label</p> <span>Meaningless label</span> <img src="https://p5.ssl.qhimgs1.com/t01ce18dde7067b71a5.jpg"> <ul type="circle"> <!-- Unordered list --> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <ol type="I"> <!-- Ordered list --> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> <input type="text" name=""> <input type="number" name=""> <input type="password" name=""> Gender: <input type="radio" name="gender">male <input type="radio" name="gender">female <br> <!-- check box --> <input type="checkbox" name=""> <a href="https://www.baidu.com"> use Baidu Search </a> <h1>1 Level title</h1> <h2>2 Level title</h2> <h3>3 Level title</h3> <h4>4 Level title</h4> <h5>5 Level title</h5> <h6>6 Level title</h6> </body> </html>
3, css Foundation
css common properties
Width: width;
height: length;
Background: background (a composite attribute);
Background color: background color;
Characteristics of css cascading style sheets
1. Inheritance
2. It is laminated and can be covered
External style sheets (linked style sheets)
<link rel="stylesheet" type="text/css" href="css/main.css">
Style attribute = Later attribute value Inline style sheet, extremely poor, not allowed
<div style="width: 100px;height: 100px;background: lightblue;">
class priority
1. the latecomers become the first to has the final say.
2. In line style > header style > = external style
3. more precise has the final say id>class> label.
4.!important has the highest priority, but it is not used when it is necessary
li{ color: red; } /*tag chooser */ #xiaoMing{ color: pink; } /*id Selector, id unique and not repeated*/ .xiaoHong{ color: lightblue; } /*class Class name selector*/
4, Nomenclature
Hump nomenclature:
Small hump naming method: except the first word, other words are capitalized, such as HelloWorld. The first word of variable HelloWorld is all lowercase, and the following words are capitalized, which is commonly used in function names
Hump nomenclature: the first word is capitalized and the following word is capitalized, such as HelloWord
Underline nomenclature: underline between two words, Such as xiao_ming