回 帖 发 新 帖 刷新版面

主题:脑动力:HTML+CSS标签速查效率手册   书连载


内容提要
HTML是所有网页制作技术的核心和基础,是每个网页制作者必须掌握的基本知识。CSS是用于控制网页内容显示效果的一种标记语言,用它可以制作更美观的页面。两者在网页设计中不可或缺。
本书共分为18章,前10章主要介绍了HTML标签和相关属性、包括文字、排版、列表、超链接、多媒体、表格、表单、框架等知识点。后8章介绍了CSS属性的详细用法和示例代码,包括文本显示、列表显示、链接显示、文字背景、元素定位滤镜等知识点。
本书语言简洁,内容丰富,适合网页设计与制作人员、网站建设开发人员、大中专院校相关专业学生、个人网站爱好者阅读。

当当地址:http://product.dangdang.com/product.aspx?product_id=22766678
  
 

回复列表 (共35个回复)

沙发


HTML+CSS标签速查目录
第一篇  HTML标签
第1章  理解HTML
1.1  HTML的基本概念
1.1.1  HTML简介
1.1.2  了解HTML代码
1.2  编辑HTML代码
1.2.1  使用记事本编辑
1.2.2  Dreamweaver中的HTML编辑窗口
1.3  使用Dreamweaver编写HTML代码
1.3.1  使用“代码”窗口编写HTML代码
1.3.2  使用标签选择器和标签编辑器
1.3.3  使用代码提示功能
1.3.4  使用查找和替换功能
1.3.5  优化HTML编码
第2章  网页的基本标签
2.1  结构标签——<html>
2.2  页面头部标签——<head>
2.3  页面标题——<title>
2.4  页面的主体标签——<body>
2.4.1  页面背景色——bgcolor
2.4.2  文字颜色——text
2.4.3  背景图片——background
2.4.4  链接文字——link
2.4.5  页面边距——margin
2.5  元信息标记——<meta>
2.5.1  设置网页编码信息
2.5.2  设置网页的定时跳转
2.5.3  设定网页缓存过期时间
2.5.4  禁止从缓存中调用
2.5.5  删除过期的cookie
2.5.6  强制打开新窗口
2.5.7  设置网页的过渡效果
2.5.8  定义页面关键字
2.5.9  设置页面描述
2.5.10  设置编辑工具
2.5.11  设定作者信息
2.5.12  限制搜索方式
第3章  排版标签
3.1  页面注释——<!-->
3.2  段落——<p>
3.3  换行——<br>
3.4  水平线
3.4.1  水平线——<hr>
3.4.2  水平线宽度与高度属性——width、size
3.4.3  水平线的颜色——color
3.4.3  水平线的对齐方式——align
3.4.5  去掉水平线阴影——noshade
3.5  居中标签——<center>
3.6  预设格式——<pre>
3.7  不拆行——<nobr>
3.8  向右缩进——<blockquote>
3.9  层标签——<div>
第4章  页面文字
4.1  标题文字——<h>
4.2  文字格式
4.2.1 字体——face
4.2.2  文字颜色——color
4.2.3  字号——size
4.2.4  粗体、斜体、下划线、删除线——strong、em、u、strike
4.2.5  上标与下标——sup、sub
4.2.6  等宽文字标记——code
4.3  空格——&nbsp;
4.4  特殊符号
4.5  其他标记
4.5.1  文字标注——ruby
4.5.2  声明变量——var
第5章  网页中的列表
5.1  有序列表
5.1.1  有序列表标记——ol
5.1.2  有序列表的序号类型——type
5.1.3  有序列表的起始数值——start
5.2  无序列表
5.2.1  无序列表标记——ul
5.2.2  无序列表的符号类型——type
5.3  定义列表标记——dl
5.4  菜单列表标记——menu
5.5  目录列表——dir
5.6  列表的高级应用
5.6.1  列表的简化
5.6.2  设置列表文字的颜色
5.7  列表的嵌套
第6章  超链接
6.1  超链接——<a>
6.2  设置文本超链接
6.3  设置图像超链接
6.4  设置图像热区链接
6.5  使用锚在网页内部链接
6.6  链接到不同页面的特定位置
6.7  链接到网页
6.8  建立EMAIL链接
6.9  链接到文件
6.10  建立文件下载链接
第7章  网页中的多媒体元素和图像
7.1  将多媒体内容放到网页中
7.1.1  链接到多媒体文件
7.1.2  添加多媒体文件标签——embed
7.1.3  设置媒体文件自动运行——autostart
7.1.4  设置媒体文件的循环播放——loop
7.1.5  隐藏媒体播放面板——hidden
7.1.6  添加flash动画文件
7.2  动态文字
7.2.1  滚动文字标签——marquee
7.2.2  滚动方向属性——direction
7.2.3  滚动行为——behavior
7.2.4  滚动循环——loop
7.2.5  滚动文字的背景颜色——bgcolor
7.2.6  滚动文字的背景大小——width、height
7.2.7  滚动速度——scrollamount
7.2.8  滚动延迟——scrolldelay
7.2.9  滚动空间——hspace、vspace
7.3  网页背景音乐
7.3.1  背景音乐——bgsound
7.3.2  背景音乐的循环播放次数——loop
7.4  图像格式
7.5  插入图像----<img>
7.6  图像属性设置
7.6.1  图像描述文字——alt
7.6.2  图像的边框——border
7.6.3  图像的大小——width、height
7.6.4  图像的间距——hspace、vspace
7.6.5  图像的相对对齐方式——align

