search
HomeWeb Front-endHTML TutorialDetailed graphic explanation of layout tags and list tags in html

Layout tag

The first layout tag to be introduced is the p tag. p can be used as a layer of a web page or as a partition of a web page. When p is used as the layer of a web page, it can achieve the effect of floating on the web page, just like the floating advertisements we often see on websites. When p partitions a web page, it can lay out the layout of the web page, divide a web page into multiple modules, and build a web page from the structure of these modules.
p There is a style attribute in p. This attribute is used to control the style. For example, you can adjust the background color, the width and height of the component, the position of the component, etc. Basically, everything related to style can be controlled using the style attribute.
Example:

Detailed graphic explanation of layout tags and list tags in html

Running result:

Detailed graphic explanation of layout tags and list tags in html

It can be seen from the running result that one p accounts for The size it sets, each p is separate, dividing the web page into blocks.

If we look at the source code of Baidu search, we can see that the most commonly used tag on this page is p, so we can also know that this page is laid out using the p tag:

Detailed graphic explanation of layout tags and list tags in html

Let’s briefly analyze the layout of this page. From the overall page, we can see that this page uses a p to cover the entire page, and then within this p, a top, middle, and bottom layout is adopted. Method:
Header p, that is, the p that covers the entire page:

Detailed graphic explanation of layout tags and list tags in html

The general top, middle and bottom layout inside:

Top:


Detailed graphic explanation of layout tags and list tags in html

#中:

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

下:

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

The entire web page has such a general layout:

Detailed graphic explanation of layout tags and list tags in html

It can be found from the above simple analysis that almost every p is nested with p and continues to be laid out. A web page is like stacking blocks. These p are combined to build a page. This is an application of p partition.

We can also imitate such a layout method to make a "Baidu", code example:

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

Running result :

Detailed graphic explanation of layout tags and list tags in html

The form submission web page can be searched using Baidu’s receiving page:

Detailed graphic explanation of layout tags and list tags in html

To implement the search function It is very simple to use Baidu to search casually, and you can get the address of its server receiving page and the attributes indicating the search keywords:

Detailed graphic explanation of layout tags and list tags in html

Then in the action attribute of the form Fill in the address of the server receiving page, and then assign the name attribute of the text box to wd to use Baidu's server receiving page to implement the search function:


Detailed graphic explanation of layout tags and list tags in html

The above is an application of p partition. Here is a brief introduction to the implementation of p layer. In fact, the partition of p is like a row, and the layer of p is like a column. The code Example:

Detailed graphic explanation of layout tags and list tags in html

Running result:

Detailed graphic explanation of layout tags and list tags in html

From the running result, you can see that p is column by column. When zooming the window The position will automatically change when:

Detailed graphic explanation of layout tags and list tags in html

The table tag and the p tag are both web page layout tags. table is mainly used to make tables. Commonly used attributes in table are: The border line of the border table, the filling degree of the cellpadding table, and the inner spacing distance of cellspacing. The table must be nested with thead, tbody, tfood, tr, th, td and other tags to implement the table.
thead is used to represent the head part of the table, tbody is used to represent the content part of the table, and tfood is used to represent the tail part of the table. These three tags have no actual effect. They are just for identifying which part of the table a certain piece of content is when crawling data.
tr implements the rows of the table, th implements the header of the table, and td implements the cells of the table. The table is mainly completed using these three tags. Code example:

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

Detailed graphic explanation of layout tags and list tags in html

operation result:

Detailed graphic explanation of layout tags and list tags in html

There is a colspan attribute in the td tag, which allows columns to be merged. The number of this attribute represents how many columns to merge. Note that this number must include the column where the attribute itself is located. Code example:

Detailed graphic explanation of layout tags and list tags in html

Running result:

Detailed graphic explanation of layout tags and list tags in html

#From the running result, you can see that the content of a cell has been squeezed out of the table. This It’s because there is no corresponding way to delete a cell. As many columns as you merge, you have to delete as many cells as you want:

Detailed graphic explanation of layout tags and list tags in html

Running result:

Detailed graphic explanation of layout tags and list tags in html

