CN112650479A

CN112650479A - Webpage CSS structure automatic generation method and storage medium

Info

Publication number: CN112650479A
Application number: CN201910959384.2A
Authority: CN
Inventors: 王海洋
Original assignee: Shanghai Bilibili Technology Co Ltd
Current assignee: Shanghai Bilibili Technology Co Ltd
Priority date: 2019-10-10
Filing date: 2019-10-10
Publication date: 2021-04-13

Abstract

The invention relates to a method and a device for automatically generating a webpage CSS structure and a storage medium, and belongs to the technical field of internet. Through the method of the invention, firstly, a container element is established in a webpage, and the identifier of the container element is set; assigning the HTML code to the container element, and generating a DOM tree with the identifier of the container element as a parent node; then traverse all nodes of DOM tree, generate corresponding CSS structure to realize the automatic generation of webpage CSS structure, especially under the condition that the WEB project structure is complicated, and the level of DOM element is more, can make the CSS structure clear, be convenient for maintain, and then greatly improve programmer's work efficiency. The automatic generating device for the webpage CSS structure has the advantages of simple structure, limited application cost and wide application range.

Description

Webpage CSS structure automatic generation method and storage medium

Technical Field

The invention relates to the technical field of internet, in particular to the technical field of WEB pages, and specifically relates to a method for automatically generating a webpage CSS structure and a storage medium.

Background

Usually, when a WEB project is just started, the project structure is relatively simple, and only a few pages are possible, and at this time, some basic CSS selectors such as title, input, and # app can be used for implementation, and several lines of codes can be completed by handwriting. However, as the application becomes larger and larger, the front-end interaction on the page increases, and in addition to the requirement of the semantic aspect of the HTML structure, the hierarchical relationship of DOM elements also increases, and the CSS code also becomes more and more complex. If the code is written row by row at this time, the efficiency is very low.

On the other hand, if the hierarchy of the CSS structure is not well processed, a problem often encountered is that it may occur that certain elements of the page may be obscured by other elements, although CSS provides some attributes such as position: relative or position: absolute, and z-index values to change the hierarchy of the elements. However, if the z-index is too large or its value is not sufficiently considered, the hierarchical relationship of the elements becomes more complicated conversely. And many developers are used to directly put all newly added CSS codes at the tail of the file instead of organizing the CSS codes according to a corresponding DOM structure, so that the CSS file is very difficult to maintain after more than 500 lines of the CSS file, and the development efficiency is greatly reduced.

Therefore, the conventional CSS handwriting method adopted by many developers in the industry has the following disadvantages: a. the handwriting mode is not efficient; when the levels of DOM elements are more, the CSS code level is more and more complex, and errors are easy to occur; c. as the CSS style has no strong check on the code structure, the handwriting mode is easy to have the problem that the code structure is disordered and is not easy to maintain. How to realize the automatic generation of the CSS structure when the WEB project structure is complex and the levels of DOM elements are more, so that the CSS structure is clear, the maintenance is convenient, and the method for improving the working efficiency becomes the problem to be solved in the field.

Disclosure of Invention

The present invention aims to overcome the defects in the prior art, and provides a method, an apparatus and a storage medium for automatically generating a webpage CSS structure under the condition of a complex WEB project structure, thereby facilitating maintenance and improving the working efficiency of programmers.

In order to achieve the above object, the method for automatically generating the webpage CSS structure of the present invention comprises the following steps:

(1) creating a container element in a webpage, and setting an identifier of the container element;

(2) obtaining HTML codes of the webpage;

(3) assigning the HTML code to the container element to generate a DOM tree with the identifier of the container element as a parent node;

(4) and traversing all nodes of the DOM tree to generate a corresponding CSS structure.

In the method for automatically generating the webpage CSS structure, the HTML codes are assigned to the container elements, and a DOM tree with the identifier of the container element as a parent node is generated, and the method specifically comprises the following steps: and acquiring an HTML structure of the webpage according to the HTML code, and then automatically generating a DOM tree corresponding to the HTML structure by taking the identifier of the container element as a parent node.

