#2 HTML的框架,表格

【以下是个人笔记,由于水平有限,因此有错误的地方,希望M我。谢谢】

表格|表单|框架
---------------
表格:布局     ----现在很少用到
好处: 适合做简单的布局
不足: 不利于搜索引擎搜索到; 表格要全部下载到本地机才能显示; 适合做中小型企业网站!

<table border="1" width="200px" cellspacing="10px" cellpadding="10px">
    <tr>
        <td>1</td>
        <td background="imgs\bgground.gif" colspan="2" align="center">2</td>
    </tr>
    <tr>
        <td rowspan="2"><img src="imgs/2.jpg" width="50px" height="50px" /></td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
    </tr>
</table>

注释:table是表格的意思、tr 是行的意思 、 td 是单元格

colspan 这个是合并几个列、rowspan合并行。

还有一个比较少用的,tbody(表主体)/thead(表头)/tfoot(页脚),放在Table标签下

------------------摘自W3C:http://www.w3school.com.cn/tags/tag_tbody.asp--------------------------------

定义和用法

<tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

tbody 元素应该与 thead 和 tfoot 元素结合起来使用。

thead 元素用于对 HTML 表格中的表头内容进行分组,而 tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组。

注释:如果您使用 thead、tfoot 以及 tbody 元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。

提示:在默认情况下这些元素不会影响到表格的布局。不过,您可以使用 CSS 使这些元素改变表格的外观。



DIV+CSS:   ---主要还是用这个(笔记在后面)
好处: 复杂,大型企业站点   
不足:相对表格难学!                    入门简单,精通难
-------------------------------
框架 frameset
1. 特点: 有frameset ,就没有body!

然后再每一个frame里面指定 HTML的路径,然后就可以显示出来。

这里Frame里面的属性 name 设置一下,可以让HTML的内容显示到这里来

<frameset rows="20%,*" frameborder="0">   <!--这里分成两行,上面20%的高度,下面为剩下的高度-->
  <frame src="top.html"></frame>         <!--这里放上HTML的路径-->
  <frameset cols="20%,*">          <!--把下面的那一部分  在分成左右两个部分-->
    <frame src="left.html"></frame>
    <frame src="main.html" name="main"></frame>    <!--设置name属性,让 a(超链接)打开后在这里显示-->
  </frameset>
</frameset>

把超链接的内容显示到Frame中

<ol>
    <li><a href="tn.html" target="main">我的童年</a></li>    <!--打开后在属性 name= main这个frame里面显示-->
    <li><a href="nv.html" target="_blank">我的女友</a></li>
</ol>

上课DEMO下载:http://yunpan.cn/QC2d5ikGVpqSR  提取码 5ceb



By 2014.07.27 整理

  今天的笔记还是比较少的,因为上课的时候,有例子发给我们,笔记想对来说比较少,不过那个时候还自己记了一大本的笔记。那个时候有激情去记笔记。后来都是直接用Word来记,回来有时间再整理。

  笔记一定要记,会让你加深理解。并且如果回来有整理的话,还会掌握的更牢。

#2 HTML的框架,表格,布布扣,bubuko.com

时间: 2024-10-13 03:42:02

#2 HTML的框架,表格的相关文章

动态给表格TD 添加单击事件

需求:项目中对原有的JQ框架表格功能要进行完善 实现 单元格单击编辑 思路:JS中遍历生成好的表格 动态给TD 添加单击事件. 问题:遍历添加时,给TD 加样式 加属性都可以 但是如果要加单击事件 死活加不上去. 1 //文本控件模版 2 var textTemp = "<input type=\"text\" value={0} />"; 3 var RawData; //原始数据 4 //js控制列 可修改 5 $("tr", $

一步步带你做vue后台管理框架(一)——介绍框架

