html block level tags, in-line tags, in-line block tags display mode what

This time to bring you html block level tags, in-line tags, in-line block tags display mode what, using html block level tags, in-line tags, in-line block tags display mode what are the considerations, the following is the real-world case, together with a look at it.

Today’s lecture on the display mode of html tags, roughly divided into block-level tags and in-line tags. Then beginners in the first use of tags will find that some attributes on some tags do not work, such as width, height, horizontal centering, etc., in fact, the use of this attribute is only used in the block-level tags on the use of the role. Personally, I think this is also a very easy place for beginners to ignore, so I’ll write it down!

For example, there will be a situation, to the p tag horizontal centering has a role, but to add horizontal centering attribute to the font does not work (as follows):

p{color:red;text-align:center;}<BR>font{color:red;text-align: center;}

p{color:red;text-align: center;}

This is the first time that a block-level tag has been used. center;}

<p>I’m a block tag p</p><BR><font>I’m an inline tag font</font>

After running the preview, p centers the text horizontally, but font doesn’t

The above problem is related to the fact that in the html, the text is not centered. This problem is related to the display mode in html:

The characteristics of the display mode:

There are two main categories:

Block-level elements: they occupy a single line, and the values of the width and height attributes take effect; if you don’t give them a width, the block-level elements default to the browser’s width, which is 100% wide;

Inline elements: they can exist in one line with multiple tags, and the values of the width and height attributes do not take effect.

Inline elements: multiple tags can exist on a single line, and the width and height attribute values do not take effect; they rely entirely on the content to hold up the width and height! dl,dt,dd… Commonly used inline are: span,font,b,u,i,strong,em,a,img,input, where img and input are inline block elements.

So some students will think, can I not control the width and height of the span or font? Can be, then we put aside the float and positioning not to say, say through the display attribute to convert them to each other:

1, block-level tags converted to inline tags: display:inline;

2, inline tags converted to block-level tags: display:block;

3, the conversion of inline block tags : display: inline-block; as long as the corresponding label to use this display this attribute, take the corresponding value, you can convert the display mode to each other.

Before this has been said text-align attribute is effective, the reason is that the block-level tags if you do not give the width, the block-level elements default to the browser’s width, that is, 100% wide, then centered in 100% of the width of the effective; but the width of the inline element is entirely dependent on the contents of the open, so the width of the contents of the open width, we give a background test to see:

So the inline element is completely dependent on the contents of the open, so the width of the open content, we give a background test to see:

So the block level is centered in the middle of the box, but because the width of the in-line element is the content width, there is no space to center, so text-align:center; there is no role; but if you give the font converted to block level is different:

p{background:green;color:red;text -align:center;}

font{background:green;color:red;text-align:center;display:block;}Similarly, if the block level is converted to inline, the text can’t be centered.

Because in html, inline elements are treated as tags with text properties, and block level can center text horizontally, then inline tags in block level are treated as text properties, so if text-align:center; is used in block level, the inline tags inside will be centered horizontally in block level tags like text:

No text-align:center;, no text-align:center;, no text-align:center;, no text-align:center;, no text-align:center;, display:block;}. align:center; when:



<font> I’m the in-line label font</font><font> I’m the in-line label font</font>

</p> plus text-align:center; after

p{padding:5px;background. green;color:red;text-align:center;}

Related reading:

HTML basics, details about styling hyperlinks

Basics of HTML. Detailed introduction to css style sheets and style attributes

HTMLa tag href attribute to specify the relative path and the absolute path use method

What are the attributes of css control html hide and show, two kinds, and what is the difference

What are the attributes of css control hide and show, two kinds, and what is the difference

Css control hide and show

display: none; hide

display: block; show

display: none and visibility:hidden

display is hidden and doesn’t take up space; elements behind it squeeze into that element’s space

visibility:hidden is hidden and takes up space, which means that the element is still there, you just can’t see it

C# controls What is the property that controls whether an element is displayed or not


What is the property that determines whether ulli is displayed horizontally

li is preset to be a block-level element, i.e., it can only be displayed one per line. You can set the display style to inline





