想成为HTML高手吗？（HTML综合练习）

gauss prime

于 2024-10-08 21:32:13 发布

阅读量463

点赞数 11

文章标签： html 前端

本文链接：https://blog.csdn.net/2301_81146427/article/details/142768883

版权

1.图像

<img> 标签用于在 HTML 页面中嵌入图像。从技术上讲，实际上并没有将图像插入到网页中，而是将图像链接到了网页。<img> 标签创建了一个容器，用于引用图像。
<img>标签有以下属性：

属性名	作用
scr	指定图像的URL、可以是相对路径或绝对路径
alt	如果由于某种原因无法显示图像，则指定图像的替代文本
width	指定图像的宽度
height	指定图像的高度
title	当鼠标移到元素上时显示一段工具提示文本
align	指定图像在页面中的对齐方式

2.超链接

HTML中的链接是一种用于在不同网页之间导航的元素，通常用于将一个网页与另一个网页或资源（如文档、图像、音频文件等）相关联。

HTML 链接通过 <a> 标签创建例如：

<a href="URL">链接文本</a>

<a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。

3.列表

HTML 支持有序、无序和定义列表:

无序列表使用 <ul> 标签，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

<ul>
<li>123</li>
<li>456</li>
</ul>

有序列表使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<ol>
<li>123</li>
<li>456</li>
</ol>

4.表格

HTML 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义），表格可以包含标题行（<th>）用于定义列的标题。代码如下：

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
      <th>列标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1，列1</td>
      <td>行1，列2</td>
      <td>行1，列3</td>
    </tr>
    <tr>
      <td>行2，列1</td>
      <td>行2，列2</td>
      <td>行2，列3</td>
    </tr>
  </tbody>
</table>

5.表单

HTML 表单用于收集用户的输入信息，表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

<form action="/submit" method="post">
<input type="text" placeholder="输入框">
 <!-- 下拉列表 -->
 <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
 </select>

最后使用以上的代码来简单的编写一个HTML页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header><h1 align="center">广东云浮中医药职业学院</h1><p align="center">欢迎来到：<ins>计算机学院</ins></p></header>
    <hr>
    <nav>
        <ul>
            <a href="#"><li>首页</li></a>
            <a href="#"><li>关于我们</li></a>
            <a href="#"><li>学生风采</li></a>
            <a href="#"><li>联系方式</li></a>
        </ul>
    </nav>
    <hr>
    <main>
        <article><h3>最新文章</h3></article>
        <section><h4>文章标题</h4></section>
        <section>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</section>
        <section>    
            <img src="https://bkimg.cdn.bcebos.com/pic/dcc451da81cb39dbb6fd4a7c79411e24ab18972b9ad8?x-bce-process=image/format,f_auto/watermark,image_d2F0ZXIvYmFpa2UyNzI,g_7,xp_5,yp_5,P_20/resize,m_lfit,limit_1,h_1080" 
            alt="" width="200" height="200">
        </section>
        <section>想了解广东云浮中医药职业学院：<a href="./9文本.html">点击这里</a></section>
        <aside>
            <h4>侧边栏</h4>侧边栏内容，如快速连接、广告等。<br>
            <table border="1">
                <tr>
                    <th>专业</th>
                    <th>链接</th>
                </tr>
                <tr>
                    <td>计算机应用技术</td>
                    <td>
                    <a href="./9文本.html">专业A详情</a>
                    </td>
                </tr>
                <tr>
                    <td>数字媒体技术</td>
                    <td>
                    <a href="./9文本.html">专业B详情</a>
                    </td>
                </tr>
            </table>
            <br>
            <b>联系我们</b><br>
            <form action="">
                姓名： <input type="text"><br>
                邮箱： <input type="text"><br>
                <input type="submit">
            </form>
        </aside>
    </main>
<hr>
    <footer>版权所有&copy;2024广东云浮中医药职业学院计算机学院</footer>
</body>
</html>

运行结果如下：