If you are not committed to becoming an artist, then as a developer, you can understand HTML and make simple modifications if necessary. Follow my ideas below to ensure that an article allows you to understand HTML. Of course, during the process of reading it again, it is best to try it yourself, so that the understanding will be deeper. Ok, start from below: (The symbols below are all entered in English)
1. Basic rules of html<html>
<head>
<title>My web page</title>
……………………………………………………………………
</head>
<body>
………………………………………………….
</body>
</html>
Almost all web pages are in this format. This is a must-have mark for a web page. Each mark is placed in < > and ends with </ >, except that there are a lot of messy things added to the ellipsis, which is what we see.
Copy the above code to a notepad and save it as a.html file and it becomes a web page. Let's try it
Below, open it in Notepad, add the word home page between <body>, save it, and then open it, see the following picture:
Next, add a mark on the front and back of the home page and change it to <a href=#>Home page</a>, save it, and see what the effect is?
Is it the hyperlink we usually see online? But the home page is not changed when clicking on the home page here, because we added an empty connection and hit the iron while it is hot. We followed the previous method and created a page, saved as b.html, and then replaced the # above with b.html. After opening, click on the home page, will we jump to page b? (Of course, pages a and b must be in the same directory) Until here, you should understand that in fact, all functions on web pages are implemented by different tags like <a>, and you only remember the functions of these tags when you need to do them.
2. Website structureIf you pay attention when surfing the Internet, the web pages are actually divided into pieces, as shown in the picture
Of course, this is just a general structure. You can also divide it into many blocks according to your needs. The blocks are mainly for modifying aspects and determining their respective expression styles.
This is mainly achieved through the <div></div> tag. Let me try adding the <div> tag to the home page:
<div>
<a href=b.html>Homepage</a>
</div>
Save, try it when opening it, what effect will it be?
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; >
When running, the piece we marked is represented by a blue background!
Add a lot of <div></div> blocks to remove the web page from a large amount, haha, and then put what you want to put in each block.
Of course, many <div>s have style=. If these style settings are similar, each of our settings will be too troublesome. We usually place styles in another .css file (controls the display styles of each mark in the web page), and then call them where they need to be called. Let's try it below
Create a new notepad, rename it to c.css and open it, and write it to:
#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, introduce the c.css file. The advantage of putting css in a separate file is that if many places refer to this style, as long as we modify this place, all of them will change, otherwise we have to manually modify each place, 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, at this point, I probably can’t write poems and recite them. This article is mainly to let everyone have a general understanding of html and know what’s going on. There are still many tags that are not involved. You need to find this book for web design and memorize it.