列表、表格与框架

HTML 列表

语法 类型 项目符号
<ul>
    <li></li>
    <li></li>
</ul>
无序列表
<ul> unordered list 定义无序列表
<li> list item 定义列表的项目
通过 type 属性设置项目符号
  • <ul type="disc"> 实体圆心(默认值)
  • <ul type="square"> 实体方心
  • <ul type="circle"> 空心圆(用于二级列表)
<ol>
    <li></li>
    <li></li>
</ol>
有序列表
<ol> ordered list 定义有序列表
<li> list item 定义列表的项目
通过 type 属性设置项目顺序
  • <ol type="1"> 数字(默认)
  • <ol type="A"> 大写字母
  • <ol type="a"> 小写字母
  • <ol type="I"> 大写罗马数字
  • <ol type="i"> 小写罗马数字
<dl>
    <dt>
        <dd></dd>
        <dd></dd>
    </dt>
</dl>
定义列表
<dl> definition list 定义一个列表
<dt> definition term 定义列表项
<dd> definition description 定义内容

注:定义列表 dl-dt-dd 一般适用于带有标题和标题解析性内容 或者图片和文本内容混合排列的场合。



======================================================优雅的分割线=================================

HTML 表格

<!--表格基本语法 -->
<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

<!--使用语义化的标签-->
<table width="270">
    <caption>学生信息表</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>职务</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td align="center">小明</td>
                <td align="center">班长 </td>
            </tr>
        </tbody>
</table>
表格
<table> 定义表格
<tr> table row 定义表格的行
<td> table data cell 定义表格单元

<caption> 定义表格标题。通常这个标题会被居中于表格之上。
<thead> table head  定义表格的标题(页眉)(<title>:定义文档的标题)
<th> table header cell 定义表格的表头单元格
<tbody> table body 定义表格的主体部分

显示效果:






表格的属性:

属性名  功能
width/height 表格的宽/高,单位可以为像素(px)或百分比(%)
border 默认为表格边框为0   (无边框),可设置为数值
cellspacing             控制单元格之间的间距,可设置为数值
cellpadding            控制单元格边框和其内容的间距,可设置为数值
align 设置文本的水平对齐方式,可为left  (左对齐,默认),center  (居中对齐),right  (右对齐)
valign 设置文本的垂直方向对齐方式,可为top  (顶端对齐),middle  (居中对齐),bottom  (底端对齐),baseline(基线对齐)
bgcolor                设置背景色,如red,#fff ,rgb(255,0,0)

注意:
html color颜色:在HTML页面中,颜色统一采用RGB格式,也就是“红绿蓝”三原色模式。每种颜色都由这3种颜色的不同比例组成,按十六进制的方法表示,如“#FFFFFF”表示白色,“#000000”表示黑色,“#FF0000”表示红色。在十六进制的表示方法中,前两位表示红色的分量,中间两位表示绿色的分量,最后两位表示蓝色的分量。其中例如,“#FF0000”可以简写为“#F00”。


实例:
<table   width="100%"  border="1" cellspacing="0" cellpadding="0"   bgcolor="gray">
<tr>
     <td align="center">第1个单元格的内容</td>
     <td>第2个单元格的内容</td>                                                                 
</tr>                                        
                                                                     
<tr>
     <td>第1个单元格的内容</td>
     <td>第2个单元格的内容</td>
     </tr>
</table>
显示效果:




一个完整的表格代码实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table</title>

<style type="text/css">
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>

</head>

<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
    <tr>
      <td>March</td>
      <td>$1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$181</td>
    </tr>
  </tfoot>
</table>

</body>
</html>
显示效果:






表格的跨行与跨列

跨列
     <td>标签的 colspan 属性,值为数字,代表合并几列。col 为 column(列)的缩写,span 为跨度。

跨行
     <td>标签的 rowspan 属性,值为数字,代表合并几行。row 为行,span 为跨度。


实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格的跨行与跨列</title>
</head>

<body>
    <table width="200" border="1">
        <tr>
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <td rowspan="2">张三</td>
            <td>语文</td>
            <td>98</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>95</td>
        </tr>
        <tr>
            <td rowspan="2">李四</td>
            <td>语文</td>
            <td>88</td>
        </tr>
        <tr>
            <td>数学</td>
            <td>91</td>
        </tr>
    </table>