板凳

第8章  网页中表格的应用
8.1  建立表格
8.1.1  表格、行、单元格——<table>、<tr>、<td>
8.1.2  表格的标题——<caption>
8.1.3  表格的表头——<th>
8.1.4  表格宽度——width
8.1.5  表格高度——height
8.1.6  表格的边框宽度——border
8.1.7  表格边框颜色——bordercolor
8.1.8  表格的单元格间距——cellspacing
8.1.9  表格的单元格边距——cellpadding
8.1.10  表格背景色——bgcolor
8.1.11  表格的背景图像——background
8.1.12  表格对齐方式——align
8.1.13  表格标题的垂直对齐方式——valign
8.2  表格的行属性
8.2.1  行高——height
8.2.2  行边框颜色——bordercolor
8.2.3  行背景色——bgcolor
8.2.4  行文字的水平对齐方式——align
8.2.5  行文字的垂直对齐方式——valign
8.3  单元格属性
8.3.1  单元格大小——width、height
8.3.2  跨列属性——colspan
8.3.3  跨行属性——rowspan
8.3.4  对齐方式——align、valign
8.3.5  单元格的背景色——bgcolor
8.3.6  单元格的边框颜色——bordercolor
8.3.7  单元格的亮边框颜色——bordercolorlight
8.3.8  单元格的暗边框颜色——bordercolordark
8.3.9  单元格的背景图像——background
8.3.10  单元格内容不换行——nowrap
8.4 表格的结构样式
8.4.1  设计表头样式——thead
8.4.2  设计表主体样式——tbody
8.4.3  设计表尾样式——tfoot
8.5  使用表格实现网页布局
第9章  表单
9.1  表单标签——<form>
9.1.1  表单名称——name
9.1.2  表单提交地址——action
9.1.3  传送方法——method
9.1.4  编码方式——enctype
9.1.5  目标显示方式——target
9.2  添加表单对象
9.2.1  文本框——text
9.2.2  密码框——password
9.2.3  按钮——button
9.2.4  提交按钮——submit
9.2.5  重置按钮——reset
9.2.6  单选按钮——radio
9.2.7  复选按钮——checkbox
9.2.8  图像按钮——image
9.2.9  隐藏域——hidden
9.2.10  文件域——file
9.2.11  文本域——textarea
9.2.12  下拉菜单——select、option
9.2.13  列表项
第10章  网页中使用框架
10.1  什么是框架
10.2  框架集——<frameset>
10.3  框架——<frame>
10.4  浮动框架——<iframe>
10.5  框架集属性
10.5.1  水平分割窗口——rows
10.5.2  垂直分割窗口——cols
10.5.3  嵌套分割窗口
10.5.4  设置框架集边框宽度——framespacing
10.5.5  设置框架集边框颜色——bordercolor
10.6  框架和浮动框架的属性
10.6.1  名称属性——name
10.6.2  页面源文件——src
10.6.3  边框属性——frameborder
10.6.4  滚动条属性——scrolling
10.6.5  边框与内容的水平距离——marginwidth
10.6.6  边框与内容的垂直距离——marginheight
10.6.7  普通框架禁止调整窗口大小——noresize
10.6.8  浮动框架对齐属性——align
10.6.9  浮动框架大小——width、height
10.6.10  普通框架与链接
10.6.11  浮动框架与链接
10.7  不支持框架标记——noframes
第二篇  CSS属性
第11章  CSS样式表简介
11.1  CSS的概念
11.2  CSS样式表的基本语法
11.2.1  样式表的基本结构
11.2.2  样式规则
11.3   CSS选择器
11.3.1  类选择器
11.3.2  ID选择器
11.3.3  标签选择器
11.3.4  伪类
11.3.5  子选择器
11.3.6  群组选择器
11.3.7  包含选择器
11.3.8  元素指定选择器
11.3.9  相邻选择器
11.4  将CSS应用到网页中
11.4.1  内嵌样式表
11.4.2  行内样式
11.4.3  链接外部样式表
11.4.4  导入外部样式表
11.5  样式优先权

