Home > Developer > JavaScript
Restructured HTML to improve Web application design, restructured html to improve web
This article summarized and reconstructed several rules and practices for improving Web application design in HTML from the perspectives of good structure, effectiveness, and layout. Refer to "Rebuilding HTML to improve Web application design".
Rebuild. What is refactoring? Why is reconstruction required.
Refactoring is a process of gradual code improvement by making minor changes without changing the program behavior. Remove the code that has been accumulated for a long time to get code that is clearer and easier to maintain, with debugging and new functions. This method cannot only appear in the later stages of coding, even when you realize that your code can no longer be rewritten, you can start to develop, accumulate, and modify it gradually. In the past, due to the randomness of daily coding, problems were gradually accumulated and gradually spread. In the end, problems could only be re-initiated. If time cannot be replayed, you have no choice but to rebuild it.
No matter what you do, do not neglect to know about improvement because of the pursuit of perfection. If there is enough time for reconstruction, do it. You can do more in the future. Although the overall restructuring design is eye-catching and memorable, but there is no daily accumulation, how can we reap huge achievements? Your goal should be to make the code change every day. After several months, I believe we can all be proud and clear.
Good Structure
The first task of converting a tag into a compliance with modern standards is to achieve a good structure. It ensures the uniqueness of the DOM operable document tree structure, and thus becomes the basis for reliable cross-browser javascript code. For a messy page, any reliable automatic processing or testing is very difficult to guarantee. Secondly, the display effect of browser pages is unpredictable. For messy pages, different browsers use different methods to supplement the actual fragments and correct the errors. Therefore, the most important thing to refactor HTML is to achieve page structuring.
To achieve a better structure, most websites must at least or all of the following:
In the past, due to personal programming habits and mistakes that may be easily made at random, there are several points worth special attention from the perspective of structure.
Key points for better implementation and structure:
Validity
The validity ratio is slightly more strict, that is, not only ensure that the syntax of the document is correct, but also ensure that the semantics is correct. Ensure that elements and attributes can only appear in proper places according to their own semantics.
Effectiveness is the cornerstone of future-oriented development. A valid website has nothing to do with the device. A valid page delivers the same information to different readers, even if the readers use browsers with different interfaces.
The structure and validity check are the basic syntax constraints, and the semantics should be appropriate.
Implementation Method:
1. Add the transitional DOCTYPE statement
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
The transitional DTD allows you to validate documents without the need for full semantic tagging, and allows the inclusion of I, B, and center, and other non-recommended Performance Meta books. Therefore, before further improving the semantics of a document, you can identify more serious structural problems than fixing.
2. Delete All nonexistent tags.
3. Use CSS to replace centers, I, font, and other labels that are not recommended or discarded.
4. Place the inline element in the block element.
To be effective, all the elements in the document are valid and strict XHTML elements are not enough. The correct relationship between them must also be ensured. The browser and other programs must process the correct location between XHTML elements.
Do you like this pictrue? <Br/> I think it's really <em> neat </em> <! -- Rewrite to --> <p> Do you like this pictrue? <Br/> </p> <div> </div> <p> I think it's really <em> neat </em> </p>
Layout
1. Familiar with element Semantics
Each element should have its own role: ul is an unordered list, ol is an ordered list, table is table-type data, blockquote is an application, h1 ~ H6 is the title. Appropriate semantic elements help screen readers to present a structure that is easier to understand and ensure correct display between different platforms. For beginners, many metabooks with good semantics, such as ul, blockquote, and table, are abused to achieve a specific layout effect. These misuse aims to generate a specific appearance for the webpage, but these appearances are difficult to cross-browser. They are generally not common in many places except for the designer's own computer.
| Failed: In order to achieve the navigation effect, the content semantics was not taken into account at the beginning, and the main navigation item and the associated menu were unintentionally separated. In css, the relative positioning was used to set the top and left attributes, move the related menu to the relevant main item. This will lead to a serious problem. Once different pages are placed on screens with different resolutions, the menu will be misplaced. That is to say, different top and left attributes must be designed for screens with different resolutions. <Div class = "nav"> <div class = "nav01"> menu 1 </div> <div class = "nav02"> menu 2 </div> <div class = "nav03"> menu 3 </div> <div class = "menu"> <div class = "menu01"> sub-menu 1 </div> <div class = "menu02"> sub-Menu 2 </div> <div class = "menu03"> sub-menu 3 </div> Optimize the HTML structure of the designed navigation, and combine the main menu and sub menu: <Nav> <ul class = "clear"> <li class = "first"> <a href = "#"> menu 1 </a> </li> <li> <span class = "Darrow"> </span> <a href = "#"> menu 2 </a> <dl> <dt> <span class = "arrow"> </span> </dt> <dd> <a href = "#"> sub-menu 1 </a> </dd> <a href = "#"> sub-Menu 2 </a> </dd> <a href = "#"> sub-menu 3 sub-menu 3 </a> </dd> </dl> </li> <span class = "Darrow"> </span> <a href = "#"> menu 3 </a> <dl> <dt> <span class = "arrow"> </span> </dt> <dd> <a href = "#"> sub-menu 1 </a> </dd> <dd> <a href = "#"> sub-Menu 2 </a> </dd> <a href = "#"> sub-menu 3 sub-menu 3 </a> </dd> </dl> </li> </ul> </nav>
|
The purpose of HTML writing is not to provide a structure or page appearance, but to better present the content. Therefore, before writing HTML, you must consider which semantic elements should be used for this content.
Appropriate HTML is ideal for cross-browser processing. After obtaining the web design diagram, you must stop thinking about the appearance of the page before starting to build a web application. Instead, you should start to think about what the page expresses.
2. Replace the table layout
CSS-based pages are smaller and simpler than table-based pages.
A) easier to write and edit, faster to download,
B) You can save bandwidth by turning to CSS. At the same time, external css files can be cached and reused, so you do not have to re-download each page.
Instead of abusing the table elements used to present table data and using table layout, you can consider the frequently used column layout:
1) two columns, left-side fixed-width sidebar, and right-side elastic-width content sidebar
2) three columns, left and right columns with fixed width, with content in the middle.
| Based on previous project development experience: The column height is determined by the internal capacity they contain. For websites with a large proportion of content, the column height is fixed because the height of a single content column is not guaranteed to be the same as that of other columns. For websites with simple content and short pages, not fixed height. In addition, the div of the subject content should be in the sidebar, before the page header or footer, so that the screen reader can linearly read the page from the most important content of the page. The search engine robot can also give a higher priority to the content in front of the page. There are three possible widths for the two-column layout: (1) the width of the two columns is fixed. Most commonly, the fixed width may be too large for some users. If the width is too large, users must scroll the horizontal content to view the content, reducing text readability. (2) the left column is fixed, and the content bar is the percentage width. (3) Both columns are percentages. For better user experience, the subject content should be adjusted to adapt to different window widths. |
3. Separation of content and style
Of course, our pages also need beautiful appearances to help us stand out from the competition. This can be achieved by placing information about the representation in an independent CSS style. CSS is used to describe the appearance of a webpage, And the browser can freely select different style sheets or modified style sheets. In fact, you can send different style sheets to different browsers at will, or customize their unique capabilities. This is the basic implementation method of responsive design.
"A responsive webpage not only responds to different types of devices, but also needs to respond to different user needs. The original intention of the response is to make information better transmitted and communicated, so that everyone can access information without permission. At the same time, this is also the original intention of the Web ."
For convenience or encoding habits, it is easy to directly embed the style code in html code when modifying the style code for certain changes. This method does not have any benefit except for faster completion of your temporary tasks.
4. Use CSS to locate the Alternative Framework
There are actually two reasons for using the website framework:
(1) introduce the same static content to all pages without editing each page separately. For example, navigation, the head and tail of the web page. That is to say, a separate non-framework page may consume more bandwidth than the corresponding framework page, because the framework content needs to be resent to the client each time.
(2) display the appearance of multiple columns. For example, Java API, including the list of packages and classes, subject content
However, excessive use of the framework will reduce availability:
(1) It is difficult to mark thousands or return to a specified page
(2) difficult to save and print pages
(3) Too many scroll bars occupy valuable space on the screen
Navigation on each page has the same or almost the same content as others, which is very common for websites. The key to replacing the framework with CSS is to set up the div corresponding to each frame, each div content corresponds to the document content in the framework. However, the problem is that it violates the DRY principle (Don't Repeat Youself, Don't Repeat yourself). For the same content, although sometimes it is only a small change, however, we still need to repeat the page on this page. Repeated content is often a bad taste of code. The framework avoids unnecessary duplication on static pages. I advocate clear and maintainable code without compromising the user interface, I chose the ugly code instead of the ugly user interface. In daily life, the original HTML is repeated, but it is not edited. In many cases, we can automatically generate duplicate content through the background.
| The Apache server includes: Typically, files ending with .shtml contained on the server end are told to parse itself and its contents before being sent to the client. Almost all Web servers support some types of server-side inclusion functions. Using the server-side to contain various non-static files reduces the performance, but has little impact. <! DOCTYPE html> <meta charset = "UTF-8"> <body> <! -- # Include virtual = "/header.html" --> <! --- Nesting the main content here --> <! -- # Include virtual = "/footer.html" --> <! -- # Include virtual = "/siderbar.html" --> </body> |
5. Mark the list correctly
Correctly marking the list can improve accessibility. Generally, navigation and navigation are implemented in the list.
Most browsers give specific appearances to the list and projects in the list, which are usually indented and project symbols, and may not be what you need, therefore, it is easy to ignore their existence when building html, and discard correct list tags, and use tags with poor semantics to achieve the same effect. You can use CSS to easily fix these specific appearances as needed. The following describes the CSS style modification rules that are commonly used in development:
/* Delete the project symbol */ul {list-style-type: none;}/* Load External image custom project symbol */ul li {list-style-image: url (images/str.gif);}/* remove indent Rules */ul {margin-left: 0px; padding-left: 0px ;} /* arrange the items in a row */ul, li {display: inline; margin: 0px; padding: 0px;}/* insert a comma between the list items */ul li: after {content: "," ;}/ * specifies the project width. when the project is exceeded, the ellipsis */div is displayed. titleholder {font-size: 8pt; width: 100px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap ;}
However, blockquote is applied to the lu application and list. Compared with ul, blockquote is more powerful and accurate for organizing text indentation.
6. Add the width and height attributes to the image.
The width and height attributes allow the browser to quickly style and display pages to users. However, this method improves the page display speed, but does not help download speed.
For general project development, changing the image size means modifying the HTML, otherwise the image may become larger and smaller in a strange way. If you need to change the image frequently, for example, the design page is, it is best to insert a fixed width and height in the final phase.
Personal Understanding:
Web page reconstruction focuses on the design of user experience, where to put something, where to click and what effect it will be. And so on;
The front-end of web development is more involved in development and code writing. These functions are implemented on the basis of the previous design.
So, one is the user experience designer and the other is the front-end developer.
Rebuilding webpages and designing courses with css + html
Go to the CSS blackboard report and check out a lot of such
Search on Baidu: CSS blackboard
The first one is. Haha, it must be useful to you.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
