欢迎访问宙启技术站
智能推送

HTML入门有哪些实操例子

发布时间:2023-05-15 23:18:18

HTML是一种标记语言,它被广泛用于创建网页和应用程序界面。如果你想学习HTML,不仅需要理解它的语法和结构,还需要通过实操来加深理解和熟练技能。

以下是HTML入门的一些实操例子:

1. 创建一个基本的HTML页面

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <h1>This is a Heading</h1>

  <p>This is a paragraph.</p>

</body>

</html>

在这个例子中,我们使用了HTML来创建一个基本的网页,并包含了一个标题和一个段落。

2. 插入图片

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <h1>My Favorite Animal</h1>

  <img src="cat.jpg" alt="A cute cat">

  <p>This is my favorite animal.</p>

</body>

</html>

在这个例子中,我们在网页中插入了一张图片,并给图片添加了一个描述性的文本。

3. 创建链接

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <h1>My Favorite Websites</h1>

  <ul>

    <li><a href="https://www.google.com">Google</a></li>

    <li><a href="https://www.facebook.com">Facebook</a></li>

    <li><a href="https://www.youtube.com">Youtube</a></li>

  </ul>

</body>

</html>

在这个例子中,我们创建了一个列表,每个列表项都是一个链接,点击链接会跳转到相应的网页。

4. 使用表格

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <h1>My Favorite Movies</h1>

  <table>

    <tr>

      <th>Title</th>

      <th>Director</th>

      <th>Release Year</th>

    </tr>

    <tr>

      <td>The Shawshank Redemption</td>

      <td>Frank Darabont</td>

      <td>1994</td>

    </tr>

    <tr>

      <td>The Godfather</td>

      <td>Francis Ford Coppola</td>

      <td>1972</td>

    </tr>

    <tr>

      <td>The Dark Knight</td>

      <td>Christopher Nolan</td>

      <td>2008</td>

    </tr>

  </table>

</body>

</html>

在这个例子中,我们使用了HTML表格来展示我的三部最喜欢的电影,并列出了它们的标题、导演和发行年份。

5. 使用表单

<!DOCTYPE html>

<html>

<head>

  <title>Page Title</title>

</head>

<body>

  <h1>Contact Me</h1>

  <form>

    <label for="name">Name:</label>

    <input type="text" id="name" name="name"><br>

    <label for="email">Email:</label>

    <input type="email" id="email" name="email"><br>

    <label for="message">Message:</label>

    <textarea id="message" name="message"></textarea><br>

    <input type="submit" value="Submit">

  </form>

</body>

</html>

在这个例子中,我们使用HTML表单来收集用户的姓名、电子邮件地址和消息,用户填写完表单后点击提交按钮,表单数据会被发送到服务器进行处理。

上面这些例子只是HTML的基础,你可以通过学习更高级的HTML和其他网页技术(如CSS和JavaScript),来创建更复杂和功能强大的网站和应用程序。