3 楼

第12章  CSS控制文本显示效果
12.1  控制字体显示
12.1.1  设置字体——font-family
12.1.2  设置字体大小——font-size
12.1.3  设置斜体效果——font-style
12.1.4  设置加粗字体——font-weight
12.1.5  设置英文大写——font-variant
12.1.6  文本转换大小写——text-transform
12.1.7  字体复合属性——font
12.1.8  英文字内换行——word-break
12.1.9  超过容器边界时的换行——word-wrap
12.1.10  设置文字修饰——text-decoration
12.1.11  单词间隔——word-spacing
12.1.13  字符间隔——letter-spacing
12.1.14  字体颜色——color
12.2  控制文本显示效果
12.2.1  文本的水平对齐——text-align
12.2.2  垂直对齐——vertical-align
12.2.3  文本方向和排序——direction与unicode-bidi
12.2.4  文本书写模式——writing-mode
12.2.5  文本溢出——text-overflow
12.2.6  文本流向——layout-flow
12.2.7  文本缩进——text-indent
12.3  其他文本效果
12.3.1  文本行高——line-height
12.3.2  处理空白——white-space
第13章  CSS控制列表元素和链接的显示
13.1  列表元素的显示
13.1.1  列表符号——list-style-type
13.1.2  列表图像符号——list-style-image
13.1.3  列表标记位置——list-style-position
13.1.4  列表综合属性——list-style
13.2  控制链接的显示
13.2.1  链接未访问效果——link伪类
13.2.2  链接鼠标悬停效果——hover伪类
13.2.3  链接激活的效果——active伪类
13.2.4  链接访问后的效果——visited伪类
第14章  CSS控制元素的背景
14.1  设置背景颜色——background-color
14.2  设置背景图像
14.2.1  背景图像——background-image
14.2.2  背景图像的平铺——background-repeat
14.2.3  背景图像滚动——background-attachment
14.2.4  图像位置——background-position
14.3  背景的复合属性——background
第15章  CSS控制边框和边界的显示效果
15.1  边框的线条样式
15.1.1  上边框线条样式——border-top-style
15.1.2  下边框线条样式——border-bottom-style
15.1.3  左边框线条样式——border-left-style
15.1.4  右边框线条样式——border-right-style
15.1.5  设置边框的线条样式——border-style
15.2  边框的颜色
15.2.1  上边框的颜色——border-top-color
15.2.2  下边框的颜色——border-bottom- color
15.2.3  左边框的颜色——border-left- color
15.2.4  右边框的颜色——border-right- color
15.2.5  边框颜色——border-color
15.3  边框的宽度
15.3.1  上边框的宽度——border-top-width
15.3.2  下边框的宽度——border-bottom-width
15.3.3  左边框的宽度——border-left-width
15.3.4  右边框的宽度——border-right-width
15.3.5  边框宽度——border-width
15.4  单独设置各个边框的样式
15.4.1  上边框——border-top
15.4.2  左边框——border-left
15.4.3  下边框——border-bottom
15.4.4  右边框——border-right
15.5  设置边框整体效果——border
15.6  边界属性
15.6.1  上边界属性——margin-top
15.6.2  右边界属性——margin-right
15.6.3  下边界属性——margin-bottom
15.6.4  左边界属性——margin-left
15.6.5  边界综合属性——margin
15.7  元素的补白
15.7.1  顶部补白——padding-top
15.7.2  左侧补白——padding-left
15.7.3  右侧补白——padding-right
15.7.4  底部补白——padding-bottom
15.7.5  补白综合属性——padding

4 楼

