【web前端基础之HTML】——HTML基本知识
文章目录
- 【web前端基础之HTML】——HTML基本知识
-
- 1️⃣表题输出`<hn>`元素
- 2️⃣换行输出`<br>`元素
- 3️⃣保持原始文件样式`<pre>`元素
- 4️⃣水平线`<hr>`元素
- 5️⃣段落`<p>`元素
- 6️⃣粗体显示`<b>`和`<strong>`元素
- 7️⃣斜体`<em>`和`<i>`元素
- 8️⃣加底纹`<mark>`元素
1️⃣表题输出<hn>元素
<hn>元素用于HTML文件的标题输出，一行只显示一个（块元素），具有换行输出和加粗的效果。n的值是1~6，代表6个级别标题，1字号最大，随数字增大字号减小。
案例：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>
效果图⬇️
2️⃣换行输出<br>元素
br 是个单标签，没有 结束标记，主要功能是让文字换行输出。
案例：demo2.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
</head>
<body>
第一行文字<br>
第二行文字
</body>
</html>
效果图⬇️
3️⃣保持原始文件样式<pre>元素
这个元素内的内容在浏览器中呈现的效果和编写程序时效果一样。常用在显示诗词或是程序语言源代码，在网页内保留空格和换行。
案例：demo3.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo3</title>
</head>
<body>
<pre>
pre第一行文字
pre第二行文字
</pre>
</body>
</html>
效果图⬇️
4️⃣水平线<hr>元素
hr 也是个单标签，没有 结束标记。输出为一条水平线。
案例：demo4.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo4</title>
</head>
<body>
下面是一条水平线。
<hr>
</body>
</html>
效果图⬇️
5️⃣段落<p>元素
<p>标签定义段落。
<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间， 您也可以在样式表中规定
案例：demo5.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo5</title>
</head>
<body>
<p>这是第一段文字</p>
<p>这是第二段文字</p>
</body>
</html>
效果图⬇️
6️⃣粗体显示<b>和<strong>元素
b 和 strong 都能让文字粗体显示，两者效果一样，一般重要内容使用strong。
案例：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>
效果图⬇️
7️⃣斜体<em>和<i>元素
i 和 em 都能让文字斜体显示,且显示的效果一样，但em元素语意的重点是强调，如果表示重要内容，建议使用em。
案例：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>
效果图⬇️
8️⃣加底纹<mark>元素
mark标签内文本会以黄色高亮显示。
案例：demo8.html⬇️
<html>
<head>
<meta charset="utf-8">
<title>demo8</title>
</head>
<body>
<p>这是加底纹练习：<mark>高亮文字</mark></p>
</body>
</html>
效果图⬇️
