Summary of common HTML elements including basic structure, document type, header, body, etc.

1. Basic structure:

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
</body>
</html>

2. Document type:

(1) HTML 4.01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

(2) HTML5

<!DOCTYPE html>

(3) XHTML 1.0

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. Head:
(1) Character set

Copy code

The code is as follows:

(2) Introducing JS

Copy code

The code is as follows:

(3) Introducing CSS

Copy code

The code is as follows:

(4) Set the default jump

Copy code

The code is as follows:

(5) Set search engine related information

Copy code

The code is as follows:

4. Subject:

(1) Basic content

Copy code

The code is as follows:

(2) Form
GET submission: <form id="" action="" method="post"></form>
POST submission: <form id="" action="" method="get"></form>

Submit with file: <form id="" action="" method="post" enctype="multipart/form-data"></form>

Commonly used on the home page:

Copy code

The code is as follows:

Text field: <input id="" name="" class="" type="text"></input>

Password field: <input id="" name="" class="" type="password"></input>
Normal button: <input id="" name="" class="" type="button"></input>
Radio button: <input id="" name="" class="" type="radio"></input>
Multiple-choice button: <input id="" name="" class="" type="checkbox"></input>

To display the uploaded file name:

<input id="" name="" class="" type="text" onchange="document.getElementById('').value=this.value"></input>
File upload: <input id="" name="" class="" type="file"></input>
Hidden field: <input id="" name="" class="" type="hidden"></input>
Submit button: <input id="" name="" class="" type="submit"></input>
Image submit button: <input id="" name="" class="" type="image"></input>
Reset button: <input id="" name="" class="" type="reset"></input>

Multi-line text area: <textarea cols="" rows="" id="" name=""></textarea>

Drop-down menu:

Copy code

The code is as follows:

(3) Click the hyperlink to jump to JS: <a class="" href="#" id="" onclick="location.href=''"></a>
Empty hyperlink (click to jump to the top of the page): <a href="#"></a>
Empty hyperlink (no click): <a href="javascript:void(0);"></a>

Image hyperlink: <a href=""><img width="" height="" src=""></a>

(4) Image Ordinary image: <img src="" >

Set the width and height of the image (reduced proportionally, the file size remains unchanged): <img width="" height="" src="">

(5) Table

Copy code

The code is as follows:

(6) List

Unordered list:

Copy code

The code is as follows:

<ul type="disc">
<li>First point</li>
<li>Second point</li>
</ul>
<ul type="square">
<li>First point</li>
<li>Second point</li>
</ul>
<ul type="circle">
<li>First point</li>
<li>Second point</li>
</ul>

Ordered list:

Copy code

The code is as follows:

<ol type="1">
<li>First point</li>
<li>Second point</li>
</ol>
<ol type="a">
<li>First point</li>
<li>Second point</li>
</ol>
<ol type="A">
<li>First point</li>
<li>Second point</li>
</ol>
<ol type="i">
<li>First point</li>
<li>Second point</li>
</ol>
<ol type="I">
<li>First point</li>
<li>Second point</li>
</ol>

(7) Multimedia

Rolling subtitles: <marquee></marquee>

Background music: <bgsound></bgsound>

Audio, video, flash, mpeg, etc.: <embed></embed>

(8) Row control

Title: <hn></hn>

Paragraph: <p></p>

Line breaks: <br>

Horizontal line: <hr>

5. Framework

Copy code

The code is as follows:

<<: Various ways to achieve the hollowing effect of CSS3 mask layer

>>: Talking about Less and More in Web Design (Picture)