XHTML introductory tutorial: Web page Head and DTD

Although head and DTD will not be displayed on the page, they are important elements of the web page. Why did it go wrong?
In the previous section, we got an error message when we checked our web page, but we wrote it according to the XHTML standard throughout the web page production process. In fact, the problem lies in the "head" of the web page. Let's solve this problem below. In the previous tutorial, except for the <title> tag, we modified the content between <body>, that is, the content displayed on the page. So what does the <head> section of XHTML do? In fact, we can add a lot of information that the browser can "see" in the <head> part. Below we introduce some commonly used tags in the head part.
Note: Most of the tags and attributes in this section are difficult to remember. In fact, they are automatically generated when we use web page creation software to create web pages. The purpose of this section is to understand the meaning of these tags so that you can make some manual modifications when necessary. Now open our "index.html" and insert the following code between <head></head>:
1. <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
This code tells the browser that our web page uses the gb2312 Chinese character encoding. The absence of this <meta> information is one of the reasons why the problem occurred during the last check.
2. <meta name="keywords" content="Primary school students, bullying classmates, winter and summer homework, parents" />
This code is written for search engines, and the content is the keywords of index.html.
Please note that the <meta> tag is also an empty tag, don't forget to add /. The <meta> tag has much more to offer than this, but without actual application, it is difficult to understand the actual usefulness of the <meta> tag. If you want to know more about the <meta> tag, you can search for relevant knowledge on Baidu. Explanation of the <head> tag As mentioned before, the content of the <head> part is not written for viewers, but for browsers and search engines. Therefore the <head> section should not contain any content that is visible on the page. DTD
If we check our web page again now, we will still get an error message saying that the DTD file cannot be found. So what is a DTD file? Simply put, it tells anyone (mostly software like a browser) what set of rules our files are written in before they want to read them. Taking the verification process as an example, if we use the DTD of HTML4.01, the validator will think that we are using the rules of HTML4.01 to write the web page, and then verify our code line by line according to the corresponding rules, and finally return the verification result.
The web pages we create use the rules of XHTML and of course use the XHTML DTD. However, as we mentioned earlier, XHTML's DTD is also divided into relatively loose transitional DTD and strict DTD with quite strict requirements. In this tutorial we will declare a strict DTD in the web page. If you want to know more about DTD, you need to learn XML. This tutorial will not discuss it in detail.
Next we declare the DTD for our web page. Open the "index.html" saved previously and enter the following code in the first line (before the <html> tag):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And add the following attribute in the <html> tag: xmlns="http://www.w3.org/1999/xhtml". This is called the namespace attribute, which belongs to the XML category. We will not discuss it in detail here.
The purpose of this code is to declare that our web page is using xhtml1-strict.dtd. Now submit this page to the W3 validator, and this time it will return a "This Page Is Valid XHTML1.0 Strict!" message. This means that there are no errors in our code and it fully complies with the strict standard of XHTML1. Of course, this may not always be the case in actual work. In the actual web design process, there are always various reasons that cause us to write non-standard code. At this time, the validator will give an error report, and we just need to modify the code according to the prompts.

<<: How does the MySQL database implement the XA specification?

>>: jQuery achieves the shutter effect (using li positioning)

Vue uses echart to customize labels and colors

XHTML introductory tutorial: Web page Head and DTD

Vue uses echart to customize labels and colors

Using JavaScript difference to implement a comparison tool

Solution to the Docker container cannot be stopped and deleted

The implementation principle of Vue router-view and router-link

webpack -v error solution

How to configure Bash environment variables in Linux

Vue implements an example of pulling down and scrolling to load data

MySQL InnoDB MRR Optimization Guide

JavaScript in-depth analysis of the direction of this and how to modify the direction

MySQL 5.7.15 version installation and configuration method graphic tutorial

Recommend

Solution to the problem that the audio component of WeChat applet cannot be played on iOS

Summary of several implementations of returning to the top in HTML pages

Analysis and solution of data loss during Vue component value transfer

Detailed explanation on reasonable settings of MySQL sql_mode

How to check where the metadata lock is blocked in MySQL

Analysis of Difficulties in Hot Standby of MySQL Database

Solution to the docker command exception "permission denied"

Basic JSON Operation Guide in MySQL 5.7

Django uses pillow to simply set up verification code function (python)

Three ways to configure Nginx virtual hosts (based on domain names)

Basic concepts and usage examples of HTML inline elements and block-level elements

Sample code for modifying the input prompt text style in html

Vue two fields joint verification to achieve the password modification function

CentOS 6.6 source code compilation and installation of MySQL 5.7.18 tutorial detailed explanation

jQuery implements accordion small case