HTMLWord文档下载推荐.docx
《HTMLWord文档下载推荐.docx》由会员分享，可在线阅读，更多相关《HTMLWord文档下载推荐.docx（24页珍藏版）》请在冰点文库上搜索。
dt>
标题<
/dt>
dd>
描述1<
/dd>
/dl>
分区/分模块标签
div>
头部内容<
/div>
导航内容<
底部内容<
[注]：
div标签一般当做结构化块状元素使用；
一般最常见的用途是对网页进行整体分块布局，即当容器来使用。
二、常用的行级标签
1.行级标签
按行逐一显示，前后不会自动换行
2.文本格式化元素
b>
定义粗体文本
i>
定义斜体文本
em>
定义强调文本，实际效果与斜体文本差不多
strong>
定义粗体文本，与<
的作用基本相同
small>
定义小号文本
sub>
定义下标文本
sup>
定义上标文本
bdo>
定义文本显示方向，内有dir属性，只能取值ltr或rtl
[注]：
lefttoright
3.超链接标签
ahref=”链接地址”target=”目标窗口”>
链接文本或图片<
/a>
常用属性
Href
指定超链接所关联的另一个资源
target
指定框架集中的哪个来装载另一个资源，该属性可以是_self、_blank、_top、_parent四个值，分别代表使用自身、新窗口、顶层框架、父框架来装载新资源
4.图像标签
imgsrc=”图片地址”alt=”提示文字”width=”300px”height=”100px”/>
5.<
span>
标签
文本等行级内容<
/span>
（强调作用）
6.<
br/标签>
br/换行>
7.常用的特殊符号
空格
&
nbsp;
大于（>
）
gt;
小于（<
lt;
引号（””）
quot;
版权号
copy;
三、frameset内嵌框架集
1.创建框架网页的步骤
1）创建各个子窗口对应的HTML文件
2）创建整个框架文件，分别引用子窗口文件
2.基本语法
framesetcols=”25%,50%,*”rows=”50%,*”border=”5”>
framesrc=”top.html”>
……
/frameset>
Cols:
纵向分割rows:
横向分割*：
表剩余部分
frameset>
标签不能与<
body>
/body>
标签同时使用。
除非你在<
中使用<
noframes>
3.<
框架集标签中的常用属性
属性
值
描述
Cols
Pixels、%、*
定义框架集中列的数目和尺寸
rows
定义框架集中行的数目和尺寸
四、Iframe内嵌框架
1.<
iframe>
标签中的常用属性
frameborder
0、1
规定是否显示框架周围的边框
frame_name
规定iframe的名称
scrolling
Yes、no、auto
规定是否在iframe中显示滚动条
src
url
规定在iframe中显示的文档的url
2.Iframe语法
body>
iframesrc=”引用页面地址”name=”框架标志名”
Frameborder=”边框”scrolling=”yes”>
/iframe>
一定要写，否则，下面的内容不显示！
五、HTML表格标签
1.表格相关元素
table>
用于定义表格，以<
/table>
结束
tr>
定义表格行，该元素只能包含<
td>
、<
th>
两种元素，多个
定义单元格，包含两个主要的属性：
Rolspan指定单元格跨多少列；
rowspan指定单元格跨多少行
caption>
用于定义表格标题，0~1个
定义表格页眉的单元格
tbody>
定义表格的主体
thead>
定义表格头
tfoot>
定义表格脚
2.表格标签一般什么情况下使用？
主要用于规则的数据显示
适当的可以在表单页面使用
3.使用表格标签的缺点
代码量比较大，页面浏览速度比较慢
层次结构比较复杂，不易于维护和改版
不利于搜索引擎搜索查找数据
要对页面进行布局，推荐使用div+css
另：
中可加入属性—width/height/border/bgcolor/cellspacing（单元格的外边距）/cellpadding（内边距）
六、Form标签（表单标签）
1.Form标签的语法：
formaction=”表单提交地址”methed=”提交方法”>
……文本框、按钮等标签元素……
/form>
表单是看不到的，只是表单元素的容器，真正的数据放在表单元素中。
2.应用：
XX搜索
注册账号
3.Form标签的常用属性
1）Action:
指定表单提交后由服务器上的哪个处理程序进行处理
2）Methed:
指定向服务器提交的方式一般为get和post两种形式
Get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数的名和值。
且get请求传送的数据量比较小，一般不能大于2KB,多为超链接。
Post方式的请求传送的数据量比较大，通常认为可以不受限制，往往取决于服务器的限制。
Post方式的请求参数是放在HTML的HEAD中传输，用户在地址栏中看不到请求参数，安全性相对较高。
3）Enctype:
用于指定表单数据的编码方式
application/x-www-form-urlencoded
默认的编码方式，将表单控件中的值处理成URL编码方式
mutipart/form-data
以二进制流的方式来处理表单数据，MIME编码，上传文件的表单必须选择该项
text/plain
当表单的action属性值为mailto:
URL的形式时使用
4.常见的表单元素
使用input元素
单行文本框：
指定<
input…/>
元素的type属性为text即可
密码输入框：
元素的type属性为password
隐藏域
元素的type属性为hidden
单选框
元素的type属性为radio
复选框
元素的type属性为checkbox
图像域
元素的type属性为image即可，
当type=”image”时，可以指定width和height属性
文件上传域
元素的type属性为file
提交、重置、
普通按钮
元素的type属性为submit、result、button
自结束；
name可重复，id要唯一
labelfor=”id内容”>
abc<
/label>
:
可让abc关联的内容快速获得焦点，
增强用户体验
Input元素常用的几个属性
Cheked
设置单选框、复选框初始状态是否处于选中状态，
选中：
checked=”checked”；
不写，默认不选中
若同时设置两个默认，显示后一个！
只有当type属性值为checkbox或radio时才可指定
Disabled
设置首次加载时禁用此元素。
禁用：
disabled=”disabled”,默认可用
当type=”hidden”时不能指定该属性
Maxlengh
该属性是一个数字，指定文本框中所允许输入的最大字符数
Readonly
指定该文本框内的值不允许修改（可以使用javascript脚本修改）
Size
该属性是一个数字，指定该元素的长度。
当type=”hidden”时不能
指定该属性
指定图像域所显示的图像URL，只有当type=”image”时才可以指定该属性
5.使用button定义按钮
语法：
buttontype=”按钮类型”>
普通文本、格式化文本、图像
/button>
Button标签常用属性
指定是否禁用此元素。
该属性只能是disabled或者省略
Name
指定该按钮的唯一名称
Type
指定该按钮属于哪种按钮，只能是button、reset、submit
必须声明按钮类型，否则默认提交
总结：
button按钮与input按钮相比，提供了更强大的功能和更丰富的内容
6.列表框和下拉菜单
1）语法：
selectname=”指定列表名称”size=”行数”>
optionvalue=”选项值”selected=”selected”>
…<
/option>
/select>
2）列表框常用属性
disabled
指定是否禁用此元素，该属性只能是disabled或者省略
multiple
设置该列表框是否允许多选，多选：
multiple=”multiple”
size
指定该列表内同时显示多少个列表项
下拉菜单比列表框少size属性
3）在<
select>
元素里，只能包含如下两种子元素
option>
：
用于定义列表框选项或菜单项，它的常用属性如下：
●Disabled:
指定禁用该选项，该属性值只能是disabled或者省略
●Selected:
指定该列表初始状态是否处于被选中状态，
值只能是selected。
●Value:
指定该选项对应的请求参数值
optgroup>
用于定义列表项或菜单项组，它的常用属性如下：
●Label:
指定该选项组的标签，此属性必填
禁用该选项组里的所有选项，该属性值只能是disabled或省略
7.多行文本框
textareaname=”…”cols=”列宽”rows=”行宽”>
文本内容
/textarea>
2）多行文本常用的属性
指定文本框的宽度，必填
Rows
指定文本框的高度，必填
readonly
制定该文本框只读，该属性值只能是readonly或省略
七、HTML多媒体
1.音频和视频标签
Web上的多媒体指的是文字、图片、音效、音乐、视频和动画，现代网络浏览器已经支持很多多媒体格式。
在HTML5之前，主要提供两种元素来进行多媒体的展示，
一个是<
embed>
标签，另一个是<
object>
标签。
2.<
播放音频：
embedsrc="
1.mp3"
width="
400"
height="
200"
autostart="
true"
loop="
>
/embed>
播放flash视频：
1.MP4"
autostart="
quality="
high"
pluginspage="
若浏览器无播放插件，提供的下载地址
（地址不唯一）
作用：
可以使用<
标签来给浏览器加载插件，通过加载的插件来播放音频和视频。
objectdata=”1.mp3”>
paramname=”src”value=”1.mp3”>
paramname=”autoplay”value=”true”>
/object>
略
只有IE效果较好，兼容性不是太好。
为了能实现浏览器更好的兼容性，一般使用<
标签内嵌<
4.在HTML5中提供了<
audio>
和<
vedio>
标签来进行音频和视频的播放，使用比较简单，功能更强大。
第二章CSS
第一节CSS的作用和发展
1.什么是CSS？
CSS（CascadingStyleSheet），层叠样式单或级联样式表
它是一种专门描述结构文档的表现形式的文档，主要用于网页风格设计，包括字体大小、颜色以及元素的精确定位等。
在传统的web网页设计里，使用CSS能让单调的HTML网页更富表
现力。
2.CSS与传统的HTML描述数据方式比较有哪些优势？
1）表达效果丰富
2）文档体积较小
3）便于信息检索
4）可读性好
第二节CSS的基本使用
一、CSS的引入方式
1.CSS可以控制HTML文档的显示，但在控制文档显示之前，首先应在需要显示的HTML文档中引入CSS样式单。
HTML提供了以下四种引入方式：
1）使用内联样式：
这种方式将样式内联定义到具体的HTML元素上，通常用于精确控制一个HTML元素的表现。
2）使用内部样式定义：
这种方式是通过在HTML文档头定义样式单
部分来实现，在这种方式下，每批CSS样式只控制一份HTML文档。
3）链接外部样式文件：
这种方式将样式文件彻底与HTML文档分离，样式文件需要额外引入。
在这种方式下，一份CSS样式可以控制
多份文档。
4）导入外部样式文件：
这种方式与第三种方式类似，只是使用@import来引入外部样式表文件
1.1使用内联样式（行内样式）
内联样式是所有样式中最为直接的一种，它直接对HTML标签（<
标签中）使用style属性。
一般在实际开发中使用较少。
1.2使用内部样式（内嵌样式）
内部样式是将CSS写在<
head>
与<
/head>
之间，并且用<
/style>
标记进行声明。
把表现形式与文档结构进行分离，冗余较少，易于维护。
1.3链接/引入外部样式文件
此种方式使用频率最高，把表现与结构彻底分离
linktype=”text/css”rel=”stylesheet”href=”外部样式文件（*.CSS）”>
直接用于<
之间
1.4导入外部样式文件
这种导入方式和<
方式功能类似，就是语法不同，在<
之间使用。
@import”样式文件”或@importurl（“样式文件”）
2.各种方式的的优先级问题
一个HTML文件可以同时使用以上四种样式方式，当四种方式中有相同属性的时候，它们的优先级顺序如下：
内联>
内部>
import>
link
提示：
虽然各种CSS样式加入页面的方式有先后的优先级，但在设计网站时，最好只使用其1~2种，这样既有利于后期的维护和管理，也不会出现各种样式的“撞车”情况，便于设计者顺理成章的整理思路。
二、CSS选择器
1.CSS常用选择器介绍
1）定义CSS样式的语法总遵循如下格式：
Selector{
亦称样式规则
Property:
value1;
value2;
}
2）上面的语法分为两部分：
Selector（选择器）：
选择器决定该样式定义对哪些元素起作用
{Property:
Property:
}（属性定义）：
属性定义部分决定这些样式起怎样的作用（字体、颜色、布局等）
学习CSS大致需要掌握两个部分的内容：
a）掌握选择器定义的用法；
属性间用”；
”隔开，属性值之间用空格。
b）掌握各种CSS属性的定义。
1.1.标记选择器（元素选择器）
E{……}/*其中E代表有效的HTML元素*/
1.2.类选择器
[E].classValue{……}/*其中E代表有效的HTML元素*/
[…]:
可省略.:
表示类classValue:
类名{……}:
样式规则
同时使用多种类选择器，效果一般会叠加。
1.3.ID选择器
[E]#idValue{……}/*其中E代表有效的HTML元素*/
与类选择器最大的区别：
不能同时使用多个ID选择器
1.4.选择器组合
Selector1，Selector2，Selector3{……}
/*其中Selector1等都是有效的选择器，以”,”隔开*/
1.5.选择器嵌套
Selector1Selector2{……}
/*其中Selector1等都是有效的选择器，以空格隔开*/
第三节、CSS常用样式属性设置
一、CSS字体和文本的相关属性
1.CSS为控制文本的字体提供了大量的属性，这些属性主要用于设置字体大小、样式、粗细、类型等。
常用属性如下：
Font-family
规定文本的字体系列。
比如：
”serif”、”sans-serif”等。
Font-size
规定文本的字体尺寸
Font-style
规定文本的字体样式。
主要有normal、italic（斜体）、
Oblique（倾斜）。
Font-weight
规定字体的粗细。
主要有normal、bold（粗体）、自定义粗细
2.CSS为控制文本提供了大量的属性，这些属性主要用于控制文本的颜色、修饰、字符间距等外观。
Color
设置文本颜色
Letter-spacing
设置字符间距
Line-height
设置文本行高
Text-align
设置文本的对齐方式，主要有left、right、center
Text-decoration
设置文本的装饰效果，主要有overline、underline、line-through
（上划线）（下划线）（中划线）
Text-indent
设置文本框首行缩进
Text-transform
控制文本的大小写，主要有Capitalize（单词首字母大写）、uppercase（大写）、lowercase（小写）
Word-spacing
设置单词间距
a）.one{font-size:
20px;
font-family:
sans-serif;
font-style:
oblique}
.oneb{font-weight:
normal;
font-size:
2em}
pclass="
one"
>
观自在菩萨，<
般若波罗蜜<
/b>
多心经。
20px：
绝对大小；
2em：
相对大小，也可用200%
b）属性间用”;
”隔开
二、CSS边框和背景相关属性
1.在HTML中有很多元素都有边框的属性，比如img元素、块级标签元素等。
CSS常用的边框属性如下：
border
在一个声明中设置所有边框属性
Border-width
设置四条边框的宽度
Border-style
设置四条边框的样式，主要有dotted（点画线）、
solid（单实线）、double（双实线）、dashed（虚线）
Border-color
设置四条边框的颜色
Border-left
在一个声明中设置所有左边框属性，对应还有border-right
Border-top、border-bottom
Border-left-color
设置左边框颜色，对应还有border-right-color等三边颜色
Border-left-style
设置左边框样式，。
。
Border-left-width
控制左边框宽度，。
一个属性的不同值用空格分开，如：
Border:
5pxdouble#ff00ff
除了border属性可以将各个属性值写到一起，CSS的很多其他属性也可以进行类似的操作，例如：
font以及后面章节要提到的padding和margin等属性都可以统一写在一起。
2.网页背景除了使用颜色，同样可以使用图片,CSS提供了相关属性来对背景图片进行精确的控制。
常用属性如下：
Background
在一个声明中设置所有的背景属性
Background-attachment
设置背景图片是否固定或者随着页面的其余部分滚动,
主要有fixed（固定）和scroll（滚动，默认）两个值
Background-color
设置元素的背景颜色
Background-image
设置元素的背景图像，主要有url和none两个属性
Background-position
设置背景图像的开始位置，可以指定topleft等，也可以指定具体的像素位置
Background-repeat
设置是否及如何重复背景图像，主要有repeat、repeat-x、repeat-y、no-repeat
同样我们可以把这些背景样式属性组合起来写，更简洁。
Background:
url（1.jpg）no-repeat200px25px;
”1.jpg”亦可（距离左边框200px,上边框25px）
属性值之间用空格隔开
三、CSS列表和表格相关属性
1.CSS为列表元素提供了相关的属性来进行操作，
List-style
在
升级会员 