第16章  CSS控制元素的定位和布局
16.1  元素的定位
16.1.1  定位属性——position
16.1.2  上边偏移——top
16.1.3  左边偏移——left
16.1.4  右边偏移——right
16.1.5  下边偏移——bottom
16.1.6  层叠定位——z-index
16.2  元素的布局
16.2.1  元素的浮动——float
16.2.2  浮动的清除——clear
16.2.3  内容的剪切——clip
16.2.4  控制溢出内容——overflow
16.2.5  水平溢出——overflow-x
16.2.6  垂直溢出——overflow-y
16.3  元素的显示方式——display
16.4  可见属性——visibility
第17章  其他CSS显示效果
17.1  控制光标显示效果——cursor
17.2  控制滚动条显示
17.2.1  滚动条滑块颜色——scrollbar-face-color
17.2.2  滚动条箭头颜色——scrollbar-shadow-color
17.2.3  滚动条拖动区颜色——scrollbar-track-color
17.2.4  滚动条亮边框颜色——scrollbar-highlight-color
17.2.5  滚动条阴影颜色——scrollbar-shadow-color
17.2.6  滚动条基准颜色——scrollbar-base-color
第18章  滤镜
18.1  颜色渐变——Gradient
18.2  不透明度——alpha
18.3  模糊效果——blur
18.4  色度滤镜——chroma
18.5  光晕效果——glow
18.6  阴影效果——shadow
18.7  图像灰度效果——gray
18.8  图像反相效果——invert
18.9  下拉阴影效果——dropshadow
18.10  水平翻转和垂直翻转效果——flipH、flipV
18.11  X光片效果——xray
18.12  波形滤镜——wave
18.13  图像调整——BasicImage
18.14  图像加载滤镜——AlphaImageLoader
18.15  滑动门滤镜——Barn
18.16  百叶窗滤镜——Blinds
18.17  国际象棋滤镜——CheckerBoard
18.18  渐隐滤镜——Fade
18.19  抽离滤镜——Slide
18.20  对角扩张滤镜——Inset
18.21  随机线条滤镜——RandomBars
18.22  随机溶解滤镜——RandomDissolve
18.23  擦地板滤镜——Zigzag
18.24  风车滤镜——Wheel
18.25  伸缩变形滤镜——Stretch
18.26  彩色拼缀效果——Pixelate
18.27  放射状擦除滤镜——RadialWipe
附录1 颜色代码
附录2 CSS属性的有效浏览器
附录3  HTML标记参考
附录4  CSS属性列表

5 楼


第7章  网页中的多媒体元素和图像
多媒体元素包括动画、视频、音频等,在网站中使用可以丰富网站效果,体现网站特点,突出重点,改善用户体验。
图像是网页中不可缺少的元素,合理使用图像可以使网页更加美观、形象和生动,使网页中的内容更加丰富多彩。在网页中添加图像,创建精美网页,从而使网页吸引更多浏览者,因此,利用好图片也是网页设计的关键。本章将详细介绍网页中多媒体元素和图像的使用方法。
7.1  将多媒体内容放到网页中
多媒体音频、视频文件格式很多,这些文件都有自己特定的播放器,因此在网页中添加多媒体音频、视频文件,就需要嵌入相应的播放器才能实现。无论使用哪种多媒体格式,将多媒体文件嵌入到网页中的步骤都和一下介绍的相同。
7.1.1  链接到多媒体文件
要将视频、音频文件包含到网页中,最简单、方便的方法是使用链接,就像链接到HTML文件一样。
【标签说明】
<a href=”多媒体文件路径”>多媒体文件</a>
说明:多媒体文件路径是指要播放的多媒体文件的相对路径或绝对路径,多媒体文件是添加的链接文字。
【上机实战】
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>链接到多媒体文件</title>
</head>
<body>
<a href="Clown-放手也是幸福.mp3">歌曲-放手也是幸福</a>
</body>
</html>
【运行效果】
运行这段代码,网页中的效果如图7-1所示,单击其中的链接“歌曲放手也是幸福”,即打开系统自带的播放器,如图7-2所示。

[img]http://www.tu265.com/di-a9aa077360bb7750a849f403fc5c9a8e.png[/img]

6 楼


