CN112650479B

CN112650479B - Webpage CSS structure automatic generation method and storage medium

Info

Publication number: CN112650479B
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: 2024-09-03
Anticipated expiration: 2039-10-10
Also published as: CN112650479A

Abstract

The invention relates to a webpage CSS structure automatic generation method, a webpage CSS structure automatic generation device and a storage medium, and belongs to the technical field of Internet. By the method, firstly, a container element is created in a webpage, and the identification of the container element is set; assigning the HTML code to the container element, and generating a DOM tree taking the identifier of the container element as a father node; and traversing all nodes of the DOM tree to generate a corresponding CSS structure, so that automatic generation of the webpage CSS structure is realized, and the CSS structure is clear and convenient to maintain particularly under the conditions that the WEB project structure is complex and the DOM elements are more in level, and further the working efficiency of programmers is greatly improved. The automatic webpage CSS structure generating device is simple in structure, limited in application cost and quite wide in 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 an automatic webpage CSS structure generation method and a storage medium.

Background

Usually, the structure of the item is relatively simple just at the beginning of the WEB item, and may be only a few pages, and then some basic CSS selectors, such as title, input, # app, etc., are used, and handwriting of several lines of codes is completed. However, as applications become larger, front-end interactions on pages increase, and in addition to the semantic requirements of the HTML structure, the hierarchical relationships of DOM elements are more and more, and CSS codes are more and more complex. At this point, if the code is written line by line, the efficiency will be very low.

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

Therefore, the manner of handwriting CSS structure adopted by many developers in the industry currently has the following disadvantages: a. the handwriting mode is not efficient; when the hierarchy of DOM elements is more, the CSS code hierarchy is more and more complex and is easy to make mistakes; c. since the CSS style has no strong verification 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 CSS structure when WEB item structure is complex and DOM element level is more, thereby 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 invention aims to overcome the defects in the prior art, and provides a method, a device and a storage medium which can realize automatic generation of a webpage CSS structure under the condition of complex WEB project structure, thereby being convenient for maintenance and improving the working efficiency of programmers.

In order to achieve the above object, the automatic generation method of web page CSS structure of the present invention includes the following steps:

(1) Creating a container element in the webpage, and setting the identification of the container element;

(2) Obtaining HTML code of the webpage;

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

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

In the automatic webpage CSS structure generating method, the HTML code is assigned to the container element, and the DOM tree with the identifier of the container element as a parent node is generated specifically as follows: 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 identification of the container element as a father node.

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

In the webpage CSS structure automatic generation method, the corresponding CSS structure is generated according to a preset rule, specifically: and generating the CSS structure with corresponding levels and orders according to the level relation and the sequence of each node of the DOM tree.

In the automatic generation method of the webpage CSS structure, the hierarchical relationship and the sequence of each node are determined according to one or all of labels, identifications and style names of each node.

In the automatic webpage CSS structure generating method, the style names are pre-limiting style names, the hierarchical relation and the sequence of each node are determined according to the pre-limiting style names of each node, and the CSS structure with the corresponding hierarchy and sequence is generated, and the method specifically comprises the following steps:

(41) Judging whether the current element gives the prepositioned limiting style name, if so, acquiring the prepositioned limiting style name, and if not, setting the prepositioned limiting style name as an empty string;

(42) Judging whether the container element is provided with a container element style name, if so, entering a step (43); if not, go to step (45);

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

(44) Generating a new pre-defined style name according to the pre-defined style name and combining the first container element style name, and entering a step (47);

(45) Judging whether the container element has sub-elements or not, if so, entering a step (46), and if not, ending the traversal;

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

(47) And taking the new pre-defined style name and the current subelement as parameters, and returning to the step (41).

The automatic webpage CSS structure generating method further comprises the following steps: (5) The generated CSS structures are combined together in accordance with the generation hierarchy and order and output.

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

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

The invention also provides a computer readable storage medium, on which a computer program is stored, which when being executed by a processor, implements the above-mentioned automatic generation method of web page CSS structure.

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

By adopting the webpage CSS structure automatic generation method and the storage medium, firstly, a container element is created in a webpage, and the identification of the container element is set; assigning the HTML code to the container element, and generating a DOM tree taking the identifier of the container element as a father node; and traversing all nodes of the DOM tree to generate a corresponding CSS structure, so that automatic generation of the webpage CSS structure is realized, and the CSS structure is clear and convenient to maintain particularly under the conditions that the WEB project structure is complex and the DOM elements are more in level, and further the working efficiency of programmers is greatly improved. The automatic webpage CSS structure generating device is simple in structure, limited in application cost and quite wide in application range. The generation of the CSS framework is achieved without involving an in-built CSS or text collection.