In the method for automatically generating the webpage CSS structure, the traversing of all nodes of the DOM tree generates a corresponding CSS structure, and the method specifically comprises the following steps: and traversing all nodes of the DOM tree by using JavaScript, and generating a corresponding CSS structure according to a preset rule.

In the method for automatically generating the webpage CSS structure, the corresponding CSS structure is generated according to a preset rule, and the method specifically comprises the following steps: and generating a CSS structure with corresponding hierarchy and sequence according to the hierarchy relation and the sequence of each node of the DOM tree.

In the method for automatically generating the webpage CSS structure, the hierarchical relationship and the sequence of each node are determined according to one or all of the label, the identification and the style name of each node.

In the method for automatically generating the webpage CSS structure, the style name is a preposed limited style name, the hierarchical relationship and the sequence of each node are determined according to the preposed limited style name of each node, and the CSS structure with the corresponding hierarchy and sequence is generated, which specifically comprises the following steps:

(41) judging whether the current element is given with the preposed limited style name or not, if so, acquiring the preposed limited style name, and if not, setting the preposed limited style name as a null character string;

(42) judging whether the container element is set with a container element style name or not, if so, entering a step (43); if not, entering step (45);

(43) generating new style rules according to the container element style names and the preposed limited style names, wherein each container element style name corresponds to one rule;

(44) generating a new preposed limited style name by combining the first container element style name according to the preposed limited style name, and entering the step (47);

(45) judging whether the container element has a child element, if so, entering a step (46), and if not, ending traversal;

(46) reading the sub-element list of the container element, and sequentially reading the sub-elements according to the order of the sub-elements;

(47) and taking the new preposed limited style name and the current sub-element as parameters, and returning to the step (41).

The method for automatically generating the webpage CSS structure further comprises the following steps: (5) and combining the generated CSS structures according to the generation level and the sequence and outputting the combined CSS structures.

The method for automatically generating the webpage CSS structure further comprises the following steps: (6) and storing the CSS structure as a CSS file.

In the method for automatically generating the webpage CSS structure, the CSS file is stored in the STYLE tag under the HEAD tag of the HTML structure.

The present invention also provides a computer-readable storage medium having a computer program stored thereon, where the computer program, when executed by a processor, implements the above-mentioned method for automatically generating a CSS structure of a web page.

The invention also provides a webpage CSS structure automatic generation device, which comprises a processor and a memory, wherein the memory is stored with a computer program, and the computer program is executed by the processor to realize the webpage CSS structure automatic generation method.

The method for automatically generating the webpage CSS structure and the storage medium are adopted, and the method comprises the steps of firstly creating a container element in a webpage and setting the identifier of the container element; assigning the HTML code to the container element, and generating a DOM tree with the identifier of the container element as a parent node; then traverse all nodes of DOM tree, generate corresponding CSS structure to realize the automatic generation of webpage CSS structure, especially under the condition that the WEB project structure is complicated, and the level of DOM element is more, can make the CSS structure clear, be convenient for maintain, and then greatly improve programmer's work efficiency. The automatic generating device for the webpage CSS structure has the advantages of simple structure, limited application cost and wide application range. Under the condition that the built-in CSS is not involved, and the text collection is not involved, the generation of the CSS framework structure is realized.

Drawings

FIG. 1 is a flowchart illustrating steps of a method for automatically generating a CSS structure of a web page according to the present invention.

Fig. 2 is a block diagram of an automatic web page CSS structure generation apparatus according to the present invention.

Fig. 3 is a flowchart illustrating an embodiment of a method for automatically generating a CSS structure of a web page according to the present invention.

Detailed Description

In order to clearly understand the technical contents of the present invention, the following examples are given in detail.

The WEB page, i.e. the WEB page, is a basic element constituting the website and is a main carrier for displaying information on the website. Usually, the web page runs in the browser, it can carry on various operations through the procedure running in the server according to the user's operation, and then return to the same or different page contents according to different customers, different time and different operations.

