【HTML】Take you back to remember those fuzzy tags in HTML
introduction
github: 【HTML】Take you back to remember those fuzzy tags in HTML
Content Express: What you can learn after reading this article!
In the previous section, it was said that HTML is a markup language, so the most important thing is markup, that is, tags.
So many tags? Want to write it all out here?
Of course not. Commonly used tags are explained here. (commonly used up to 70%)
I hope that in the era when various front-end frameworks appear frequently, HTML will still be kept in mind.
1. Review
When I first introduced HTML, 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>
2. HTML elements
2.1. What are HTML elements?
HTML elements refer to all code from 开始标签（start tag）to .结束标签（end tag）
What exactly do you 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, and they are combined into a div element.
<body>
<h1>我是一个页面内容的标题</h1>
<div>我是一个美男子，你信吗？</div>
</body>
The same above code describes a body element.
2.2. Empty HTML elements
In the subsequent label learning, there is such a label <br>, which defines line breaks. 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 iteration and planning purposes.
Future versions of HTML will not allow the closing tag to be omitted!
3. HTML tags
Here is a breakdown by function
3.1. Basic label
list:
<!DOCTYPE>Define the document type.<html>Defines an HTML document.<head>Defines information about a document.<title>Defines the title of the document.<body>Defines the body of the document.<br>Define newline.<h1> - <h6>Defines the HTML title.<p>Define paragraphs.<!-- -->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 words?
The text alone is too monotonous, let's modify it
3.2. Modified text (formatting)
list:
<abbr>Define the document type. Originally introduced in HTML 4.0, it indicates that the text it contains is a shortened form of a longer word or phrase.
<abbr title="ni shi zui hao de">nszhd</abbr>
<i>Show italic text effect.<b>Renders a bold text effect.<em>Defines emphasized text.<strong>Define the text as a stronger tone of emphasis<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:
3.3. Form
list:
<form>Defines an HTML form for user input.<input>Define input controls.<textarea>Defines a multi-line text input control.<button>Define the button.<select>Defines a selection list (drop-down list).<option>Defines the options in a 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:
3.4. Image, audio and video
list:
<img>Define the image.<canvas>Define the graph.<svg>Defines a container for SVG graphics.<audio>Define the sound content.<video>Define the video.<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 :
3.5. Links
list :
<a>Define the anchor.
<a href="https://www.baidu.com">我是百度</a>
<link>Defines a document's relationship to an external resource.
<link rel="stylesheet" type="text/css" href="demo.css" />
3.6. List type
list :
<ul>Define an unordered list.<ol>Defines an ordered list.<li>Defines the items of the list.<dl>Define a list of definitions.<dd>Defines a description for an item in the definition list.<dl>Defines an item 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 :
3.7. Form
list :
<table>define table<caption>Define the table title.<th>Defines the header cells in the table.<tr>Defines the rows in the table.<td>Define the cells in the table.<thead>Defines the header content in the table.<tbody>Define the body content in the table.<tfoot>Defines the content of table notes (footnotes) in tables.
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 :
3.8. Others
list :
<script>Define client scripts.
<script type="text/javascript">
document.write("Hello World!")
</script>
<object>Defines embedded objects.<embed>Defines a container for external applications (non-HTML).
<embed src="test.png" />
<head>Defines information about a document.<meta>Defines meta information about an HTML document.<base>Defines the default address or default target for all links in the page.
4. Summary
There are many tags in HTML, I believe most xdm understand it. But not all remember.
Let me tell you one thing, I am doing HTML interview questions, and the accuracy rate is only more than 60%. This is also the purpose of my writing this article. Filling in the gaps.
Do you want to restructure the front-end knowledge system?
Good series
HTML History: 【HTML】Would you still read HTML? Take you to review or walk into
HTML tags: 【HTML】Take you back to those vaguely remembered tags in HTML
HTML video: 【HTML】Talk about how to play HTML5 video
HTML audio: [HTML] Changes brought by HTML5 to web audio
HTML semantics: [HTML] Talk about the understanding of HTML5 semantics
HTML positioning: 【HTML】HTML5's new feature Geolocation
HTML drag and drop: 【HTML】Have you used HTML5 drag and drop?
HTML cache: [HTML] Why don't you take a look at HTML5's WebStorage?
HTML Application Cache: 【HTML】HTML5 Application Cache
HTML的Web Werkors：【HTML】HTML5的Web Werkors
Blog Description and Acknowledgments
Some 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 strengthen myself.
If the referenced material is infringing, please contact me to delete it!
Thanks to the almighty network, W3C, rookie tutorials, etc.!
Thank you for your hard work , personal blog , GitHub learning , GitHub
Public account [Guizimo] , mini program [Zimoshuo]
If you feel that it is helpful to you, you might as well give me a thumbs up to encourage me, remember to collect good articles! Follow me and grow together!
Luckily I'm here, thanks for coming!