HTML之图像、超链接、表格、表单

最新推荐文章于 2025-06-11 19:56:42 发布

原创最新推荐文章于 2025-06-11 19:56:42 发布 · 3.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html

WebBasic 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML中的图像元素，包括如何使用`<img>`标签，绝对路径和相对路径的概念。接着，讲解了超链接的创建和锚点的用法。接着，深入探讨了表格的创建，如跨行`rowspan`和跨列`colspan`，以及行分组。最后，解释了HTML表单的基本概念、表单元素和不同类型的input元素，如文本框、密码框、单选框、复选框、按钮、隐藏域和文本域等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图像

图像元素

<img>元素将图像添加到页面，属于单标签
必须属性:src
常用属性:width、height

绝对路径和相对路径

绝对路径

从盘符开始写出图片的完整的路径
如 D:/images/1.jpg
缺点：
- 路径写的很长，麻烦
- 若项目上线时，用户将网页和图片存到别的盘符下，那么所有路径都错了。

相对路径

只需要写出图片和网页的相对位置。
优点：
- 简单
- 上线时无论将项目存到哪个盘符下，网页和图片的相对位置没有变化

    <!-- 图片和网页平级 -->
    <img src="01.jpg"/>
    <!-- 图片在网页下级 去文件夹下面找02.jpg-->
    <img src="folder name/02.jpg"/>
    <!-- 图片在网页上级 ..为去上一级目录下找03.jpg-->
    <img src="../03.jpg"/>

超链接

创建一个超级链接

使用<a>元素创建一个超级链接。语法如下：

<a href="" target="">文本</a> 
- href属性：链接的URL
- target属性：目标打开方式，可取值为_blank、self等

    <p>
        <a href="http://blog.youkuaiyun.com/qq_27853161">博客地址</a>
        <a href="http://blog.youkuaiyun.com/qq_27853161" target="_blank">我的博客</a>
    </p>

锚点

锚点是文档中某行的一个记号
– 用于链接到文档中的某个位置
定义锚点
– <a name="a1">锚点一</a>
链接到锚点：在锚点名字前面加上#号
– <a href="#a1#">回到锚点一</a>

    <!-- 顶部默认就是锚点,没有名字. -->
    <p><a href="#">回到顶部</a></p>

表格

表格的创建

定义表格：使用成对的<table></table>标记
创建行：<tr></tr>

创建列(单元格)：<td></td>

<table border="1" cellspacing="0" width="30%">
        <tr>
            <td>Swm</td>
            <td>is</td>
        </tr>
        <tr>
            <td>a</td>
            <td>boy</td>
        </tr>
    </table>

跨行 rowspan

<table border="1" cellspacing="0" width="30%">
        <tr>
            <td rowspan=2>Swm</td>
            <td>is</td>
        </tr>
        <tr>
            <!--<td>a</td>-->
            <td>boy</td>
        </tr>
    </table>

跨列 colspan

<table border="1" cellspacing="0" width="30%">
        <tr>
            <td colspan=2>Swm</td>
            <!--<td>is</td>-->
        </tr>
        <tr>
            <td>a</td>
            <td>boy</td>
        </tr>
    </table>

行分组

表格可以划分3个部分：表头、表主体、表尾
表头行分组：<thead></thead>
表主体分组：<tbody></tbody>
表尾行分组：<tfoot></tfoot>

<table border="1" cellspacing="0" width="40%">
        <thead>
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>金额</td>
            </tr>
        </thead>
        <tbody style="color: blue;">
            <tr>
                <td>1</td>
                <td>鼠标</td>
                <td>50</td>
            </tr>
            <tr>
                <td>2</td>
                <td>键盘</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">合计</td>
                <td>150</td>
            </tr>
        </tfoot>
    </table>

表单

WHAT IS 表单？

表单用于显示，收集信息，并提交信息到服务器
表单二要素
– Form元素
– 表单控件
-表单就是从浏览器向服务器传输数据的手段

表单元素

定义表单：<form></form>,表示要将此元素所涵盖的控件中的数据传输给服务器
主要属性
– action:表单提交的URL
– method：指出表单数据提交的方式
– enctype：表单数据进行编码的方式

表单控件

表单控件是一种HTML元素，是信息输入项
表单控件包括

input 元素(具有不同的外观)：

<input type="某某框"/>

- 文本框:text AND 密码框:password

主要属性:
– value：由访问者自由输入的任何文本
– maxlength：限制输入的字符数
– 其他元素：设置文本控件为只读

- 单选框:radio AND 复选框:checkbox

主要属性:
– value：文本，当提交form时，如果选中了单选按钮，value就被发送到服务器
– name：用于实现分组，一组单选框或者复选框的名称必须相同
– checked：设置选中

按钮

提交按钮：submit
– 传送表单数据给服务器端或其它程序处理
重置按钮：reset
– 清空表单的内容并把所有表单控件设置为最初的默认值
普通按钮：button
– 用于执行客户端脚本
主要属性
– value：按钮的名字

隐藏域

文本选择框

隐藏域：hidden
– 在表单中包含不希望用户看见的信息
文本选择看：file
– 选中要上传的文件

其他元素

文本域

相当于多行文本框
语法：<textarea>文本</textarea>
主要属性
– cols：指定文本区域的列数
– rows：指定文本区域的行数
– readonly：只读

下拉选

下拉选择内容
语法：

 <select>
     <option value="1">Java</option>
     <option value="2">php</option>
     <option value="3">.net</option>
 </select>

这里写图片描述