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 data compression performance comparison details

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

Method of implementing recursive components based on Vue technology

describe This article introduces a method to impl...

Detailed explanation of how to solve the problem that the docker container cannot access the host machine through IP

Origin of the problem When using docker, I unfort...

Docker compose deploys SpringBoot project to connect to MySQL and the pitfalls encountered

Earlier, we used Docker to simply deploy the Spri...

Deployment and Chinese translation of the docker visualization tool Portainer

#docker search #docker pull portainer 1. Download...

Vue uses monaco to achieve code highlighting

Using the Vue language and element components, we...

MySQL DML language operation example

Additional explanation, foreign keys: Do not use ...

Implementation of restoring data by directly copying files in the data directory in mysql

mysql copies the files in the data directory to r...

CentOS method to modify the default ssh port number example

The default ssh port number of Linux servers is g...

Tips for designing photo preview navigation on web pages

<br />Navigation does not just refer to the ...

Solve the problem of MySQL 8.0 still prompting Access denied even though the input is correct

I started learning MySQL recently. The installati...

Mysql join query syntax and examples

Connection query: It is the result of connecting ...

Introduction to HTML page source code layout_Powernode Java Academy

Introduction to HTML page source code layout This...

Example of stars for CSS rating effect

What? What star coat? Well, let’s look at the pic...

Vue event's $event parameter = event value case

template <el-table :data="dataList"&...