Writing High-Quality Code Web Front-End Development Practice Book Excerpts
|
(P4) Web standards are composed of a series of standards. The core concept is to separate the structure, style and behavior of web pages, so it can be divided into three parts: structural standards, style standards and behavioral standards. Style standards - XML standards, XHTML standards, HTML standards; Style standards — CSS standards; Behavior standards — DOM standards and ECMAscript standards; (P23)CSS layout is commonly known as Div + CSS layout, or (X)HTML + CSS layout. The core idea is to use CSS to control the style of elements in a web page, including position, size, color, etc. (P26) CSS layout is just one part of web standards. Among the three elements of HTML, CSS, and Javascript, HTML is the most important, structure is the focus, and styles are used to modify the structure; First determine the HTML, determine the semantic standards, and then choose the appropriate CSS; (P27) The browser will give a default style based on the semantics of the tag; (P29) Web Developer —— Web page debugging plug-in (P43) In places where the semantics are not obvious and either <P> or <div> can be used, try to use <P>, because <P> has upper and lower spacing by default, and it is more readable after removing the style, which is beneficial for compatibility with special terminals; (P46) If you omit the DTD declaration, Firefox will still parse the web page according to the standard style, but IE (including IE6, IE7, and IE8) will trigger the quirks mode; A way to organize CSS - base.css + common.css + page.css (P58) Modules should not contain the same parts as other modules. If there are any common parts, they should be extracted and split into independent modules. (P60) Modules should be as simple as possible while keeping the number as small as possible to improve reusability; (P71) The class attribute in HTML standard is different from the id attribute. You can only have one id, but you can have multiple classes, separated by spaces. (P81) If you are not sure that the upper and lower margins of a module are particularly stable, it is best not to write them into the module class, but to use a combination of classes and hang separate atomic classes for the upper and lower margins for the border; (P81) The weight rule is this: the weight of an HTML tag is 1, the weight of a class is 10, and the weight of an id is 100; (P82) If the CSS selectors have the same weight, the style will follow the proximity principle. The style of the selector that is defined last will be used. The "proximity principle" refers to the order in which the selectors are defined, not the order in which the class names are defined. (P84) To ensure that styles can be easily overridden and improve maintainability, CSS selectors should have the lowest possible weight. (P85) The fewer subselectors you use, the more classes you need to add; (P87) CSS Sprite "Image Flip Technology" - combine multiple images into one, and then use the background-position property to display the required part; (P88) Whether to use CSS Sprite depends mainly on website traffic; (P89) In general, it is recommended to use class as much as possible and use id less; (P93) CSS hacks 1. IE conditional comment method <!-- [if IE]> ...... <![endif]> 2. Selector prefix method *html *+html 3. Style attribute prefix method "_" "*" (P94) The four states of the <a> tag are sorted - Love Hate principle - L(link)ov(Visible)e, H(Hover)a(Active)te; (P95) Block-level elements: div, p, form, ul, ol, li Inline elements: span, strong, em Block-level elements occupy a single line, and by default, their width automatically fills the width of their parent element; Inline elements will not occupy a single line. Adjacent inline elements will be arranged in the same line until one line is full, and then they will wrap to another line. The width of the line changes with the content of the element. (P95) Block-level elements can set width and height attributes; Setting width and height attributes for inline elements is invalid; (P96) Block-level elements can set margin and padding attributes. For inline elements, only horizontal margin and padding produce margin effects; (P97) The CSS related property for block-level elements and inline elements is display, where block-level elements correspond to display: block and inline elements correspond to display: inline. You can switch between block-level elements and inline elements by modifying the display property; (P103) Both position: relate and position: absolute can change the position of an element in a document. Setting position: relative and position: absolute can activate the left, top, right, bottom and z-index properties of the element (these properties are not activated by default and have no effect even if set); By default, all elements are at z-index 0. Setting position: relative or position: absolute will make the element "float"; position: relative — will keep its position at z-index: 0; position: absolute - it will be completely out of the document flow and no longer remain a placeholder at the z-index: 0 layer. Its left, top, right, and bottom values are relative to its nearest ancestor element that has position: relative or position: absolute set. If none of the ancestor elements have position: realtive or position: absolute set, then they are relative to the body element; (P104) The float element attribute will not make the element "float up" to another z-index layer. It still keeps the element arranged at the z-index: 0 layer. The float cannot precisely control the coordinates of the element through the left, top, right, and bottom attributes. It can only control the "left floating" and "right floating" of the element in the same layer through float: left and float: right. Flaot will change the normal document flow and affect surrounding elements; As long as any of position: absolute, float: left or float: right is set, the element will be displayed in display: inline-block mode - the length and width can be set, and the default width does not fill the parent element. Even if display: inline or display: block is explicitly set, it will still be invalid. It is worth noting that position: relative does not implicitly change the display type; (P104) Center the inline elements horizontally — text-align: center Horizontally center block-level elements (determine width) - margin-left: auto and margin-right: auto (P111) There is a vertical-align property in CSS for vertical centering, but this vertial-align property will only take effect when the parent element is <td> or <th>; By default, the <td> tag implicitly sets the vertical-align value to middle; (P114) Note: The content of main is more important than the sidebar. No matter which one is on the left or the right of the sidebar, the HTML tag of main should be loaded before the sidebar. (P136) Wrapping the script with an anonymous function can effectively control global variables and avoid potential conflicts; (P147) Adding necessary comments can greatly improve the maintainability of the code, which is even more necessary for teamwork; To prevent JS from causing conflicts, you need to avoid the proliferation of global variables, use namespaces properly, and add necessary comments to the code; (P153) The window object will trigger the onload event after all elements in the web page are loaded; (P153) DOMReady only determines whether all DOM nodes in the page have been generated. It does not care whether the content of the child nodes has been loaded. DOMReady is triggered faster than window.onload; (P159) CSS is placed in the page header, Javascript is placed in the page footer; (P174) attachEvent is a method supported by IE, while addEventListener is a method supported by Firefox. The attachEvent and addEventListener methods support superposition of listener processing functions, rather than overwriting. (P185) Many open source Javascript libraries can provide us with powerful base and common layers. The most common Javascript libraries include jQuery and YUI. (P186) jQuery itself is divided into two parts: the jQuery core files and the jQuery UI files. jQuery UI files depend on jQuery core files; The jQuery core file provides base layer functions and some common layer functions, and the jQuery UI file provides common layer functions; (P194) Because the same id can only appear once in a page, it is not suitable for obtaining a group of DOM nodes with "similar functions"; Using tag names to get DOM nodes makes the program too tightly coupled with the HTML structure; (P196) An id can only appear once on the same page, so if your program needs to be reused in multiple places, you must not use the id as a hook for Javascript to obtain DOM nodes; (P198) Components need to specify a root node to maintain the independence of each component; (P205) If a factor in a function is very unstable, we can separate it from the function and pass it in as a parameter, thereby decoupling the unstable factor from the function; (P223) The full English name of object-oriented is Object Oriented, abbreviated as OO. OO actually includes OOA (Object Oriented Analysis), OOD (Object Oriented Design) and OOP (Object Oriented Programming). Object-oriented syntax only corresponds to OOP and is only a part of OO; OOA and OOD are object-oriented programming ideas, which have nothing to do with specific languages, while OOP is an object-oriented programming tool, which is related to the selected language; OOA and OOD are independent of the specific requirement language and can generally be easily reused across languages; (P224) From a macro perspective, it is not OOP but OOA and OOD that determine the quality of a program. (P225) Functions in Javascript can be used as ordinary functions or as classes. When acting as a class, it also bears the responsibility of a constructor. (P228) The properties defined with this xxx are public, while the properties defined with var xxx are private; (P230) Behaviors in prototypes must be public and cannot access private properties; (P231) Private behavior placed in the constructor achieves true semblance of existence; (P253) Whether in a class constructor or in a prototype, this refers to the instantiated object; (P239) As a function, its this refers to the window object, while as a class constructor, its this refers to the instantiated object; (P259) For common attributes, node.xxx is used to read them. For custom attributes, node.getAttribute("xxx") is used to read them. |
<<: Vue Element-ui implements tree control node adding icon detailed explanation
>>: CSS injection knowledge summary
Recommend
Web Design Experience: Self-righteous Web Designers
1. Trash or Classic? Web technology updates very ...
MySQL 8.0.15 download and installation detailed tutorial is a must for novices!
This article records the specific steps for downl...
Analysis of the usage of process control functions/statistical functions/grouping queries in MySql
The road ahead is long and arduous, but I will co...
The MySql 8.0.16 version installation prompts that "UTF8B4" is used instead of "UTF8B3"
When installing in MySQL 8.0.16, some errors may ...
Introduction to installing JDK under Linux, including uninstalling OpenJDK
1. View openjdk rpm -qa|grep jdk 2. Delete openjd...
Summary of common commands for Ubuntu servers
Most of the commands below need to be entered in ...
JS uses canvas technology to imitate echarts bar chart
Canvas is a new tag in HTML5. You can use js to o...
A detailed introduction to deploying RabbitMQ environment with docker
Prerequisites: Docker is already installed 1. Fin...
Vue realizes the palace grid rotation lottery
Vue implements the palace grid rotation lottery (...
How to make a div height adaptive to the browser height
This old question has troubled countless front-end...
Detailed explanation of Nginx http resource request limit (three methods)
Prerequisite: nginx needs to have the ngx_http_li...
A time-consuming troubleshooting process record of a docker error
Table of contents origin Environmental Informatio...
MySQL multi-instance installation boot auto-start service configuration process
1.MySQL multiple instances MySQL multi-instance m...
Example analysis of mysql stored procedure usage
This article describes the usage of MySQL stored ...
Use js to write a simple snake game
This article shares the specific code of a simple...