[HTML of Reconstructing Front-End Knowledge System] Take you to recall the vaguely remembered tags of HTML

introduction

In the previous section, it was said that HTML is a markup language, so the most important thing is the markup, that is, the label.

So many labels? Want to write it all here?

Of course not. Commonly used tags are explained here. (commonly up to 70%)

I hope that in the era of frequent front-end frameworks, HTML is still in mind.

review

At the beginning of the introduction, I talked about a simple demo, which is posted here.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>
<body>
    <h1>我是一个页面内容的标题</h1>
    <div>我是一个美男子，你信吗？</div>
</body>
</html>

HTML element

What are HTML elements?

HTML elements refer to all code start tag (start tag) to the end tag (end tag).

what exactly does that mean

<div>我是一个美男子，你信吗？</div>

The above code is a div element, which contains the div start tag, the div element content, and the div end tag, which are combined into a div element.

<body>
    <h1>我是一个页面内容的标题</h1>
    <div>我是一个美男子，你信吗？</div>
</body>

The same code above describes a body element.

`empty HTML element`

In the following label learning, there is a label <br> , which defines a newline. An HTML element like this is called an empty element, and it is closed in the opening tag.

but! In XHTML, XML, and future versions of HTML, all elements must be closed for future iteration and planning.

Future HTML versions will not allow omitting closing tags!

`HTML tags`

Here are explained by function classification

`base label`

`list`

1、<!DOCTYPE>

Define the document type.

2、<html>

Define the HTML document.

3、<head>

Defines information about the document.

4、<title>

Defines the title of the document.

5、<body>

Defines the body of the document.

6、<br>

Define newlines.

7、<h1> - <h6>

Define the HTML title.

8、<p>

Define paragraphs.

9、

Define annotations.

`Example`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>
<body>
    <h1>我是一个页面内容的标题h1</h1>
    <p>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落<br>我是一个一个段落</p>
  <!-- <p>我是一段隐藏的段落</p> -->
</body>
</html>

`Effect`

It seems that after learning these basic tags, you can post a small composition on the Internet. Achieving freedom of writing?

The text alone is too monotonous, let's decorate it

`Decorate text (formatting)`

`list`

1、<abbr>

Define the document type. Originally introduced in HTML 4.0, it means that the text it contains is an abbreviated form of a longer word or phrase.

<abbr title="ni shi zui hao de">nszhd</abbr>

2、<i>

Display italic text effect.

3、<b>

Renders a bold text effect.

4、<em>

Define emphasis text.

5、<strong>

Define text as more emphasized content

6、<u>

Defines underlined text.

`Example`

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>
<body>
        <p><i>我是一个i段落</i></p>
    <p><u>我是一个u段落</u></p>
    <p><em>我是一个em段落</em></p>
    <p><strong>我是一个strong段落</strong></p>
    <p><b>我是一个b段落</b></p>
</body>
</html>

`Effect`

`form`

`list`

1、<form>

Defines an HTML form for user input.

2、<input>

Define input controls.

3、<textarea>

Defines a multi-line text input control.

4、<button>

Define buttons.

5、<select>

Define a selection list (drop-down list).

6、<option>

Define the options in the select list.

`Example`

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>

<body>
  
  
    <form action="form_action.asp" method="get">
        <p>name: <input type="text" name="name" /></p>
        <p>password: <input type="password" name="password" /></p>
        <p><textarea>请填写简介</textarea></p>
        <p>select：
            <select>
                <option value="wo">我</option>
                <option value="zui">最</option>
                <option value="shuai">帅</option>
            </select>
        </p>
        <input type="submit" value="Submit" />
    </form>


</body>

</html>

`Effect`

`Image, Audio and Video`

`list`

1、<img>

Define the image.

2、<canvas>

Define graphics.

3、<svg>

Defines a container for SVG graphics.

4、<audio>

Define the sound content.

5、<video>

Define video.

6、<source>

Define the media source.

`Example`

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>

<body>

    <p>
        img: <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/baidu.9627e61f.png" />
    </p>
    <p>
        canvas: <canvas id="myCanvas"></canvas>
    </p>
    <p>
        svg: <svg width="100" height="100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
        </svg>
    </p>
    <p>audio: 
        <audio src="http://96.ierge.cn/15/235/471737.mp3" controls="controls"></audio>
    </p>
    <p> video: 
        <video src="https://vd3.bdstatic.com/mda-kiq250jsxvmh23gu/hd/cae_h264_nowatermark/mda-kiq250jsxvmh23gu.mp4"></video>
    </p>


</body>

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = '#FF0000';
    ctx.fillRect(0, 0, 80, 100);
</script>

</html>

`Effect`

`Link`

`list`

1、<a>

Define anchors.

<a href="https://www.baidu.com">我是百度</a>

2、<link>

Define the relationship of documents to external resources.

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

`List type`

`list`

1、<ul>

Define an unordered list.

2、<ol>

Define an ordered list.

3、<li>

Defines the items of the list.

4、<dl>

Define the definition list.

5、<dd>

Definition defines the description of the item in the list.

6、<dl>

Defines the items in the definition list.

`Example`

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>

<body>

    <ul>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
    </ul>

    <ol>
        <li>我是第一</li>
        <li>我是第二</li>
        <li>我是第三</li>
    </ol>

    <dl>
        <dt>我</dt>
        <dd>很帅</dd>
        <dt>你</dt>
        <dd>帅吗</dd>
    </dl>


</body>

</html>

`Effect`

`sheet`

`list`

1、<table>

define table

2、<caption>

Define the table title.

3、<th>

Defines the header cell in the table.

4、<tr>

Define the rows in the table.

5、<td>

Define the cells in the table.

6、<thead>

Defines the header content in the table.

7、<tbody>

Define the body content in the table.

8、<tfoot>

Defines the content of table notes (footnotes) in the table.

`Example`

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>我是一个标题</title>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>姓名</th>
                </th>
                <th>分数</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td>小明</td>
                <td>100</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>小红</td>
                <td>70</td>
            </tr>
            <tr>
                <td>小东</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>


</body>

</html>

`Effect`

`other`

`list`

1、<script>

Define client-side scripts.

<script type="text/javascript">
document.write("Hello World!")
</script>

2、<object>

Define the embedded object.

3、<embed>

Define a container for external applications (non-HTML).

<embed src="test.png" />

4、<head>

Defines information about the document.

5、<meta>

Defines meta information about the HTML document.

6、<base>

Defines the default address or default destination for all links in the page.

`Summarize`

There are many HTML tags, I believe most of the xdm understand. But not all can remember.

Let me tell you one thing, I am doing an HTML interview question set, and the accuracy rate is only more than 60%. This is also the purpose of my writing this article. Filling in the gaps.

Refactoring the front-end knowledge system, do you want to work together?

`Blog Description and Acknowledgments`

Part of the information involved in the article comes from the Internet, which contains my own personal summary and opinions. The purpose of sharing is to build a community and consolidate myself.
If the cited information is infringing, please contact me to delete it!
Thanks to the almighty network, W3C, rookie tutorial, etc.!
Thanks to the hard-working himself , personal blog , GitHub learning , GitHub
The public number [Gui Zimo] , the applet [Zimo said]
If you feel that it is helpful to you, please give me a thumbs up and encouragement, and remember to collect the good text! Follow me to grow together!
Column: Reconstructing the front-end knowledge system (HTML)
Luckily I'm here, thank you for coming!

[HTML of Reconstructing Front-End Knowledge System] Take you to recall the vaguely remembered tags of HTML