HTML（第二天）
1、表单
我们需要将一些数据提交给服务器，或者从服务器中获得数据！常见的有输入框，单选框，文本域，密码框，选择文件的框。
基本结构及原理图：
<html>
<head>
<title>my form 学习</title>
<body>
<!-- action 的值应当提交那个页面(url)
method 指定提交的方式，常用有2中 get/post-->
<form action="" method="get">
用户名：<input type="text" name="username"/><br/>
密 码：<input type="text" name="password"/><br/>
<input type="submit" value="登陆系统"/>
<input type="reset" value="清空"/>
</form>
<form action="" method="get">
你最喜欢得城市：<br/>
<!--复选框 单选或多选 checked 默认选中！-->
<input type="checkbox" name="cities" value="beijing"/>北京
<input type="checkbox" name="cities" value="shanghai"/>上海
<input type="checkbox" name="cities" value="shenzhen"/>深圳 <br/>
你的性别：<br/>
<!--单选框-->
<input type="checkbox" name="sex" value="man"/>男
<input type="checkbox" name="sex" value="women"/>女 <br/>
隐藏域的使用：目前还不懂具体作用<br/>
<!--隐藏域的使用（目前还是疑问？具体用来做什么不知道）-->
<input type="hidden" name="data" value="OK"/>
<!--下拉列表 multiple多选-->
选择你的出生地：
<select name="cars" size="0" >
<option value="nothing" selected="selected"></option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="chongqin">重庆</option>
<option value="shijiazhang">石家庄</option>
</select><br/>
<!--文本框，用来写回帖，等-->
<textarea name="huitie" rows="5px" cols="30px">
The cat was playing in the garden.
</textarea><br/>
<!--创建按钮-->
<input type="button" value="Hello world!"><br/>
<!--文件上传-->
<input type="file" name="myfile">上传文件<br/>
<!--数据周围绘制一个带标题的框-->
<fieldset width="400Px">
<legend width="400Px">健康信息：</legend>
<form>
<label>身高：<input type="text" /></label>
<label>体重：<input type="text" /></label>
</form>
</fieldset>
<!--图片按钮,提交-->
<input type="image" src="http://i.mmcdn.cn/simba/img/T1syxFXwVhXXb1upjX.jpg" height="100px"/>
<input type="submit" value="提交"/>
</form>
</body>
<a href="demo1.html">返回demo1.html</a>
</head>
</html>
效果图：
2、嵌入多媒体
<html>
<head>
<title>嵌入多媒体</title>
</head>
<body>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>
<!--视频文件-->
<embed src="D:kankan樊凡-我想大声告诉你-我想大声告诉你.mp3" height="100" width="100""/>
<!--北京音乐 start="mouserover" 表示鼠标放上去会唱歌-->
<bgsound src="" loop="3"/>
<img src="http://s1.dwstatic.com/group1/M00/77/1A/ba36861392295c0b869b50333701321c.jpg" dynsrc="http://url.cn/8rgyyj" start="mouseover" loop="2"/>
<!--以下是HTML5支持的-->
<audio controls="controls">
<source src="/i/song.ogg" type="audio/ogg">
<source src="/i/song.mp3" type="audio/mpeg">
<embed height="100" width="100" src="/i/song.mp3" />
</audio>
</body>
</html>
bgsound背景音乐在有些浏览器可能会不支持，一般IE会支持。
3 其他一些属性
这是head中对编码的一些设定，及其保存文件的编码与文件中设定的编码不一致时，可能会出现乱码？看上图
<html>
<head>
<title>其他常用的一些HTML标记介绍</title>
<!--***********************
在国内我们编码是gbk 或者gb2312 俗称国标码
编程专家们，为了让网页具体更好的兼容性，设计一种码
utf-8（支持比较广）该元素明确告诉浏览器，应当使用它来
显示页面。
规定，网页中制定的编码和网页奔上存放的编码要一致！
ansi 是美国国家标准协会制定的一编码，比如在中国ansi->gbk;
在日本ansi 只其他的。
**********************-->
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<!--***************************
bgcolor:背景色彩；text=非可连接文字色彩；
link：可连接文字色彩；alink:正被点击的可连接文字色彩
vkink：已经点击（访问）的可连接文字的色彩
background：背景图像
*****************************-->
<body backgroup="" bgcolor="pink" text="red" alink="red">
我是一名程序猿，are you sure?<br/>
分割线：<br/>
<!-- noshade 代表是实体线-->
<hr size="5px" align="left" width="500pa" noshade color="black"/>
<a href="">连接文件</a><br/>
<font style="font-size:40px" face="华文彩云">中国人</font>
<!--某字放在中间-->
<center>hello,body!</center>
<!--字体闪烁 ，一般浏览器不支持！-->
<blink>22222222222222</blink>
</body>
</html>
效果图自己去测试下吧！
3 图片映射
<html>
<head>
<title>图像连接及图像映射</title>
</head>
<body>
<p>
您也可以把图像作为链接来使用：</p><br/>
<a href="http://blog.csdn.net/jsh13417/article/details/8798194">
<img border="2" src="http://avatar.csdn.net/3/8/A/1_jsh13417.jpg" alt="我的博客" ismap/>
</a><br/>
<img
src="/i/eg_planets.jpg" border="0" usemap="#123" alt="星球" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
</body>
</html>
4 文字移动
<html>
<head>
<title>文字移动</title>
</head>
<body>
<!-- 也支持图片移动
scrillamount="8":速度
width="50%" :宽度
-->
<marquee direction="left" scrollamount="8" width="50%">我向左开始移动 </marquee><br/>
<marquee direction="right"scrollamount="30" width="50%">我向右开始移动 </marquee><br/>
</body>
</html>