系列教程<一步步带你做vue后台管理框架>第一课 github地址:vue-framework-wz 线上体验地址:立即体验 在如今的科技公司中有很多前端的需求都是要写一个类似于后台管理框架,日常的工作中会有太多重复的内容加重我们程序员的工作,浪费我们的时间,导致不能早点下班回家吃饭. 普通程序员拿到一个项目总是会重新写,写路由花了两小时,写vuex花了两小时,写个Header组件花了1小时,侧边栏又要1小时,这样下来项目拿到手一天的时间都没真正去做项目的需求,再加上改bug,写css,准备工

unity客户端基本框架(转载)

框架概述: 基础系统的框架搭建,其中包括: UI框架(NGUI + MVC) 消息管理(Advanced CSharp Messenger) 网络层框架(Socket + Protobuf ) 表格数据(Protobuf) 资源管理(Unity 5.x 的 AssetBundle 方案) 热更框架(tolua) UI框架: 使用 Unity 5.x 进行游戏开发的朋友,估计大都想过用系统自带的 UGUI 来搭建UI框架,这并没有什么不好的,只是对于引擎升级并不友好,假如Unity升级对 UGUI

Lesson1 -- IOS开发概述 &amp;&amp; HelloWorld

第一部分:IOS开发概述 1. IOS 系统架构 iOS是基于UNIX的,就系统的稳定性而言,要比其他操作系统好很多,我们完全可以相信这个操作系统! iOS的系统架构分为四个层次: 1)可触摸层 2)媒体服务层 3)核心服务层 4)核心操作系统层 如下图: 2. iOS系统架构中各层次的功能 可触摸层(Cocoa Touch):为应用程序开发提供各种有用的框架,并且大部分均与用户界面有关,本质上来说它负责用户在iOS设备上的触摸交互操作. 媒体服务层(Media Services):负责提供用于

工作ui(1)

来源:https://blog.csdn.net/CodeZdx/article/details/81560857,博主勿怪,没别的意思,就想收藏一下 这是我在实习公司做的一个小Demo,说明了miniUI企业型前端框架表格表单中的一些小问题.仅供一些像我一样的初学者借鉴,一起学习. (注:此项目里的操作均为本地数据,没有涉及Ajax,所以请看清前提再借鉴学习.)     项目说明:制作一个表格,包括增删查改功能,年龄小于23岁的数据行用红色标记.删除和查找操作在本页面执行,添加和编辑功能弹出子

JavaScript强大的 eval() 函数

定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图覆盖 eval 属性或把 eval() 方法赋予另一个属性,并通过该属性调用它,则 ECMAScript 实现允许抛出一个 Ev

HTML表格及框架介绍

一.列表1.有序列表ol <ol type="1默认/a/A/i/I"> <li></li> </ol> 2.无序列表ul(实际应用中,比有序列表广泛) 重点掌握 <ul type="disc默认实心圆/square实心方型/circle空心圆"/> <li></li> </ul>3.定义列表--适用于图片和文字内容的混合排列中 重点掌握 <dl> <d

HTML中的表格、表单元素与框架的构建

表格 <table></table>表格 width: 宽度可用像素或百分比: height:高度可用像素或百分比: border:边框宽度: cellpadding:内容跟单元格边框的边距 常用0: cellspacing:单元格之间的间距  常用0: align: 对齐方式: bgcolor:背景色: <tr></tr> 行 align:一行内容的水平对齐方式: valign: 垂直对齐方式: <td></td> 单元格 <

S1/使用HTML语言和CSS开发商业站点/02-列表、表格和框架

列表的分类: 1.无序列表 使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始.<ul>标签有一个type属性,这个属性的作用就是制定在显示列表时所采用的项目符号类型. type属性的取值 取值 说明 disc 项目符号显示为实体圆心,默认值 square 项目符号显示为实体方心 circle 项目符号显示为空心圆 2.有序列表 无序列表与有序列表的区别就在于,有序列表的各个列表项有先后顺序,所以会使用数字进行标识.有序列表使用<ol>