What are Rising’s attributes: archive, hidden, read-only

First of all, it is declared that the Rising’s antivirus software is a program, not a single file, and that in the Rising’s program chain. In the Rising Star program chain, there may be files with high confidentiality, deletion may affect the normal execution of the system, so it will be preset to hide or read-only.

What’s the difference between a file’s attribute being hidden or read-only

“Read-only”: it means you can only read it, you can’t write to it, but you can delete it.

“Hidden”: is hidden, if you do not show all the files, then the hidden files will not be shown, as long as it is in order to protect some of the files are not deleted by mistake.

“Archive”: when you finish editing a file, it will naturally have an archive attribute.

There is also a “system”: this means that the file is a system file. Don’t delete it.

In Winxp, the “system” attribute is normally set to be unavailable

In Win98, you can run “winfile.exe” to add the “system” attribute to any file

What is the difference between a tag and an element? What are the attributes?

1. Element:

The HTML page is actually a text file consisting of many various HTML elements, and any web browser can directly execute the HTML file. So it can be said that HTML elements are the basic objects that make up the HTML file, HTML elements can be said to be a general term. HTML elements are defined by using HTML tags.

2. Tags:

Tags are <head>, <body>, <table> and so on by the pointed brackets “<” and “>” wrapped objects. up objects, the vast majority of labels appear in pairs, such as <table></talbe>, <form></form>. Of course there are a few that don’t appear in pairs, such as <br>, <hr> and so on.

Tags are what are used to mark up HTML elements. The text located between the start tag and the end tag is the content of the HTML element.

3. Attributes:

The HTML attributes provide all kinds of additional information for the HTML element, it is always in the form of name-value pairs of “Attribute Name=Attribute Value”, and the attributes are always defined in the start tag of the HTML element.

What is the property to clear all items displayed in the dataGridView control element in C#


What is the hidden attribute of a blue vial?

No consumption of heroes carry will increase 100 points of morale increase 50% over the tower kill success rate

Chinese spirit ol dream island display attributes are bare attributes

Dream island inside is not a display of bare attributes, he shows the attributes of the attributes are added to the body, the home blessing and so on after the attributes. Sometimes you may find that the attributes of the dream island and your own are not the same that is because the attributes of the dream island is not always updated, is only updated every certain time (for example, you just online when there is no home prayers, then the dream island record your attributes are not home prayers, when you go to pray after you add their own state of prayers, but the dream island has not been updated to so there is still no home prayers)

HTML tag categorization summary

To go home a little bit to press the heart of the restlessness, to some simple and easy topic.

This is an interesting question, there should be a lot of people searched, I also searched. This problem is mainly the abuse of block-level elements, or will not use some tips. For example, sometimes we want to achieve the following form effect:

But sometimes write to write will become the following look:

Press I have encountered from the previous situation, the above situation may be the cause of two:

First, it is possible that somewhere < label> was set up to wrap the block-level elements

Solution: use display:inline-block in the external style

The second is that <label>s style uses display:block

So if this problem occurs in the future when writing forms, you can look for the cause from the above 2 directions, as well as to find out the corresponding solution!

(1) The <!DOCTYPE> statement is located in the first line of the HTML document, before the <html> tag. It tells the browser’s parser what document standard to use to parse the document.A non-existent or incorrectly formatted DOCTYPE will cause the document to be rendered in compatibility mode. Using <!Doctype> causes all box models in the document to be rendered in the w3c standard box model.

(2), the standard mode of typography and JS operation modes run at the highest standard supported by that browser. In compatibility mode, the page is displayed in a loosely backward-compatible manner, simulating the behavior of older browsers to prevent the site from not working.

Before the standardization of HTML and CSS, browsers had different implementations of parsing HTML and CSS, and many older web pages were designed with these non-standard implementations in mind. After the HTML and CSS standards were finalized, browsers had to implement HTML and CSS support according to the standards on the one hand, and ensure backward compatibility with non-standard old web page designs on the other. Therefore, modern browsers generally have two rendering modes: standard mode and weird mode. In standard mode, the browser parses and renders the document according to the HTML and CSS standards, while in weird mode, the browser parses and renders the document according to the old non-standard implementation. In this way, for old pages, the browser can activate weird mode to make the old pages display normally, and for new pages, it can activate standard mode to make the new pages use the standard features of HTML and CSS.

