前端web页面（【web前端基础之HTML】——HTML基本知识）
【web前端基础之HTML】——HTML基本知识
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>元素会自动在其前后创建一些空白 。浏览器会自动添加这些空间 ， 您也可以在样式表中规定案例：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>效果图⬇️
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！