Home >Web Front-end >HTML Tutorial >What you need to know about html tags and page layout

What you need to know about html tags and page layout

零下一度Original: 2017-04-27 13:35:431516browse

I didn’t lay a solid foundation in school, and now that I’m working after graduation, I pursue learning speed and mastering more knowledge too much, thus ignoring the details. What you need to know about html tags and page layout As a result, the current foundation is not solid. . So, the foundation is very important, don’t be too eager for success, just take it step by step. Details determine fate. Celebrities say this, so it must be true.

## Let’s summarize:

一.html tag attention

1.html should be written legally, with good structure and semantics

2. Avoid excessive use of p and span, making the document easier to apply styles and clearer in logical paragraphs.

Use h1-6 tags according to importance, use p for paragraphs, and use ul for lists. Block-level elements cannot be nested in inline elements, which are descriptive. Form elements (input, tetarea) add label

3. Use labels as little as possible

4. Use class and id appropriately: the same class can appear repeatedly, and the same id can only appear once on a page

5. Title tag They are divided into: h1~h6, which indicate the priority order of titles in the document from high to low.

H1 is best used only once in a web page to modify the main title, usually the title of the web page. But in practice, h1 is used as a logo tag, close to the body, so that search engines can understand the theme quickly. h2 represents the article title or document subtitle;

h3 is the column title on the homepage of the website and other pages. H2, H3, and H4 tags can appear multiple times in a web page, but they need to be added at will or excessively.

6. In the form:

# Form Title

fieldset>

## is only used when the form title exists. If it does not exist , then do not appear< ;fieldset>

7. Regarding the id and name of the form, both of them are used to mark the object name. ID was introduced later, and before that it was implemented using name. Many programmers use the name attribute to get the value of a form element; id can be used to define CSS styles, so it is better to use id and name together.

#8. If you choose table layout, then each page in the website must use table uniformly. When using table layout, please pay attention: because the loading process of table layout page is usually It will not be so smooth and natural, so this clumsy and conservative layout method will most likely disrupt the visual flow of the work.

9. The difference between inline element float and block element float: after the inline element float, the border is added from the border inwards, while the block The element adds a border to the outside. That is, after the inline element is floated and the size px border is set, the area occupied by it will not increase, so it will not affect the layout.

<!DOCTYPE html>  
<html>  
<head>  
    <title>测试内联元素浮动后边框问题</title>  
    <meta charset="utf-8"/>  
    <style type="text/css">  
        *,p,button{  
            margin:0;  
            padding:0;  
            border:0;  
        }  
        button,p{  
            float: left;  
            width: 50px;  
            height: 100px;  
            background-color: pink;  
        }  
        button+button{  
            background-color: gray;  
            border:10px solid red;  
        }  
        p+p{  
            border:10px solid blue;  
        }  
    </style>  
</head>  
<body>  
<button>button1</button><button>button2</button>  
<p>段落1</p>  
<p>段落2</p>  
</body>  
</html>

##10.a Tags The rel attribute: It is very convenient to set different styles for links

<a href="#1" rel="prev">prev</a>
<a href="#2" rel="next">next</a>
a[rel="prev"]{}
a[rel="next"]{}

All browsers support the rel attribute. However, the value of this rel is fixed, you can view w3c

## 2. The page layout has the following types:

1.table layout

2.css layout:

①Fixed layout (fixed width and height)

②Fluid layout (use width and height percentage)

③Flexible layout (flexible box)

##④Floating layout (float, you can set left or right)

⑤ Positioning layout (position: fixed relative positioning, position: absolute; absolute positioning)

The above is the detailed content of What you need to know about html tags and page layout. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Learn more about html template functionsNext article：Learn more about html template functions

See more

What you need to know about html tags and page layout

Related articles