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
Introduction to Sublime Text 2, a web front-end tool
Sublime Text 2 is a lightweight, simple, efficien...
JavaScript DOMContentLoaded event case study
DOMContentLoaded Event Literally, it fires after ...
Docker Compose one-click ELK deployment method implementation
Install Filebeat has completely replaced Logstash...
Implementation steps of vue-element-admin to build a backend management system
Recently, when I was working on a conference heal...
Docker image creation, uploading, pulling and deployment operations (using Alibaba Cloud)
Since I found that the push image always timed ou...
How to use CSS pseudo-elements to control the style of several consecutive elements
When using CSS pseudo-elements to control element...
Practical solution for Prometheus container deployment
environment Hostname IP address Serve Prometheus ...
calc() to achieve full screen background fixed width content
Over the past few years, there has been a trend i...
How to implement html input drop-down menu
Copy code The code is as follows: <html> &l...
Detailed usage of Vue more filter widget
This article example shares the implementation me...
Thoughts on truncation of multi-line text with a "show more" button
I just happened to encounter this small requireme...
Docker container data volume named mount and anonymous mount issues
Table of contents What is a container data volume...
What do CN2, GIA, CIA, BGP and IPLC mean?
What is CN2 line? CN2 stands for China Telecom Ne...
Let's talk about the Vue life cycle in detail
Table of contents Preface 1. Life cycle in Vue2 I...
Detailed explanation of where the image pulled by docker is stored
20200804Addendum: The article may be incorrect. Y...