HTML Basic Tags
HTML Basic Tags （HTML基本）
Understanding basic HTML tags is important while learning HTML. Here are the HTML elements that are used more frequently than others. （在学习HTML时，了解基本的HTML标签非常重要。以下是使用频率高于其他元素的HTML元素。） They are:
the heading <h1>-<h6> tags,
the <p> tag,
the <img /> tag,
the <a> tag,
HTML documents
HTML documents （HTML 文件）
All HTML documents must start with a declaration which specifies the document type: <!DOCTYPE html>.
The HTML document begins with <html> and ends with </html>.
The main part of the HTML document is located between <body> and </body>.
Example of an HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>Here is the paragraph.</p>
</body>
</html>
HTML headings
HTML headings （HTML标题）
The heading elements are used for structuring headings.There are six types of HTML headings starting from <h1> to <h6>.
Example of the HTML headings:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Result
HTML paragraphs
HTML paragraphs （HTML段落）
The <p> element is used for separating HTML paragraphs.
Example of the HTML paragraphs:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Elements example</h2>
<p>This is some paragraph.</p>
<p>This is another paragraph <br/> with line break.</p>
</body>
</html>
Result
HTML images
HTML images （HTML图片）
The attributes of this tag are:
the source file (src), （-源文件（ src ） ，）
the alternative text (alt), （-替代文本（ alt ） ，）
width, （宽）
height. （ 高）
The <img /> tag is used for inserting HTML images.
Example of the HTML images:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is an image example</h1>
<img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>
Result
HTML links
HTML links （HTML链接）
The <a> tag is used for inserting HTML links. You can specify the destination of the link with the help of href attribute.
Example of the HTML links:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3cdoc.com/">w3cdoc.com</a>
</body>
</html>
Result
HTML buttons
HTML buttons （HTML按钮）
You can specify the HTML buttons with the <button> tag.
Example of the HTML <button> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the HTML <button> tag:</h1>
<p>You can specify the HTML buttons with the button tag:</p>
<button type="button">Button</button>
</body>
</html>
HTML lists
HTML lists （HTML列表）
HTML lists are specified with the <ul> tag that is used for specifying an unordered list, or with the <ol> tag that is used to create an ordered list, followed by <li> tags.
Example of the HTML lists:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>An unordered list</h2>
<ul>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Book</li>
</ul>
<h2>An ordered list</h2>
<ol>
<li>Pen</li>
<li>Pencil</li>
<li>Ruler</li>
<li>Book</li>
</ol>
</body>
</html>
HTML horizontal lines
HTML horizontal lines （横线）
The HTML <hr> tag breaks the page into different parts and with the help of a horizontal line, which runs from left to right edge of the page, creates horizontal margins. This is an empty tag.
Example of the HTML <hr> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Welcome to w3cdoc</h1>
<hr>
<p>
Learn to design and build professional website<br>
Learn to design and build professional website
（学习设计和构建专业网站）
</p>
<p>Learn to design and build a professional website</p>
<hr>
<p>Learn to design and build professional website</p>
<p>Learn to design and build professional website</p>
<p>Learn to design and build professional website</p>
<hr>
</body>
</html>