HTMLCSS学习笔记（六）-元素类型

素类型

根据css显示分类，XHTML元素被分为
三种类型:
块状元素，内联元素，可变元素

&&

三种类型：块状元素，内联元素，内联块元素(css2.1增加)

块状元素的特点

A:块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域，
B:默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。
C:块状元素都可以定义自己的宽度和高度。
D:块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个子。

内联元素的特点

A:内联元素的表现形式是始终以行内逐个进行显示；
B:内联元素没有自己的形状，不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状；
C:内联元素也会遵循盒模型基本规则，如可以定义padding,border,margin,background等属性，但个别属性不能正确显示;(padding-top:;margin-top/bottom:;)

可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

常见的标签

块

div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td  表格及行-单元格

内联

a –超链接（锚点）                               
b - 粗体(不推荐) 
br - 换行                             
i - 斜体
em - 强调                             
img - 图片                         
input - 输入框               
label - 表单标签                  
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标   
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择

元素类型的转换

display属性

盒子模型可通过display属性来改变默认的显示类型

A、大部分块元素display属性值默认为block，其中列表li的默认值为list-item。
B、大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）。

inline-block ( 行内块元素 )

设置一个元素在一个容器中垂直居中，必须更改默认的display属性值为inline-block;并加上同级元素（标尺）

（同级元素[标尺]样式设置为vertical-align:middle;width:0;height:100%;display:inline-block;）

三个条件：

必须给容器（父元素）加上text-align:center;
必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle;
在当前元素的后面（没有回车）加上同级元素span;并对span进行vertical-align:middle;width:0;height:100%;display:inline-block

元素类型案例

置换元素

一、引题
在之前的浅谈HTML中的块级元素和内联元素中了解到了内联元素一般是不能设置宽高的，但是也有特殊。比如img是内联元素，但可以设置宽高，这肯定让不少人迷惑。这样我们就要引入HTML中置换元素的概念（非置换元素在w3c中没有给出明确的解释，姑且我们就把除置换元素外的元素当作非置换元素吧）。
二、置换元素与非置换元素
a) 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的内容，即是一个空元素。

置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高的原因。

b) 不可替换元素（非置换元素）：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。

本文转自知乎号：千锋HTML5学院

颜色设置的简便方法

昨天我们在《使用HTML添加表格3（间距与颜色）——零基础自学网页制作》（目录在结尾）中学习了设置单元格以及其中内容的空间间距和背景颜色。

其中添加列向单元格背景颜色只需要修改对应的<tr>标签中的style属性，而修改行向标签需要修改不同<tr></tr>标签中的<td>标签的style属性，这样操作起来就非常的麻烦，那有没有简便的修改行向单元格背景颜色的方法呢？

当然有！

开发团队给出了<colgroup><col></col></colgroup>这样的组合来解决这个问题，下面让我们详细学习。

<colgroup></colgroup>标签是一个给行向单元格打组的标签，在页面中不会显示。

<col></col>标签是来具体设置行向单元格数量和颜色的标签。

示例代码如下：

<colgroup><col span = "1" style="background-color:#ff0000;"></col></colgroup>

这段代码添加到"第一个页面.html"当中就可以，具体代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

页面效果如图：

因为第一列和最后一列只有一行所以，也都变红了。

其中span的数量代表行数。

如果把span等号后面的数改成2，因为表格只有两行，所以整个表格都红了。

表格嵌套

我们可以通过向表格中添加表格实现表格嵌套。表格嵌套可以把一个单元格分成行向或列向分割单元格。

代码示例如下：我们把"一列一行"分割成列向两个单元格。

<tr><td><table border = "1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

使用

<table border = "1" width="100%">

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

这段代码替换文字"一列一行"即可。

页面效果如图所示：

留个思考题，大家可以思考一下行向分割单元格怎么写。

今天的内容结束了。

全部示例代码如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一个网页</title>
  </head> 
  <body>
  <h1>第一个网页</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的头部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的脚部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格标题</caption>
  <colgroup>
  <col span = "1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年龄</th>
  </tr>
  <tr>
  <td>
  <table border = "1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！

学到这里，相信大家已经有独立读懂HTML代码说明的能力了，明天我会为大家讲解16进制颜色表示方法。之后会给大家推荐html代码参考手册的链接。如果您是零基础的话，学完16进制颜色表示方法后，基本上就可以无障碍的阅读html代码参考手册了，如果阅读起来还是有困难，请继续看后面我为大家讲解一些常用元素及属性的文章，已及html中特殊符号的输入方法，全部做完后再结束这套教程。

如果您有任何疑问或不解欢迎关注并私信我。

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

例

一个简单的 HTML 表格，带有两个单元格：

<tr>

</tr>

</table>

浏览器支持

所有主流浏览器都支持 <td> 标签。

标签定义及使用说明

<td> 标签定义 HTML 表格中的标准单元格。

HTML 表格有两种单元格类型：

表头单元格 - 包含头部信息（由 <th> 元素创建）
标准单元格 - 包含数据（由 <td> 元素创建）

<th> 元素中的文本通常呈现为粗体并且居中。

<td> 元素中的文本通常是普通的左对齐文本。

提示和注释

提示：如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性！

HTML 4.01 与 HTML5之间的差异

HTML 5 中不再支持 HTML 4.01 中的某些属性。

属性

属性	值	描述
abbr	text	HTML5 不支持。规定单元格中内容的缩写版本。
align	leftrightcenterjustifychar	HTML5 不支持。规定单元格内容的水平对齐方式。
axis	category_name	HTML5 不支持。对单元格进行分类。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已废弃。规定单元格的背景颜色。
char	character	HTML5 不支持。规定根据哪个字符来进行内容的对齐。
charoff	number	HTML5 不支持。规定对齐字符的偏移量。
colspan	number	规定单元格可横跨的列数。
headers	header_id	规定与单元格相关联的一个或多个表头单元格。
height	pixels%	HTML5 不支持。HTML 4.01 已废弃。设置单元格的高度。
nowrap	nowrap	HTML5 不支持。HTML 4.01 已废弃。规定单元格中的内容是否折行。
rowspan	number	设置单元格可横跨的行数。
scope	colcolgrouprowrowgroup	HTML5 不支持。定义将表头单元格与数据单元格相关联的方法。
valign	topmiddlebottombaseline	HTML5 不支持。规定单元格内容的垂直排列方式。
width	pixels%	HTML5 不支持。HTML 4.01 已废弃。规定单元格的宽度。

全局属性

<td> 标签支持 HTML 的全局属性。

事件属性

<td> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：1分钟了解谷歌开发者大会
下一篇：C++知识点 44：继承中静态成员的处理

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商