HTML structured implementation method

DIV+css structure Are you learning CSS layout? Still can’t fully master pure CSS layout? There are two things that usually get in the way of your learning:
The first possibility is that you don't yet understand how CSS processes pages. Before you consider the overall presentation of your page, you should first consider the semantics and structure of the content, and then add CSS based on the semantics and structure. This article will tell you how to structure your HTML.
Another reason is that you are at a loss for what CSS statements to convert into those very familiar presentation attributes (such as cellpadding, hspace, align="left", etc.). Once you have solved the first problem and know how to structure your HTML, I will give you a list detailing what CSS to use to replace the original presentation attributes.
Structuring HTML
When we first learned how to make web pages, we always considered how to design them first, considering the pictures, fonts, colors, and layout plans. Then we draw it in Photoshop or Fireworks and cut it into small pictures. Finally, all designs are restored and displayed on the page by editing HTML.
If you want your HTML page to be laid out with CSS (CSS-friendly), you need to go back and start over, not considering the "appearance" first, but thinking about the semantics and structure of your page content first.
Appearance is not the most important thing. A well-structured HTML page can be presented in any appearance, and CSS Zen Garden is a classic example. CSS Zen Garden helps us finally realize the power of CSS.
HTML is not just for reading on a computer screen. Your carefully designed pictures in Photoshop may not be displayed on PDAs, mobile phones and screen readers. But a well-structured HTML page can be displayed anywhere, on any network device through different definitions of CSS.
To start thinking, you first need to learn what "structure" is, which some writers also call "semantics". This term means that you need to analyze your content blocks and the purpose each piece of content serves, and then build the HTML structure accordingly based on those content purposes.
If you sit down and carefully analyze and plan your page structure, you might end up with something like this:
Logo and site name Home page content Site navigation (main menu)
Submenu search box function area (such as shopping cart, checkout counter)
Footer (Copyright and related legal notices)
We usually use DIV elements to define these structures, like this:
＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞
It's not the layout, it's the structure. This is a semantic description of a content block. Once you understand your structure, you can add the corresponding ID to the DIV. A DIV container can contain any content block, and can also be nested within another DIV. Content blocks can contain any HTML elements - headings, paragraphs, images, tables, lists, etc.
Based on what has been said above, you already know how to structure HTML, and now you can define the layout and style. Each content block can be placed anywhere on the page, and then the color, font, border, background, alignment properties, etc. of the block can be specified.
Using selectors is a wonderful thing. The name of the id is a means of controlling a certain content block. By putting a DIV on this content block and adding a unique id, you can use CSS selectors to accurately define the appearance of each page element, including titles, lists, pictures, links or paragraphs, etc. For example, if you write a CSS rule for #header, it can be completely different from the image rule in #content.
Another example is that you can define the link styles in different content blocks through different rules. Something like this: #globalnav a:link or #subnava:link or #content a:link. You can also define different styles for the same element in different content blocks. For example, #content p and #footerp define the styles of p in #content and #footer respectively. Structurally, your page is made up of pictures, links, lists, paragraphs, etc. These elements themselves do not affect what network device (PDA, mobile phone or network TV) is displayed on. They can be defined as any presentation appearance.
A carefully structured HTML page is very simple, where every element is used for a structural purpose. When you want to indent a paragraph, you don’t need to use the blockquote tag. Just use the p tag and add a CSS margin rule to p to achieve the indentation purpose. p is a structural tag and margin is a presentation attribute. The former belongs to HTML and the latter belongs to CSS. (This is the phase separation of structure and expression.)
A well-structured HTML page contains almost no tags with presentation attributes. The code is very clean and concise. For example, the original code <tablewidth="80%" cellpadding="3" border="2"align="left"> can now be written as <table> in HTML, and all the controls for performance are written in CSS. In structured HTML, a table is a table, not anything else (such as being used for layout and positioning).
Practice structuring yourself. The above is just the most basic structure. In actual application, you can adjust the content blocks according to your needs. Often DIVs are nested, and you'll see other layers within the "container" layer, with a structure similar to this:
<div id="navcontainer">
<div id="globalnav">
＜ul＞a list＜/ul＞
＜/div＞
＜div id="subnav"＞
<ul>another list</ul>
＜/div＞
＜/div＞
Nested div elements allow you to define more CSS rules to control the performance. For example, you can give #navcontainer a rule to align the list to the right, another rule to align the list to the left for #globalnav, and another rule to align the list to the left for #subnav.
Replace traditional methods with CSS The following list will help you replace traditional methods with CSS:
HTML attributes and corresponding CSS methods HTML attribute CSS method Description align="left"
align="right" float: left;
float: right; Using CSS you can float any element: images, paragraphs, divs, titles, tables, lists, etc. When you use the float attribute, you must define a width for the floating element.
marginwidth="0"leftmargin="0" marginheight="0" topmargin="0" margin: 0; Using CSS, margin can be set on any element, not just the body element. More importantly, you can specify the top, right, bottom and left margin values of an element separately.
vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;
a:visited: #339;
a:hover: #999;
a:active: #00f;
In HTML, the color of a link is defined as a value of the body attribute. The link style is the same throughout the page. Using CSS selectors, links in different parts of the page can have different styles.
bgcolor="#FFFFFF" background-color: #fff; In CSS, any element can define a background color, not just the body and table elements.
bordercolor="#FFFFFF" border-color: #fff; Any element can have a border (boeder). You can define top, right, bottom and left separately.
border="3"cellspacing="3" border-width: 3px; Using CSS, you can define the borders of the table as a unified style, or you can define the color, size and style of the top, right, bottom and left borders separately.
You can use table, td or th selectors.
If you need to set a borderless effect, you can use CSS definition: border-collapse: collapse;
＜br clear="left"＞
＜br clear="right"＞
＜br clear="all"＞
clear: left;
clear: right;
clear: both;
Many 2-column or 3-column layouts use the float property for positioning. If you define a background color or background image in the float layer, you can use the clear property.
cellpadding="3"
vspace="3"
hspace="3" padding: 3px; Using CSS, any element can have padding attributes set. Similarly, padding can be set top, right, bottom and left separately. The padding is transparent.
align="center" text-align: center;
margin-right: auto; margin-left: auto;
Text-align only applies to text.
Block-level elements like div and p can be horizontally centered using margin-right: auto; and margin-left: auto;. Some unfortunate techniques and workarounds Due to the incomplete browser support for CSS, we sometimes have to resort to some hacks or establish an environment (Workarounds) to make CSS achieve the same effect as traditional methods. For example, block-level elements sometimes need to use horizontal centering techniques, box model bug techniques, etc. All of these techniques are explained in detail in Molly Holzschlag’s article Integrated Web Design: Strategies for Long-Term CSS Hack Management.
Another great resource for CSS techniques is "Position is Everything" by Big John and Holly Bergevin.
Understanding Float Behavior Eric Meyer's Containing Floats will help you understand how to use the float property for layout. Float elements sometimes need to be cleared. Reading "How To Clear Floats Without Structural Markup" will be very helpful.

