初识HTML-第二章- 列表,表格,框架

一,列表的分类

1,无序列表

通常使用项目符号作为列表项的前缀。符号有三种属性1,默认值为实体圆心  type="disc"   2,实体方心  type="square" 3,空心圆 type="circle"

语法

<ul type="需要的符号">声明这是个无序列表 并设置列表符号的样式

<li></li>作为列表语句的开始

</ul>

2,有序列表

每个列表项目前,有顺序的符号表示。符号三种属性:1,是数字 type="1" 2,字母type="A或者a"  3,罗马数字 type="I或者i" 表示大小写

语法

<ol>声明这是个有序列表 并设置列表符号的样式

<li></li>

</ol>

3,定义列表

项目列表及其注释的组合。不会在项目前添加任何符号

语法

<dl>声明定义列表

<dt></dt>定义列表项

<dd></dd>定义内容

</dl>

小结:在实际的网页应用中,无序列表比有序列表应用更加广泛。定义列表适用于带有标题解释性内容或者图片和文本内容混合排列的场合

二.表格

为什么使用表格?

1,简单易用

2,结构稳定

表格由什么组成?

1,单元格

2,行

3,列

基本语法:

<table>声明表格

<tr>表格第一行开始

<td>第1行第1个单元格中的内容</td>

<td>第1行第2个单元格中的内容</td>

<td>第1行第3个单元格中的内容</td>

</tr>

<tr>

<td>第2行第1个单元格中的内容</td>

<td>第2行第2个单元格中的内容</td>

<td>第2行第3个单元格中的内容</td>

</tr>

</table>

1,在<table>标签里 可以设置各种表格属性,例如:border="1"边框宽度

2,在<td>标签里 也可设置align水平对齐属性 和 valign垂直对齐属性

3,align中有三种对齐方式,分别是1,左对齐:left   2,居中对齐:center 3,右对齐:right

valign中有四种对齐方式,分别是1,顶端对齐:top 2,居中对齐:middle 3,底端对齐:bottom 4,基线对齐:baseline

4,小结:在实际的开发中,表格的对齐方式通常会使用CSS样式进行控制,使用属性进行对齐控制的场合比较少

5,<td>标签里还可以设置跨行与跨列

语法是:<td colspan="所跨列数">内容</td>

<td rowspan="所跨行数">内容</td>

三,框架

1,什么是框架?

在同一个页面显示多个页面,可以实现页面复用,通过点击左侧页面内容,右侧显示具体内容。

2,常用的框架技术有以下两种

框架<frameset>页面各个窗口全部用<frame>实现,适用于整个页面都用框架实现的场合

内联框架<iframe>一般在页面中引入站外的页面内容

3,基本语法:

<frameset rows="25%,*">将一个完整的页面分成两行,上面占用%25.下面占用*,*代表的就是剩余的部分

<frame src="需要在这%25下显示的页面">

<frameset cols="20%,*">将剩余*的页面分成两列,左侧占用%20.右侧占用*,也就是剩余的部分

<frame src="需要在这%20下显示的页面">

<frame src="需要在这*下显示的页面">

</frameset>

</frameset>

4,我们可以再<frameset>标签里设置一些框架属性

例如

①scrolling是否显示滚动条: 只有两值,默认为显示,scrolling="no"不显示

②noresize 是否允许调整框架窗口大小 默认允许 noresize="noresize"不允许

③name 框架标示名 nama="想要的名字"

④frameborder是否显示框架周围的边框frameborder="1"

5,窗口之间的关联在于设置超链接"target"目标窗口属性

有以下几种打开方式

①blank:在新选项卡中打开

②self:如果没有设置target属性,默认取值是_self

③框架窗口名  在制定的框架窗口中打开链接

④_parent:在父框架集中打开链接,如果不是框架网页,则含义同_self

⑤_top:在顶级窗口中打开链接

6.<iframe>语法

<irame src="引用的页面地址" name=框架名"">

它的常用属性 与frameset一样

初识HTML-第二章- 列表,表格,框架

