Some suggestions for HTML beginners and novices, experts can ignore them
|
Feelings: I am a backend developer. Sometimes when I get some static (Html) pages, I feel a little bad when I see that the page structure and naming rules are extremely irregular. Of course, such situations usually happen to newcomers. Generally, we will take out the previous standard pages and name DEMOs for them to see, in order to improve development efficiency. Purpose: This article is not an introduction to the specification. Please refer to W3C for the standard specification. It is just a routine that is applicable to all situations, and it is also designed to help novice developers get started better. Coding ability is one thing, which I will not discuss here. Here I will just talk about some methods that I personally think are okay. That’s all for now. Let’s look at the code. 1. Page coding structure and basic naming conventions Copy code The code is as follows:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <!--Page encoding: mostly UTF-8--> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Untitled Document</title> <!--Additional styles and referenced external style files, the relative path and absolute path are not discussed here--> <style type="text/css"></style> <!--Additional scripts and referenced external Js, Jquery libraries, etc. --><script type="text/javascript"></script> </head> <body> <!--Header tag Sometimes the header will be included in the warp, but it is better to give it a separate tag--> <div id="header"> <!--Navigation tag note: Although the header and navigation are sometimes combined into one, they should not be confused for the sake of convenience--> <div id="Nav"> <ul> <li><a href="##">Nav1</a></li> <!--OR--> <li><a href="##"><span>Nav1</span></a></li> </ul> </div> </div> <!--Page body. According to my habit, I usually use Warp and Main as the page body ID. --> <div id="warp"> <!--The content on the left is usually the left navigation, followed by advertising space, simple contact information or quick search, etc.--> <div id="LeftContent"> <!--Left navigation--> <div id="LeftNav"> <ul> <li><a href="###">Jump To</a></li> </ul> </div> <!--Advertising space--> <div id="Ad" ></div> <!--Simple contact information--> <div id="Contact" ></div> </div> <!--The main content on the right is free to play here, no further details--> <div id="RighrContent"></div> </div> <!--The bottom includes various codes such as copyright registration number, statistical code, promotion code, etc., all of which are added here--> <div id="footer"></div> </body> </html> 1. I believe most novices can still understand it. The page is divided into <head>, <header>, <warp>, and <footer>. The above divides the page into four parts, but sometimes there are three parts, because the <header> is included in the <warp>. The specific details can be flexibly adjusted according to the design page. In fact, no matter how many blocks are divided, the main thing is that each block is independently labeled to form a pattern. In this way, in the subsequent program development, <header>, <footer> and <div id="LeftContent"> in the above code can use common controls to facilitate back-end development efficiency and later maintenance. 2. Page file structure  1. As shown in the figure, this is a basic file structure. NewsCenter and Product are columns. You must create folders according to the columns and then create page files in them. Otherwise, if all pages are placed in the root directory, you may not realize it when you first start, but when you give them to other people or modify them yourself, you will be blind. 2. The second and most important page element files (defined by myself) are all placed in the skins folder, and then folders are created according to file properties and then corresponding files are created. |
<<: Detailed explanation of how to select all child elements using CSS
>>: Examples of using the Li tag in HTML
Recommend
mysql installer web community 5.7.21.0.msi installation graphic tutorial
This article example shares the specific code for...
WeChat Mini Programs Achieve Seamless Scrolling
This article example shares the specific code for...
How to view the execution time of SQL statements in MySQL
Table of contents 1. Initial SQL Preparation 2. M...
How to handle the tcp_mark_head_lost error reported by the Linux system
Problem Description Recently, a host reported the...
How to use the flash plug-in to call the PC's camera and embed it into the TML page
Preface The reason for writing this article is mai...
HTML table markup tutorial (4): border color attribute BORDERCOLOR
To beautify the table, you can set different bord...
MySQL deep paging (how to quickly paginate tens of millions of data)
Table of contents Preface Case optimization summa...
JavaScript Dom implements the principle and example of carousel
If we want to make a carousel, we must first unde...
In-depth analysis of the role of HTML <!--...--> comment tags
When we check the source code of many websites, w...
How to change the encoding of MySQL database to utf8mb4
The utf8mb4 encoding is a superset of the utf8 en...
How to start tomcat using jsvc (run as a normal user)
Introduction to jsvc In production, Tomcat should...
Docker enables seamless calling of shell commands between container and host
As shown below: nsenter -t 1 -m -u -n -i sh -c &q...
Use of MySQL triggers
Triggers can cause other SQL code to run before o...
How to use the Linux md5sum command
01. Command Overview md5sum - Calculate and verif...
Solution to "Specialized key was too long" in MySQL
Table of contents Solution 1 Solution 2 When crea...