前端学习之路-第二天 关于HTML表单元素以及表格

       在一个HTML页面中一个静态页面肯定会有菜单,而我们一般情况下的菜单都是由菜单列表构成;菜单列表分为有序列表<ol>标签 无序列表<ul>标签 还有自定义列表 <dl>标签,但在实际开发中我们常用的一般都是无序列表标签 有序列表使用较少 而自定义的标签主要是用于一些特殊的情况下;大家可以自行选择使用。对于列表标签来说,它只是一个容器,只有配合列表项<li>使用才能够显示出列表的效果  li列表项主要是显示每个列表的具体项及内容;但只能用在无序列表和有序列表中,对于自定义列表需要使用<dt>和<dd>来定义列表项和其注释组合;<li>一般配合<a>标签使用来达到我们常见的菜单列表的效果。具体样式为:<li><a></a></li>

      在头部的菜单列表之后,我们一般都会在中间加上一些区域用来展示一些通知或者其他的一些信息;对于信息的展示,我们可以通过跑马灯的使用来实现;在以前的HTML中我们使用一个<marquee>标签就可以实现跑马灯的效果,并且可以通过控制<marquee>标签的属性来 控制移动的速度和方向;但在HTML5中这个标签被废弃。w3c在文档中也没有介绍这个标签,并且不推荐使用;为了能够向后兼容 我们一般都是通过JS来实现类似的效果

   说完菜单列表,我们再往下面看;一般的也可以分为左边的导航栏和右边的内容区,左边的导航栏其实现方式和菜单导航栏类似;只是样式有所不同,内容区由各种内容构成;在后台中我们一般使用表格来作为这部分的内容。由此,我们引入了表格标签;表格标签最主要的作用其实还是让我们的数据以表格的形式更直观 更明了的展现出来 方便用户查看 <table>为表格的开始标签 每个表格可以设置行高和列宽;表格的行由tr表示 表格的列由td表示 。

需要注意的是:在HTML中是以行(row)作为一个基本的单位,列是依附于行而存在的;基本的写法为<tr> <td></td></tr> 这行代码表示在这一行中存在一列的单元格;需要注意的是在表格<table>标签中有一个特别的属性为 cellspacing 是用来控制表格单元之间的间距和空间的 将其设置为0可以解决表格边框线有间距的问题 ;在我们平时不可能碰到完全平分的表格 因此我们这个时候需要用到td标签的colspan和rowspan属性  colspan属性代表列合并 其后的值代表算上本行起合并的列数‘ rowspan代表自本行起(包括本行)合并的行数 。

       对于一些特殊的页面如:注册、信息手机。缴费等,我们需要将用户输入的信息收集起来;然后将其发送到服务器端去,这个时候我们需要用到的就是表单元素<from>表单中比较常用的元素有<input>输入标签 其中通过设置input的type属性可以设置不同的输入类别;常用的有text(文本框)、password(密码输入框)、radio(单选按钮)、<checkbox>(复选按钮)、<select>(下拉列表和option配合使用)...等,我们可以将单选按钮和复选按钮的id属性与label标签的for属性绑定起来 从而实现通过选中文字来选中单/复选框的效果 ;提升用户的浏览体验。 

猜你喜欢

转载自blog.csdn.net/shengbeer/article/details/81089512
今日推荐