HTML & CSS制作

最新推荐文章于 2021-08-31 14:29:49 发布

转载最新推荐文章于 2021-08-31 14:29:49 发布 · 287 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cloudtj/articles/5962529.html

文章标签：

#xhtml #人工智能

大数据分析师HTML+CSS培训

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

目录	HTML代码&nbsp刷新
HTML练习教程 HTML基本标签介绍文档结构文本格式化预格式文本计算机输出标签地址标题段落链接锚点图片无序列表有序列表表格表单内联框架 HTML媒体什么是HTML媒体视频格式音频格式致爱丽丝（音频格式mid） My Heart Will Go On（音频格式MP3） My Heart Will Go On（视频格式MP4）音乐和视频欣赏 HTML表格设计基本表格带标题的表格带CSS样式的HTML表格开口式统计表单元格跨行、跨列 HTML其它设计列表嵌套（二级目录）列表嵌套（三级目录）图文混排定向链接目录结构（绝对地址和相对地址）使用<div>元素的网页布局使用<table>元素的网页布局 CSS练习教程 HTML基本属性介绍字体大小字体样式文字行高文字粗细大小写文字修饰常用字体前景颜色背景颜色文字间距单词间距文字对齐文字缩进垂直对齐边框样式边框宽度边框颜色边框属性列表属性内边距外边距绝对定位相对定位浮动鼠标样式超链接样式 CSS样式表嵌入网页常用的三种方法内联样式内部样式外部样式 CSS选择器
HTML显示

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 10
     print 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

网络统计学网页第一部分网页第二部分

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

第一部分: 1 返回顶部

通俗简单地说，比如一篇很长的文章，你想按分段精确来看，那就可以用到锚点了。

第二部分: 2 返回顶部

…文字省略其实锚点只需name就可以可，加id是为了让它兼容性更好. href的值要跟name \ i d 一致，前面必须加"#"，以上代码在ie6/7,ff中都可以兼容，但在ie8中就不行。因为我们锚点的值为空，为不影响美观我们加个空格就行了, 如以下代码，就可以兼容ie8

网页常用的图片格式解读

图片可以带给我们丰富的色彩和强烈的冲击力，图片给网页带来了点缀和修饰，合理的利用图像，会给人们带来美的享受，常用的图片格式有很多种，比如：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图像处理软件来进行编辑，能够保存图片最初的图层、颜色等。

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

一个无序列表：

咖啡
茶
牛奶

咖啡
牛奶
茶

咖啡
牛奶
茶

每个表格由 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 多媒体

Web 上的多媒体指的是音效、音乐、视频和动画。

现代网络浏览器已支持很多多媒体格式。

什么是多媒体？

多媒体来自多种不同的格式。它可以是您听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。

在因特网上，您会经常发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。

在本教程中，您将了解到不同的多媒体格式，以及如何在您的网页中使用它们。

浏览器支持

第一款因特网浏览器只支持文本，而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器，图片支持也被加入。

不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理，而某些则需要额外的插件。

您将在下面的章节学习更多有关插件的知识。

多媒体格式

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

确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .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;