Reference1-H5 new tags

Reference2-Classifying HTML elements

Reference3-Classifying html tags and common elements

Reference4-Classifying HTML5 common tags


Web front-end engineers to understand the basics of html + css

Today I want to analyze the article with you is about Web front-end engineers to understand the basics of html + css. Are engaged in the work of Web front-end partners to take a look with the editor, I hope this article can be engaged in the work of Web front-end and learning partners to help.

A. What is HTML?

HTML is HyperText Markup Language (HyperTextMarkupLanguage), a language used to describe web pages.

HyperTextMarkupLanguage is a language used to describe Web pages. The structure of HyperTextMarkupLanguage consists of a “Head” section (foreign language: Head) and a “Body” section (foreign language: Body), where the “Head” section provides information about the Web page, and the “Body” section provides the specific content of the Web page.

The markup language is a set of markup tags (markuptag)

HTML uses markup tags to describe web pages

The following code:



Example Explanation:

and describes the web page

The text between and is the visible page content

The text between and is displayed as a heading

The text between and

is displayed as a paragraph

Two.HTML Elements

An HTML document is defined by HTML elements.

HTML elements refer to all the code from the start tag (starttag) to the end tag (end




td>pspan{text-align:center; display:block;}

Start tag

Element content

End tag




Note: The start tag is often referred to as the openingtag, the end tag is often referred to as the closingtag, and most HTML elements can have attributes.

Empty HTML element:

An HTML element that has no content is called an empty element. In XHTML, XML, and future versions of HTML, all elements must be closed.

Adding a slash to a start tag such as :

is an empty element without a closing tag,and

is the correct way to close an empty element, which is accepted by HTML, XHTML, and XML.

Even though

is valid in all browsers, using

is actually a longer-term safeguard.

HTML tip: Use lowercase tags

HTML tags are case insensitive:


. Many websites use uppercase HTML tags.

W3School uses lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML4 and mandates lowercase in future versions of (X)HTML.

Three HTML attributes

Attributes always appear as name/value pairs, e.g., name=”value”.

Attributes are always specified in the start tag of an HTML element.

Examples of attributes:

HTML links are defined by tags. The address of the link is specified in the href attribute:



Note: The value of the attribute should always be included within quotation marks. Double quotes are the most commonly used, although there is no problem with using single quotes. In some individual cases, such as where the attribute value itself contains double quotes, then you must use single quotes, e.g. name=’Bill “HelloWorld” Gates’.

HTML tip: Use lowercase attributes

Attributes and attribute values are case insensitive.

However, the World Wide Web Consortium recommends lowercase attributes/attribute values in its HTML4 Recommended Standard.

And newer versions of (X)HTML require lowercase attributes.

Some common HTML attributes:



td>pspan{text- align:center;display:block;}






Specifies the class name of the element (classname)



< p>Specifies the unique id of the element



Specifies the inline style (inline

style) of the element



Specifies additional information about the element (which can be display)

Four, HTML editor

Writing HTML with Notepad or TextEdit

You can use professional HTML editors to edit HTML:




V. HTML headings

The headings (Heading) are defined by

– and other tags.

Thisisaheading defines the largest heading.

Thisisaheading defines the smallest heading.

Note: Browsers automatically add blank lines before and after the heading.

Note: By default, HTML automatically adds an extra blank line before and after block-level elements, such as before and after paragraph and heading elements.

html how to make the content hidden after click change to hidden by default expand after click, online waiting!

html tags hidden after click expand by default: just add (style=”display:none”) attribute in div.

Open the browser to refresh the page, the result is:

Click the survey content. The result is:


Hypertext Markup Language (abbreviation: HTML) is a markup language designed for “web page creation and other information that can be seen in a web browser”. The essence of a Web page is HTML, and by using it in conjunction with other Web technologies (e.g., scripting languages, public gateway interfaces, components, etc.), powerful Web pages can be created.