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

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:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

(2) Introducing JS

Copy code
The code is as follows:

<script language="javascript"></script>
<script language="javascript" src=""></script>
<script language="javascript">var u="__URL__";var a="__APP__";</script>
<script language="javascript" src="__PUBLIC__/js/jquery-1.8.1.min.js"></script>

(3) Introducing CSS

Copy code
The code is as follows:

<style type="text/css"></style>
<link rel="stylesheet" href="" type="text/css">

(4) Set the default jump

Copy code
The code is as follows:

<base href="" />
<base target="_blank" />

(5) Set search engine related information

Copy code
The code is as follows:

<meta name="description" content=",," />
<meta name="keywords" content=",," />

4. Subject:

(1) Basic content

Copy code
The code is as follows:

<body onload="">
<div id="" class=""></div>
<div style="clear:both;">

(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:

<input id="username" name="username" class="" type="text" placeholder="username"></input>
<input id="password" name="password" class="" type="password" placeholder="password"></input>
<input id="login_button" class="button" type="button" value="Login" onclick=""></input>
<input id="register_button" class="button" type="button" value="Register" onclick="location.href=''">


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:

<select name="" size="" multiple>
<option value="" selected></option>
<option value=""></option>
</select>

(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:

<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th width="100px">A</th>
<th width="200px">B</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>

(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:

<frameset rows="50% 50%">
<farme src="">
<farme src="">
</frameset>

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

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

Recommend

MySQL string splitting operation (string interception containing separators)

String extraction without delimiters Question Req...

MySQL date functions and date conversion and formatting functions

MySQL is a free relational database with a huge u...

JS implements sliding up and down on the mobile terminal one screen at a time

This article shares with you the specific code of...

HTML head structure

The following introduces the commonly used head s...

Examples of two ways to implement a horizontal scroll bar

Preface: During the project development, we encou...

Summary of common docker commands (recommended)

1. Summary: In general, they can be divided into ...

Detailed explanation of whether the MySQL database should use foreign key constraints

1. Introduction The topic of whether to use forei...

A small collection of html Meta tags

<Head>……</head> indicates the file he...

WeChat applet realizes multi-line text scrolling effect

This article example shares the specific code for...

Detailed explanation of Docker daemon security configuration items

Table of contents 1. Test environment 1.1 Install...

How to make React components full screen

introduce This article is based on React + antd t...

Problems and experiences encountered in web development

<br />The following are the problems I encou...

JavaScript recursion detailed

Table of contents 1. What is recursion? 2. Solve ...

Detailed explanation of HTML basics (Part 2)

1. List The list ul container is loaded with a fo...

Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects

Table of contents Overview 1. How to animate a DO...