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
Kali Linux Vmware virtual machine installation (illustration and text)
Preparation: 1. Install VMware workstation softwa...
Example code for using CSS to darken the font color of the selected area when scrolling
When encapsulating the date picker, you need to d...
Use crontab command in Linux environment to set up scheduled periodic execution tasks [including PHP execution code]
This article uses the crontab command in the Linu...
jQuery realizes dynamic particle effect
This article shares the specific code of jQuery t...
Detailed explanation of various practical uses of virtual device files in Linux system
Hello everyone, I am Liang Xu. As we all know, in...
Use vue to realize the registration page effect vue to realize SMS verification code login
This article example shares the specific code of ...
The latest super detailed graphic tutorial of installing Kali Linux on virtual machine VMware
Table of contents 1. Download the system image fi...
MySQL DATE_ADD and ADDDATE functions add a specified time interval to a date
MySQL DATE_ADD(date,INTERVAL expr type) and ADDDA...
How to install nginx in centos7
Install the required environment 1. gcc installat...
HTML+CSS to achieve charging water drop fusion special effects code
Table of contents Preface: accomplish: Summarize:...
I have compiled a few cool design sites that I think are good.
You must have inspiration to design a website. Goo...
MySQL daily statistics report fills in 0 if there is no data on that day
1. Problem reproduction: Count the total number o...
Vue implements the operation code of clicking a button to download a file (backend Java)
In the previous article, I introduced the functio...
How to click on the a tag to pop up the input file upload dialog box
html Copy code The code is as follows: <SPAN cl...
Five things a good user experience designer should do well (picture and text)
This article is translated from the blog Usability...