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