[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 own，Personal blog，GitHub learning，GitHub
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!