整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML的表格与列表、块及类与ID

天为大家带来了HTML中的表格与列表、块及类与ID的基础知识,首先为大家介绍的是HTML中的表格与列表。

一、HTML中的表格与列表:

相信大家都知道在office、Excel等办公软件中如何制作表格,那大家知道如何在网页上制作表格呢?同时网页上面的注册和登陆表又是怎么制作出来的呢?今天将会为大家详细讲解。

1、表格:

① 了解<table>标签

在网页上的表格制作是用<table>标签来定义的。

② table中的<tr>和<td>标签

l 每个表格有若干行,即用<tr>标签来定义。

l 每行被分割为若干单元格,即用<td>标签来定义。

示例图


运行结果:


③ 在<table>元素中添加border属性就可以显示边框,示例:


运行结果:


④ 表单的表格用<th>标签表示,示例:



运行结果:


2、列表

列表分为无序列表、有序列表和定义列表

① 无序列表

l 无序列表是一个项目的列表,此列表项目使用粗体圆点进行标记。

l 无序列表始于<ul>标签,每个列表始于<li>,示例:


运行结果:

l 在<ul>标签中使用type属性可以改变列表前面的符号,示例:


运行结果:

② 有序列表

l 与无序列表不同的是,有序列表使用的是<ol>标签,示例:


运行结果:

在<ol>标签中添加type属性,可以改变列表前面的符号,示例:

运行结果:

③ 定义列表

l 定义列表就是自定义列表,是项目及其注释的组合。

l 自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始,示例:

运行结果:

二、HTML中的块:

1、大多数HTML元素被定义为块级元素或内联元素

① 块级元素在浏览器显示时,通常以新行来开始(和结束),例如:<h1>、<p>、<ul>、<table>等。

② 内联元素在显示时通常不会以新行开始,例如:<b>、<td>、<a>、<img>等。

2、HTML中的<div>元素

HTML<div>元素是块级元素,是可以组合其他HTML元素的容器,简单来说<div>元素一般被用在HTML布局上面,示例:

运行结果:

3、HTML中的<span>元素

HTML<span>元素是内联元素可用作文本的容器,当与css一同使用时,<span>元素可用于为部分文本设置样式属性,示例:

运行结果:

三、HTML中的CLASS和ID:

在上面的示例中我们有看到id标签,在学习过程中很多人搞不懂class类和id标签的区别,现在开始教大家如何区分class类和id标签。

CLASS:

1、Class就我们口中所说的类

2、在css中引用时以“.”开头,并且可以被多个元素调用,例如:

3、在使用中,可以先设置出一个样式,然后被多个元素引用。

ID:

1、id是一种标签

2、在css中引用时以“#”开头,只能定义一个元素,例如:

3、在使用时,只能先确定一个元素,然后才能设置其样式,无法被其它元素引用,是唯一的标签。

希望大家能够从这篇文章学习到HTML的部分知识~

SS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 同的列表项标记为无序列表
  • 设置列表项标记为图像

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

使用CSS,可以列出进一步的样式,并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是:


无序列表


(1)编辑代码

打开记事本,编写代码,并保存为HTML格式文件。代码如下。



(2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。


x0列表的类型

定义列表 dl

无序列表 ul

目录列表 dir

菜单列表 menu

有序列表 ol

例子:<dt>名称部分<dd>解释说明,两个都在<dl>里面

插入无序列表<ul>

例子:<ul>之间使用<li></li>标记列表项值


插入目录列表<dir>

效果跟<ul>那个是一样的。

插入菜单列表<menu>:

插入有序列表<ol>

列表的主要操作就讲到这里。是不是很简单呢??