### 1、表单
我们需要将一些数据提交给服务器,或者从服务器中获得数据!常见的有输入框,单选框,文本域,密码框,选择文件的框。
基本结构及原理图:
**![](https://box.kancloud.cn/2016-06-03_5750fd4f59be8.jpg)**
~~~
<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>
~~~
效果图:
**![](https://box.kancloud.cn/2016-06-03_5750fd4f6ca1f.jpg)**
###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 其他一些属性
![](https://box.kancloud.cn/2016-06-03_5750fd4f85d1d.jpg)
这是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>
~~~
- 前言
- HTML(第一天)
- HTML(第二天)
- DIV+CSS(第一天)
- DIV+CSS(第二天)
- DIV+CSS(第三天)
- DIV+CSS(第四天)
- PHP开发环境配置说明
- PHP基础数据类型及运算符介绍
- 走进PHP函数
- 走进位运算
- 走进数组及相关数组函数
- 面向对象的编程(类与对象)
- 面向对象的编程(类成员方法用法)
- 构造方法,析构方法
- static,global用法
- 静态方法
- 面向对象的编程方法
- 接口方法
- 接口VS继承、final、const
- 错误及异常处理机制、错误日志
- HTTP协议深度剖析
- 文件下载
- PHP数据库编程
- 数据库编程(2)
- 超全局变量
- Zend studio 开发环境入门
- 雇员管理系统(1)
- 雇员管理系统(2)
- 会话技术(cookie session)
- 会话技术 session场景使用介绍!
- PHP.in中session和cookie的配置说明
- PHP文件编程
- 报表及绘图技术
- 报表及绘图技术(jpgraph库使用,Linux安装及配置说明)
- XML基本语法及DTD介绍
- XML编程(Dom技术)
- XML编程(Xpath技术,simpleXml技术)基础入门
- 网上支付平台PHP版本
- javascript基础入门