HTML的基本用法——三分钟看完

Mistletoe29

已于 2023-12-23 21:35:19 修改

阅读量1.2k

点赞数 10

分类专栏：嵌入式文章标签： html 前端

于 2023-12-21 20:52:02 首次发布

本文链接：https://blog.csdn.net/weixin_68362857/article/details/135139178

版权

嵌入式专栏收录该内容

11 篇文章 2 订阅

订阅专栏

前言：关于HTML的详细资料大家可以去w3schools这个网站查询更多的资料

添加网站连接：将网站连接写在双引号之间，将文本写在两个a标签之间：

输入标签——input，标签——label

最近学习的ESP8266创建了网络服务器，创建服务器难免会涉及到html文本，下面将学习内容记录如下：

前言：关于HTML的详细资料大家可以去w3schools这个网站查询更多的资料

一、新建html文件

在桌面创建一个.txt文件，并修改文件名以及文件类型为index.html,再将html选择通过vscode打开

二、编写html代码：

一、html基本格式

html的主体包括html的<head>以及html的<body>。html总是由标签开始如<title>开始，带有斜杠的标签结束如</title>，我们的文本信息就写在开始标签和结束标签之间的空间之中。

示例代码：

<!DOCTYPE html>
<html>
    <head>

    </head>





    <body>
        
    </body>
</html>

二、head中的编写

第一次接触我们可以只写上：

<title> html study </title>

三、body中的编写

1.标题标签——h

写下h后vscode会自动提示生成h1的标题标签：

我们在h标签中写一些内容，这里我写好了一些：

h1和h2、h3标题之间的差别是字体大小的差别（h标签不分大小写）

示例代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <h1>APEX_LENGEND</h1>
       <H2>LENGEND </H2>
       <h3>ESP8266 NodeMCU</h3>
    </body>
</html>

写好之后保持代码，我们再点击桌面已经创建好的index.html文件，发现他被浏览器打开，观察内容：

2.段落标签——p

同理，通过写下p自动补全p段落标签，我们的内容也在两个p标签之间进行书写：通过lorem自动生成一些代码。

同理保存代码并观察现象：可知每个p段落标签也会另起一行。

示例代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <h1>APEX_LENGEND</h1>
       <H2>LENGEND </H2>
       <h3>ESP8266 NodeMCU</h3>
       <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis,
         perferendis voluptatum eligendi molestiae possimus obcaecati
         sapiente sint eaque magnam iure aut vero aliquam sit praesentium laborum ipsum quae esse officiis.
       </p>
    </body>
</html>

3.行标签元素——strong、a、em

这一类可以归类为修饰标签，下面我们对其加以应用

strong：将字体加粗

将想要加粗的字体写在两个strong标签之间即可完成操作

示例代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <h1>APEX_LENGEND</h1>
       <H2>LENGEND </H2>
       <h3>ESP8266 NodeMCU</h3>
       <p>
        <strong>Lorem ipsum dolor sit amet</strong> consectetur adipisicing elit. Omnis,
         perferendis voluptatum eligendi molestiae possimus obcaecati
         sapiente sint eaque magnam iure aut vero aliquam sit praesentium laborum ipsum quae esse officiis.
       </p>
       <p>
        Lorem ipsum dolor sit amet consectetur
         adipisicing elit. Minus a, quae modi reprehenderit esse 
         reiciendis ratione ducimus rerum dolores velit, odit alias
         quidem fugit maxime totam beatae molestias aliquid eos!
       </p>
    </body>
</html>

em：斜体

将想要斜体的字体写在两个em标签之间即可完成操作

示例代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <h1>APEX_LENGEND</h1>
       <H2>LENGEND </H2>
       <h3>ESP8266 NodeMCU</h3>
       <p>
        <strong>Lorem ipsum dolor sit amet</strong> consectetur adipisicing elit. Omnis,
         perferendis voluptatum eligendi molestiae possimus obcaecati
         sapiente sint eaque magnam iure aut vero aliquam sit praesentium laborum ipsum quae esse officiis.
       </p>
       <p>
        <em>Lorem ipsum dolor sit amet consectetur</em>
         <strong><em>adipisicing elit.</em></strong> Minus a, quae modi reprehenderit esse 
         reiciendis ratione ducimus rerum dolores velit, odit alias
         quidem fugit maxime totam beatae molestias aliquid eos!
       </p>
    </body>
