[HTML for reconstructing the front-end knowledge system] takes you to recall those vague HTML tags

[HTML for reconstructing the front-end knowledge system] takes you to recall those vague HTML tags

introduction

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

So many labels? Want to write it all here?

Of course not. Common tags will be explained here. (up to 70% in common use)

I hope that in the era of frequent emergence of various front-end frameworks, HTML will still be kept 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>I'm a title</title>
</head>
<body>
	<h1>I am the title of a page content</h1>
	<div>I am a beautiful man, do you believe it?</div>
</body>
</html>

HTML Element

What are HTML elements?

HTML elements refer to all code from the start tag to the end tag.

What exactly does that mean

<div>I am a beautiful man, do you believe it?</div>

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

<body>
	<h1>I am the title of a page content</h1>
	<div>I am a beautiful man, do you believe it?</div>
</body>

Similarly, the above code describes a body element.

Empty HTML element

In the subsequent label learning, there is a label < br >, which defines line feed. HTML elements like this are called empty elements and are closed in the start tag.

But! For future versions of iteration and planning, all elements must be closed in XHTML, XML, and future versions of HTML.

The end tag cannot be omitted in future HTML versions!

HTML tags

This is explained by function

Base label

list

1,<!DOCTYPE>

Define the document type.

2,<html>

Define HTML documents.

3,<head>

Define information about the document.

4,<title>

Defines the title of the document.

5,<body>

Defines the body of the document.

6,<br>

Define line breaks.

7,<h1> - <h6>

Defines the HTML title.

8,<p>

Define the paragraph.

9,<!-- -->

Define comments.

Examples

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>I'm a title</title>
</head>
<body>
	<h1>I am the title of a page content h1</h1>
	<p>I am a paragraph by paragraph<br>I am a paragraph by paragraph<br>I am a paragraph by paragraph<br>I am a paragraph by paragraph<br>I am a paragraph by paragraph</p>
  <!-- <p>I am a hidden paragraph</p> -->
</body>
</html>

effect

It seems that after learning these basic tags, you can send a small composition online. Realize the freedom of writing?

The separate text is too monotonous, so it needs some modification

Decorated text (formatting)

list

1,<abbr>

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

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

2,<i>

Displays the effect of italic text.

3,<b>

Renders bold text.

4,<em>

Define accent text.

5,<strong>

Define the text as more emphasized content

6,<u>

Defines underlined text.

Examples

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>I'm a title</title>
</head>
<body>
		<p><i>I am a i paragraph</i></p>
    <p><u>I am a u paragraph</u></p>
    <p><em>I am a em paragraph</em></p>
    <p><strong>I am a strong paragraph</strong></p>
    <p><b>I am a b paragraph</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 multiline text input control.

4,<button>

Define buttons.

5,<select>

Define the selection list (drop-down list).

6,<option>

Defines the options in the selection list.

Examples

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>I'm a 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>Please fill in the introduction</textarea></p>
        <p>select: 
            <select>
                <option value="wo">I</option>
                <option value="zui">most</option>
                <option value="shuai">Handsome</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 the drawing.

3,<svg>

Defines the container for SVG graphics.

4,<audio>

Define sound content.

5,<video>

Define video.

6,<source>

Define media sources.

Examples

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>I'm a 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 "> I'm Baidu</a>

2,<link>

Define the relationship between the document and external resources.

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

List type

list

1,<ul>

Defines an unordered list.

2,<ol>

A sequence table is defined.

3,<li>

Define the items of the list.

4,<dl>

Define a list of definitions.

5,<dd>

Defines the description of the item in the definition list.

6,<dl>

Defines the items in the list.

Examples

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>I'm a title</title>
</head>

<body>

    <ul>
        <li>I'm number one</li>
        <li>I'm second</li>
        <li>I'm the third</li>
    </ul>

    <ol>
        <li>I'm number one</li>
        <li>I'm second</li>
        <li>I'm the third</li>
    </ol>

    <dl>
        <dt>I</dt>
        <dd>Very handsome</dd>
        <dt>you</dt>
        <dd>Handsome</dd>
    </dl>


</body>

</html>

effect

form

list

1,<table>

Define table

2,<caption>

Defines the table title.

3,<th>

Defines the header cells in the table.

4,<tr>

Define the rows in the table.

5,<td>

Define the cells in the table.

6,<thead>

Define the header content in the table.

7,<tbody>

Define the body content in the table.

8,<tfoot>

Define the table notes (footnotes) in the table.

Examples

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>I'm a title</title>
</head>

<body>

    <table border="1">
        <thead>
            <tr>
                <th>full name</th>
                </th>
                <th>fraction</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td>Xiao Ming</td>
                <td>100</td>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Xiao Hong</td>
                <td>70</td>
            </tr>
            <tr>
                <td>Xiaodong</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>


</body>

</html>

effect

other

list

1,<script>

Define client script.

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

2,<object>

Define embedded objects.

3,<embed>

Define containers for external applications (not HTML).

<embed src="test.png" />

4,<head>

Define information about the document.

5,<meta>

Defines meta information about HTML documents.

6,<base>

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

summary

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

To tell you one thing, I'm working on an HTML interview question set, and the accuracy rate is only more than 60%. This is also the purpose of this article. Check for leaks and fill vacancies.

Reconstruct the front-end knowledge system. Do you want to work together?

Blog description and thanks

Some of the materials involved in this article are collected from the Internet, including my personal summary and views. The purpose of sharing is to build a community and consolidate myself.

If there is infringement on the cited materials, please contact me to delete!

Thanks for the universal network, W3C, rookie tutorial and so on!

Thank you for your hard work ownPersonal blogGitHub learningGitHub

official account [Guizi Mo] , applet [Zi Mo said]

If you feel helpful to you, you might as well give me some praise and encouragement. Remember to collect good articles! Pay attention to me and grow together!

Column: Refactoring front-end knowledge system (HTML)

Luckily I'm here. Thank you for coming!

Keywords: Front-end html5 html

Added by pha3dr0n on Thu, 20 Jan 2022 16:43:30 +0200