数据分析师HTML+CSS培训动态教程（哈尔滨商业大学 王磊）

Title of the document The content of the document...... This text is bold
This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This text contains _subscript
This text contains ^superscript

这是
预格式文本。
它保留了      空格
和换行。

这是不 预格式文本。 它无法保留了 空格 和换行。

pre 标签很适合显示计算机代码：

for i = 1 to 10print i
next i

Computer code
Keyboard input
Teletype text
Sample text
Computer variable

注释：这些标签常用于显示计算机/编程代码。

Written by Donald Duck.
Visit us at:
Example.com
Box 564, Disneyland
USA

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义。

This is a link网络统计学 网页第一部分 网页第二部分

第一部分:1返回顶部

第二部分:2返回顶部

网页常用的图片格式解读

图片可以带给我们丰富的色彩和强烈的冲击力，图片给网页带来了点缀和修饰，合理的利用图像，会给人们带来美的享受，常用的图片格式有很多种，比如：JPG、BMP、TIF、GIF、PNG等，互联网通常使用JPG和GIF格式比较多，再次就是PNG格式，因为这三种 网页常用的图片给事具有很多优点和特性。

• GIF格式：GIF是graphics interchange format的缩写，称为图形交换格式，以这种格式存在的文件扩展名为.gif，它是compuserve公司推出的图形标准，它采用的有效的无损耗的压缩方法使图形文件体积大大缩小，并基本保持了图像的原貌，目前，几乎所有的图形编辑软件都具有读取和编辑的功能，为了传送方便，在网页制作中一般采用GIF格式的图像，此种格式的图像文件最多可以显示256种颜色。
• JPG格式：JPG图像格式是由joint photographic experts group提出并命名的，在互联网上面广泛应用，JPG支持16MB色彩的24位颜色或真彩色，是典型的压缩为4:1，由于人类的眼睛不能看出存储的图片的全部信息，可以去掉图像的某些细节，并对图片进行压缩，JPG是一种损失质量为代价的压缩方式，压缩比较越高，图像质量损失就越大，适应于一些色彩比较丰富的照片以及24位图像，这种格式的图像文件能够保存数百万的颜色，适合保存一些具有连续色调的图像。
• PNG格式：PNG是portable network group的压缩，这种格式的图像文件可以完全的替换GIF文件，而且无专利限制，它通常使用ADOBE格式的FIR文件，而且无专利显示，通常使用adobe公司的FIREWORKS图像处理软件来进行编辑，能够保存图片最初的图层、颜色等。

以上三种是网页常用的图片格式，网页图片格式跟平面设计图片格式是不同的，平面设计图片要求高清晰度，要求的文件非常大。

一个无序列表：

• 咖啡
• 茶
• 牛奶

1. 咖啡
2. 牛奶
3. 茶

1. 咖啡
2. 牛奶
3. 茶

每个表格由 table 标签开始。

每个表格行由 tr 标签开始。

每个表格列由 td 标签开始。

一列：

100

一行三列：

100

200

300

两行三列：

100	200	300
400	500	600

带有粗的边框：

First	Row
Second	Row

命令按钮 (Buttons)&nbsp
文本行 (Text field)
名：
姓：密码 (Password)
密码：单选按钮（Radio Buttons）
Male
Female 复选框（Checkboxes）
I have a bike
I have a car 表单的动作属性（Action）和确认按钮
Username: 下拉列表（Select）
VolvoSaabFiatAudi创建命令按钮（Button）
表单集合框（Fieldset）
健康信息 身高：
体重：

如果表单周围没有边框，说明您的浏览器太老了。

文本域（Textarea）

This example cannot be edited because our editor uses a textarea for input, and your browser does not allow a textarea inside a textarea.

The cat was playing in the garden.

HTML 多媒体

多媒体格式

多媒体元素（比如视频和音频）存储于媒体文件中。

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时，它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件，而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。

多媒体元素元素也拥有带有不同扩展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

视频格式

MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式，但非 Windows 计算机并不总是能够播放。
WMV	.wmv	Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见，但是如果未安装额外的（免费）组件，就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放，因为没有合适的播放器。
MPEG	.mpg .mpeg	MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的，得到了所有最流行的浏览器的支持。
QuickTime	.mov	QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式，但是 QuickTime 电影不能在没有安装额外的（免费）组件的 Windows 计算机上播放。
RealVideo	.rm .ram	RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下（在线视频、网络电视）的视频流。由于是低带宽优先的，质量常会降低。
Flash	.swf .flv	Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上，YouTube 推荐使用 MP4。YouTube 接收多种格式，然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4，将其作为 Flash 播放器和 HTML5 的因特网共享格式。

声音格式

格式	文件	描述
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备（比如合成器和声卡）的格式。MIDI 文件不含有声音，但包含可被电子产品（比如声卡）播放的数字音乐指令。 因为 MIDI 格式仅包含指令，所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小，但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。
RealAudio	.rm .ram	RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流（在线音乐、网络音乐）。由于是低带宽优先的，质量常会降低。
Wave	.wav	Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器（除了 Google Chrome）都支持它。
WMA	.wma	WMA 格式 (Windows Media Audio)，质量优于 MP3，兼容大多数播放器，除了 iPod。WMA 文件可作为连续的数据流来传输，这使它对于网络电台或在线音乐很实用。
MP3	.mp3 .mpga	MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。

致爱丽丝

注释：浏览器可能需要安装插件以后，才能播放该文件。

我心依旧（My Heart Will Go On）

注释：浏览器可能需要安装插件以后，才能播放该文件。

我心依旧（My Heart Will Go On）

注释：浏览器可能需要安装插件以后，才能播放该文件。

