ORIGIN

HTML Tags

HTML 6 mins966 words

Some of the most often used tags of HTML. And it’s also a record of learning process.

Title

1
2
3
4
<h1> Title </h1>
<h2> Title </h2>
...
<h7> Title </h7>

Horizontal Line

1
<hr>

Comments

1
<!-- here are the comments -->

Passage

1
<p> This a passage </p>

New Line

1
<br>

Format

Bold

1
<b> This is bold </b>

Italic

1
<i> This is italic </i>

Computer readable

1
<code> print("this is code\n"); </code>

Superscript and Subscript

1
2
H<sub>2</sub>O
10<sup>5</sup>

Link

1
<a href="url">link text</a>

Head

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<head>
<title> title of the doc </title>
<!-- this is the default link of this page -->
<base href="url" target="_blank">
<!-- the relationship with outer resource -->
<link rel="filename" type="text/css" href="dir">
<!-- the styles of this page -->
<style type="text/css">
h {
color: pink
}
</style>
<!-- basic element of this page -->
<meta name="keywords" content="o_oyao, blog">
<meta name="description" content="The blog of o_oyao">
<mata name="author" content="o_oyao">
<meta http-equiv="refresh" content="60">
<meta charset="UTF-8">
</head>

Image

1
<img src="url" alt="description of the picture" width="10" height="10">

Image map with clickable area

1
2
3
4
5
6
<img src="" width="145" height="126" alt="" usemap="#name_of">

<map name="name_of">
<area shape="rect" coords="x1,y1,x2,y2" href="" alt="">
<area shape="circle" coords="x,y,radius" href="" alt="">
</map>

Table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table border="1">
<tr>
<th>Time/Weeks</th>
<th>Monday</th>
...
<th>Sunday</th>
</tr>
<tr>
<td>6:00~6:30</td>
<td>Brush teeth</td>
...
<td>Sleeps</td>
</tr>
</table>

Lists

Unordered list

1
2
3
4
5
<ul>
<li>o_oyao's blog is great</li>
<li>o_oyao's article is easy to understand</li>
<li>o_oyao's content is usable</li>
</ul>

Ordered list

1
2
3
4
5
<ol>
<li>Open o_oyao's blog</li>
<li>Click one article</li>
<li>Leave a comment below</li>
</ol>

Customize list

1
2
3
4
5
6
<dl>
<dt>o_oyao's blog</dt>
<dd>- Awesome and great</dd>
<dt>o_oyao's content</dt>
<dd>- Easy and fun</dd>
</dl>

Block

1
2
3
4
5
6
7
8
9
10
11
<div>
<!-- tags that starts a new line itself -->
<h2></h2>
<p></p>
<ul></ul>
<table></table>
</div>
<spam>
<!-- tags that won't starts a new line -->
<b></b>,<td></td>,<a></a>,<img>
</spam>

Form

1
2
3
4
5
6
7
8
9
10
11
12
<form name="input" action="xx.php" method="get">
name: <input type="text" name="username"> <br>
password: <input type="password" name="pwd">
<!-- radio buttons -->
<input type="radio" name="blog" value="o_oyao's blog is awesome"> <br>
<input type="radio" name="blog" value="o_oyao's blog is fantastic">
<!-- checkboxed -->
<input type="checkbox" name="content" value="I like this blog">
<input type="checkbox" name="content" value="I'll follow this blog">
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>

Frame

1
<iframe src="url" width="" height="" frameborer="0"></iframe>

Using iframe to show target page

1
2
3
4
<iframe src="url" name="blog"></iframe>
<p>
<a href="https://dyingdown.github.io" target="blog">o_oyao's Blog</a>
</p>

Color

Color values are represented by hexadecimal red, green, and blue (RGB).

The lowest value of each color is 0 (hexadecimal 00) and the highest value is 255 (hexadecimal FF).

The hexadecimal value is written as # followed by three or six hexadecimal characters.

The three-digit representation is: #RGB, and the 6-digit representation is: #RRGGBB.

Script

1
2
3
<script></script>
<!-- for client that has no surport of js -->
<noscript>Does not surport JavaScript!</noscript>
TOP
COMMENT
  • ABOUT
  • |
o_oyao
  The Jigsaw puzzle is incomplete with even one missing piece. And I want to be the last piece to make the puzzle complete.
Like my post?
Default QR Code
made with ❤️ by o_oyao
©o_oyao 2019-2024

|