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

Vue implements mobile phone verification code login

This article shares the specific code of Vue to i...

How to deploy python crawler scripts on Linux and set up scheduled tasks

Last year, due to project needs, I wrote a crawle...

JS Canvas interface and animation effects

Table of contents Overview Canvas API: Drawing Gr...

How to enter and exit the Docker container

1 Start the Docker service First you need to know...

Use personalized search engines to find the personalized information you need

Many people now live on the Internet, and searchin...

How to implement page screenshot function in JS

"Page screenshot" is a requirement ofte...

Detailed explanation of the calculation method of flex-grow and flex-shrink in flex layout

Flex(彈性布局) in CSS can flexibly control the layout...

Specific use of routing guards in Vue

Table of contents 1. Global Guard 1.1 Global fron...

MySQL common statements for viewing transactions and locks

Some common statements for viewing transactions a...

Several ways to use v-bind binding with Class and Style in Vue

Adding/removing classes to elements is a very com...

Detailed tutorial on installing mysql on centos 6.9

1. Confirm whether MySQL has been installed. You ...

How to use display:olck/none to create a menu bar

The effect of completing a menu bar through displ...

Two ways to correctly clean up mysql binlog logs

mysql correctly cleans up binlog logs Preface: Th...

JS implements WeChat's "shit bombing" function

Hello everyone, I am Qiufeng. Recently, WeChat ha...

Font selection problem of copyright symbol in Html (how to make copyright symbol more beautiful)

1. Discover the problem &copy; is the copyrigh...