</html>

a：添加链接

添加网站连接：将网站连接写在双引号之间，将文本写在两个a标签之间：

<a href=""></a>

下面添加跳转至bilibili主页的代码，大家可以自己试试很有意思。

示例代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <h1>APEX_LENGEND</h1>
       <H2>LENGEND </H2>
       <h3>ESP8266 NodeMCU</h3>
       <p>
        <strong>Lorem ipsum dolor sit amet</strong> consectetur adipisicing elit. Omnis,
         perferendis voluptatum eligendi molestiae possimus obcaecati
         sapiente <a href="https://space.bilibili.com/">点击这里进行bilibili跳转</a>  laborum ipsum quae esse officiis.
       </p>
       <p>
        <em>Lorem ipsum dolor sit amet consectetur</em>
         <strong><em>adipisicing elit.</em></strong> Minus a, quae modi reprehenderit esse 
         reiciendis ratione ducimus rerum dolores velit, odit alias
         quidem fugit maxime totam beatae molestias aliquid eos!
       </p>
    </body>
</html>

新建标签页跳转：

点击之后大家会发现原本的页面不见了，被bilibili的个人空间所取代，想要不被覆盖，可以再次给html文本的a标签添加新的属性：

添加target标签，并写上_blank即可完成在新的标签页中跳转啦！

<a href=""target="_blank"></a>

4. 列表——ul、ol

无序列表：

我们使用ul标签去表示无序列表，并在ul标签内部使用li去表示列表的每个元素，就像这样：

    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
    </ul>

现象：

有序列表：

我们用ol标签表示有序列表，依然使用li表示列表中的元素：

       <ol>
        <li>有序表1</li>
        <li>有序表2</li>
        <li>有序表3</li>
        <li>有序表4</li>
      </ol>

现象：

5.表格标签——table

表格标签table由表格头thead和表格体tbody构成：

        <table>
            <thead>

 
            </thead>
            <tbody>
                
            </tbody>
        </table>

表格头

表格头中用tr标签构件行，再在tr标签中用th标签构建列的个数，这样的表述是抽象的，我们直接通过代码和现象给大家说明：

      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
        </tr>
        </thead>
        
        <tbody>

        </tbody>
      </table>

现象：

表格体

表格头中用tr标签构件行，再在tr标签中用td标签构建对应的元素,注意这里使用的是td去构建，并不是th！

        <tbody>
                <tr>
                    <td>命脉</td>
                    <td>蹦蹦蹦@apex.com</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>动力小子</td>
                    <td>挑兵挑将骑马打仗@apex.com</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>机器人</td>
                    <td>是谁在滑索上飞行@apex.com</td>
                    <td>21</td>
                </tr>
        </tbody>

现象：

毫无疑问，这样出来的表格是相当不美观的，由此我们需要通过CSS对其进行美化，但CSS的知识本篇文章暂时不会涉及。

表格全部代码：

     <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
        </tr>
        </thead>

        <tbody>
                <tr>
                    <td>命脉</td>
                    <td>蹦蹦蹦@apex.com</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>动力小子</td>
                    <td>挑兵挑将骑马打仗@apex.com</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>机器人</td>
                    <td>是谁在滑索上飞行@apex.com</td>
                    <td>21</td>
                </tr>
        </tbody>
      </table>

6.表单——form

输入标签——input，标签——label

我们使用form标签来创建表单，由于form标签较为复杂，我们介绍一些常用的元素。通常我们使用label和input两个标签组合使用：

<form action="">
  <label>姓名</label>
  <input type="text">
</form>

现象：可以看见，浏览器出现了可输入文本的文本框，我们可以在这里输入一些自己想要的内容。

我们再多添加几个，并改变input标签里面的type类型：

<form action="">
        <form  >
                <label >姓名</label>
                <input type="text" >
                <label >密码</label>
                <input type="password">
                <label >网站</label>
                <input type="url">
