An article to teach you HTML
|
If you are not committed to becoming an artist, then as a developer, you can just read HTML and make simple modifications when necessary. Follow my train of thought below and I guarantee that this article will help you understand HTML. Of course, while reading, it is best to try it yourself so that you can have a deeper understanding. Ok, let's start: (The following symbols are all entered in English) 1. Basic rules of HTML <html> <head> <title>My webpage</title> ………………………….. </head> <body> ………………. </body> </html> Almost all web pages follow this format. This is a necessary tag for a web page. Each tag is placed in < > and ends with </ >, except that a lot of messy things are added in the place of the ellipsis, which is the content we see. Copy the above code to a notepad and save it as a.html file to create a web page. Next, open it in Notepad, add the word "Home" between <body>, save it, and then open it to see the following picture: Next, add the tag <a> before and after the homepage to change it to <a href=”#”>Homepage</a>, save it, and see the effect. Is it the hyperlink we usually see on the Internet? It’s just that there is no change when you click “Home” here, because we added an empty link. So, strike while the iron is hot. Let’s follow the previous method to create a page, save it as b.html, then replace the “#” above with b.html, open it, and click Home. Should it jump to page b? (Of course, pages a and b must be in the same directory.) So far, you should understand that all the functions on a web page are implemented by different tags like <a>. All you need to do is remember the functions of these tags. 2. Web page structure If you pay attention when you surf the Internet, web pages are actually divided into blocks, as shown in the figure Of course, this is just a rough structure. You can divide it into many blocks according to your needs. The purpose of dividing into blocks is mainly to modify aspects and determine their respective expression styles. This is mainly achieved through the <div></div> tag. Let me try adding a <div> tag to the "Homepage": <div> <a href=”b.html”>Homepage</a> </div> Save it and try opening it again. What is the effect? Is it still the same as before the modification? Let's add some modifications to it: <div style=”width:200px;height:100px;border-style:solid;” > During operation, the area we marked is indicated by a blue background! By adding a lot of <div></div> blocks, you can break the web page into eight pieces, haha, and then put what you want in each block. Of course, many <div> add style="" . If these style settings are similar, it would be too troublesome for us to set each one. We usually put these styles in another .css file (which controls the display style of each tag in the web page), and then call it where it is needed. Let's try it below. Create a new Notepad, rename it to c.css and open it, then write: #header{width:200px;height:100px;border-style:solid;} And delete it in a.html Then add <link rel="stylesheet" type="text/css" href="c.css" /> before </head> That is to introduce the c.css file. The advantage of putting CSS into a separate file is that if this style is referenced in many places, we only need to modify this one place and all will change. Otherwise, we have to modify each place manually, which is not conducive to later maintenance. Finally, change the <div> of a.html to <div id=header> Is the effect the same as before? Almost, by now, you should be able to "recite poems even if you can't write them". This article is mainly to give you a general understanding of HTML and know what it is about. There are still many tags that have not been covered. For this, you need to find a book on web design to read and memorize them. |
<<: A brief analysis of how to use border and display attributes in CSS
>>: Learn how to deploy and start multiple tomcats and migrate projects in one article
Recommend
Detailed steps for quick installation of openshift
The fastest way to experience the latest version ...
js canvas implements verification code and obtains verification code function
This article example shares the specific code of ...
About the "occupational disease" of designers
I always feel that designers are the most sensiti...
Detailed explanation of Linux system directories sys, tmp, usr, var!
The growth path from a Linux novice to a Linux ma...
MySQL query sorting and paging related
Overview It is usually not what we want to presen...
Detailed explanation of MySQL execution principle, logical layering, and changing database processing engine
Having used MySQL for such a long time, I believe...
Analysis of mysql view functions and usage examples
This article uses examples to illustrate the func...
Detailed explanation of how to implement secondary cache with MySQL and Redis
Redis Introduction Redis is completely open sourc...
Apache Log4j2 reports a nuclear-level vulnerability and a quick fix
Apache Log4j2 reported a nuclear-level vulnerabil...
Complete steps for deploying confluence with docker
Confluence is paid, but it can be cracked for use...
Web standards learning to understand the separation of structure and presentation
When discussing Web standards, one thing that alwa...
How to change password and set password complexity policy in Ubuntu
1. Change password 1. Modify the password of ordi...
Native js to implement drop-down box selection component
This article example shares the specific code of ...
Detailed explanation of the principle of Vue monitoring data
<body> <div id="root"> <...
Docker builds cluster MongoDB implementation steps
Preface Due to the needs of the company's bus...