时间: 2024-10-28 16:20:59

初识HTML-第二章- 列表,表格,框架的相关文章

第二章:创建框架和窗体

没有翻译第一章是由于第一章仅仅介绍了怎样设置IDE.这方面网上文章非常多,我就没有翻译,直接从第二章開始. 以下是原文链接.翻译有不正确的地方请朋友们指正. http://www.rastertek.com/gl40tut02.html Tutorial 2: Creating a Framework and Window This OpenGL 4.0 tutorial will cover setting up a basic frame work and window. 这一章涵盖了创建基

第二章:创建框架和窗口

没有翻译第一章是因为第一章只介绍了如何设置IDE,这方面网上文章很多,我就没有翻译,直接从第二章开始. 下面是原文链接,翻译有不对的地方请朋友们指正. http://www.rastertek.com/gl40tut02.html Tutorial 2: Creating a Framework and Window This OpenGL 4.0 tutorial will cover setting up a basic frame work and window. 这一章涵盖了创建基本框架

HTML5 第二章 列表和表格和媒体元素

列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ul> (3)有序列表: 语法: <ol> <li>第1项</li> <li>第2项</li> <li>第3项</li> </ol> (4

第二章 列表、表格与媒体元素

一.无序列表 <ul>       <li>无序列表</li>       <li>有序列表</li>       <li>自定义列表</li>      </ul> 特性:1.没有顺序,每个<li>标签独占一行(块级元素)        2.默认每一个li标签前有一个实心小圆点        3.主要用于无序类型信息的展示,如导航栏等 二.有序列表 <ol>       <li&

python基础教程-第二章-列表和元组

本章将引入一个新的概念,:数据结构.数据结构是通过某种方式(例如对元素进行编号)组织在 一起的数据元素的集合,这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在python中,最基本的数据结构是序列(sequence).序列中的每个元素被分配一个序号--即元素的位置,也称为索引.第一个索引是0,第二个则是1,依次类推. 2.1 序列概览 python包含6中内建的序列,本章重点讨论最常用的两种:列表和元组.其他的内建序列类型字符串.Unicode字符串.buffer对象和xrange对象

Python基础教程(第二章 列表和元组)

本文内容全部出自<Python基础教程>第二版,在此分享自己的学习之路. ______欢迎转载:http://www.cnblogs.com/Marlowes/p/5293195.html______ Created on Xu Hoo 本章将引入一个新的概念:数据结构.数据结构是通过某种方式(例如对元素进行编号)组织在一起的数据元素的集合,这些数据元素可以是数字或者字符,甚至可以是其他数据结构.在Python中,最基本的数据结构是序列(sequence),序列中的每个元素被分配一个序号——即

python 第二章 列表,if循环

列表 序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列都可以进行的操作包括索引,切片,加,乘,检查成员. 此外,Python已经内置确定序列的长度以及确定最大和最小的元素的方法. 列表是最常用的Python数据类型,它可以作为一个方括号内的逗号分隔值出现. 列表的数据项不需要具有相同的类型 创建一个列表,只要把逗号分隔的不同的数据项使用方括号括起

20190804-Python基础 第二章 列表和元组(2)

1. list函数,用于将字符串转换为列表 2. 基本的列表操作 修改列表 - 给元素赋值,使用索引表示法给特定的元素赋值,如x[1] = 2 删除元素 - 使用del语句即可 1 name1 = ['a','d','g','h'] 2 name2 = ['1','2','3','4'] 3 del name1[1] 4 print(name1) 5 print(len(name1)) 6 7 del name2[1:3] 8 print(name2) 9 print(len(name2)) 1

第二章 自己的框架WMTS服务,下载数据集成的文章1

在构建数据源下载文件的叙述性说明第一步 如此XML结构体 <?xml version="1.0" encoding="utf-8"?> <onlinemapsources> <onlineMapSource> <name>GaoDeDiTuImage</name> <url><![CDATA[http://webst0{$s}.is.autonavi.com/appmaptile?styl