HTML5基础——列表与表格

列表

什么是列表

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表的分类

1.无序列表

2.有序列表

3.定义列表

无序列表

<ul>  <!--声明无序列表-->
  
      <li>范冰冰演藏族女孩</li><!--声明列表项-->
      <li>撞死两个人后自拍</li>
      <li>诗隆甜蜜出游</li>    
      <li>一线城市楼市退烧</li>
 </ul>

无序列表的特性

1.没有顺序，每个 <“li”> 标签独占一行（块元素）

2.默认 <“li”> 标签项前面有个实心小圆点

3一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

有序列表

<ol> <!--声明有序列表-->
  
  <li>范冰冰演藏族女孩</li><!--声明列表项-->
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>

有序列表的特性

1.有顺序，每个<“li”>标签独占一行（块元素）

2.默认<“li”>标签项前面有顺序标记

3.一般用于排序类型的列表，如试卷、问卷选项等

定义列表

<dl>  <!--声明有序列表-->
    <dt>水果</dt> <!--声明列表项-->
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd><!--定义列表项内容-->
</dl>

定义列表的特性

1.没有顺序，每个<“dt”>标签、<“dd”>标签独占一行（块元素）

2.默认没有标记

3.一般用于一个标题下有一个或多个列表项的情况

表格

为什么使用表格

1.简单通用

2.结构稳定

基本结构

1.单元格

2.行

3.列

表格的基本语法

<table>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
       
    </tr>
    <tr>
        <td> 第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
       
    </tr>
</table>

<table> </table> <!---表格标签-->
<tr> </tr> <!---行标签-->
<td></td>  <!---单元格标签-->

表格的跨列(合并列单元格)

<table>
  <tr>
    <td colspan="n">单元格内容</td>
  </tr>
  <tr>
    <td>单元格内容</td>
  </tr>
</table>

colspan=“n” <!- -所跨的列数–>

表格的跨行(合并行单元格)

<table >
  <tr>
    <td rowspan="n">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

rowspan=“n” <!- -所跨的行数–>

页面结构分析

页面布局分析

1.页面头部

2.页面主体

3.页面底部

HTML5的结构元素

元素名	描述
header	标题头部区域的内容（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	Web页面中的一块独立区域
article	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

<header><h2>网页头部</h2> </header>
 <section><h2>网页主体部分</h2></section>
 <footer><h2>网页底部</h2></footer>

< iframe>内联框架、

语法

<iframe src="path" name="mainFrame" ></iframe>

src=“path” <! --引用页面地址–>

name=“mainFrame” <! --框架标识名–>

< iframe>属性（实现页面间的相互跳转）

在被打开的框架上加name属性

<iframe name="mainFrame" src="subframe/the_second.html" />

在超链接上设置target目标窗口属性为希望显示的框架窗口名

<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>