HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose

2020-11-27 来源：九壹网

一、HTML文本格式化标签（这些标签都不换行）

eg：

 1 2  3  4  5 HTML文本格式化标签 6  7 8  9 定义粗体文字
10 定义大号字
11 定义着重文字
12 定义斜体字
13 定义小号字
14 定义加重语气
15 _{定义下标字}
16 ^{定义上标字}
17 定义插入字
18 定义删除字
19 20

效果：

二、HTML图像

1、图像标签：

　　　标签指带有可点击区域的图像映射，定义其具体位置

2、源属性（Src）、替换文本属性（Alt）

　　src：指 "source"，源属性的值是图像的 URL 地址。

　　alt：在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。

3、图片应用实例

　　（1）将图片当做背景

1 2 3 4 5 HTML图像 6 7 8 9

图像背景

gif 和 jpg 文件均可用作 HTML 背景。

如果图像小于页面，图像会进行重复。

12 13

　　效果：

　　（2）排列图片：使用align属性(align="bottom";align="middle";align="top")

　　（3）图像的浮动：使图片浮动至段落的左边或右边：使用align属性（align="left"或align="left"）

　　（4）调整图像尺寸：通过改变 img 标签的 "height" 和 "width" 属性的值，可以放大或缩小图像

1 2 3 4

　　（5）可以将图像作为链接使用

　　（6）创建图像映射：即使用标签创建带有可供点击区域的图像地图

三、HTML表格

1、表格标签

2、表格中的空单元格

　　如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。（）

3、设置表格边框：

，无边框则border="0”

4、跨行或者跨咧的单元格：使用colspan来合并单元格

 1  2

3 4 5 6 7 8 9 10 11 12

姓名	电话
Bill Gates	555 77 854	555 77 855

　　效果：

5、单元格边距：cellpadding与单元格间距：cellspacing

 1  2  3  4  5  6  7  8  9 单元格 单元格
单元格 单元格

10 11 12 13 14 15 16 17 单元格 单元格
单元格  单元格

18 19 20 21 22 23 24 25 单元格  单元格
单元格 单元格
26

单元格	单元格
单元格	单元格

单元格	单元格
单元格	单元格

单元格	单元格
单元格	单元格

　　效果：

四、HTML 块元素、HTML 内联元素

　　1、块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：

, ,

　　2、内联元素在显示时通常不会以新行开始。例子：,

, ,

　　3、HTML 元素是块级元素，它是可用于组合其他 HTML 元素的容器，如果与 CSS 一同使用，元素可用于对大的内容块设置样式属性。元素是内联元素，可用作文本的容器，当与 CSS 一同使用时，元素可用于为部分文本设置样式属性。

五、HTML颜色

1、颜色值：

　　颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

2、颜色名：

　　仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。

3、部分颜色如下：

六、HTML布局

1、使用元素布局

　　每一对标签代表一个块，对块的属性进行定义后，在标签里输入块的内容。

　　（1）先将整体分块

1 2 3 这是头部4 这是左半部分5 这是右半部分6 这是底部7 8

　　效果：

　　（2）对每一块进行样式定义

　　最后完成效果：

2、使用

布局

 1 2  3  4  5 HTML布局 6  7 8  9

10 11 12 13 14 15 16 17 18 19 20

21 22

　　效果：

七、框架

　　框架也可以用来布局，通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

1、标签：

　　(1)框架集标签：

　　　　*框架集标签定义如何将窗口分割为框架

　　　　*每一个定义一系列行或列

　　　　*rows和cols的值规定了每行或每列占据屏幕的面积

　　（2）框架标签：

　　（3）内联框架：

　　（4）13 14

　　　　效果：

（水平框架只需将cols改为rows）

　　（2）混合型框架：

 1 2  3  4  5 HTML框架 6  7 8  9 10 11 12 13 14 15 16

　　效果：

　　（3）内联框架

 1 2  3  4  5 内联框架 6  7 8  9 10 11

　　效果：

　　内联框架可以用frameborder="0"来取消边框效果，还可以用width、height来设置大小

　　（4）导航框架

　　　　*设计好框架集页面，并为框架窗口定义名称

 1 2  3  4  5 导航框架2 6  7 8  9 10 11 12

　　　　*设置导航栏中的超链接的target目标窗口属性，使其值为框架窗口的名字

 1 2  3  4  5 导航框架1 6  7 8  9 frame_a
 10 frame_b
11 frame_c
12 13

　　效果：

显示全文

全部栏目

HTML知识点总结以及典型例子讲解_html/css_WEB-ITnose

图像背景