音乐和视频欣赏
My Heart Will Go On（音频格式MP3）My Heart Will Go On（视频格式MP4）致爱丽丝（音频格式mid）星(日本歌曲 - 邓丽君演唱，mp4）再回首_标清（视频格式avi）索朗旺姆—《天路》（视频格式flv）《教父》主题曲speak softly love柔声倾诉（视频格式MP4）上海滩 - 叶丽仪 - 粤语（视频格式MP4）角斗士MV（视频格式flv）角斗士MV（视频格式mp4）勇敢的心 - BraveHeart（音频格式MP3）

注释：浏览器可能需要安装插件以后，才能播放该文件。

姓名	民族
张三	汉族
李四	回族

我的标题

100	200	300
400	500	600

姓名	民族	籍贯
张三	汉族	长春
李四	回族	大连

产量	人数	累计人数
4	8	8
5	22	30
6	42	72
7	38	110
8	17	127
9	3	130
合计	130	***

产量	人数指标
	人数	累计人数
4	8	8
5	22	30
6	42	72
7	38	110
8	17	127
9	3	130
合计	130	***

哈尔滨商业大学（一级列表）

• 教学部门
• 行政部门

哈尔滨商业大学（二级列表）

• 教学部门
  • 经济学院
  • 基础学院
• 行政部门
  • 人事处
  • 教务处

哈尔滨商业大学（三级列表）

• 教学部门
  • 经济学院
    • 统计学教研室
    • 西方经济学教研室
    • 国贸教研室
  • 基础学院
    • 数学教学部
    • 外语教学部
• 行政部门
  • 人事处
    • 工资科
    • 人事科
  • 教务处
    • 教务科
    • 设备科
    • 师资科

图片居右

这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。

图片居左

这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。

图片居上

这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。

图片居下

这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。 定向链接

• 作为命令按钮
• 转到其它网页
• 原网页保留，打开新网页
• 为内联框架指定打开网页
• 在当前网页内跳转到锚点位置

网页标题

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

返回顶部 目录结构（根目录主文件：myBook.html）

• HTML
  • colorTable.html
  • divPage.html
  • myPage.html
  • tbPage.html
  • test1.html
  • test2.html
  • test3.html
• img
  • test1.jpg
  • test2.jpg
• media
  • avi
    • 再回首_标清.avi
  • flv
    • 角斗士MV_标清.flv
    • 索朗旺姆—《天路》_标清.flv
  • mid
    • Elise.mid
  • mp3
    • BraveHeart.mp3
    • myHeartWillGoOn.mp3
  • mp4
    • myhertgoon.mp4
    • 怀旧经典：《教父》主题曲speak softly love柔声倾诉--Andy Will[高清版].mp4
    • 角斗士MV_标清.mp4
    • 上海滩 - 叶丽仪 粤语_高清.mp4
    • 星(邓丽君演唱的日本歌曲现场版)[标清版].mp4
• myBook.html
• HTML语言教程(完整版).pdf
• css样式表—讲座.ppt
• ...

字体大小：“font-size:20pt;”

大小写： “text-transform:capitalize;(首字母大写)\uppercase;(大写)\lowercase;(小写)\none;(无)”

near...far...
wherever you are
i believe
that the heart does go on
once more you open the door
and you're here in my heart
and my heart will go on and on

near...far...
wherever you are
i believe
that the heart does go on
once more you open the door
and you're here in my heart
and my heart will go on and on

常用字体：“font-family:Courier New;\Courier;\monospace;\Times New Roman;\Times;\serif;\Arial;\Helvetica;\sans-serif;\Verdana;\Comic Sans MS;”

Near...far...
Wherever you are
I believe
That the heart does go on
Once more you open the door
And you're here in my heart
And my heart will go on and on

前景颜色：“color:#ff0000;”。更多代码颜色参考颜色对照表

Near...far...
Wherever you are
I believe
That the heart does go on
Once more you open the door
And you're here in my heart
And my heart will go on and on

背景颜色：“background-color:#00ffff;”。更多代码颜色参考颜色对照表

Near...far...
Wherever you are
I believe
That the heart does go on
Once more you open the door
And you're here in my heart
And my heart will go on and on

单词间距：“word-spacing:20px;”，适用于英文

Near...far...
Wherever you are
I believe
That the heart does go on
Once more you open the door
And you're here in my heart
And my heart will go on and on

文字对齐：“text-align: justify;(两端对齐)\left;(左对齐)\right;(右对齐)\center;(居中)”

列表属性：“list-style-type:disc;(圆点)\circle;(圆圈)\square;(方块)\decimal;(数字)\lower-roman;(小罗码数字)\upper-roman;\lower-alpha;\upper-alpha;

• 基本表格
• 带标题的表格
• 带CSS样式的HTML表格>
• 开口式统计表
• 单元格跨行、跨列

浮动：“float:left;\right;

梦之都 XHTML 教程,auto正常鼠标

梦之都 CSS 教程,crosshair十字鼠标

梦之都 XHTML 教程,default默认鼠标

梦之都 CSS 教程,pointer鼠标

梦之都 XHTML 教程,move移动鼠标

梦之都 CSS 教程,e-resize鼠标

梦之都 XHTML 教程,ne-resize鼠标

梦之都 CSS 教程,nw-resize鼠标

梦之都 XHTML 教程,n-resize鼠标

梦之都 CSS 教程,se-resize鼠标

梦之都 XHTML 教程,sw-resize鼠标

梦之都 CSS 教程,s-resize鼠标

梦之都 XHTML 教程,w-resize鼠标

梦之都 CSS 教程,text文字鼠标

梦之都 XHTML 教程,wait等待鼠标

梦之都 CSS 教程,help求助鼠标

梦之都 XHTML 教程,progress过程鼠标

A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; FONT-STYLE:normal; TEXT-DECORATION:none;}A.oPageLink:hover {FONT-SIZE:14pt;COLOR:#333333; FONT-STYLE:normal; TEXT-DECORATION:none;}A.oPageLink:active {FONT-SIZE:14pt; COLOR:purple; FONT-STYLE:normal; TEXT-DECORATION:underline;} a:link {
font-size: 12pt;
color: #0000cc;
font-family: 宋体;
text-align: left;
text-decoration: underline;
TEXT-DECORATION:none;
}
//链接平常样式
a:visited {
font-size: 12pt;
color: #ff00cc;
font-family: 宋体;
text-align: left;
text-decoration: underline;
TEXT-DECORATION:none;
}
//链接访问后样式
a:hover {
color: #000000;
text-decoration: underline;
TEXT-DECORATION:none;
} //鼠标放到链接上样式 a:active { color: #00ff33; text-decoration: none; } //链接被按下时样式

内联样式

内联样式是直接在html标签上定义该标签的css样式，如：

<div style="width:300px;">浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</div>

内部样式

内部样式是写在html文件中，且包含在

代码块中，style写在head里面如： 　　 　　

外部样式

外部样式是通过在html中引用外部css文件来控制样式，如：html文件中写入引用语句，

　　

无欲无忧