HTML网页制作基础.doc

HTML网页制作基础HTML文档的结构示例：标题部分我的第一个html页面元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript 和css样式等丰富网页的内容。 用来标记你的页面的解码方式。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。元素的属性概述1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor=“RRGGBB”示例：标题部分背影色设置为灰色2. background 属性设置背景图片可使用GIF，JPG 示例：标题部分设置背景图片3. bgproperties=“fixed”使背景图片成固定效果，图片不随滚动条滚动。示例：标题部分bgproperties=fixedbgproperties设置为fixed图片不随着滚动条而滚动。4 .text 设置非链接文字的色彩。5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。 示例：标题部分点击进入点击进入6. leftmargin和topmargin页面左边的空白距 与上边的空白距。HTML文字设置1文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。 第1种方法是直接使用HTML标记进行设置，如:使用粗体标记将文本设置为加粗样式。第2种方法是使用css，层叠样式表。HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。h1的效果h2的效果h3的效果h4的效果h5的效果h6的效果示例：标题部分h1的效果h2的效果h3的效果h4的效果h5的效果h6的效果利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。align=“left / center / right” 示例：标题部分right的效果center的效果left的效果HTML文字设置2设置文字以粗体的方式显示。语法 设置文字以斜体显示。语法效果同语法设置文字以上标文本效果显示。语法设置文字以下标文本效果显示。语法设置文字以下划线显示。语法设置文字以删除线显示。语法示例：标题部分粗体斜体斜体字体上标字体下标下划线删除线控制的字体、大小和文字。语法： face 控制文字使用的字体size 控制文字的大小 color 设置文字颜色HTML段落设置段落标记，一般情况下在每个段落的前面加上一个标记可以区分段落，又可以换行。之后的文字将在下一行显视。设置水平线。标记所有包含的内容，将以居中对齐的方式显示在网页中。标签可以把原文件中的空格,回车,换行,tab键表现出来 标记将取消浏览器由于窗口大小变化而换行。在HTML文档中加入标记，使标记内的HTML标记不起作用。示例：标题部分这是一个段落标记。<p>这是一个<br>居中显示abc#sdfsd%#%defg!sdfsads$!$(h$#%idsfasfjk天空在不断的变暗但在玻璃窗的边缘留下了一丝宝石的蓝那样的深邃像大海深处的暗淡那样的忧郁像我心底深处的盘旋多么渴望留住这一丝这最后的暗淡宝石的蓝可时间的蔓延总要将它消逝然后变得黑暗无边天空在不断的变暗但在玻璃窗的边缘留下了一丝宝石的蓝那样的深邃像大海深处的暗淡那样的忧郁像我心底深处的盘旋多么渴望留住这一丝这最后的暗淡宝石的蓝可时间的蔓延总要将它消逝然后变得黑暗无边标题部分这是一个段落标记。<p>这是一个<br>居中显示HTML的转义字符-HTML 跑动文 标记可使文字产生跑动的效果direction 文字走动方向bgcolor 设置文字背景颜色height 设置跑动文字的高度width 设置跑动文字的宽度hspace 设置文字的水平边距vspace 设置文字的上边距behavior 设置文字的运动方式 scroll/alternate/slideloop 设置跑动文字的圈数scrollamount 设置跑动文字移动速度scrolldelay 设置跑动文字移动延时示例：标题部分文字示例：标题部分"<>±×&§¢¥·€£™©®HTML超链接超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。格式:这是一个连接 href 设置超链接目标地址URLname 在html文档中建立特定位置的名称target 设置被链接的网页打开时的窗口_blank/_parent/_self/_topaccesskey 设置超链接的快捷键 title 设置超链接的说明文字style 运用css样式设置超链接文字样式示例：标题部分html链接HTML超链接的锚点是指同一页面中的不同位置链接。一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。示例：标题部分08-A.html页面内的锚点1-_-页面外的锚点1页面内的锚点2返回顶部HTML有序列表列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。项目一项目二.type1 阿拉伯数字a 英文小写A 英文大写i 罗马小写数字I 罗马大写数字start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B.示例：标题无序列表有序列表定义列表无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。有序列表使用数字编号，分项带有顺序性质的列表。定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。HTML无序列表无序列表标记项目一项目二.type circle 空心圆disc 圆点square 正方形示例：标题啊啊啊啊啊啊啊啊HTM自定义列表 无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。 有序列表使用数字编号，分项带有顺序性质的列表。 定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。 示例：标题啊啊啊啊啊啊啊啊HTML建立表格使用表格可以划分页面的布局格式：.表格中的一行数据 表格中的二行数据 表格中的三行数据 示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据标签的属性border 设置表格边框caption设置表格标题align 设置表格在网页中的布局width 设置表格宽度height 设置表格高度cellspacing设置表格各单元格之间距离cellpadding设置单元格内部与文本之间的间距bordercolor设置表格边框颜色bordercolorlight 设置表格亮面颜色Bordercolordark 设置表格暗面颜色示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据标签的属性bgcolor 设置背景颜色。align 设置行对齐方式。valign 设置单元格垂直对齐方式。示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据和 标签的属性bgcolor 设置单元各背景颜色rowspan 设置单元格所占行数colspan 设置单元格所占的列数align 设置对齐方式valign 设置单元格垂直对齐方式width 设置单元格宽度height 设置单元格高度示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据rowspan一行数据第一行数据第二行数据第三行数据colspan第一行数据第二行数据第二行数据第三行数据第三行数据th表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据HTML特殊表格Rules 设置单元格的特效Fieldset 设置特殊表格示例：标题第一行第一行第二行第二行细线表格细线表格细线表格细线表格立体表格立体表格公告更多更新视教程，请到HTML 表单表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。 1、name： 设置表单的名称。2、action： 设置表单的处理程序的URL。3、method：提交表单的方法。示例：无标题文档请输入用户名:请输入密码:选择强项：体育音乐跳舞男女中国美国韩国HTML表单中常用的标记输入域一般在表单中使用1、输入单行文字2、输入密码3、 单选按钮4、多选按钮5、图片6、 文件上传7、隐藏域8、撤销按钮9、提交按钮10、普通按钮示例：无标题文档输入单行文字输入密码单选按钮 多选按钮 图片域文件上传隐藏域撤销按钮提交按钮执行脚本文本域中国美国韩国HTML表单中常用的标记多行文本输入标记 name 设置识别名称。 rows 设置文本域的行数 cols 设置文本域的列数 disabled 设置文本为禁用 warp 设置为off 不换行 HTML 表单中常用的标记选择域 选项一 选项二 HTML表单提交数据html提交数据时必须设置标签name和value属性，以便asp程序能获取相应的值。HTML 的框架使用框架可以划分页面 示例：HTML框架A.html:HTML框架!-建站就去谷歌百度-A页面-A页面A页面A页面A页面A页面A页面A页面B.html:HTML框架B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面B页面HTML frameset标签的属性cols =size 设置列的大小 rows=size 设置行的大小 frameborder 是否显示边框yes/no,1/0 framespacing 设置分割条大小 HTML frame标签的属性src 设置要链接的HTML 文件 name 窗体的名称 marginwidth 设置窗口左右边界的距离 Marginheight 设置窗口上下边界的距离 scrolling 设置窗口是否使用滚动条 yes/no 默认为autonoresize 不能调整窗口大小 示例：无标题文档HTML iframe 标签使用格式：src 设置要链接的HTML文件frameborder 是否显示边框yes/no,1/0 width 设置宽度height 设置高度scrolling设置窗口是否使用滚动条 yes/on默认为auto示例：HTML框架不支持iframe进入谷歌HTMl 加入图像插入图片的元素标记格式: .常用属性:src =“图片源地址”alt =“替换文字“width =“宽度“height =“高度”hspace =“垂直边距“vspace =“水平边距”border =“边框“align =“对齐方式”示例：无标题文档=111)this.width=300;HTML 加入声音1 src=“文件的位置URL”autostart=“true/false”自动启动 loop=“循环次数”示例：无标题文档varbool=true;functionnext()if(bool=true)bool=false;bg.src=dt.mp3;elsebool=true;bg.src=spain.mp3;functionMin()if(bg.volume=-10000)return;elsebg.volume-=500;this.txt.value=bg.volume;f