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
Detailed explanation of the latest IDEA process of quickly deploying and running Docker images
background Use idea with docker to realize the wh...
Vue custom v-has instruction, steps for button permission judgment
Table of contents Application Scenario Simply put...
Nginx builds rtmp live server implementation code
1. Create a new rtmp directory in the nginx sourc...
Summary of new usage examples of computed in Vue3
The use of computed in vue3. Since vue3 is compat...
Detailed example of MySQL subquery
Subquery Classification Classification by returne...
Tips for organizing strings in Linux
In Linux operations, we often replace and count s...
jQuery plugin to implement accordion secondary menu
This article uses a jQuery plug-in to create an a...
Use javascript to create dynamic QQ registration page
Table of contents 1. Introduction 1. Basic layout...
How to implement a binary search tree using JavaScript
One of the most commonly used and discussed data ...
Canvas draws scratch card effect
This article shares the specific code for drawing...
The difference between HTML name id and class_PowerNode Java Academy
name Specify a name for the tag. Format <input...
HTML structured implementation method
DIV+css structure Are you learning CSS layout? Sti...
Vue implements 3 ways to switch tabs and switch to maintain data status
3 ways to implement tab switching in Vue 1. v-sho...
Detailed example of creating and deleting tables in MySQL
The table creation command requires: The name of...
Summary of bootstrap learning experience-css style design sharing
Due to the needs of the project, I plan to study ...