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)
Recommend
Detailed explanation of the relationship between the primary key being 0 and the primary key self-selection constraint in MySQL (details)
Preface This article mainly introduces the relati...
This article tells you how to use event delegation to implement JavaScript message board function
Use event delegation to implement message board f...
Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment
1. Download and install VirtualBox software First...
CSS naming conventions (rules) worth collecting Commonly used CSS naming rules
CSS naming conventions (rules) Commonly used CSS ...
How to strike a balance between ease of use and security in the login interface
Whether you are a web designer or a UI designer, ...
Detailed explanation of computed properties in Vue
Table of contents Interpolation Expressions metho...
Web page html special symbols html special characters comparison table
Special symbols Named Entities Decimal encoding S...
Introduction to 10 online development tools for web design
1. Online Text Generator BlindTextGenerator: For ...
Detailed explanation of the idea of xshell remote login to CentOS7 without password login
First, let me talk about the general idea: 1. Log...
Practice of using SuperMap in Vue
Table of contents Preface Related Materials Vue p...
Application of CSS3 animation effects in activity pages
background Before we know it, a busy year is comi...
Detailed explanation of React component communication
Table of contents Component Communication Introdu...
How to remove the dividing line of a web page table
<br />How to remove the dividing lines of a ...
Example code for implementing photo stacking effect with CSS
Achieve results step 1. Initial index.html To bui...
A brief introduction to web2.0 products and functions
<br />What is web2.0? Web2.0 includes those ...