The value of the cellpadding attribute can change the filling degree of the table. The larger the value, the larger the table. The value of the cellspacing attribute can change the inner spacing distance of the table. Code example:

Detailed graphic explanation of layout tags and list tags in html

Run result:

Detailed graphic explanation of layout tags and list tags in html

border can remove the border line of the table, code example:

Detailed graphic explanation of layout tags and list tags in html

Running results:

Detailed graphic explanation of layout tags and list tags in html

We can use the style attribute to adjust the color of the table. Code example:

Detailed graphic explanation of layout tags and list tags in html

Running results:

Detailed graphic explanation of layout tags and list tags in html

The above has introduced the basic usage of table to create tables. Next, we will introduce nav: navigation bar and footer: the end of the web page. In fact, these two marks only play a role. The function of a description has no actual effect. It is also used to let others know when crawling data that this is a navigation bar and this is the end of a web page. Code example:

Detailed graphic explanation of layout tags and list tags in html

Running result:

Detailed graphic explanation of layout tags and list tags in html

The above is the content of the web page layout tag, mind map summary:

Detailed graphic explanation of layout tags and list tags in html

List Marking

The first list to be introduced first is the ul unordered list. The unordered list is a list of items. This column item is marked with a bold dot (a typical small black circle), ul Nested li is needed to achieve the list effect. The unordered list starts with the tag, and each list item starts with . Code example:

Detailed graphic explanation of layout tags and list tags in html

##Running result:

Detailed graphic explanation of layout tags and list tags in html

This kind of unordered list is the most commonly used list. Don’t look at the original effect of the unordered list, which is not good-looking. This is because no style is used. The characteristics of unordered lists are suitable for multi-item lists and list boxes of navigation bars. For example, this web page is a navigation bar made using ul unordered lists:

Detailed graphic explanation of layout tags and list tags in html

The following is olOrdered listSimilarly, an ordered list is also a list of items. The list items are marked with self-increasing numbers, so they are called ordered lists. The ordered list starts with the tag, and each list item also starts with the tag. Code example:

Detailed graphic explanation of layout tags and list tags in html##Running result:

Detailed graphic explanation of layout tags and list tags in htmlFinally, there is the dl custom list. The custom list is not just a list of items, but a combination of items and their comments. The custom list starts with tag, each custom list item starts with , and the definition of each custom list item starts with , code example:

Detailed graphic explanation of layout tags and list tags in htmlRun results:

Detailed graphic explanation of layout tags and list tags in htmlCommonly used list tags:

The above is the detailed content of Detailed graphic explanation of layout tags and list tags in html. 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
What is the purpose of HTML tags?What is the purpose of HTML tags?Apr 28, 2025 am 12:02 AM

HTMLtagsareessentialforstructuringwebpages,enhancingaccessibility,SEO,andperformance.1)Theyareenclosedinanglebracketsandusedinpairstocreateahierarchicalstructure.2)SemantictagslikeandimproveuserexperienceandSEO.3)Creativetagslikeenabledynamicgraphics

What are self-closing tags? Give an example.What are self-closing tags? Give an example.Apr 27, 2025 am 12:04 AM

Self-closingtagsinHTMLandXMLaretagsthatclosethemselveswithoutneedingaseparateclosingtag,simplifyingmarkupstructureandenhancingcodingefficiency.1)TheyareessentialinXMLforelementswithoutcontent,ensuringwell-formeddocuments.2)InHTML5,usageisflexiblebutr

Beyond HTML: Essential Technologies for Web DevelopmentBeyond HTML: Essential Technologies for Web DevelopmentApr 26, 2025 am 12:04 AM

To build a website with powerful functions and good user experience, HTML alone is not enough. The following technology is also required: JavaScript gives web page dynamic and interactiveness, and real-time changes are achieved by operating DOM. CSS is responsible for the style and layout of the web page to improve aesthetics and user experience. Modern frameworks and libraries such as React, Vue.js and Angular improve development efficiency and code organization structure.

What are boolean attributes in HTML? Give some examples.What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values ​​need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

How can you validate your HTML code?How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function