HTML之插入图片及多媒体页面和表单

图像标记 ----img

在 HTML 4.01 中,不赞成使用以下布局属性:align, border, hspace、vspace。在 HTML5 中不支持这些属性。
属性有;

  • width,height:图片的高度
  • src:图片的位置
  • alt:提示文字
  • usemap:映像地图
多媒体《embed》

在这里插入图片描述
可以加入视频。

bgsound设置背景音乐。

属性:

  • src:设置文件位置
  • loop:设置循环次数。

默认好像是-1,表示无限次。

超链接

设置普通的链接非常简单,就是用《a》《/a》

设置图像热区链接

图像的整体可以是一个超链接的载体,而且图像的一部分或多个部分也可以分为不同的链接,这就是图像的热点区域

语法结构为:

	<body >
		<map name = "">
	    	<area shape="circle" coords="231, 235, 635" href="#http://123455"/>
	        <area shape="circle" coords="231, 235, 635" href="#http://123455"/>
	    </map>
	</body>

在area中,定义了热区的位置和链接,其中shape定义了热区的形状,(形状包括:rect(矩形), circle(圆形), poly(多边形)三种)
coords定义了区域的坐标位置,
map中的name必须是唯一的。

其实,相当于在一张图片上定义了多个超链接。

锚点:

相当于在文本内部的超链接,点击到达本文章的某个地方。

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>无标题文档</title>
	</head>
	s
	<body >
		<p> <a href="#a">公司介绍 </a>   <a href="#b"> 公司新闻</a>       <a href="#c"> 招聘中心</a></p>
	    <p><a name = "a"></a>公司介绍</p>
	    <p>百度(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。百度愿景是:成为最<br />懂用户,并能帮助人们成长的全球顶级高科技公司。 [1]<br /> 
	"百度"二字,来自于八百年前南宋词人辛弃疾的一句词:众里寻他千百度。这句话描述了词人对理想<br />的执着追求。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力,抱着技<br />术改变世界的梦想,他毅然辞掉硅谷的高薪工作,携搜索引擎专利技术,于 2000年1月1日在中关村创建了百度公<br />司。
	百度拥有数万名研发工程师,这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先<br />进的搜索引擎技术,使百度成为中国掌握世界尖端科学核心技术的中国高科技企业,也使中国成为美国、俄罗斯、和,<br />韩国之外,全球仅有的4个拥有搜索引擎核心技术的国家之一。</p>
	<p><a name = "b"></a>公司新闻</p>
	    <p>百度(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。百度愿景是:成为最<br />懂用户,并能帮助人们成长的全球顶级高科技公司。 [1]<br /> 
	"百度"二字,来自于八百年前南宋词人辛弃疾的一句词:众里寻他千百度。这句话描述了词人对理想<br />的执着追求。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力,抱着技<br />术改变世界的梦想,他毅然辞掉硅谷的高薪工作,携搜索引擎专利技术,于 2000年1月1日在中关村创建了百度公<br />司。
	百度拥有数万名研发工程师,这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先<br />进的搜索引擎技术,使百度成为中国掌握世界尖端科学核心技术的中国高科技企业,也使中国成为美国、俄罗斯、和,<br />韩国之外,全球仅有的4个拥有搜索引擎核心技术的国家之一。</p>
	<p><a name = "c"></a>招聘中心</p>
	    <p>百度(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。百度愿景是:成为最<br />懂用户,并能帮助人们成长的全球顶级高科技公司。 [1]<br /> 
	"百度"二字,来自于八百年前南宋词人辛弃疾的一句词:众里寻他千百度。这句话描述了词人对理想<br />的执着追求。1999年底,身在美国硅谷的李彦宏看到了中国互联网及中文搜索引擎服务的巨大发展潜力,抱着技<br />术改变世界的梦想,他毅然辞掉硅谷的高薪工作,携搜索引擎专利技术,于 2000年1月1日在中关村创建了百度公<br />司。
	百度拥有数万名研发工程师,这是中国乃至全球最为优秀的技术团队。这支队伍掌握着世界上最为先<br />进的搜索引擎技术,使百度成为中国掌握世界尖端科学核心技术的中国高科技企业,也使中国成为美国、俄罗斯、和,<br />韩国之外,全球仅有的4个拥有搜索引擎核心技术的国家之一。</p>
	</body>
	</html>

本文在三个地方建立了锚点,在要使用锚点的地方,href为“#加那么”

表单《form》
<form action="action_page.php">
First name:<br>
	<input type="text" name="firstname" value="Mickey">
	<br>
	Last name:<br>
	<input type="text" name="lastname" value="Mouse">
	<br><br>
	<input type="submit" value="Submit">
</form> 

在这里插入图片描述

《input》 元素
input 元素是最重要的表单元素。

input元素有很多形态,根据不同的 type 属性。

这是本章中使用的类型:

类型 描述:
text 定义常规文本输入。
radio 定义单选按钮输入(选择多个选择之一)
submit 定义提交按钮(提交表单)

《input type=“radio”》 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一:

	<form>
		<input type="radio" name="sex" value="male" checked>Male
	<br>
		<input type="radio" name="sex" value="female">Female
	</form> 

在这里插入图片描述

提交按钮
定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定:

	<form action="action_page.php">
	First name:<br>
 		<input type="text" name="firstname" value="Mickey">
	<br>
	Last name:<br>
		<input type="text" name="lastname" value="Mouse">
	<br><br>
		<input type="submit" value="Submit">
	</form> 

在这里插入图片描述

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

在上面的例子中,指定了某个服务器脚本来处理被提交表单:

<form action="action_page.php">

如果省略 action 属性,则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

<form action="action_page.php" method="GET">

或:

<form action="action_page.php" method="POST">
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值