ORIGIN

HTML Tags

HTMLKnowledge points 6 mins982 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
  • |
  • DONATE
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

|