7.1.2  添加多媒体文件标签——embed
如果在网页中正确浏览嵌入到网页中的多媒体文件,就需要在客户端的计算机中安装相应的播放软件,使用<embed>标记可以将多媒体文件嵌入到网页中。
【标签说明】
<embed src="多媒体文件地址" width=播放界面的宽度 height=播放界面的高度></embed>
说明: width和height参数的值必须要设置,单位是像素,否则无法正确显示播放多媒体文件的软件。
【上机实战】
<html>
<head>
<title>嵌入多媒体文件</title>
</head>
<body>
    下面是嵌入的多媒体文件:<br>
    <embed src="视频素材.avi" width=500 height=200></embed>
</body>
</html>
【运行效果】
运行这段代码,可以看到一个播放页面,如图7-3所示。单击页面中的播放按钮 可以播放插入的视频文件“视频素材.avi”。

[img]http://www.tu265.com/di-9dd4aeee0f718fff4c97ea70fd2612d2.png[/img]

7 楼


7.1.3  设置媒体文件自动运行——autostart
登录网页的时候常常会看看一些视频文件直接播放,不需要手动开始,特别是一些广告内容,这是通过autostart参数来实现的。
【标签说明】
<embed src="多媒体文件地址" autostart=是否自动运行></embed>
说明:autostart的取值有两个:true或者false,true表示自动播放;另一个是false,表示不自动播放。
【上机实战】
<html>
<head>
<title>设置自动运行</title>
</head>
<body>
    下面的视频文件中左边的视频文件将会自动播放,而右边的视频文件则需要手动播放:<br>
    <embed src="视频素材.avi" width=200 autostart=True></embed>
    <embed src="视频素材.avi" width=200 autostart=False></embed>
</body>
</html>
【运行效果】
运行这段代码,可用看到两个视频文件的不同效果如图7-4所示。

[img]http://www.tu265.com/di-7d14616b06ef7a255fc681576ddaacc5.png[/img]

8 楼


7.1.4  设置媒体文件的循环播放——loop
多媒体文件可以设置是否自动播放,也可以设置是否自动循环播放,广告内容大多选择自动循环播放,通过设置loop参数即可实现。
【标签说明】
<embed src="多媒体文件地址" loop=是否循环播放></embed>
说明:在该语法中,loop的取值不是具体的数字,而是true或者false,如果取值为true,表示媒体文件将无限次的循环播放;如果取值为false,则只播放一次。这里的loop也可以设置为播放次数。
【上机实战】
<html>
<head>
<title>设置循环播放多媒体文件</title>
</head>
<body>
     <embed src="视频素材.avi" width=200 autostart=True loop="true"></embed>
</body>
</html>
【运行效果】
运行这段代码的效果如图7-5所示。

[img]http://www.tu265.com/di-7f14be32675fccac278c0fdd4788ccf0.png[/img]

9 楼


7.1.5  隐藏媒体播放面板——hidden
在网页中播放多媒体视音频时,可以将媒体文件的声音保留而隐藏图像,通过hidden参数可以隐藏播放面板。
【标签说明】
<embed src="多媒体文件地址" hidden=是否隐藏></embed>
说明:在该语法中hidden可以设置两个值:一是true,表示隐藏面板;另一个是false,表示显示面板,这是添加媒体文件的默认选项。如果要保留声音就要设置文件的自动播放。
【上机实战】
<html>
<head>
<title>设置隐藏面板</title>
</head>
<body>
    下面的视频文件隐藏了播放面板<br>
    <embed src="视频素材.avi" width=200 autostart=True hidden="true"></embed>
</body>
</html>
【运行效果】
运行这段代码,看到播放控制面板已经不见了,只能听到播放的声音效果,如图7-6所示。

[img]http://www.tu265.com/di-d29072251d7e027d0649a9881b00b02a.png[/img]

10 楼


7.1.6  添加flash动画文件
除了AVI媒体文件之外,在网页中还可以嵌入Flash、Mpeg等类型的媒体文件,方法与AVI媒体文件相同。
【标签说明】
<embed src="多媒体文件地址" width=播放界面的宽度 height=播放界面的高度></embed>
说明:其中的参数和前面播放其他多媒体文件是相同的。
【上机实战】
<html>
<head>
<title>设置flash动画</title>
</head>
<body>
  <embed src="彩光飞舞-3.swf"  width="200" height="200"></embed>
</body>
</html>
【运行效果】
运行这段代码,看到在页面中添加了flash文件,如图7-7所示。

[img]http://www.tu265.com/di-db944fa0a76396f7cafd071df4be3551.png[/img]

我来回复

您尚未登录,请登录后再回复。点此登录或注册