HTML (Hyper Text Markup Language), which is an application under a standard universal Markup Language, is both a specification and a standard. It tells the browser how to display the contents (such as how to process the words, how to arrange the pictures, how to display the pictures, etc.) by adding various markers in the text file. The browser will read the HTML files in sequence and then interpret and display their tagged content according to the tags. HTML developers can create powerful Web pages by using other Web technologies in conjunction (e.g., scripting languages, public gateway interfaces, components, etc.). Thus, the HTML hypertext markup language is also the basis for the world Wide Web (Web).

The DOM, the document object model, is a standard interface specification made by W3C, a standard API for handling HTML and XML files. The DOM provides an access model to the entire document as a tree structure, with each node of the tree representing an HTML tag or text item within a tag. The DOM tree structure accurately describes the interrelationship between tags in an HTML document. The process of converting an HTML or XML document into a DOM tree is called parsing (parse). The HTML document is converted into a DOM tree after being analyzed, so that the HTML document can be processed through the operation of the DOM tree. The DOM model not only describes the structure of the document, but also defines the behavior of the node object, and the nodes and the content of the DOM tree can be conveniently accessed, modified, added and deleted by using the method and the attribute of the object.

CSS (Cascading Style Sheets), which is a computer language used to represent file styles such as HTML or XML, may define Style structures such as fonts, colors, positions, etc. Are often used to describe the way information on a web page is formatted and rendered. The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages. CSS styles may be stored directly on the HTML web page or in a separate style sheet file. Either way, the style sheet contains rules that apply the style to elements of the specified type. For external use, style sheet rules are placed in an external style sheet document with a file extension cs. Style rules are formatting instructions that may be applied to elements in a web page, such as text paragraphs or links. A style rule consists of one or more style attributes and their values. The internal style sheet is directly placed in a webpage, the external style sheet is stored in an independent document, and the webpage is linked with the external style file through a special label.

JavaScript is an transliterated script language, which is a dynamic type, weak type, prototype-based language and a built-in support type. Its interpreter, called JavaScript engine, is a part of the browser, widely used in the scripting language of the client, and was originally used on the HTML web page to add dynamic functionality to the HTML web page.

Please refer to fig. 1, which is a flowchart illustrating steps of a method for automatically generating a CSS structure of a web page according to the present invention.

In one embodiment, the method for automatically generating the webpage CSS structure comprises the following steps:

(2) obtaining HTML codes of the webpage;

In a preferred embodiment, the assigning the HTML code to the container element and generating a DOM tree with the identifier of the container element as a parent node specifically include: and acquiring an HTML structure of the webpage according to the HTML code, and then automatically generating a DOM tree corresponding to the HTML structure by taking the identifier of the container element as a parent node.

Traversing all nodes of the DOM tree to generate a corresponding CSS structure, specifically: and traversing all nodes of the DOM tree by using JavaScript, and generating a corresponding CSS structure according to a preset rule.

In a further preferred embodiment, the generating a corresponding CSS structure according to a preset rule specifically includes: and generating a CSS structure with corresponding hierarchy and sequence according to the hierarchy relation and the sequence of each node of the DOM tree. And the hierarchical relationship and the sequence of each node are determined according to one or all of the label, the identification and the style name of each node.

In a further preferred embodiment, the step of determining the hierarchical relationship and the sequence of each node according to the pre-defined style name of each node and generating the CSS structure with the corresponding hierarchy and sequence includes the following steps:

In a more preferred embodiment, the method further comprises the steps of:

(5) and combining the generated CSS structures according to the generation level and the sequence and outputting the combined CSS structures.

(6) And storing the CSS structure as a CSS file.

The pre-defined style name and the style name can be preset manually according to actual requirements when creating container elements. The css file is stored in the STYLE tag under the HEAD tag of the HTML structure.

The invention also provides a device for automatically generating the webpage CSS structure and a computer readable storage medium. The automatic webpage CSS structure generating apparatus shown in fig. 2 includes a processor and a memory, where the memory is the computer-readable storage medium, and a computer program is stored on the memory. When executed by the processor, the computer program implements the method for automatically generating the web page CSS structure according to the above embodiment.

