HTML-表单，图像标签和超链接标签

lz7_123

于 2024-10-10 23:57:55 发布

阅读量441

点赞数 10

文章标签： html 前端开发语言前端框架

本文链接：https://blog.csdn.net/lz7_123/article/details/142833065

版权

图像标签<img>

在HTML中，用<img>标签在网页中添加图像，图像以嵌入的方式添加到网页中

1、属性

属性	说明
src	指定图像原，即图像URL路径
alt	图片无法显示所代替的文字
title	鼠标悬停提示文字，提供额外信息
width	图像显示宽度
height	图像显示高度
border	图像的边框大小，默认为图片无边框，即border=“ 0 ”
hspace	图片左右侧的空白像素数（水平边距）
vspace	图片顶部和底部的空白像素数（垂直边距)
align	图像的对齐方式

2、格式

<img src="图像文件名" alt="代替文字" >

3、路径

（1）绝对路径

图片文件在计算机中的完整路径

eg：

<img src="C:\Users\栗子\Desktop\web前端开发技术\1.png" alt="加载失败" width="600px">

运行后：

（2）相对路径

以当前文件资源所在的目录为参照基础，链接到目标文件资源 (或文件夹)的路径

“ . ”——代表目前所在目录

“ .. ”——代表上一层目录

“ . ”——代表根目录

eg：

<img src="./照片1.jpg" alt="读取失败"  width="600" >

运行后

（3）从网路URL导入图片

eg：

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="读取失败"  width="600" >

运行后

超链接标签<a>

超链接(hyperlink)是指从一个网页(或其他文件)指向一个目标的连接关系，这个目标可以是另一个网页，也个图片可以是相同网页上的不同位置，还可以是个文件，甚至是一个应用程序个电子邮件地址。

1、路径

创建超级链接时必须了解链接与被链接对象的路径。在一个网站中，路径通常有3种表示方式：绝对路径、根目录相对路径和文档目录相对路径

2、属性

(1) title属性

光标移到链接文本信息上会显示title属性中的文字内容

（2）target属性

目标窗口的弹出方式

_blank	在新窗口中打开被链接的文档
_self	默认。在相同的框架中打开被链接的文档
_parent	在父框架集中打开被连接的文档
_top	在整个窗口中打开被链接的文档

3、格式

<a href="路径" title="" target="">文本内容</a>

4、链接形式

（1）跳转外部链接 —— URL

eg：

<a href="https://www.csdn.net/" title="csdnw网站" target="_blank">一个超链接</a>

运行后：

点击蓝色字体来到CSDN官网

（2）跳转内部链接
<a href="c:\img src\apple.jpg">点击此处，打开图片</a> (绝对路径)

eg：

<a href="C:\Users\栗子\Desktop\web前端开发技术\gg.png">一张照片</a>

运行得:点击后

(3)跳转当前H5网页文档中的某个地方

建立锚点：<a name="书签名">书签内容</a>

链接锚点：<a href="#书签名">链接文字</a>

eg：

建立锚点

<a href="#这是gg截图">点击此处，跳转到gg截图</a><br>
<a href="#这是照片1">照片1</a><br>

链接锚点

<a name="这是gg截图">gg截图</a><br>
<img src="C:\Users\栗子\Desktop\web前端开发技术\gg.png" alt="加载失败" width="300px" height="200px"><br>
<a name="这是照片1">照片1</a><br>
<img src="C:\Users\栗子\Desktop\web前端开发技术\1.png" alt="加载失败"  width="300px" height="200px"><br>

运行后

表单

用户与网页进行交互的重要途径，是用户输入内容的模块，在一个网页中允许多个表单的出现

1、格式

<form action="URL" name="表单名" method="get|post">....</form>

form：构建表单的基础

name：表单的名字，在一个网页中用于唯一识别一个表单

action：指定表单数据提交的目的地址

method：决定数据提交的方式，常用“get”和“post”，默认用“get”

2、<input>元素

（1）格式

<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y">

type：指定要加入表单项目的类型（text、password等）

name：该表单的控制名，主要在处理表单的作用

size：改变文本框的字符宽度

maxlength：允许输入的最大数目

checked：预先选择该input元素

（2）type属性控制<input>的表现形式

文字和密码的输入

格式：

<input type="text" name="文本框名">

<input type="password" name="密码框名">

eg：

<form action="" >
姓名： <input type="text" name="文本框名"> <br>
密码：<input type="password" name="密码框名">
</form>

运行后 重置和提交按钮

格式：

<input type="submit" value="按钮名">

<input type="reset" value="按钮名">

eg：

<form action="">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>

运行后

复选框和单选纽

格式：

<input type="radio" name="单选按钮名" value="提交值" checked="checked">

<input type="checkbox" name="单选按钮名" value="提交值" checked="checked">

eg：

<form action="">
        您的性别：<input type="radio" name="sex"> 男
                <input type="radio" name="sex"> 女 <br>
您的爱好：<input type="checkbox" >跑步
                <input type="checkbox" >听歌

                        <input type="checkbox" >打球
</form>

运行后