首页 前端知识 html简单案例

html简单案例

2024-03-29 15:03:54 前端知识 前端哥 747 348 我要收藏

以下是5个HTML简单案例:

  1. 显示文本和图片
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落,用于介绍我的网页。</p>
    <img src="image.jpg" alt="一张图片">
  </body>
</html>

该示例中,使用h1标签显示一级标题,使用p标签显示段落,使用img标签显示图片。

  1. 布局和样式
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
      }
      #content {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>我的网页</h1>
    </div>
    <div id="content">
      <h2>欢迎来到我的网页</h2>
      <p>这是一个段落,用于介绍我的网页。</p>
      <img src="image.jpg" alt="一张图片">
    </div>
  </body>
</html>

该示例中,使用style标签定义了网页的样式,使用div标签布局网页,并使用id属性给不同的元素命名。其中,#header#content是两个具有不同样式的区域。

  1. 超链接
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落,用于介绍我的网页。</p>
    <a href="https://www.baidu.com">前往百度</a>
  </body>
</html>

该示例中,使用a标签定义超链接,将该链接指向百度网站。

  1. 表格
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>30</td>
        <td>女</td>
      </tr>
    </table>
  </body>
</html>

该示例中,使用table标签定义表格,使用tr标签定义行,使用thtd标签定义表头和单元格。

  1. 表单
<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <form>
      <label for="name">姓名:</label>
      <input type="text" id="name" name="name"><br>
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email"><br>
      <label for="password">密码:</label>
      <input type="password" id="password" name="password"><br>
      <input type="submit" value="提交">
    </form>
  </body>
</html>

该示例中,使用form标签定义表单,使用label标签定义表单标签,使用input标签定义表单控件,其中type属性指定了控件类型,如文本框、邮箱和密码等。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4255.html
标签
评论
发布的文章

AI代码生成如何实现

2024-04-19 09:04:33

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!