HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)

HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)
I followed the tutorial on W3school. I think the tutorial is very good. There are small exercises in each section. Come on!
All the codes are written by myself. Some books are against writing code by yourself, but I think it is beneficial to write it by yourself because I have no basic knowledge. Hehe, personal opinions vary. .
Exercise 1 :

Copy code
The code is as follows:

<html>
<body bgcolor="yellow">
<h1 align="center">This is heading 1</h1>
<h2 align = "left">This is heading 1</h2>
<h3 align = "right">This is heading 1</h3>
<h4>This is heading 1</h4>
<h5>This is heading 1</h5>
<h6>This is heading 1</h6>
<!--<h7>This is heading 1</h7>-->
<!--Another comment, try the effect-->
<p>This is the first paragraph
</p>
<hr />This is the link area

<a href="http://www.baidu.com">This is baidu link</a>
<br/>
<a href="http://www.w3school.com.cn">This is w3school link</a>
<hr />This is the picture area

<img src = "upload/2022/web/96x96_1758293e995c.jpg" />
<hr />This is the table area
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
<hr />Line break function
<p>This sentence wraps here
</p>
<p>
This paragraph has a lot of blank lines or spaces but the browser automatically ignores them
</p>
<pre>
This is preformatted text that can display blank lines, spaces, and code
</pre>
<pre>
while(true)
{
sum=a+b;
return sum;
cout<<sum;
}
</pre>
</body>
</html>

Exercise 2 :

Copy code
The code is as follows:

<html>
<body>
<b>This text is bold</b>

<strong>This text is strong</strong>

<big>This text is big</big>

<small>This text is small</small>

<em>This text is emphasized</em>

<i>This text is italic</i>

This text contains <sub>subscript</sub>

This text contains<sup>superscript</sup>
<hr />
<pre>
This is pre-formatted text. Haha, you can output spaces and blank lines, right?
</pre>
<code>
while(true)
{
computer code;
}
</code>
<kbd>keyboard input</kbd>

<samp>Sample text</samp>

<var>Computer variable</var>
<hr />
Address Exercise:
<address>
Tianjin SHUDIP

FERT R

ABC (collection)

Zip code: 123456
</address>
Abbreviation Practice

<abbr title = "etcetera">etc.</abbr>

<acronym title = "World Wide Web">www.</acronym>
<hr />Text direction exercise // This function is not supported. The text should be output from right to left.

<bdo dir="rt1">Here is some text</bdo>
<hr />Block reference exercise

This is a long quote
<blockquote>This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote. This is a long quote</blockquote>
This is a short quote
<q>Short quote wow, short quote</q>
<hr />Practice deleting or adding text effects
<p>There are <del>twenty</del><ins>twelve</ins> in a dozen</p>
</body>
</html>

It must be super simple, hehe, just keep going!

<<:  CSS realizes the mask effect when the mouse moves to the image

>>:  How to reduce the memory and CPU usage of web pages

Recommend

MySQL 8.0.13 download and installation tutorial with pictures and text

MySQL is the most commonly used database. You mus...

Web design experience: Make the navigation system thin

<br />When discussing with my friends, I men...

Detailed explanation of mysql basic operation statement commands

1. Connect to MySQL Format: mysql -h host address...

HTML table markup tutorial (22): row border color attribute BORDERCOLORLIGHT

Within rows, light border colors can be defined i...

CSS realizes div completely centered without setting height

Require The div under the body is vertically cent...

MySQL 5.7.16 free installation version graphic tutorial under Linux

This article shares the MySQL 5.7.16 free install...

Linux installation MySQL5.6.24 usage instructions

Linux installation MySQL notes 1. Before installi...

Import CSS files using judgment conditions

Solution 1: Use conditional import in HTML docume...

impress.js presentation layer framework (demonstration tool) - first experience

I haven’t blogged for half a year, which I feel a ...

Introduction to the use of common Dockerfile commands

Table of contents 01 CMD 02 ENTRYPOINT 03 WORKDIR...

How to manage large file uploads and breakpoint resume based on js

Table of contents Preface Front-end structure Bac...

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...

Vue's new partner TypeScript quick start practice record

Table of contents 1. Build using the official sca...