As the basic element of web page construction, HTML tags are one of the contents that every web developer must learn. However, for beginners, HTML tags can seem like an annoying and complicated puzzle. So, how to systematically learn HTML tags? This article will provide you with a detailed learning material for HTML tags, helping you from entry to proficiency, and easily grasp the essence of HTML tags!
1. Introduction to HTML tags
- What is HTML?
HTML is an acronym for Hyper Text Markup Language, which is a markup language for creating web documents and web applications. It uses markup to describe the structure and semantics of a document.
- The role of HTML tags
HTML tags are a special class of code used to describe the structure and content of web pages. By using HTML tags, we can combine text, images, audio, video and other elements to create a rich and layered web page. Common HTML tags are: <html>, <head>, <body>, <p>, <img>, <a>, etc.
- Basic syntax of HTML tags
Every HTML tag starts with <tag name> and ends with </tag name>. Tag names are not case sensitive. Inside the tag, we can insert text or other HTML tags.
For example, the following is a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个由HTML和CSS构建的网页。</p>
<img src="mypic.jpg" alt="我的图片">
<a href="http://www.example.com">点击这里</a>访问我的朋友的网站。
</body>
</html>
In this document, the <html> and </html> tags are used to define the root element of the entire document, and the <head> and </head> tags are used to contain the header information of the document, such as title and style sheet. The <body> and </body> tags contain the main content of the document, including titles, paragraphs, pictures, links, and more.
2. Advanced HTML tags
- text label
Text tags are used to present text-related content, including paragraphs, headings, bold, italics, hyperlinks, and more.
<p>: Used to create paragraphs.
<h1> to <h6>: Used to create 6-level headings.
<strong> or <b>: For bold text.
<em> or <i>: for italic text.
<a>: Used to create hyperlinks.
- image tag
The image tag is used to insert images.
<img>: Used to insert images. You can specify the image's source (src), size (width, height), alternative text (alt), and more.
For example:
<img src="mypic.jpg" alt="我的图片">
- list label
List tags are used to create ordered lists, unordered lists, and definition lists.
<ul> and <li>: Used to create unordered lists.
<ol> and <li>: Used to create ordered lists.
<dl>, <dt> and <dd>: Used to create definition lists.
For example:
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<ol>
<li>第一条</li>
<li>第二条</li>
</ol>
<dl>
<dt>词汇1：</dt>
<dd>这是词汇1的定义。</dd>
<dt>词汇2：</dt>
<dd>这是词汇2的定义。</dd>
</dl>
- form tab
Table tags are used to create tables.
<table>: used to create a table.
<tr>: The row used to create the table.
<td>: The cell used to create the table.
<th>: The header cell used to create the table.
For example:
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>30</td>
<td>程序员</td>
</tr>
<tr>
<td>李四</td>
<td>35</td>
<td>设计师</td>
</tr>
</table>
- form label
Form tags are used to create forms for collecting user-entered data.
<form>: Used to create forms.
<input>: Used to create various types of input boxes.
<label>: Used to create labels for form elements.
For example:
<form action="submit.php" method="post">
<label for="username">用户名：</label>
<input type="text" name="username" id="username">
<label for="password">密码：</label>
<input type="password" name="password" id="password">
<input type="submit" value="提交">
</form>
3. Advanced HTML tags
- multimedia tab
Multimedia tags are used to insert audio and video.
<audio>: Used to insert audio.
<video>: Used to insert video.
For example:
<audio controls>
<source src="myaudio.mp3" type="audio/mp3">
<source src="myaudio.ogg" type="audio/ogg">
您的浏览器不支持音频格式，请升级您的浏览器。
</audio>
<video controls>
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
您的浏览器不支持视频格式，请升级您的浏览器。
</video>
- frame label
Frame tags are used to create frames that separate different windows.
<frame>: Used to define a frame.
<frameset>: Used to define a frameset.
<noframes>: Used to display alternate content in browsers that do not support frames.
For example:
<frameset cols="25%,75%">
<frame src="menu.html">
<frame src="content.html">
</frameset>
<noframes>
您的浏览器不支持框架，请升级您的浏览器。
</noframes>
- Semantic tags
Semantic tags are the same as text tags, but they are used not only to represent the text, but also to represent the semantics of the text.
<section>: Used to represent a section of a document.
<article>: Used to represent an independent article.
<header>: Used to indicate the header of the document.
<aside>: used to represent the sidebar of the document.
<nav>: used to represent the navigation of the document.
For example:
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<section>
<h2>最新消息</h2>
<article>
<h3>标题1</h3>
<p>内容1</p>
</article>
<article>
<h3>标题2</h3>
<p>内容2</p>
</article>
</section>
<aside>
<h2>热门文章</h2>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
<li><a href="#">文章3</a></li>
</ul>
</aside>
- style tag
The style tag is used to add style sheets.
<style>: Used to define internal style sheets.
<link>: Used to link external style sheets.
For example:
<head>
<style>
body {
background-color: #f2f2f2;
}
h1 {
color: red;
}
</style>
<link rel="stylesheet" href="style.css">
</head>
V. Summary
Through the study of this article, you have understood the basic syntax of HTML tags and the usage of common tags. In further study, you can learn some new tags and semantic tags in HTML5, and how to use CSS to add styles to HTML documents. The most important thing is to master the use of HTML tags through practice. Only by constantly writing code and checking the effect can you truly grasp the essence of HTML tags.