【web前端基础之HTML】——HTML基本知识

文章目录

  • 【web前端基础之HTML】——HTML基本知识
    • 1️⃣表题输出“元素
    • 2️⃣换行输出`
      `元素
    • 3️⃣保持原始文件样式`
      `元素
    • 4️⃣水平线`
      `元素
    • 5️⃣段落`

      `元素

    • 6️⃣粗体显示``和``元素
    • 7️⃣斜体``和``元素
    • 8️⃣加底纹``元素

1️⃣表题输出元素

元素用于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 是个单标签，没有 结束标记，主要功能是让文字换行输出。

案例：demo2.html⬇️

<html><head><meta charset="utf-8"><title>demo2</title></head><body>第一行文字<br>第二行文字</body></html>

效果图⬇️

3️⃣保持原始文件样式

元素

这个元素内的内容在浏览器中呈现的效果和编写程序时效果一样。常用在显示诗词或是程序语言源代码，在网页内保留空格和换行。

案例：demo3.html⬇️

<html><head><meta charset="utf-8"><title>demo3</title></head><body><pre>pre第一行文字pre第二行文字</pre></body></html>

效果图⬇️

4️⃣水平线

元素

hr 也是个单标签，没有 结束标记。输出为一条水平线。

案例：demo4.html⬇️

<html><head><meta charset="utf-8"><title>demo4</title></head><body>下面是一条水平线。<hr></body></html>

效果图⬇️

5️⃣段落

元素

标签定义段落。

元素会自动在其前后创建一些空白。浏览器会自动添加这些空间， 您也可以在样式表中规定

案例：demo5.html⬇️

<html><head><meta charset="utf-8"><title>demo5</title></head><body><p>这是第一段文字</p><p>这是第二段文字</p></body></html>

效果图⬇️

6️⃣粗体显示和元素

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️⃣斜体和元素

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标签内文本会以黄色高亮显示。

案例：demo8.html⬇️

<html><head><meta charset="utf-8"><title>demo8</title></head><body><p>这是加底纹练习：<mark>高亮文字</mark></p></body></html>

效果图⬇️