多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
### 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> ~~~