Front End Web Page Manual (1)- Basic learning

preface

Learning strategies

Step 1: Read through the HTML/CSS/JavaScript/PHP tutorial to understand its main functions and have a basic idea of its syntax.

Second step, go through the tutorial again, in the process of this time, encounter interesting features for code reproduction, learning HTML or any front-end knowledge need to exercise, “WHAT you see is what you get”!

The third step, randomly open a web page, F12, view the source of its web page, analysis of the structure of the web page;

Learning tutorial

www.runoob.com/html/html-t…

www.runoob.com/css/css-syn…

www.runoob.com/js/js-tutor…

www.runoob.com/php/php-tut…

Read through the first time

HTML

  • HyperText Markup Language (HTML) is a standard Markup Language for creating web pages. HTML is not a programming language, but a markup language, a set of markup tags.

  • When the page is displayed, the browser removes extra Spaces and empty lines from the source code. All consecutive Spaces or empty lines count as one space. Note that all consecutive empty lines (newlines) in the HTML code are also displayed as a space. That is, HTML ignores the typography of the original text, and everything is defined by tags and attributes.

  • Elements in HTML are divided into tags and attributes. HTML tag attributes many, one-time learn not to come over, just start to remember the basic, and then refer to: attached: HTML tag attributes www.runoob.com/tags/html-r…

  • CSS was first used in HTML4 and was introduced to render HTML elements better. You can add them to HTML in the following ways: Inline style – use the “style” attribute in HTML elements; Internal style sheets – Use elements in the HTML document header to contain CSS External references – Use external CSS files;

  • Learn it, suddenly want to understand the underlying knowledge of HTML browser, can see the browser open source projects: blog.csdn.net/u012532263/…

  • Map mapping can be set for the image area in HTML, so that you can click different areas to jump to different interfaces.

  • Elements can be combined using div or SPAN, the former at the block level and the latter at the row level.

  • HTML needs to pay attention to layout, layout is to plan the location and attributes of the page in advance, build the theme frame of the page, commonly used div or table:

​ See:www.runoob.com/html/html-l…

  • You can use the form attribute to get the user’s output. A submit button is defined, and the contents of the form are sent to another file. The action property of the form defines the file name of the destination file. The file defined by the action property typically handles the input data received. See: www.runoob.com/html/html-f…

  • Using the browser framework IFrame, you can realize the nested display of web pages, that is, part of a page is used to display the content of other pages, see: www.runoob.com/html/html-i…

  • The use of script script, can achieve more dynamic and interactive web pages, common scripting languages such as JavaScript, it defines the behavior of the web page, HTML defines the content of the web page, CSS defines the layout of the web page. Learn JavaScript to attend: www.runoob.com/js/js-tutor…

  • XHTML is derived to solve some of the non-standard writing of HTML. It almost appeared at the same time with HTML4, and it forced the standardization of SOME HTML syntax.

CSS

  • CSS refers to Cascading Style Sheets, which define how to display HTML elements;

  • CSS rules are made up of two main parts: selectors, which are usually HTML elements that you need to style, and one or more declarations. Each declaration consists of a property and a value.

  • CSS can make HTML tables, lists, links and other attributes have more form;

  • The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. See: www.runoob.com/css/css-box…

  • You can use the margin attribute to achieve the spacing of the first line of text in Markdown’s blog, for example:

    xxxx

  • CSS can use grouped and nested selectors for unified style management of specific categories of elements. See www.runoob.com/css/css-gro…

  • The overflow property is used to control how content is displayed when it overflows the element box, such as scrolling through a pulley.

  • For more information on image and text alignment, please refer to www.runoob.com/css/css-ali…

  • As a standard HTML foundation one is required, commonly used lists to implement, see: www.runoob.com/css/css-nav…

  • How to design a beautiful drop-down menu? And hit Show? www.runoob.com/css/css-dro…

  • The @media media type allows you to specify how files will be rendered in different media. The file can be displayed in different ways on screen, on paper, or in an auditory browser, etc. See: www.runoob.com/css/css-med…

  • Use CSS to achieve web layout, see: www.runoob.com/css/css-web…

PHP

  • PHP is a powerful server-side scripting language for creating dynamic, interactive sites. All of its functions are linked to: Reference manual. Custom and built-in functions are case-insensitive;
  • PHP has four types of scopes: local, global, static, and parameter. Global is a global scope. If you want to use a global variable in a local function, you need to declare it with the global keyword. Parameter refers to the function parameter. The global variable global refers to the array of the super global variable $GLOBALS, where the subscript is the variable name.
  • The real power of PHP lies in its functions, more than 1,000 of which are built in, as described in the Reference manual.
  • Magic constants are predefined variables provided by PHP. There are eight typical examples: _LINE_ Current line number; _FILE_ File path and name; _DIR_ File directory (path only); _FUNCTION_ Returns the current function name; _CLASS_ returns the name of the current type; _TRAINT_ To implement “multiple inheritance”, see the trait in PHP. _METHOD_ returns the method name of the class; _NAMESPACE_ Returns the name of the current namespace;
  • For the declaration and use of namespaces, see namespaces.
  • For the object-oriented section of PHP, see PHP object-oriented, which, to be honest, is very similar to C++.
  • There is no integer division in PHP, and since PHP does not define variable types, you need to understand conversions between variables like string to integer, string to Boolean, and so on;
  • Use GET and _GET and GET and _POST to retrieve information from a form, such as getting user input; Forms can also be verified, see form validation, reduce the burden of server validation and faster;
  • For an example of PHP using MYSQL, see PHP_MYSQL;

JavaScript

  • Javascipt is also a scripting language that is widely used in servers and browsers. It can write directly to the HTML output stream, react to events, change HTML content, and change HTML styles. Modify the object by obtaining the attribute value in the HTML of the web page); Validate input and so on;
  • JavaScript has no printing or output functions, ** only “output” data through display methods, ** such as window.alert() pop-up warning box; Write content in an HTML document using documen.write(); InnerHTML writes to the HTML element; Console.log () writes to the browser’s console.
  • Variables in JavaScript are declared and defined using var, and variables are dynamically typed. A semicolon. Endings are optional;
  • It is also an object-oriented language with properties and methods, as described in Objects and Properties.

(To be continued)