HTML网页制作基础.docx

1、HTML网页制作基础HTML网页制作基础HTML文档的结构示例：标题部分我的第一个html页面元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口中显示，但是其之间可以嵌入javascript 和css样式等丰富网页的内容。 用来标记你的页面的解码方式。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。元素的属性概述 1. Bgcolor 属性标志HTML文档的背景颜色。如:Bgcolor=“RRGGBB” 示例：标题部分背影色设置为灰色 2. back

2、ground 属性设置背景图片可使用GIF，JPG 示例：标题部分设置背景图片 3. bgproperties=“fixed”使背景图片成固定效果，图片不随滚动条滚动。 示例：标题部分bgproperties=fixedbgproperties设置为fixed图片不随着滚动条而滚动。 4 .text 设置非链接文字的色彩。 5. link、vlink、alink分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。 示例：标题部分点击进入点击进入 6. leftmargin和topmargin页面左边的空白距 与上边的空白距。HTML文字设置1文字是网页设计的基础部分，设置好文字的样式

3、，可以起到事半功倍的效果，通常可以使用两种方法。 第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设置文字以

4、粗体的方式显示。语法 设置文字以斜体显示。语法效果同语法设置文字以上标文本效果显示。语法设置文字以下标文本效果显示。语法设置文字以下划线显示。语法设置文字以删除线显示。语法 示例：标题部分粗体斜体斜体字体上标字体下标下划线删除线控制的字体、大小和文字。 语法： face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜色 HTML段落设置段落标记，一般情况下在每个段落的前面加上一个标记可以区分段落，又可以换行。之后的文字将在下一行显视。设置水平线。标记所有包含的内容，将以居中对齐的方式显示在网页中。标签可以把原文件中的空格,回车,换行,tab键表现出来 标记将取消浏览器由于

5、窗口大小变化而换行。在HTML文档中加入标记，使标记内的HTML标记不起作用。 示例： 标题部分这是一个段落标记。<p>这是一个<br>居中显示abc#sdfsd%#%defg!sdfsads$!$(h$#%idsfasfjk天空在不断的变暗但在玻璃窗的边缘留下了一丝宝石的蓝那样的深邃像大海深处的暗淡那样的忧郁像我心底深处的盘旋多么渴望留住这一丝这最后的暗淡宝石的蓝可时间的蔓延总要将它消逝然后变得黑暗无边天空在不断的变暗但在玻璃窗的边缘留下了一丝宝石的蓝那样的深邃像大海深处的暗淡那样的忧郁像我心底深处的盘旋多么渴望留住这一丝这最后的暗淡宝石的蓝可时间的蔓延总要将它消逝然

6、后变得黑暗无边标题部分这是一个段落标记。<p>这是一个<br>居中显示HTML的转义字符-HTML 跑动文 标记可使文字产生跑动的效果 direction 文字走动方向 bgcolor 设置文字背景颜色 height 设置跑动文字的高度 width 设置跑动文字的宽度 hspace 设置文字的水平边距 vspace 设置文字的上边距 behavior 设置文字的运动方式 scroll/alternate/slide loop 设置跑动文字的圈数 scrollamount 设置跑动文字移动速度 scrolldelay 设置跑动文字移动延时 示例：标题部分文字示例：标题部分

7、"<>±×&§¢¥·€£™©®HTML超链接超链接是一个网站的重要元素之一，一个网站由多个页面组成，各页面之间是通过超链接来确定相互关系的，每个页面的地址都不同。格式:这是一个连接 href 设置超链接目标地址URL name 在html文档中建立特定位置的名称 target 设置被链接的网页打开时的窗口_blank/_parent/_self/_top accesskey 设置超链接的快捷键 title 设置超链接的说明文字 style 运用cs

8、s样式设置超链接文字样式 示例：标题部分html链接HTML超链接的锚点是指同一页面中的不同位置链接。一个网页的内容很长，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览者点击相应的锚点，到达本页内相应的位置，而不必在一个很长的网页里自行寻找。 示例：标题部分08-A.html页面内的锚点1-_-页面外的锚点1页面内的锚点2返回顶部HTML有序列表列表分成三种类型：有序列表、无序列表和自定义列表。有序列表使用编号来记录项目的顺序，无序列表使用项目符号来记录无序的项目，自定义列表它由两个部分组成：定义条件和定义描述。 项目一 项目二 . type 1 阿拉伯数字 a 英文小写 A 英文大写

9、 i 罗马小写数字 I 罗马大写数字 start 编号样式的起始数字，如：编号样式设为A，起始值设置为2，则列表的起始值为B. 示例：标题无序列表有序列表定义列表无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。有序列表使用数字编号，分项带有顺序性质的列表。定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。HTML无序列表无序列表标记 项目一 项目二 .type circle 空心圆 disc 圆点 square 正方形示例：标题啊啊啊啊啊啊啊啊HTM自定义列表 无序列表不以数字为开始，而是使用一个符号作为分项标记的列表。 有序列表使用数字编号，分项带有顺序性质的

10、列表。 定义列表用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。 示例：标题啊啊啊啊啊啊啊啊HTML建立表格使用表格可以划分页面的布局格式：.表格中的一行数据 表格中的二行数据 表格中的三行数据 示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据标签的属性border 设置表格边框caption 设置表格标题align 设置表格在网页中的布局width 设置表格宽度height 设置表格高度cellspacing 设置表格各单元格之间距离cellpadding 设置单元格内部与文本之间的间距bordercolor 设置表格边

11、框颜色bordercolorlight 设置表格亮面颜色Bordercolordark 设置表格暗面颜色示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据标签的属性bgcolor 设置背景颜色。align 设置行对齐方式。valign 设置单元格垂直对齐方式。示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据和 标签的属性bgcolor 设置单元各背景颜色rowspan 设置单元格所占行数colspan 设置单元格所占的列数align 设置对齐方式valign 设置单元格垂直对齐方式width 设置单元格宽度height 设置单元格高度示例：标题表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据rowspan一行数据第一行数据第二行数据第三行数据colspan第一行数据第二行数据第二行数据第三行数据第三行数据th表格中的一行数据表格中的一行数据表格中的二行数据表格中的二行数据表格中的三行数据表格中的三行数据HTML特殊表格Rules 设置单元格的特效Fieldset 设置特殊表格示例：标题table