</body>
</html>
显示效果:



======================================================优雅的分割线=================================


HTML 框架

框架是 HTML 早期的应用技术,目前还有少部分网站在使用。
常用的框架技术有以下两种:
  • 框架(<frameset>):这是早期的框架技术,页面各窗口全部用 <frame> 实现,形成一个框架。包括 <frameset>、<frame>、<noframes> 标签。注意:HTML 5 不再支持。
  • 内联框架(<iframe>):页面中部分内容用框架实现,一般用于在页面中引用站外的页面内容,使用方便、灵活。

注意:
HTML5 不支持 <frame> 标签。
<frame> 标签定义 <frameset> 中的子窗口(框架)。
<frameset> 中的每个 <frame> 都可以设置不同的属性,比如 border、scrolling, noresize 等等。
注释:如果您希望验证包含框架的页面,请确保 <!DOCTYPE> 被设置为 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" 。


因为 HTML 5 不再支持 frame 框架,下面只讨论 <iframe> 内联框架。


<iframe> 内联框架:
适用于将部分框架嵌入页面的场合,一般用于引用其他网站的页面。例如,在自己制作的网页中引用搜狐网页的新闻页面等。

<iframe>语法:
<iframe src="引用页面地址" width="宽度" height="高度" frameborder="是否显示框架周围的边框" ... />

实例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iframe框架</title>
</head>

<body>
<h1>HTML 框架</h1>
<p>
框架是 HTML 早期的应用技术,目前还有少部分网站在使用。<br />

<br />

常用的框架技术有以下两种:<br />

    * 框架(<frameset>):这是早期的框架技术,页面各窗口全部用 <frameset> 实现,形成一个框架。包括 <frameset>、<frame>、<noframes> 标签。注意:HTML 5 不再支持。<br />
    * 内联框架(<iframe>):页面中部分内容用框架实现,一般用于在页面中引用站外的页面内容,使用方便、灵活。<br />

<br />

<iframe> 语法:<br />
<iframe src="引用页面地址" width="宽度" height="高度" frameborder="是否显示框架周围的边框" />
</p>

<i><iframe>内联框架代码:</i>
<br />
<code><iframe src="http://blog.csdn.net/fatlitalk/article/details/54019970" width="100%" height="350" name="FatliTalk" frameborder="1" scrolling="yes" noresize="noresize" /></code>
<br /><br />
<i>显示效果:</i>

<iframe src="http://blog.csdn.net/fatlitalk/article/details/54019970" width="100%" height="350" name="FatliTalk" frameborder="1" scrolling="yes" noresize="noresize" />

</body>
</html>
显示效果:




以下引用 菜鸟教程

提示:使用 CSS 为 <iframe> (包括滚动条)定义样式。

在 XHTML 中,name 属性已被废弃,并将被去掉。请使用 id 属性代替。


属性

New :HTML5 中的新属性。

属性 描述
align left
right
top
middle
bottom
HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>。
frameborder 1
0
HTML5 不支持。规定是否显示 <iframe> 周围的边框。
height pixels 规定 <iframe> 的高度。
longdesc URL HTML5 不支持。规定一个页面,该页面包含了有关 <iframe> 的较长描述。
marginheight pixels HTML5 不支持。规定 <iframe> 的顶部和底部的边距。
marginwidth pixels HTML5 不支持。规定 <iframe> 的左侧和右侧的边距。
name name 规定 <iframe> 的名称。
sandboxNew ""
allow-forms
allow-same-origin
allow-scripts
allow-top-navigation
对 <iframe> 的内容定义一系列额外的限制。
scrolling yes
no
auto
HTML5 不支持。规定是否在 <iframe> 中显示滚动条。
seamlessNew seamless 规定 <iframe> 看起来像是父文档中的一部分。
src URL 规定在 <iframe> 中显示的文档的 URL。
srcdocNew HTML_code 规定页面中的 HTML 内容显示在 <iframe> 中。
width pixels 规定 <iframe> 的宽度。


======================================================优雅的分割线=================================

——END
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值