博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html整理(2)
阅读量:5131 次
发布时间:2019-06-13

本文共 2489 字,大约阅读时间需要 8 分钟。

使用mailto在网页中链接Email地址

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。下面一一进行讲解,请看详细图示:

注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

下面是一个完整的实例:

对此影评有何感想,发送邮件给我

 

 

<img>标签来插入图片。

语法:

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

举例:

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

讲解:

1、src:标识图像的位置;

2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

4、图像可以是GIF,PNG,JPEG格式的图像文件。

使用表单标签,与用户交互

网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

语法:

讲解:

1.<form> :<form>标签是成对出现的,以<form>开始,以</form>结束。

2.action 浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。

3.method  数据传送的方式(get/post)。

注意:

1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。

2、method:post/get的区别这一部分内容属于后端程序员考虑的问题。感兴趣的小伙伴可以查看本小节的wiki,里面有详细介绍。

 

文本输入框、密码输入框

当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框

语法

1、type:

   当type="text"时,输入框为文本输入框;

   当type="password"时, 输入框为密码输入框。

2、name:为文本框命名,以备后台程序ASP 、PHP使用。

3、value:为文本输入框设置默认值。(一般起到提示作用)

举例

姓名:
密码:

在浏览器中显示的结果:

账户:
密码:

 

 

文本域,支持多行文本输入

当用户需要在表单中输入大段文字时,需要用到文本输入域。

语法

1、<textarea>标签是成对出现的,以<textarea>开始,以</textarea>结束。

2cols :多行输入域的列数

3rows :多行输入域的行数

4、在<textarea></textarea>标签之间可以输入默认值

举例

注意:代码中的<label>标签在本章5-9中讲解。

在浏览器中显示结果:

 

 

使用单选框、复选框,让用户选择

在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。请看下面的例子:

语法:

1、type:

   当 type="radio" 时,控件为单选框

   当 type="checkbox" 时,控件为复选框

2、value:提交数据到服务器的值(后台程序PHP使用)

3、name:为控件命名,以备后台程序 ASP、PHP 使用

4、checked:当设置 checked="checked" 时,该选项被默认选中

如下面代码:

注意:代码中的<label>标签在本章 5-9 中有讲解。

在浏览器中显示的结果:

 

同一组的单选按钮,name 取值一定要一致,比如上面例子为同一个名称“radioLove”,这样同一组的单选按钮才可以起到单选的作用。

 

 

使用下拉列表框,节省空间

下拉列表在网页中也常会用到,它可以有效的节省网页空间。既可以单选、又可以多选。如下代码:

讲解:

1、value:

2、selected="selected"

设置selected="selected"属性,则该选项就被默认选中。

在浏览器中显示的结果:

转载于:https://www.cnblogs.com/Yimi/p/5859078.html

你可能感兴趣的文章
【题解】青蛙的约会
查看>>
autopep8
查看>>
GIT在Linux上的安装和使用简介
查看>>
Android 官方新手指导教程
查看>>
幸运转盘v1.0 【附视频】我的Android原创处女作,请支持!
查看>>
[51nod] 1199 Money out of Thin Air #线段树+DFS序
查看>>
Red and Black(poj-1979)
查看>>
安装 Express
查看>>
存储(硬件方面的一些基本术语)
查看>>
观察者模式
查看>>
Weka中数据挖掘与机器学习系列之基本概念(三)
查看>>
Win磁盘MBR转换为GUID
查看>>
大家在做.NET B/S项目的时候多用什么设技术啊?
查看>>
Java SE和Java EE应用的性能调优
查看>>
leetcode-Sort List
查看>>
中文词频统计
查看>>
了解node.js
查看>>
想做移动开发,先看看别人怎么做
查看>>
Eclipse相关集锦
查看>>
虚拟化架构中小型机构通用虚拟化架构
查看>>