Introduction to Common XHTML Tags

<br />For some time, I found that many people do not know how to use XHTML, not only ordinary beginners, but also some programmers do not know how to write XHTML. Here I would like to summarize some common application problems, which may help everyone to reach a tacit understanding in communication and cooperation.
There are many tags in XHTML, but only a few are frequently used, and you only need to master these few. Let's list them one by one: div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
In my mind I always think of it as a bottle or a box, and I feel it is quite hard. This div has no special meaning and can be used in many places, which means it can hold different things. The correct way to write it is that <div></div> must have a closing portion. Everyone uses it for layout purposes, and some people use it to store articles to form paragraphs. In fact, this approach is not very good, because there is naturally a specific tag to use as the paragraph of the article. That is the <p></p> tag we will talk about below, but use DIV to wrap all the paragraphs as a whole. This is very practical.
p This is a tag with specific semantics, indicating a paragraph, and is used to distinguish paragraphs. In most browsers, P basically has a top and bottom margin. But there are no line indents, because line indents are just a way to indicate paragraphs but are not necessary or required. Therefore, when using the P tag, you can set the line indent for P if necessary. I recommend not using P outside of the article, because P has certain semantics and may not be appropriate if used elsewhere. The correct way to write it is <p></p>
span is also a very commonly used tag. This tag can be said to be very similar to div and has no specific meaning, but it is a cascading element, not a block-level element. I always think of it as a bag. Unlike a box, it does not have its own width and height. Its width and height can only be determined by the amount of content, so it is very much like a bag. This tag is exactly complementary to div.
ul,li This is a list. In the list, besides UL there is also OL, but I think OL is a bit useless. Because UL can have the same numerical sorting effect as OL through CSS definition. So generally I don’t recommend using OL, UL is enough. UL is block-level, and its child li is also a block-level tag. The correct way to write it is <ul><li></li></ul> The LI tag is wrapped by the UL tag. There can be countless LI tags in the UL tag. The LI tag cannot be used independently. And the LI tag must be sealed, which is not only a matter of aesthetics, but also beneficial for later maintenance. Many programmers don't like to seal this LI. The purpose of UL list is mainly to list one-dimensional data of the same type. Specific examples include using it on menus, listing some rules in articles, etc. There is a special form in the list that is different from UL. That is the following DL
dl,dt,dd This is a very special combination of three labels. Here DT refers to the title and DD refers to the content. DL is the container that contains them. The correct way to write it is <dl><dt></dt><dd></dd></dl>. There can be many groups of DT and DD in DL. When there are many groups, try to match one DT with one DD. If there is a lot of content in DD, you can add a P tag in DD for use together. The DL list is a very good list format and can be used more often.
a This represents a link, which is a specific attribute and is also the most magical tag on the web page. Because it connects countless web pages together. The correct way to write it is: <a href="" title=""></a>, where href indicates the target address and TITLE is the prompt text when the mouse is hovering over it, which is optional. But the benefits must outweigh the absence.
img This is an image tag, and also a tag with specific attributes. The normal way of writing is: <img src="" alt="" title=""/> Here src is the target address, ALT and TITLE are replacement text, ALT is IE-specific, and TITLE is universal for other browsers. But remember that the backslash at the end is a must.
H This is a series of labels, from H1 to H6, a total of six. Some people say it is too few, some say it is just right, and some say that so many are not needed. Anyway, I think it's about the same. The correct way to write it is: <h></h> is mainly used to store titles, and some friends use it for other purposes. Personally, I think it’s better to leave this tag alone and just use it as a title. It is best not to have any mutual inclusion between these six labels.
The word strong means to emphasize, which has semantics and its function is very simple. As for the sample work, whether to emphasize with bold or to use color to emphasize is up to you. The correct way to write it is <strong></strong>
em is very similar to strong and is used to express emphasis. The default setting in most browsers is italic. The usage is the same as strong. The writing method is:
The form is not mentioned here because the form has basically not changed and there is nothing special to say.

<<: CSS3 transition to achieve underline example code

>>: Bundling non-JavaScript static resources details

Docker installs Elasticsearch7.6 cluster and sets password

Introduction to Common XHTML Tags

Docker installs Elasticsearch7.6 cluster and sets password

How to prevent hyperlink redirection using JavaScript (multiple ways of writing)

Detailed tutorial on downloading mysql on Windows 10

MySQL master-slave synchronization, implementation principle of transaction rollback

Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)

Solve the problem of Nginx returning 404 after configuring proxy_pass

Vue implements dynamic circular percentage progress bar

Windows Server 2008 Tutorial on Monitoring Server Performance

MySQL 8.0.18 uses clone plugin to rebuild MGR implementation

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Recommend

Ubuntu 18.0.4 installs mysql and solves ERROR 1698 (28000): Access denied for user ''root''@''localhost''

Docker link realizes container interconnection

Detailed explanation of using top command to analyze Linux system performance

A small piece of HTML code will include the Baidu search bar in your page

Centos7.4 server installation of apache and solutions to problems encountered during the installation process

40 fonts recommended for famous website logos

Introduction and use of five controllers in K8S

jQuery implements time selector

Solve the problem that Alibaba Cloud SSH remote connection will be disconnected after a short time

Installation of mysql5.7 and implementation process of long-term free use of Navicate

CentOS 7.5 deploys Varnish cache server function

How to implement the King of Glory matching personnel loading page with CSS3

Five delay methods for MySQL time blind injection

How to make Python scripts run directly under Ubuntu

Tomcat first deployment web project process diagram