[HTML based on web front-end]——Basic knowledge of HTML
Article directory
1️⃣Table title output <hn>element
<hn>The element is used for the title output of the HTML file. Only one (block element) is displayed in a line, and it has the effect of wrapping output and bolding. The value of n is 1~6, representing 6 levels of titles, 1 has the largest font size, and the font size decreases with the increase of the number.
Case: demo1.html⬇️
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo1</title>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>
</body>
</html>
Rendering ⬇️
2️⃣ Newline output <br>element
br is a single tag without an end tag. Its main function is to wrap text and output it.
Case: demo2.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
</head>
<body>
第一行文字<br>
第二行文字
</body>
</html>
Rendering ⬇️
3️⃣Keep original file style <pre>elements
The content inside this element renders in the browser the same as when writing a program. It is often used to display poetry or program language source code, and to reserve spaces and line breaks in web pages.
Case: demo3.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo3</title>
</head>
<body>
<pre>
pre第一行文字
pre第二行文字
</pre>
</body>
</html>
Rendering ⬇️
4️⃣Horizontal line <hr>elements
hr is also a single tag with no closing tag. The output is a horizontal line.
Case: demo4.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo4</title>
</head>
<body>
下面是一条水平线。
<hr>
</body>
</html>
Rendering ⬇️
5️⃣ Paragraph <p>elements
<p>Tags define paragraphs.
<p>The element automatically creates some whitespace before and after it. Browsers add these spaces automatically, or you can specify in your stylesheet
Case: demo5.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo5</title>
</head>
<body>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
</body>
</html>
Rendering ⬇️
6️⃣ Bold display <b>and <strong>elements
Both b and strong can make the text bold, and both have the same effect. Generally, use strong for important content.
Case: demo6.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo6</title>
</head>
<body>
<p>这是粗体练习1：<b>这是粗体文字1</b></p>
<p>这是粗体练习2：<strong>这是粗体文字2</strong></p>
</body>
</html>
Rendering ⬇️
7️⃣Italics <em>and <i>elements
Both i and em can make the text italicized, and the display effect is the same, but the emphasis of the semantics of the em element is emphasis. If it expresses important content, it is recommended to use em.
Case: demo7.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo7</title>
</head>
<body>
<p>这是斜体练习1：<i>这是斜体文字1</i></p>
<p>这是斜体练习2：<em>这是斜体文字2</em></p>
</body>
</html>
Rendering ⬇️
8️⃣ Shading <mark>elements
The text inside the mark tag will be highlighted in yellow.
Case: demo8.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo8</title>
</head>
<body>
<p>这是加底纹练习：<mark>高亮文字</mark></p>
</body>
</html>
Rendering ⬇️