Drawings

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

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

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

Detailed Description

In order to make the technical contents of the present invention more clearly understood, the following examples are specifically described.

The WEB page is a basic element forming a website, and is a main carrier for displaying information of the website. In general, a web page runs in a browser, and according to the operation of a user, various operations can be performed through a program running on a server, and then the same or different page contents can be returned according to different clients, different times and different operations.

HTML (Hyper Text Markup Language ), which is an application under standard universal markup language, is both a specification and a standard. It tells the browser how to display the content in the text file (e.g., how to process the text, how to arrange the pictures, how to display the pictures, etc.) by adding various markers to the text file. The browser will read the HTML file in sequence and then interpret and display its marked content based on the markers. HTML by using other Web technologies in combination (e.g., scripting languages, public gateway interfaces, components, etc.), developers can create powerful Web pages. Thus, HTML hypertext markup language is also the basis of the world wide Web (Web).

DOM, the document object model, is a standard interface specification formulated by W3C, a standard API for processing HTML and XML files. The DOM provides an access model for the entire document, with the document as a tree structure, with each node of the tree representing an HTML tag or text item within the 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 (parser). After the HTML document is parsed, the HTML document is converted into a DOM tree, so that the processing of the HTML document can be realized through the operation on the DOM tree. The DOM model not only describes the structure of the document, but also defines the behavior of node objects, and nodes and contents of the DOM tree can be conveniently accessed, modified, added and deleted by utilizing the method and the attribute of the objects.

CSS (CASCADING STYLE SHEETS, cascading style sheet), which is a computer language used to represent file styles such as HTML or XML, can define style structures such as fonts, colors, positions, etc. Are often used to describe the way information is formatted and rendered on a web page. The CSS not only can statically modify the web page, but also can dynamically format each element of the web page in cooperation with various scripting languages. The CSS style may be stored directly in the HTML web page or in a separate style sheet file. Either way, the style sheet contains rules that apply the style to the specified type of element. When used externally, the style sheet rules are placed in an external style sheet document with file extensions css. 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 the web page, the external style sheet is stored in a separate document, and the web page links the external style file through a special tag.

The JavaScript is an interpreted script language, which is a dynamic type, weak type, prototype-based language and built-in support type. Its interpreter is called JavaScript engine, which is a part of the browser, widely used in the scripting language of clients, and is used at the earliest on HTML pages to add dynamic functions to HTML pages.

Referring to fig. 1, a flowchart of steps of the automatic generating method of the web page CSS structure according to the present invention is shown.

In one embodiment, the webpage CSS structure automatic generation method includes the following steps:

(2) Obtaining HTML code of the webpage;

In a preferred embodiment, the assigning the HTML code to the container element generates 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 identification of the container element as a father node.

Traversing all nodes of the DOM tree to generate a corresponding CSS structure, wherein the corresponding CSS structure is specifically as follows: 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 the CSS structure with corresponding levels and orders according to the level relation and the sequence of each node of the DOM tree. The hierarchical relationship and the sequence of each node are determined according to one or all of labels, identifications and style names of each node.

In a further preferred embodiment, the style name is a pre-defined style name, and 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 a CSS structure with a corresponding hierarchy and sequence specifically includes the following steps:

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

(5) The generated CSS structures are combined together in accordance with the generation hierarchy and order and output.

(6) The CSS structure is stored as a CSS file.

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

The invention also provides an automatic webpage CSS structure generating device and a computer readable storage medium. The automatic generation device of the webpage CSS structure is shown in fig. 2, and comprises a processor and a memory, wherein the memory is the computer readable storage medium, and a computer program is stored on the memory. When the computer program is executed by the processor, the automatic generation method of the webpage CSS structure described in the above embodiment is realized.

