使用
标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
我们通过使用 标签在 HTML 中创建链接。
语法如下:
链接显示的文本
例如:
click here!
上面例子作用是单击click here!
文字,网页链接到http://www.imooc.com
这个网页。
有两种使用 标签的方式:
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
HTML 链接语法链接的 HTML 代码很简单。
它类似这样:Link text
href 属性规定链接的目标。
开始标签和结束标签之间的文字被作为超级链接来显示。
实例 href="http://www.w3school.com.cn/">Visit W3School 上面这行代码显示为:Visit W3School
点击这个超链接会把用户带到 W3School 的首页。
提示:"链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:
target="_blank">Visit W3School! 二十一 mailto在网页中链接Email地址
标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto
做许多其它事情。
二十二 标签,为网页插入图片 注释:从技术上讲,图像并不会插入 HTML 页面中,而是链接到 HTML 页面上。 标签的作用是为被引用的图像创建占位符。 标签有两个必需的属性:src 和 alt。
语法:
举例:
讲解:
1、src:标识图像的位置;
2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;
3、title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);
二十三:表单标签
网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。
语法:
结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
< input >标签
元素
最重要的表单元素是 元素。
元素根据不同的 type 属性,可以变化为多种形态。
1.
输入类型:text 定义供文本输入的单行输入字段:
解释:其实,在HTML中只输入input也可以直接出现一个长矩形的方框,但是用type 区分开,代表输入input框的类型和特点不一样,比如,当type为password的时候,用户在框内输入密码时,矩形框内的显示为黑圆点,起到密码保护作用;至于为什么使用name?在给服务器上传的时候,需要用到你这个input对应的表单是哪一个表单,叫什么名字?在一个页面中那么多的相似的input,我怎么知道你现在需要提交或者改动的是哪一个?这跟人名一样
2.
输入类型:password 定义密码字段:
该特点就是当用户给输入框输入密码,在该框中显示为具有保护特点的内圆圈
3.
输入类型:submit 定义提交表单数据至表单处理程序的按钮。
这里,value的值为按钮的内容
4.
输入类型:reset
5.
Input Type: radio 定义单选按钮。
例: 喜欢
不喜欢
无所谓
注意:该单选按钮中的name值相同,否则,不为单选框,被点击的选框将全部选中
6.
Input Type: checkbox 定义复选框。
爬山
打球
游泳
都不喜欢
注意:这里的name值一定不能一样,而且当在属性中有checked="checked"时,表示在这些复选框中默认选择了某一项
文本输入框、密码输入框:当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。
语法:
1
、
当type="text"时,输入框为文本
输入框;
当type="password"时,
输入框为密码输入框。
2
、name:
为文本框命名,以备后台程序ASP 、PHP使用。
3
、value:
为文本输入框设置默认值。(一般起到提示作用)
举例
:
input属性
当用户需要在表单中输入大段文字时,需要用到文本输入域。
语法:
1
、
2
、cols :
多行输入域的列数。
3
、rows :
多行输入域的行数。
4
、在 标签之间可以输入默认值。
举例
:
联系我们
在这里输入内容...
input和textarea的区别:input是短文本的输入框;textarea是长文本框
元素(下拉列表)
元素定义下拉列表:
实例
Volvo
Saab
Fiat
Audi
讲解:
1、value:
option 元素定义下拉列表 中的一个选项 (一个条目)。
浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素 显示。
option 元素位于 select 元素内部。
提示和注释:
注释: 标签可以在不带有任何属性的情况下使用,但是您通常需要使用 value 属性,此属性会指示出被送往服务器的内容 。
注释:请与 select 元素配合使用此标签,否则这个标签是没有意义的。
提示:如果列表选项很多,可以使用 标签对相关选项进行组合。
2、selected="selected":
设置selected="selected"属性,则该选项就被默认选中 。
也就是说,当我们获取select的内容的时候,其内容为所有option标签以及值。
当我们获取select.value值的时候,其值为被选中的option的value值。
使用下拉列表框进行多选
下拉列表也可以进行多选操作,在标签中设置multiple="multiple"
属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl
键同时进行单击
(在 Mac下使用 Command +单击),可以选择多个选项。如下代码:
看书 旅游 运动 购物
button标签
元素
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例如:
男 女 输入你的邮箱地址
在此代码中,在页面中当点击男字时,自动选中该选项;当在页面中点击女时,选框没有反应,若要选中女这个选项,必须单击该选项框。
标签
标签内的一组表单元素 会在 WEB 浏览器中以特殊的方式显示,比如不同样式的边界、3D效果等。
标签定义及使用说明
标签可以将表单内的相关元素分组。
标签会在相关表单元素周围绘制边框。
提示和注释
提示: 标签为
元素定义标题。
提示: 必须是
元素的一个子元素
HTML 4.01 与 HTML5之间的差异
HTML5 中新增了一些
的新属性:disabled、form、name,HTML 4.01 中不支持这些属性。
button标签
button属性分为一般属性和事件属性。事件属性就是如onclick