|
Dreamweave设计HTML文件，无需手打代码，可以鼠标操作，自动生成
<!--注释的文字--> 单行注释
<title>：标题标记，内容显示在浏览器的标题栏中
<meta>：元信息标记，不显示在浏览器页面中。无需结束标记，直接写在尖括号内
name属性，值有 keyword，搜索的关键字，description，网页描述，便于被搜索，author，作者信息
content属性：就是name属性值的具体内容
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
http-equiv设定HTTP协议的标头属性的名称，content里是具体的值，charset字符编码
设置页面定时跳转到另一网页：<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
设置页面的过渡效果：<Meta http-equiv="Page-Enter" Content="revealTrans(duration=x,transition=y)">
Duration表示滤镜特效的持续时间(单位：秒) Transition表示使用哪种特效，取值为0-23
Page-Enter、Page-Exit是页面被载入和调出时的一些特效
<base>：基底网址标记，设置HTML的绝对路劲，那么在body中的链接地址只需设置成相对地址
<base href="链接地址" target="新窗口的打开方式">
<body>：页面主体标记
bgcolor属性：背景颜色
background属性：背景图片链接地址 bgproperties属性：值为fixed，则滚动时文字动，背景静止
text属性：文字颜色
link，alink，vlink属性，链接文字，正在访问的链接，访问后的链接文字颜色
margin属性：有topmargin，leftmargin等，设置边距，内容与浏览器边框的距离
<h1>...</h1> 到 <h6>...</h6>：标题文字标记，1最大
align属性：对齐方式
<font>：文字格式标记
face属性：设置文字字体
size属性：设置文字大小
color ： 文字颜色
<strong><b>标记 ： 粗体字
<em><I><cite>标记： 斜体字
<u>标记 ： 下划线文字
<sup>标记：上标，X的平方
<sub>标记：下标，X1
<strike>标记：删除线效果
<code> 和 <samp>：等宽标记，常用于英语字母的等宽显示
：空格，多个空格要多个此标记，注意最后有个封号
<p>：段落标记，隐含了换两行的效果，因为末尾换行，中间还空一行
<nobr>：不自动换行标记，文字过长时，会生成横向滚动条
<br>：换行标记
<pre>：保留原始排版方式标记，就是代码里的排版在浏览器里同样显示 <center>：居中对齐标记，一行文字相对于浏览器居中显示，里面可以嵌入<p>等标记 <blockquote>：向右缩进标记，可以多次使用，就像Tab键
<hr>：水平线标记，添加一条水平线
width、size属性：水平线的宽度和高度
color属性：水平线颜色
align属性：水平线的对齐方式
<plaintext>：忽略HTML标签的标记，一般加在<body>后，后面的内容就按源代码显示了，不解释标签了 <ul>：无序列表标记 type属性：无序列表的默认项目符号是大黑圆点，用此属性可以改成小方框等，像word软件 <li>：列表项标签 <ul type="circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol>：有序列表标记，与无序列表的不同是列表项标记是有规律的数字递增或字符递增等 type属性：有数字，大小写字符，罗马数字等 start属性：配合type使用，只能是数字，如2，则数字从2开始列表，字母从b开始递增 <li>：列表项标签，与无序列表相同 <h4>一个有序列表：</h4> <ol> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ol> <dl>：定义列表标记，包含两层，需要解释的名词和具体的解释 compact属性：实现紧密排列，简化列表 <dt>：包含需要解释的名词 <dd>：包含具体的解释 <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
<menu>和<dir>：菜单和目录列表标记，都与无序列表类似
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>
列表的文字属性设置：一般可用<font>和<span>对一段字进行设置
<a>：定义锚的标记，锚点是指在同一个页面的不同位置，比如有些网页滚动条很长，就可以用锚点链接 href属性： 支持 http，ftp，telnet 等协议 文本超链接：<a href="链接地址或文件名">链接文字</a> target属性：打开新窗口的方式，还用于框架的链接，在后面<frameset>中提到
name属性： 书签名称
同一页面的书签链接： <a href="#书签名称">链接文字</a> <a name="书签名称">文字</a> 两个书签名称要一样，点击 链接文字 时，跳转到同一页面的 文字 位置 用JS也可以实现
链接到不同页面的书签：只需在 # 前加入目标页面的地址即可 <a href="目标页面的地址#书签名称">链接文字</a> 发送Email： 点击链接文字启动邮件客户端软件 <a href="mailto:电子邮件地址">链接文字</a> 下载文件： <a href="文件所在地址">链接文字</a> <img>标记：添加图像 src属性： 指定图形所在路劲 height和width属性： 指定图像的高度和宽度 border属性： 图像边框的宽度 hspace属性： 不加则图像紧贴文字的后面，加了则指定两者距离，或者用<br>换行等 vspace属性： 图像垂直间距 align属性：图像相对于文字基准线的对齐方式，就像word中随意拖拉图像
alt属性： 鼠标停留在图像时的说明文字
<a href="
http:
//www.baidu.com"><img src="1.jpg"></a>
设置图像热区链接： <img src="图像地址" usemap="映射图像名称"> <map name="映射图像名称"> <area shape="热区形状" coords="热区坐标" href="链接地址"> </map> 手工设置坐标比较复杂，所以用 dreamweaver 等可视化软件，用鼠标操作即可 效果：点击图像上的一个区域，链接到一个地址
<marquee>：滚动文字标签，在此标签内的文字在屏幕上滚动，字体属性等嵌入<font>设定
direction属性：滚动方向
behavior属性： 滚动方式
loop属性： 循环次数
scrollamount： 滚动速度
scrolldelay： 滚动的时间间隔
bgcolor： 滚动文字的背景颜色
width，height：滚动面积
<bgsound>：背景音乐标记
src属性： 背景音乐的地址
loop： 循环播放次数，true表示无限次
src和href的区别：src是源地址，表示引用，href是目标地址，表示去向
<embed>：添加多媒体文件标记，可以是音乐或视频
src，width，height，loop属性
autostart属性：自动运行
hidden属性： 隐藏图像，只留声音，相当于背景音乐
<table>： 表格标记，表示下面定义一个表格 width，height属性：表格的宽和高 align属性： 整个表格在网页中的对齐方式 border： 边框宽度，默认没有 boedercolor： 边框颜色 cellspacing： 内框宽度 cellpadding： 表格内文字与边框距离 bgcolor： 表格背景颜色 background： 背景图像 <caption>：表格的标题
align，valign属性：设置水平和垂直对齐方式
<tr>： 表格内的行标记，有几个就表示有几行，嵌套在<td>外
height属性： 一行的高度
bordercolor： 可以单独设置外框颜色
align： 单独一行的水平对齐方式
valign： 垂直对齐方式
<td>： 单元格标记，包含文字内容
width，height属性： 单元格的宽度和高度
colspan： 水平跨度，水平的多个单元格合并为一格
rowspan： 垂直跨度
align，valign： 对齐方式
bgcolor，bordercolor，background：单元格背景色，边框色和背景图像
nowrap： 表格的整体内容超过浏览器宽度时，文字会自动换行，设置此属性的单元格内不换行
<th>：表头标记，一般用于第一行或第一列，表示类别，默认加粗显示
<thead>：合并定义表格第一行的样式
<tbody>：合并定义表格主体样式
<tfoot>： 尾行样式，定义的属性都与上面的相同
表格的嵌套：
用 可视化软件 来鼠标设计比较简单
<form>：表单标记
action属性：处理表单数据的脚本，可以是个URL
name： 表单名称，用于识别
method： 传送数据的方式，get或post
enctype： 编码方式，要实现上传功能则值必须是 multipart/form-data
target： 表单上传后返回窗口的显示方式
<input>： 输入类的控件标记
name属性：控件名称
type属性：控件类型，有text，password，radio，checkbox，button，submit，reset，image，hidden，file
<select>：菜单列表类的控件标记
<option>：下拉菜单中一个选项内容的标记
<textarea>：文本域的控件标记
name，value，rows，cols属性：名称，默认显示值，行，列
具体的表单 标记 和 属性 的应用参照 PHP笔记
<frameset>：框架集标记，本身不是框架，而是存放框架结构的文件，一个页面除了划分的框架外，必须有一个总的框架集文件，代替<body>标记，所以没有body主体了
rows属性： 水平分割窗口，值可以有多个，如<frameset rows="30%,70%"> 将窗口分成两个百分比的子窗口
cols属性： 垂直分割窗口，如<frameset cols="20%,55%,25%">
frameborder： 是否显示边框，0隐藏，1显示
framespacing：边框宽度
bordercolor： 边框颜色
嵌套分割窗口：
<frameset rows="30%,70%">
<frame> //有几个窗口就有几个<frame>标记，这里70%的窗口被分割，所以第二个<frame>没了
<frameset cols="20%,55%,25%">
<frame>
<frame>
<frame> //三个窗口所以有三个<frame>标记
</frameset>
</frameset>
</html>
<frame>： 设置子框架属性的标记，没有结束标记，因为都是通过属性来引用页面，而不是直接书写页面代码
src属性： 页面源文件地址，必需的属性
name属性： 页面名称，便于页面的查找和链接
noresize： 不用赋值，有此属性，框架的尺寸就不能用鼠标拖动，而是固定了
marginwidth： 设置边框与页面内容的水平边距
marginheight：垂直边距
scrolling： 是否显示滚动条，yes，no，auto三个值
<noframe></noframe>：当浏览器不支持框架结构时，直接显示这对标记中的内容
<iframe>：浮动框架标记，本身不是一个框架，但是可以在页面上划出一个窗口，嵌套在<body>中，浮动是显示在页面上层，不是说可以滚动
<body>
<font size="5" color="#CC0000">在这一个页面中将会添加一个浮动框架页面</font>
<hr size=2>
<iframe src="source.html">
</iframe>
</body>
属性：src，width，height，align，name，marginwidth，marginheight，scrolling，frameborder
在总框架上实现对子框架的链接： 在子页面中用 <a> 标记的 target 属性，具体参见例子《HTML网页设计参考手册》文件夹10中的 19layout.html文件 浮动框架的链接：参见 20float.html文件，他们的子页面文件共用content1-3，navig
CSS：Cascading Style Sheet，“层叠样式表”或“级联样式表”
基本语法：选择符 { 样式属性: 取值; 样式属性: 取值; 。。。}
如：body {color:black} 自动且只能用于<body>
选择符种类：
1，类选择符，语法：标记名.类名 { 样式属性: 取值; 样式属性: 取值; 。。。} 如：p.red {color: red} 类名是自定义的，随便取 一般省略标记名，这里的是p，这样类名就可以用于任何html标记了，如 <p class=red> <h1 class=red> 2, ID选择符，把类选择符中的“.”改成“#”，调用时不用class，而用id，其他都一样
3，包含选择符，如：table a {font-size: 12px} 只对包含的第二个元素有效，这里只对<table>中包含的<a>中的内容有效
添加CSS的方法：
1，链入外部样式表，是单独保存的一个外部.css文件，必须在<head>标记中用<link>链接，如
<link rel="stylesheet" type="text/css" href="...">
2，内部样式表，在<head>中加入<style type="text/css"></style>，把css内容写在这对标记里
3，导入外部样式表，格式： <style type="text/css"> @import 地址 //这句必须放在第一行 选择符 { 样式属性: 取值; 样式属性: 取值; 。。。} ...... </style> 4，内嵌样式，语法：<html标记 style="样式属性: 取值; 样式属性: 取值; 。。。"> 这里的 html标记 指 <body> <p> 等，若要选取特殊字段则要 <div> <span> , <font>只能是一行字
CSS的注意事项：
1，嵌套在里面的元素继承外部的样式，如<p>继承<body>的样式
2，优先级最高的是最后起作用的，也就是嵌套在最里面的
3，注释语句 /* ... */
CSS的字体属性：
font-family ：设置文字的字体
font-size ：字体大小
font-style ：字体的倾斜
font-weight ：字体的加粗
font-variant ：显示为小型的大写字母
font ：复合属性，包括上面的5种，如：p {font:bolder italic 14pt/18pt 黑体}
颜色及背景属性：
color ： 整个页面内容的颜色
background-color： 背景颜色
background-image： 背景图像，值是url
background-repeat：背景重复，也就是平铺，就像windows里设置桌面背景
background-attachment：背景图像是否随滚动条滚动
background-position：背景位置，用于 div 等块级元素
background： 背景的复合属性，如：body { background: url(pic02.jpg) no-repeat right bottom }
文本属性：
word-spacing： 单词间隔
letter-spacing： 字符间隔
text-decoration：文字修饰，下划线等
vertical-align： 纵向排列，对齐方式，能用于上标下标等，x的平方
text-transform： 第一个字母大小写，全部大小写转换等
text-align： 文本排列，各种对齐方式
text-indent： 文本缩进
line-height： 文本行高
white-space： 处理空白，多个空格变一个等
unicode-bidi： 文本反排，从不同的方向读进文本
direction： 从哪边读到哪边
边距与填充属性：
margin-top： 上下左右四个边距
margin-bottom：
margin-left：
margin-right：
margin： 复合属性，顺序是上右下左，省略的值与对边相等，如：img { margin: 8pt 30pt 10pt}
padding-top： 四个方向的填充，也就是补白
padding-bottom：
padding-right：
padding-left：
padding： 复合属性，如：body {padding: 18pt 35pt 12pt}
边框属性：
border-style：分别有border-top-style等四个边框样式，实线虚线等
border-width：同上，分别能设置四个边框的宽度
border-color：同上，四个
border：二重复合属性，包括的上面的三个子属性也都是复合属性
定位及尺寸属性：
position： 如果值是absolute，需要同时使用top，left等属性定位
top： 四个方向的元素位置
right：
bottom：
left：
z-index： 层叠顺序，值大的覆盖值小的，如两张图片重叠覆盖了
float： 浮动属性，word中图片的拖动，将文字设置在某个元素的周围
clear： 指定一个元素是否允许其他元素浮动在其周围
clip： 可视区域，只有在position值为absolute时才能使用，在区域外的被裁剪掉，看不见了
height和width： 层 的高度和宽度
overflow： 层的内容超出范围时，是否加滚动条
visibility： 将嵌套层隐藏
列表属性： list-style-type： 列表项的符号，<ul>和<ol>的type属性 list-style-image： 用图像作为列表项的符号 list-style-position： 列表项符号和文字缩进的关系 list-style： 上述三者的复合属性，如： ol{ list-style-type: square; list-style-image:url(pic07.jpg); list-style-position: inside }
光标属性：
cursor： 鼠标在不同位置显示的光标形状
滤镜属性：
语法： filter: 滤镜名称(参数1，参数2，。。。) 如： .alphaall {filter:alpha(opacity=50)}
alpha： 图片或文字的透明度
blur： 动感模糊效果
chroma： 对颜色进行透明处理
dropShadow： 在指定的方向和位置上产生阴影
flipH： 对象的水平翻转
flipV： 垂直翻转
glow： 发光效果
gray： 灰度处理
invert： 色彩，饱和度，亮度等全部反转
xray： X光效果
mask： 遮蔽光线效果
wave： 波形扭曲
滤镜效果是微软的扩展，可以由photoshop直接处理完图片，然后使用
| 
免费注册
发表于 2011-12-21 08:44