XHTML Getting Started Tutorial: Commonly Used XHTML Tags

XHTML Getting Started Tutorial: Commonly Used XHTML Tags
<br />Just like an article, our web pages should have clear paragraphs and titles of different importance. This section will introduce the common tags used to implement titles, paragraphs, etc. in XHTML. Title tags <h1> to <h6>
To define a title, we can use the tags from <h1> to <h6>, and their corresponding end tags are </h1> to </h6>. The font size of <h1> to <h6> decreases in order, and the importance also decreases gradually. The browser will automatically leave a blank line above and below the title. Paragraph tag <p>
To define a paragraph, use <p> and </p>. The content between <p> and </p> will be recognized as a paragraph, which is similar to what we usually call a "natural paragraph". Similar to headings, browsers also add a blank line before and after the start and end of a paragraph. Line break tag <br /> (<br>)
When we want to write text on a new line but don't want to start a new paragraph, we can use the <br /> tag. The <br> tag is also an empty tag and needs to be added with a "/" to comply with XHTML requirements. Horizontal dividing line tag <hr />(<hr>)
The tag for implementing a horizontal dividing line is <hr />. Like the <br> tag, <hr> is also an empty tag. In order to comply with XHTML rules, a "/" needs to be added. (There is a dividing line below)
Notes
Proper use of the four tags introduced above can make users who browse your web pages feel that the web pages have a clear hierarchy, while comments can make you feel that the hierarchy is clear when reading the source code of your own web pages, so that you will not be confused. The content between <!-- and --> is the comment content, which will not be displayed on the web page. See how we insert comments in the following exercise example. Practice Example Now open the web page we saved in the previous section and practice some important tags learned in this section. Remove "This is my first <b>webpage</b>." in <body></body> and enter the following content: <h1>Service Announcement</h1><!--Practice the use of titles and see if the font size becomes larger? -->
<hr /><!--Horizontal dividing line, don't forget the "/" -->
<h2>I am currently providing the following services to primary school students and parents across the country:</h2><!--No. 2 title, check if the font size is smaller than No. 1 title-->
<h3>Services for Students</h3>
<p>
Writing homework for winter and summer vacations (math cannot guarantee that there are no mistakes, Chinese cannot guarantee that there are no typos, and you can ask someone else to write English homework)
<br />If you help bully students below the fourth grade, you will be charged an additional fee.
<br />The Parents Association will help impersonate parents.
</p><!--The above content is a paragraph-->
<h3>VIP Service</h3>
<p>Anyone who purchases all three services will be automatically upgraded to VIP. We will create a personal homepage for you free of charge, which fully complies with W3C's XHTML standards and ISO2009~. </p>
<!--Although the web pages here are relatively clearly organized, don’t you think the interface is ugly and crude? For example, there is no space between lines, and the size 1 heading is too large. The methods of defining the appearance of a web page will be introduced in a later CSS tutorial. Forgot to mention the main point, comments will not appear on the web page, so we can type a lot of nonsense here. However, in the future web design process, try to write some notes that can serve as reminders. -->
After saving the changes, browse the web page to confirm that your web page is the same as this page, and you are done.

<<:  Docker installation rocketMQ tutorial (most detailed)

>>:  Detailed explanation of MySQL and Spring's autocommit

Recommend

Example code for implementing photo stacking effect with CSS

Achieve results step 1. Initial index.html To bui...

Chinese website user experience rankings

<br />User experience is increasingly valued...

Gogs+Jenkins+Docker automated deployment of .NetCore steps

Table of contents Environmental Description Docke...

Detailed explanation of webpack-dev-server core concepts and cases

webpack-dev-server core concepts Webpack's Co...

Example of downloading files with vue+django

Table of contents 1. Overview 2. Django Project 3...

jQuery achieves the effect of advertisement scrolling up and down

This article shares the specific code of jQuery t...

How to parse the attribute interface of adding file system in Linux or Android

The first one: 1. Add key header files: #include ...

MySQL 8.0.13 installation and configuration tutorial under CentOS7.3

1. Basic Environment 1. Operating system: CentOS ...

How to use the HTML form attributes readonly and disabled

1. readonly read-only attribute, so you can get th...

Build a Docker image using Dockerfile

Table of contents Build a Docker image using Dock...

The principle and implementation of two-way binding in Vue2.x

Table of contents 1. Implementation process 2. Di...

CSS makes tips boxes, bubble boxes, and triangles

Sometimes our pages will need some prompt boxes o...

How to solve the DOS window garbled problem in MySQL

The garbled code problem is as follows: The reaso...

JavaScript built-in date and time formatting time example code

1. Basic knowledge (methods of date objects) 😜 ge...