<<: MySQL permission control detailed explanation

>>: CSS uses the placeholder-shown pseudo-class to achieve the floating text effect of the input box

Prototype and prototype chain prototype and proto details

HTML structured implementation method

Prototype and prototype chain prototype and proto details

Detailed graphic and text instructions for installing MySQL 5.7.20 on Mac OS

Introduction to the use of anchors (named anchors) in HTML web pages

Implementation of Nginx operation response header information

A brief discussion on value transfer between Vue components (including Vuex)

The difference between Update and select in MySQL for single and multiple tables, and views and temporary tables

Springboot integrates docker deployment to implement two ways to build Docker images

How to quickly install RabbitMQ in Docker

Index in MySQL

Mysql index types and basic usage examples

Recommend

Using JavaScript difference to implement a comparison tool

Detailed explanation of jQuery method attributes

HTML table tag tutorial (44): table header tag

Ubuntu 18.0.4 MySQL 8.0.20 installation and configuration method graphic tutorial

Analysis of MySQL latency issues and data flushing strategy process

In-depth study of JavaScript array deduplication problem

MYSQL replaces the time (year, month, day) field with unchanged hours, minutes, and seconds. Example analysis

Implementing a shopping cart with native JavaScript

Deleting two images with the same id in docker

How to use an image button as a reset form button

HTML dl, dt, dd tags to create a table vs. Table creation table

MySQL cross-table query and cross-table update

MySQL scheduled full database backup

.NETCore Docker implements containerization and private image repository management

How to open ports to the outside world in Alibaba Cloud Centos7.X