In practical application of the present invention, the corresponding CSS structure is automatically generated according to the set rules (such as tag, # ID,. CLASS, etc.) by traversing the hierarchy of the DOM tree. Therefore, the development efficiency is improved, the hierarchy of the generated CSS structure cannot be mistaken, and the whole CSS structure is clearer.

The method for automatically generating the webpage CSS structure of the invention is described by the specific embodiment below.

Example 1

As shown in fig. 3, the method for automatically generating a CSS structure of a web page of this embodiment may include the following steps:

step 1, opening a webpage in a browser, creating a container element in the webpage, and setting a unique identification (id) of the container, such as "main", wherein example codes are as follows:

step 2, obtaining HTML codes of the CSS organizational structure to be generated, wherein for example, one style name (class) is a parent div element of a page, three style names (class) are div elements of a header banner, a content and a footer respectively, an h1 element with a style name (class) of a page-title is arranged below a child div element with a style name (class) of the header banner, and the corresponding example codes are as follows:

step 3, assigning the HTML code obtained in the step 2 to an innerHTML attribute of the container element, and generating a child DOM tree with the container element main in the step 1 as a parent node;

step 4, traversing all nodes of the DOM tree to generate a CSS organizational structure, which comprises the following specific steps:

step 41 checks whether a "predefined style name" is given, such as: ". wrapper", where the term "pre-qualified style name" refers to a style rule containing multiple sub-levels such as: aa.bb.cc { }, the part of the style name before the last stage style name, (". cc"), i.e., ". aa.bb" is a "leading defined style name"; if the pre-defined style name is not given, setting the pre-defined style name as an empty character string, namely';

step 42, checking whether the style name of the container element is set; if so, continue to step 43; if the style name is not set, directly jumping to step 45;

step 43, combining the 'preposed limited style name' and the style name of the container element to generate a new style rule, wherein the rule is a rule for each style name; if the style name class of the container element is "book product," two rules are generated:

.wrapper.book{}

.wrapper.product{}

and 44, combining the first style name of the container element according to the preset limited style name to generate a new preset limited style name, such as: book, ". wrapper; the new "pre-qualified style name" is used later when sub-elements are processed;

step 45, judging whether the container element has a child element, if so, continuing the step 46, and if not, ending the round of traversal;

step 46, reading the sub-element list of the container element, and reading the sub-elements in sequence according to the order of the sub-elements;

step 47, taking the new 'preposed defined style name' and the current child element as parameters to step 41 to continue to iterate and traverse the child DOM tree;

and 5, combining all the generated pattern rules together according to the generation sequence, and outputting the combined pattern rules as follows:

.page{}

.page.banner{}

.page.header{}

.page.header h1.page-title{}

.page.content{}

.page.footer{}

example 2

Many WEB systems are subjected to authority control and can be used after a user logs in, so that a login page is indispensable in many systems as an entrance. In this scenario, typically at a login page, the user needs to enter a username, password, authentication code, and the like. In order to make the page more beautiful, the style of the page element needs to be controlled by the corresponding CSS, and besides, the title of the input box, the input prompt, the error prompt, the success prompt and the like need to write the corresponding CSS.

By using the method for automatically generating the webpage CSS structure, the DOM tree can be generated according to the given HTML structure, the DOM tree is traversed through JavaScript, the hierarchical relation and the sequence of each node are obtained, and then the CSS structure corresponding to the hierarchy and the sequence is generated. The method generally comprises the steps of:

step A: obtaining an HTML structure of a page;

and B: running a section of JavaScript code, and automatically generating a corresponding CSS structure according to the HTML structure;

and C: CSS structure code is saved as a file with the extension of cs or placed in a STYLE tag under the HEAD tag of the HTML structure.

The above method may be implemented by:

the generated CSS structure code is as follows:

.page{}

.page.header{}

.page.header h1.page-title{}

.page.main{}

.page.main.login{}

.page.main.login.bind-only{}

.page.main.login legend.title{}

.page.main.login input.username{}

.page.main.login.password-wrap{}

.page.main.login.password-wrap input.password{}

.page.main.login.tips{}

.page.main.login input.submit{}

.page.main.login.other-select{}

.page.main.login.other-select a.signup{}

.page.main.login.other-select a.forget-password{}

.page.main.mask{}

.page.main.mask.msg-menu{}

.page.main.mask.msg-menu.text{}

.footer{}

taking a WEB project with more than 50 pages as an example, in the case of complete HTML code, if at least 50 lines of CSS structure code are written in each page, at least 2500 lines of CSS structure code are written in the whole project. If, as is the case in the industry, developing efficiency, typically more than 500 lines of CSS code would take one day for a software engineer, then 2500 lines of code would be a 5 day workload for a software engineer. By using the method of the invention, the CSS structure of one page is generated under the condition that the HTML code is complete, only a few seconds are needed, the CSS structure code of more than 2500 lines is generated for a few minutes at most, and the generated CSS structure is more complete and clearer than the manual writing level.

The method comprises the steps of firstly creating a container element in a webpage and setting the identifier of the container element; assigning the HTML code to the container element, and generating a DOM tree with the identifier of the container element as a parent node; then traverse all nodes of DOM tree, generate corresponding CSS structure to realize the automatic generation of webpage CSS structure, especially under the condition that the WEB project structure is complicated, and the level of DOM element is more, can make the CSS structure clear, be convenient for maintain, and then greatly improve programmer's work efficiency. The automatic generating device for the webpage CSS structure has the advantages of simple structure, limited application cost and wide application range.

In this specification, the invention has been described with reference to specific embodiments thereof. It will, however, be evident that various modifications and changes may be made thereto without departing from the broader spirit and scope of the invention. The specification and drawings are, accordingly, to be regarded in an illustrative rather than a restrictive sense.

Claims

1. A webpage CSS structure automatic generation method is characterized by comprising the following steps:

creating a container element in a webpage, and setting an identifier of the container element;

obtaining HTML codes of the webpage;

assigning the HTML code to the container element to generate a DOM tree with the identifier of the container element as a parent node;

and traversing all nodes of the DOM tree to generate a corresponding CSS structure.

2. The method for automatically generating CSS structure of web page according to claim 1,

the assigning the HTML code to the container element, and generating a DOM tree with the identifier of the container element as a parent node, specifically:

and acquiring an HTML structure of the webpage according to the HTML code, and then automatically generating a DOM tree corresponding to the HTML structure by taking the identifier of the container element as a parent node.

3. The method for automatically generating CSS structure of web page according to claim 1,

traversing all nodes of the DOM tree to generate a corresponding CSS structure, specifically:

and traversing all nodes of the DOM tree by using JavaScript, and generating a corresponding CSS structure according to a preset rule.

4. The method for automatically generating the webpage CSS structure according to claim 3, wherein the generating of the corresponding CSS structure according to the preset rule specifically comprises:

and generating a CSS structure with corresponding hierarchy and sequence according to the hierarchy relation and the sequence of each node of the DOM tree.

5. The method for automatically generating the CSS structure of web pages according to claim 4, wherein the hierarchical relationship and the sequence of each node are determined according to one or all of the label, the identification and the style name of each node.

6. The method for automatically generating the webpage CSS structure according to claim 4, wherein the style name is a pre-defined style name, the step of determining the hierarchical relationship and the sequence of each node according to the pre-defined style name of each node and generating the CSS structure with the corresponding hierarchy and sequence comprises the following steps:

7. The method for automatically generating the CSS structure of web page according to claim 3, further comprising the steps of:

8. The method for automatically generating the CSS structure of web page according to claim 7, further comprising the steps of:

(6) and storing the CSS structure as a CSS file.

9. The method for automatically generating webpage CSS structure according to claim 8, wherein the cs file is stored in STYLE tag under HEAD tag of the HTML structure.

10. A computer-readable storage medium on which a computer program is stored, the computer program, when being executed by a processor, implementing the method for automatically generating a CSS structure for a web page of any one of claims 1 to 9.