网页设计基础 第三讲：常用HTML标签应用与实践

TechLearn
1,518 阅读4分钟

课程简介

在前两节课中，我们已经学习了HTML的基本概念，并动手创建了我们的第一个网页。今天，我们将深入探讨一些常用的HTML标签，并通过实践来加深理解。掌握这些标签将帮助我们创建更加丰富和功能齐全的网页。

常用HTML标签介绍

HTML（HyperText Markup Language）是一种标记语言，用于描述网页的内容和结构。下面是一些常用的HTML标签及其用途：

文本内容

<p>：段落标签，用于定义一段文本。
<h1>, <h2>, <h3>, ..., <h6>：标题标签，用于定义不同级别的标题，其中 <h1> 是最高级别，<h6> 是最低级别。
<br>：换行标签，用于插入一个换行。
<hr>：水平线标签，用于分割页面内容。

列表

<ul>：无序列表标签，用于创建项目符号列表。
<ol>：有序列表标签，用于创建编号列表。
<li>：列表项标签，用于定义列表中的每一项。
<dl>: 定义列表

视频

<video width="600" controls poster="img/introduction.jpg" preload="metadata"  autoplay loop muted>
            <source src="video/introduction.mp4" type="video/mp4" >
        </video>

其中：

  1. controls：如果此属性存在，浏览器将显示视频播放器的控制界面，包括播放、暂停、音量控制等。

  2. autoplay：如果此属性存在，视频将在加载后自动播放。注意并不是所有浏览器都会在没有用户交互的情况下自动播放视频（尤其是带声音的视频）。

  3. loop：如果此属性存在，视频将循环播放，播放结束后重新开始。

  4. muted：如果此属性存在，视频将在播放时静音，适用于自动播放的场景。

  5. poster：指定视频封面的图片地址，在视频加载之前展示的图像。

  6. preload：这个属性有三个可能的值：

    • none：不预加载视频（默认）。
    • metadata：预加载视频的元数据（如时长、尺寸等）。
    • auto：尽可能预加载视频，以便视频可以更快地开始播放。

  7. width 和 height：设置视频播放器的显示宽度和高度。

  8. src：指定视频文件的路径，通常在 <source> 标签中使用。

  9. type：指定视频文件的 MIME 类型，帮助浏览器选择合适的格式进行播放

链接

：超链接标签，用于创建指向其他网页或位置的链接。

<a href="http://www.budaos.com">布道师</a>
      可以使用 `<a>` 元素的 `download` 属性来指定，当用户点击链接时，链接的资源应该被下载而不是被导航。
      <a href="document.pdf" download="document.pdf"> 下载 PDF </a>
      定义链接的目标行为
      <!-- 在同一个框架中打开 -->
      <a href="https://www.budaos.com" target="_self">打开</a>

      <!-- 在一个新的窗口或标签页中打开 -->
      <a href="https://www.budaos.com" target="_blank">打开</a>

      <!-- 在父框架中打开 -->
      <a href="https://www.budaos.com" target="_parent">打开</a>

      <!-- 在窗口的完整主体中打开 -->
      <a href="https://www.budaos.com" target="_top">打开</a>

      <!-- 在命名的框架中打开 -->
      <a href="https://www.budaos.com" target="framename">打开</a>

图像

    <img>：图像标签，用于插入图像。
    <img>元素的 loading 属性可以用来控制浏览器如何加载图片。它有三个值：eager、lazy 和 auto。  

   <img src=" img/cover-mysql.jpg" alt="" width="300" height="200" loading="eager">

表格

<table>：表格标签，用于创建表格。
<tr>：表格行标签，定义表格的一行。
<td>：表格单元格标签，定义表格中的单元格。
<th>：表格头单元格标签，定义表格头部的单元格。
<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

实践任务

现在让我们通过几个具体的例子来练习这些标签的使用。

示例1：创建一个简单的简历页面

假设我们要为自己创建一个简单的简历页面，页面应该包含以下内容：

个人信息（姓名、联系方式） 教育经历 工作经验

<!DOCTYPE html>

<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的简历</title>
</head>
<body>
    <h1>张三</h1>
    <p>联系方式：<a href="mailto:zhangsan@budaos.com">zhangsan@budaos.com</a></p>
    <h2>教育经历</h2>
    <!--无序列表-->
    <ul type="circle">
        <li>2020-2024，XX大学，计算机科学与技术专业</li>
        <li>2017-2020，XX高中</li>
    </ul>

    <h2>工作经验</h2>
    <!--有序列表-->
    <ol type="1">
        <li>2024-至今，ABC公司，软件工程师</li>
        <li>2022-2023，DEF公司，实习生</li>
    </ol>
<!--列表嵌套-->
<h2>项目经验</h2>
    <ul>  
        <li>软件开发
<ol>
        <li>前端开发</li>
        <li>后端开发</li>  
        <li>数据库开发</li>  
        <li>测试开发</li>  
        <li>运维开发</li>  
</ol>
<li>产品设计</li>  
<li>项目管理</li>  
<li>项目实施</li>  
<li>项目维护</li>  
  </li>
    </ul>
    <!--定义列表-->
    <dl>   
        <dt>CSS</dt>
        <dd>层叠样式表</dd>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>JavaScript</dt>
        <dd>脚本语言</dd>
    </dl>  
</body>
</html>

示例2：设计一个产品列表页面

假设我们需要设计一个产品列表页面，列出公司的几款主打产品。

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>产品列表</title>


    <h1>我们的产品</h1>
    <ul>
        <li>
            <h2>产品A</h2>
            <img src="转存失败，建议直接上传图片文件 product-a.jpg" alt="产品A转存失败，建议直接上传图片文件">
            <p>产品A的描述...</p>
        </li>
        <li>
            <h2>产品B</h2>
            <img src="转存失败，建议直接上传图片文件 product-b.jpg" alt="产品B转存失败，建议直接上传图片文件">
            <p>产品B的描述...</p>
        </li>
    </ul>

总结

通过今天的课程，我们不仅学习了多个常用的HTML标签，还通过实际的例子进行了练习。掌握这些标签将极大地丰富我们的网页内容，并为我们今后的学习打下坚实的基础。请同学们课后继续练习，并尝试使用这些标签来创建更多有趣的内容。

avatar
文章
阅读
粉丝