html网页布局模板Word下载.docx
《html网页布局模板Word下载.docx》由会员分享，可在线阅读，更多相关《html网页布局模板Word下载.docx（17页珍藏版）》请在冰豆网上搜索。
每个标签都有私有属性。
也都有公有属性。
html中表示长度的单位都是像素。
HTML只有一种单位就是像素。
body:
bgcolor:
背景颜色
background:
背景图片
text:
文本颜色
1.排版标签
所有的浏览器默认情况下都会忽略空格和空行
P：
p代表一个段落
属性：
align:
对齐方式.取值：
left,right,center
<
br>
代表是换行。
hr:
color:
线的颜色
size:
线的粗细
width:
线的长短
两种写法：
1）绝对值eg:
500
2）相对值：
50%
noshade:
不要阴影
align:
对齐方式取值：
left,right,center
center:
内容居中
pre:
预定义格式标签.告诉浏览器不要忽略空格和空行
div:
块级标签必须单独占据一行
align:
span:
块级标签不换行字体标记
2字体标签
h1...h6:
定义字体大小
居中
font:
字体颜色
颜色的写法有3种：
1）英文单词:
red
2）十六进制：
#00ffcc
3）RGB（三原色）:
newRGB（124,156,23）
size:
字体大小
face：
字体类型
特殊字符：
&
lt;
小于&
gt;
大于&
amp;
符号&
quot;
双引号&
apos;
单引号
&
copy;
版权&
trade;
商标&
nbsp;
空格
扩展：
&
#32464;
b:
加粗
strong:
i:
斜体
em:
斜体
u:
下划线
s:
中划线（删除线）
sup:
上标
sub:
下标.
3.图像标记
img:
代表是一副图片
属性：
src:
图片的路径
两种写法：
a）:
相对路径路径是相对页面所在的路径两个标记.和..,分表代表当前目录和父路径
b）：
绝对路径
1）:
以盘符开始的路径
eg:
C:
\DocumentsandSettings\Administrator\桌面\day01_html\上课示例/images/1.jpg
2）:
网络路径
eg:
width:
宽度
height：
高度
Alt：
当图片显示不出来的时候代替图片显示的内容
title：
提示性文本
border:
边框
热点：
就是特定的位置添加超链。
<
imgsrc="
images/1.jpg"
width="
300"
height="
usemap="
#Map"
border="
0"
/>
<
mapname="
Map"
id="
>
<
areashape="
circle"
coords="
122,81,38"
href="
demo_字体标签.html"
/map>
4.清单标记
列表标签：
3种
a.无序列表ul
属性：
type:
值：
disc（默认，实心原点）,square（实心方点）,circle（空心圆）
b.有序列表（OL）
属性:
type:
取值：
1（阿拉伯数字，默认）,a,A,i,I
start:
从几开始
c.定义列表（dl）
dt:
列表项的标题
dd:
列表项
5.超链接
3种超链接:
1.连接到其他页面
2.锚:
指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。
使用name属性给超链起名字
3.连接到邮件:
<
ahref="
mailto:
xugang@"
进入我的邮箱<
/a>
target:
告诉浏览器怎么显示目标页面
HTML中已定义4个值：
_self:
在同一个浏览器中显示
_blank:
打开新的浏览器显示
_parent:
在父窗口中显示
_top:
在顶级窗口中显示
6.表格标记
table:
表格
border:
边框
宽度
align:
表格的对齐方式
cellpadding:
单元格内容到边的距离
cellspacing:
单元格和单元格之间的距离
bgcolor:
背景颜色
background:
bordercolorlight:
表格的上，左边框，以及单元格的右，下边框的颜色
bordercolordark:
表格的右，下边框，以及单元格上，左的边框的颜色
dir:
单元格内容的排列方式取值：
ltr从左到右，rtl:
从右到左
tr:
行
dir:
td:
单元格
内容的横向对齐方式
valign:
内容的纵向对齐方式top,middle,bottom
绝对值或者相对值（%）
height:
单元格的高度
单元格的合并：
单元格的属性：
colspan:
横向合并
rowspan:
纵向合并
th:
相当于<
td>
+<
b>
属性同<
caption:
表格的标题
align:
取值：
left,center,right,top,bottom
thead
tbody
tfoot
写与不写的区别：
1.当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。
但是用tbody标签的话，那么边下载边显示。
2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。
如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
7.框架标记及<
iframe>
框架页面上不允许有body标签
frameset:
框架的集合
rows:
纵向分部框架.
cols:
横向分部框架.
写法有两种:
1）绝对值"
200,*"
*代表剩余的
2）相对值"
30%,*"
frame:
框架.一个框架显示一个页面
scrolling:
是否需要滚动条。
默认是true
noresize:
固定框架大小
bordercolor:
给框架边框起一个颜色
name:
给框架起一个名字
内嵌框架：
嵌入在一个页面上的框架.（仅仅IE支持）
iframe:
属性：
width:
height：
高度
scrolling:
是否需要滚动条
8.表单标记及语义化
9.多媒体标记
bgsound:
背景音乐
embed:
播放多媒体文件.
marquee:
移动
direction移动目标方向left,right,up,down,up，down移动距离是固定的200px
behavior:
行为方式取值：
slide,alternate,scroll
scrollamount:
移动速度
loop:
循环多少圈。
负值表示无限循环
scrolldelay:
移动一次休息多长时间。
单位是毫秒
10.头标记
css笔记
一、CSS概述（了解）
*.CSS：
CascadingStyleSheet层叠样式表
*.CSS作用就是给HTML页面标签添加各种样式
*.为什么用CSS
HTML的缺陷：
1.不能够适应多种设备
2.要求浏览器必须智能化足够庞大
3.数据和显示没有分开
4.功能不够强大
CSS优点：
1.使数据和显示分开
2.降低网络流量
3.使整个网站视觉效果一致
4.使开发效率提高了
二、CSS语法
p{color：
red;
}
选择器{属性名：
属性值;
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
三、CSS和HTML的结合方式
CSS代码理论上位置是任意的，但通常写在style标签里
CSS和HTML的结合方式有3种：
a.行级样式表:
采用style属性,范围只针对此标签适用
divstyle="
1pxsolidred;
"
大家好<
/div>
b.内嵌样式表:
采用<
style>
标签完成。
范围针对此页面
c.外部样式表:
采用建立样式表文件。
针对多个页面.
引入样式表文件的方式:
1）:
link>
标签
eg:
linkrel="
stylesheet"
type="
text/css"
href="
a.css"
/link>
2）:
采用import，必须写在<
标签中，并且必须是第一句
@importurl（a.css）;
两种引入方式的区别：
外部样式表中不能写<
标签,但是可以写import语句
四、CSS选择器
选择器分为两大类:
1.基本选择器
a.标签选择器:
指的就是选择器的名字代表html页面上的标签
p{
color:
red;
1pxdashedgreen;
}
b.类选择器：
规定用圆点.来定义
优点：
灵活
eg:
.one{background-color:
#ff0099;
}
c.ID选择器：
规定用#来定义
#one{cursor:
hand;
区别：
标签选择器针对的是页面上的一类标签.
类选择器可以供多种标签使用.
ID选择器是值供特定的标签（一个）.ID是此标签在此页面上的唯一标识。
d:
通用选择器：
用*定义,代表页面上的所有标签。
*{
font-size:
30px;
margin-left:
0px;
margin-top:
2.扩展选择器
a.组合选择器:
采用逗号隔开
p,h1,h2,.one,#two{color:
b.关联选择器（后代选择器）:
采用空格隔开
h4spani{color:
}
表示h4标签中的span标签中的i标签的样式
h4和span和i标签不一定是紧挨着的。
c.伪类选择器
1）:
静态伪类：
规定是用:
来定义.只有两个.只能用于超链接.
:
link表示超链接点击之前的颜色
visited表示链接点击之后的颜色
eg:
a:
link{color:
a:
visited{color:
yellow;
注意：
a:
link{}定义的样式针对所有的写了href属性的超链接（不包括锚）
a{}定义的样式针对所有的超链接（包括锚）
2）:
动态伪类:
针对所有的标签都适用
:
hover:
是移动到某个标签上的时候
focus:
是某个标签获得焦点的时候
active:
点击某个标签没有放松鼠标时
label:
hover{color:
#00ff00;
input:
focus{
background-color:
#ff9999;
border:
1pxsolidred;
}
active{
color:
blue;
五、CSS各种选择器的冲突（掌握）
CSS样式的冲突:
1.ID选择器>
类选择器>
标签选择器
2.行级样式表>
内嵌样式表>
外部样式表
外部样式表的ID选择器>
内嵌样式表的标签选择器
原则：
就近原则
六、CSS的各种属性（掌握）
?
CSS中尺度单位的介绍
CSS的单位:
a.绝对单位1in=2.54cm=25.4mm=72pt=6pc,pt是点或者磅，pc是派卡
b.相对单位：
px,em（印刷单位相当于12个点）,%（相对周围的文字）
*字体设置
p{
font-size:
50px;
/*字体大小*/
font-style:
italic;
/*斜体*/
font-weight:
bold;
/*粗体*/
font-family:
幼圆;
/*字体类型*/
font-variant:
small-caps;
/*小写变大写*/
*文本设置
letter-spacing:
0.5cm;
/*字母间距*/
word-spacing:
1cm;
/*单词间距*/
text-align:
center;
/*在所包含容器的中间*/
text-decoration:
overline;
/*字体修饰underline下划线line-through中划线overline上划线*/
text-transform:
lowercase;
/*单词字体大小写*/
*背景设置
body{
background-color:
#ff99ff;
/*背景颜色*/
background-image:
url（images/2.gif）;
/*背景图片*/
background-repeat:
no-repeat;
/*no-repeat不要平铺，repeat-x,横向平铺，repeat-y纵向平铺*/
background-position:
centerright;
/*背景位置*/
background-attachment:
scroll;
/*背景的移动,fixed跟着滚动条一起移动，scroll不动*/
}
*列表设置
ulli{
list-style:
none;
/*列表前样式*/
list-style-image:
/*列表项前图片*/
margin-left:
80px;
*盒子模型（bordermarginpadding）
padding:
是内容到边的距离
border:
是边的粗细
margin:
是控件到控件的距离
*定位设置（position,float,clear,z-index）
#d{
position:
absolute;
/*
1.绝对定位:
定义横纵坐标.脱离了本身的顺序流
2.相对定位:
相对的是自己在顺序流中原来的位置
*/
left:
100px;
/*横坐标*/
top:
/*纵坐标*/
background-color:
#ff66ff;
#d1{
relative;
/*相对位置*/
1pxsolidgreen;
#339900;
span{
20px;
z-index:
值任意，值越大离我们越近
float:
浮动
overflow:
超出范围怎么办
鼠标样式设置（cursor）
七、滤镜（了解）
css滤镜的兼容性、实现
滤镜效果只是IE内核才支持。
不过咱们平时还是可以用用透明滤镜的。
之前看到美工组组长的期末网站作品，一直很好奇那些透明效果是怎么做出来的，现在算是有点头绪了。
为什么火狐谷歌chrome等浏览器不支持一些css滤镜
在IE下使用的滤镜，可以实现很多不错的特效，但是在chrome和火狐opera等浏览器里这些就全都失效了，这是为什么呢？
找了一下原来是因为滤镜只是属于IE浏览器开发下的功能，不支持IE内核的浏览器也就都不支持这些滤镜。
不过一般都支持透明滤镜，只是写法不一样，如下：
要设置一下透明度为60%的DIV就应该这样写了：
（加到CSS里面就好）
div.transp{/*makethedivtranslucent*/
opacity:
0.6;
/*Firefox,Safari（WebKit）,Opera,chrome/
filter:
"
alpha（opacity=60）"
;
/*IE8*/
alpha（opacity=60）;
/*IE4-7*/
zoom:
1;
/*neededinIEuptoversion7,orsetwidthorheighttotrigger"
hasLayout"
*/
/*IE8*/为IE下写法，opacity:
为火狐等浏览器下写法，所以要都支持这个滤镜，就得两个都写上（搞的这麻烦，看得出W3C标准规范化可以实现的好处了）
CSS滤镜详解（大多数只支持IE）
CSS样式表是一种为超文本标签语言提供增强补充服务的技术，可对每一个html的标签做精雕细刻的修饰。
只用html制作的网页，对页面内各部分的修饰能力有限且语句烦锁，样式表正是弥补这一缺陷的有力技术，它语句文法简单，只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能，使网页更加生动活泼，从而获得满意的效果。
当然，样式表的强大还依靠的就是它的滤镜功能。
因为有了滤镜，大家就可以轻易地创造出“专业”的艺术效果。
为了能帮助大家高效使用好样式表滤镜，笔者将对样式表滤镜各方面的内容进行详细介绍。
一、什么是样式表滤镜
说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。
样式表滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。
如果大家有一些脚本语言的基础，能够把滤镜效果与类似javascript的脚本代码做一些结合，就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。
现在能使用的滤镜有13个之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式表滤镜效果。
二、常用的样式表滤镜
随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。
如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。
在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。
为了使大家能有针对性地使用滤镜，下面就把一些常用滤镜的功能和参数详细介绍如下：
1、α滤镜
作用：
该滤镜可以实现各种溶入效果，如果大家将该滤镜与网页脚本语言结合起来，对滤镜的参数进行处理的话，就能很轻易地做出淡入淡出的效果来。
语法：
{FILTER：
ALPHA（opacity=opacity，finishopacity=finishopacity，
style=style，startx=s
升级会员 