Shulou(Shulou.com)06/01 Report--

This article mainly introduces the common problems of html web page layout, which have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to know it.

1: too much text per line

Users will cause eye fatigue after reading many lines of text for a long time, and readers often have to move their eyes and heads from one line to another, and this exhausting layout mode is unpopular. according to the network survey, each line of text is kept below 50-60 characters, which looks the most comfortable, which requires that the text description should be as concise and brief as possible.

2: there is not enough spacing between lines

Line spacing can improve the reading of Chinese text blocks on the whole page so that readers will not lose their place when they read the next line. Words that are too small and too dense can cause a sense of oppression. It is important that different fonts require different line spacing. It is more or less necessary to change the height of the version to reduce the density of text on the page, because the focus of the text on the page can guide users to browse, so it is also very important to balance the spacing between the text.

3: too many levels of text do not distinguish between key points

Having too many fonts on a page may distract and distract you. Some of the text on the page needs to highlight the important text that users can see at a glance, so this module should weaken other text, such as text size, color, text thickness and so on. Too many fonts may cause the user to feel that there is no focus on this page, which may cause the user to miss something important, so there are usually three or fewer font selectors

4: novice programmers check the syntax rules of html tags

HTML5's grammatical rules are not as strict and inclusive as the previous version, but we follow his grammatical rules as much as possible. What is easy to lose in the writing of tags is that some symbols in the tags are easy to be lost or written in Chinese symbols, such as angle brackets, quotation marks, slashes, etc., in one is the nesting relationship between tags, even very skilled programmers often make mistakes in the nesting relationship. Sometimes it's not because you wrote the wrong nesting relationship, but because you lost a symbol, such as a diagonal bar.

5. Check whether the CSS syntax is correct.

First of all, the syntax of CSS is selector {attribute: value;} the symbols that appear in this sentence are all English symbols, such as spelling mistakes, sweating into equal signs, missing semicolons, missing curly braces, and so on. You can open the developer's tool in the browser to review, and the wrong writing will directly reflect that you can use the CleanCSS tool to check the spelling errors of CSS.

6. Quickly find out the error module

I often see that when writing a page, I find that the elements below suddenly run to the already written area, or there is a problem with the nesting relationship, which disrupts the layout structure of the whole page. At this time, we can use exclusion, usually modular development, as long as the div of each module is commented out one by one in order, until the page shows normal after commenting out a module, then the final commented out module is the module in which the error occurred.

7. Page style initialization

We all know that some tags in html have default internal and external margins or spacing, which we do not need, and some spacing parsing sizes are not consistent in different browsers, which greatly affects our layout of the page, including margin, padding and so on. Therefore, it is best to cancel their default margin, padding values, set their values to 0, and so on, according to the requirements before development.

Thank you for reading this article carefully. I hope the article "what are the common problems in the layout of html web pages" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.