In practical application of the present invention, the corresponding CSS structure is automatically generated according to the set rules (e.g., tags, # ID, # CLASS, etc.) by traversing the hierarchical structure of the DOM tree. Therefore, development efficiency is improved, the generated hierarchy of the CSS structure is free from error, and the whole CSS structure is clearer.

The automatic generation method of the webpage CSS structure is described by a specific embodiment.

Example 1

As shown in fig. 3, the automatic generation method of the web page CSS structure of this embodiment may include the steps of:

step 1, a webpage is opened in a browser, a container element is created in the webpage, and a unique identification (id) of the container is set, for example, "main", and example codes are as follows:

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

Step 3, assigning the HTML code obtained in the step 2 to INNERHTML attributes of the container element, and generating a child DOM tree taking the container element main in the step 1 as a father node;

and 4, traversing all nodes of the DOM tree to generate a CSS organization structure, wherein the method comprises the following steps of:

Step 41 checks whether a "pre-defined style name" is given, such as: ". wrapper, where reference is made to a" pre-defined style name "which refers to a style rule containing multiple sub-levels such as: aa.bb.cc { }, the part of style names preceding the last-stage style name ". Cc", aa.bb "is the" pre-defined style name "; if the ' pre-defined style name ' is not given, setting the ' pre-defined style name ' as an empty string, namely ';

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

Step 43, generating new style rules by combining the 'pre-defined style names' and the style names of the container elements, wherein the rule is a rule of each style name; if the style name of the container element is class= "book product", two rules are generated:

.wrapper.book{}

.wrapper.product{}

step 44, combining the first style names of the container elements according to the 'pre-defined style names', and generating new 'pre-defined style names', for example: ". wrapper book"; the new "pre-defined style name" will be used when the child element is processed later;

Step 45, judging whether the container element has sub-elements, if yes, continuing step 46, and if no, ending the round of traversal;

Step 46, reading a sub-element list of the container element, and sequentially reading the sub-elements according to the sequence of the sub-elements;

step 47, taking the new 'pre-defined style name' and the current sub-element as parameters to carry out step 41 to continue iterating through the sub-DOM tree;

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

.page{}

.page.banner{}

.page.header{}

.page.header h1.page-title{}

.page.content{}

.page.footer{}

Example 2

Many WEB systems have permission to be controlled and require users to log in before use, so login pages are indispensable to many systems as portals. In this scenario, typically on a login page, the user needs to enter a user name, password, authentication code, etc. 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 corresponding CSS needs to be written for inputting a frame title, inputting a prompt, making an error prompt, successfully prompting and the like.

By using the webpage CSS structure automatic generation method, a DOM tree can be generated according to a given HTML structure, then the DOM tree is traversed through JavaScript, the hierarchical relationship 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 following steps:

Step A: obtaining an HTML structure of a page;

and (B) step (B): a section of JavaScript code is operated, and a corresponding CSS structure is automatically generated according to the HTML structure;

Step C: the CSS structure code is either stored as a file with an extension of. CSS, or placed in the STYLE tag under the HEAD tag of the HTML structure.

The above method can be implemented by the following codes:

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, if the HTML code is complete, if at least 50 lines of CSS structure code are written per page, then at least 2500 lines of CSS structure code are written for the entire project. If the development efficiency per industry is generally over 500 lines of CSS code, which requires a software engineer to consume a day, 2500 lines of code is a5 day effort of a software engineer. Under the condition that the HTML code is complete, the method of the invention generates the CSS structure of one page, which only takes a few seconds, and generates more than 2500 lines of CSS structure codes, which are a few minutes at most, and the generated CSS structure is more complete and clearer than the manual writing level.

The automatic generation method storage medium of the webpage CSS structure adopts the method, firstly, a container element is created in the webpage, and the identification of the container element is set; assigning the HTML code to the container element, and generating a DOM tree taking the identifier of the container element as a father node; and traversing all nodes of the DOM tree to generate a corresponding CSS structure, so that automatic generation of the webpage CSS structure is realized, and the CSS structure is clear and convenient to maintain particularly under the conditions that the WEB project structure is complex and the DOM elements are more in level, and further the working efficiency of programmers is greatly improved. The automatic webpage CSS structure generating device is simple in structure, limited in application cost and quite wide in application range.

In this specification, the invention has been described with reference to specific embodiments thereof. It will be apparent that various modifications and variations can be made without departing from the 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. The automatic webpage CSS structure generation method is characterized by comprising the following steps of:

Creating a container element in the webpage, and setting the identification of the container element;

Obtaining HTML code of the webpage;

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 identification of the container element as a father node;

traversing all nodes of the DOM tree, determining the hierarchical relationship and the sequence of each node according to the preposed limiting style names of each node of the DOM tree, and generating a CSS structure with corresponding hierarchy and sequence, wherein the method specifically comprises the following steps:

2. The automatic generation method of web page CSS structure according to claim 1, wherein said traversing all nodes of said DOM tree is specifically:

traversing all nodes of the DOM tree by using JavaScript.

3. The automatic generation method of web page CSS structure according to claim 1, further comprising the steps of:

4. The automatic generation method of web page CSS structure according to claim 3, further comprising the steps of:

(6) The CSS structure is stored as a CSS file.

5. The method for automatically generating CSS structures of a web page according to claim 4, wherein said CSS file is stored in a STYLE tag under the HEAD tag of said HTML structure.

6. A computer-readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the web page CSS structure automatic generation method of any one of claims 1 to 5.