</form>

现象：

<form  >
        <br>
        <div>
            <label >姓名</label>
            <input type="text" >
        </div>
        <br> 
        <div>
            <label >密码</label>
            <input type="password">
        </div>
        <br>
        <div>
            <label >网站</label>
            <input type="url">
        </div>

</form>

可以看出input和label标签均为行级元素，这样排列在一起很不美观，我们可以使用div标签将他们分开，并通过br标签是标签之间产生一些距离。

现象

选择标签——select

接着我们还可以再表单里面添加可以进行选择的选择标签select，并在里面添加可供选择的option标签：

                <label>性别</label>
                <select>
                    <option value="male">男</option>
                    <option value="female">女</option>、
                    <option value="other">其他</option>
                </select>

现象：

HTML还有各种各样的输入类型，大家可以到我推荐的网站查询更多的用法：https://www.w3schools.com/html/html_form_input_types.asp

7. 图像标签——img

键入img，可看出，需要填写两个量，这个便是图片存在的路径，图片可以是网络上的，也可以是本地文件，src为首选图片，当首选图片由于网络原因无法加载时，便会加载alt里面的文件

<img src="" alt="">

这里我们选择照片，并在img标签中新加上限制其宽度的标签width并运行代码：

        <img src="C:\Users\lenovo\Pictures\
        Camera Roll\src=http___c-ssl.duitang.
        com_uploads_item_202002_05_20200205191250
        _d8HNx.jpeg&refer=
        http___c-ssl.duitang.png" 
        alt="C:\Users\lenovo\Pictures\
        联想安卓照片\v2-86a720eeb38ee7
        dd1393ff1fb0d58b3d_r.png"
        width="400">

现象：图片便刷新出来啦！

三、总结代码：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
       <h1>APEX_LENGEND</h1>
       <H2>LENGEND </H2>
       <h3>ESP8266 NodeMCU</h3>
       <p>
        <strong>Lorem ipsum dolor sit amet</strong> 
        consectetur adipisicing elit. Omnis,
         perferendis voluptatum 
         eligendi molestiae possimus obcaecati
         sapiente 
         <a href="https://space.bilibili.com/">点击这里进行bilibili跳转</a>  laborum ipsum quae esse officiis.
       </p>
       <p>
        <em>Lorem ipsum dolor sit amet consectetur</em>
         <strong><em>adipisicing elit.</em></strong> Minus a, quae modi reprehenderit esse 
         reiciendis ratione ducimus rerum dolores velit, odit alias
         quidem fugit maxime totam beatae molestias aliquid eos!
       </p>
       <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
        <li>无序列表4</li>
       </ul>
       <ol>
        <li>有序表1</li>
        <li>有序表2</li>
        <li>有序表3</li>
        <li>有序表4</li>
      </ol>
      <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>年龄</th>
        </tr>
        </thead>

        <tbody>
                <tr>
                    <td>命脉</td>
                    <td>蹦蹦蹦@apex.com</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>动力小子</td>
                    <td>挑兵挑将骑马打仗@apex.com</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>机器人</td>
                    <td>是谁在滑索上飞行@apex.com</td>
                    <td>21</td>
                </tr>
        </tbody>
      </table>

<form  >
        <br>
        <div>
            <label >姓名</label>
            <input type="text" >
        </div>
        <br> 
        <div>
            <label >密码</label>
            <input type="password">
        </div>
        <br>
        <div>
            <label >网站</label>
            <input type="url">
        </div>
        <br>
        <div>
          <label>性别</label>
          <select>
              <option value="male">男</option>
              <option value="female">女</option>
              <option value="other">其他</option>
          </select>
      </div>
</form>
<img src="" alt="">
<img src="C:\Users\lenovo\Pictures\Camera Roll\src=http___c-ssl.duitang.com_uploads_item_202002_05_20200205191250_d8HNx.jpeg&refer=http___c-ssl.duitang.png" 
alt="C:\Users\lenovo\Pictures\联想安卓照片\v2-86a720eeb38ee7dd1393ff1fb0d58b3d_r.png"
width="400">
</body>
</html>