那些年,我还在学习html
学习web开发的话,那么html可以说算是初学者最开始要学习的语言。Html的中文名称是超文本标记语言,由一些标签组成,所以,那些年,我也从一些标签开始学习。即然是学语言,那么一定会涉及到开发工具,当然,那时是不知道什么Dreamweaver,VS2005等开发利器,记事本成了初学的不错工具。
Html中有很多标签,其主要的一些标签正如我们浏览网页时所看到的那些,比如说:图片(img)、链接(a)、表格(table)以及form表单等,加上每个标签有一些属性,记住常用的就可以了,单个的说标签本身似乎并不是那么有趣,所以下面将以一些例子来说明,他们的用途。
一、UL的使用例子
Ul是无序列表,用来定义html的无序例表,其中一个应记住的type属性(取值:disc square circle)无序列表的每一项是一个li标签,一会儿会看到它们的用法;有无序列表当然也会有有序列表,那就是ol,其子项也是li,这里先提一下,下面就看例子吧!
代码:
<ul> <li> <a href="#" title="首页">首页</a> </li> <li> <a href="#" title="机构设置">机构设置</a> </li> <li><a href="#" title="工作动态">工作动态</a> </li> <li> <a href="#" title="通知公告">通知公告</a> </li> <li> <a href="#" title="最新新闻">最新新闻</a> </li> <li> <a href="#" title="微新闻">微新闻</a> </li> <li> <a href="#" title="微事件">微事件</a> </li> </ul>
效果:
这个例子很简单,用了一个导航列表,使用了a的常用属性,由于只有html,所以其效果不是很好,在以后加上CSS,那么就会好得多,我们在浏览网页时,一些横向导航就是通过这样的无序列表加上样式以及javascript完成的,这是关于html的第一个例子,相信很多时候在项目中都用过。
二、Table的使用例子
Table是表格,通常由行与单元格组成,当然还有caption等,加之其属性也比较多,用起来会麻烦一些;在网页布局中,有一种table布局,页面布局是一个大的table来规划的,每一块又是table,无须用div+css,那么,我们就来看一下它的基本使用!
代码:
<table bordercolor="#ACE" border="1" cellpadding="1" cellspacing="0"> <caption>新闻信息列表</caption> <tr><th>序号</th><th>作者</th><th>标题</th><th>时间</th><th>操作</th></tr> <tr> <td> 001 </td> <td> xin_ny </td> <td> 那些年,我还在学习html </td> <td> 2009-9-1 </td> <td> [查看][删出] </td> </tr> <tr> <td bgcolor="#ACE"> 002 </td> <td bgcolor="#ACE"> xin_ny </td> <td bgcolor="#ACE"> 那些年,我还在学习CSS </td> <td bgcolor="#ACE"> 2009-9-1 </td> <td bgcolor="#ACE"> [查看][删出] </td> </tr> <tr> <td> 003 </td> <td> xin_ny </td> <td> 那些年,我还在学习javascript </td> <td> 2009-9-1 </td> <td> [查看][删出] </td> </tr> <tr> <td bgcolor="#ACE"> 004 </td> <td bgcolor="#ACE"> xin_ny </td> <td bgcolor="#ACE"> 那些年,我还在学习actionscript </td> <td bgcolor="#ACE"> 2009-9-1 </td> <td bgcolor="#ACE"> [查看][删出] </td> </tr> <tr> <td> 005 </td> <td> xin_ny </td> <td> 那些年,我还在学习asp.net </td> <td> 2009-9-1 </td> <td> [查看][删出] </td> </tr> <tr> <td bgcolor="#ACE"> 006 </td> <td bgcolor="#ACE"> xin_ny </td> <td bgcolor="#ACE"> 那些年,我还在学习C# </td> <td bgcolor="#ACE"> 2009-9-1 </td> <td bgcolor="#ACE"> [查看][删出] </td> </tr> <tr> <td> 007 </td> <td> xin_ny </td> <td> 那些年,我还在学习java </td> <td> 2009-9-1 </td> <td> [查看][删出] </td> </tr> <tr> <td bgcolor="#ACE"> 008 </td> <td bgcolor="#ACE"> xin_ny </td> <td bgcolor="#ACE"> 那些年,我还在学习jsp </td> <td bgcolor="#ACE"> 2009-9-1 </td> <td bgcolor="#ACE"> [查看][删出] </td> </tr> </table>
效果:
这个例子太简单了,却很常用,比如说,我们要显示一系列的新闻时,就可以把它显示在一张表里,当然不可能所有的新闻都全部列出,那样很明显是不行的,所以,在应用时,我们还得给它用分页读显示,就像asp.net中的数据控件那样的分页
一、表单的使用
表单是每一个上网的用户都会接触到的,比如说注册、填写自身的基本信息等,那些输入用户名密码的框;表单里主要有:文本框(text)、密码框(password)、单选(radio)、复选(checkbox)、下拉列表(select)、按钮(button,submit)等,所以表单也是html中最重要的知识点之一,那面我们来看一下具体的例子吧!
代码:
<div style=" margin:15px; width:550px;"> <fieldset> <legend> 用户注册信息 </legend> <form action="#" method="get"> <p><span>用户名:</span> <input type="text" name="userName" /> </p> <p><span>性别:</span><input type="radio" name="userSex" value="1" />男 <input type="radio" name="userSex" value="0" />女 <span>学历:</span> <select name="userEdu" > <option value="1" selected="selected" title="本科">本科</option> <option value="2" title="硕士">硕士</option> <option value="0" title="其它">其它</option> </select> </p> <p><span>密 码:</span> <input type="password" name="userPwde" /> <span>重复密码:</span> <input type="password" name="reUserPwd" /> </p> <p><span>邮箱:</span> <input type="text" name="userMail" /> <span>电话号码:</span> <input type="text" name="userPhone" /> </p> <p><span>爱 好:</span><input type="checkbox" name="userLike" value="1" />上网 <input type="checkbox" name="userLike" value="2" />游戏 <input type="checkbox" name="userLike" value="3" />C# <input type="checkbox" name="userLike" value="4" />asp.net <input type="checkbox" name="userLike" value="5" />html5 <input type="checkbox" name="userLike" value="6" />java <input type="checkbox" name="userLike" value="7" />SQL </p> <p><span>所在地址:</span> <input type="text" name="userAddr" width="300" /> </p> <div>简介:</div> <textarea name="userProfile" cols="60" rows="5"> </textarea> <p> <input type="submit" value="注册" /> <input type="reset" value="重置" /> </p> </form> </fieldset> </div>
效果:
这个例子使用了表单中的一些元素,展示了表单的基本使用。表单的数据在提交时,会传到form标签对应的action页面,action页面对数据进行处理,form还有一个属性method,用来指定传送的方法,是GET还是POST,GET传送的数据可以在浏览器的地址栏看到,传送数据量较小,而POST是一种暗送,更安全,数据量也比较大,比如用于上传文件等。好了,基本的示例就完了,下面了解的是现在的html.
一、html5来了
对于用web开发的人来说,新的技术的出现总会勾起他们的兴趣,作为新一代html的标准html5也不例外,很多开发人员在html5草案时就开始学习,到现在为止,html5的网站数不胜数,当然对html5支持或部分支持的浏览器也很多,特别的是智能手机对html5的支持,这也使得html5游戏也倍受关注,下面我们就来学习一下html5给我们增添了些什么!
1、 html5的新标签
header,footer标签:一般在做一个页面时,会把页面分成三段,头(header)、身体(body)、尾(footer),在以前可能是用表格来划分或是div久而久之就形成了惯性思维,而html5就让这种思想变成的现实,给了这样标签,那么我们就会用得更顺手。
Nav, section标签:nav定义链接导航,而section定义文章的节
同时,html5中新添了input的类型、datalist等
2、 html5新增特性
html5新增特性主要有:视频(video)、音频(audio)、画布(canvas)、web 存储等,这些都是新增的并非常重要的特性。
3、 html5游戏
html5提供了画图的APIs:Canvas、SVG、WebGL,这些都给html5 2D和2.5D游戏提供了支持,同时许多html5游戏引擎(如:gin、GameJs等)以方便开发,同时在移动平台的应用,所以html5将会给我们一个全新的web世界。
二、WML移动标记语言
WML是基于移动设备上的html语言,其也是由一系列的标签组成,其与一般的html语言有所不同。因为其主要是面向移动设备,了解一下了只能。
总结:
Html语言是学习web开发时必学的一门,记得那年从此开始的web开发之路。此文用于回忆那些年学习的日子。