Wonderful HTML nesting rules and wonderful HTML nesting rules

Source: Internet
Author: User

Wonderful HTML nesting rules and wonderful HTML nesting rules

I. HTML tags include block and inline elements)

1. Block-level elements

It is generally used to build the website architecture, layout, and carry content ...... It includes the following tags:

Address, blockquote, center, dir, div, dl, dt, dd, fieldset, form, h1 ~ H6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul

2. Embedded Elements

Generally, some details or parts of the website content are used to "emphasize, differentiate style, superscript, subscript, and anchor". The following labels are embedded elements:

A, abbr, acronym, B, bdo, big, br, cite, code, dfn, em, font, I, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

 

Ii. nesting rules of HTML tags

1. A block element can contain inline elements or some block elements, but an inline element cannot contain block elements. It can only contain other inline elements:

<Div>

<A href = "#"> <span> </a> --

<Span> <div> </span> -- Error

 

2. Block-level elements cannot be placed in <p>:

<P> <ol> <li> </ol> </p> -- Error

<P> <div> </p> -- Error

 

3. There are several special block-level elements that can only contain embedded elements, but cannot contain block-level elements. These special labels are:

H1, h2, h3, h4, h5, h6, p, dt

 

4. li can contain div labels-this one does not need to be listed separately, but many people on the Internet have some doubts about this, so I will add a description here:

Both li and div labels are content-loaded containers with equal status and no levels (for example, a strict hierarchical system like h1 and h2, the li tag can even accommodate its parent ul or ol. Why do people think li cannot accommodate the next div? Don't look at li so stingy. Don't look at li very thin. In fact, li's mind is very big ......

 

5. Parallel Block-level elements and block-level elements, parallel embedded elements and embedded elements:

<Div>

<Div> <a href = "#"> </a> <span> </div> --

<Div>

 

Figure:


 

Search No.: ruixin, or scan the QR code below to check the Public Account of the blog:


Html Nested html pages do not use frameworks. What are some good methods?

This is very simple. I also like to use an object, that is, if your webpage uses the same header and foot every time, you separate the header page and the foot page, and then convert it into a JS tool using HTML to generate JS, then you can use <script language = "" type = "" src = "> </script>.

The issue of html nested web pages is coming soon,

It is best to use a collection program to capture the HTML source code of the other party, and then extract the desired part, which is displayed on its own webpage.
This method is reliable, but it must use the script language executed on the server, that is, ASP, PHP, and JSP.

If you want to implement a pure HTML static page, you can use the iframe framework to load the page, and then use the javascript control framework to scroll to the appropriate coordinates. The content displayed in your framework may be misplaced if the webpage of the recipient changes. The disadvantage is obvious.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.