html网页制作基础

《html网页制作基础》由会员分享，可在线阅读，更多相关《html网页制作基础（23页珍藏版）》请在金锄头文库上搜索。

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

2、GBB” 示例示例： 标题部分 背影色设置为灰色 2. background 属性设置背景图片可使用 GIF，JPG 示例示例： 标题部分 设置背景图片 3. bgproperties=“fixed”使背景图片成固定效果，图片不随滚动条滚动。 示例示例： 标题部分 bgproperties=“fixed“ bgproperties 设置为 fixed 图片不随着滚动条而滚动。 4 .text 设置非链接文字的色彩。 5. link、vlink、alink 分别对应普通超级链接、访问过的超级链接、当前活动超级链接颜色。 示例示例： 标题部分 点击进入 点击进入 6. leftmargin 和 t

3、opmargin 页面左边的空白距 与上边的空白距。 HTML 文字设置文字设置 1 文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通常可以使用两种方法。 第 1 种方法是直接使用 HTML 标记进行设置，如:使用粗体标记将文本设置为加粗样式。 第 2 种方法是使用 css，层叠样式表。 HTML 定义了 6 级标题，1-6 级，标题文字随级数增大依次减小。 h1 的效果 h2 的效果 h3 的效果 h4 的效果 h5 的效果 h6 的效果 示例示例： 标题部分 h1 的效果 h2 的效果 h3 的效果 h4 的效果 h5 的效果 h6 的效果 利用 align 属性可以

4、实现标题文字水平方向左、中、右的对齐方式。 align=“left / center / right” 示例示例： 标题部分 right 的效果 center 的效果 left 的效果 HTML 文字设置文字设置 2 设置文字以粗体的方式显示。语法 设置文字以斜体显示。语法 效果同语法 设置文字以上标文本效果显示。语法 设置文字以下标文本效果显示。语法 设置文字以下划线显示。语法 设置文字以删除线显示。语法 示例示例： 标题部分 粗体 斜体 斜体 字体上标 字体下标 下划线 删除线 控制的字体、大小和文字。 语法： face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜

5、色 HTML 段落设置段落设置 段落标记，一般情况下在每个段落的前面加上一个标记可以区分段落，又可以换行。 之后的文字将在下一行显视。 设置水平线。 标记所有包含的内容，将以居中对齐的方式显示在网页中。 标签可以把原文件中的空格,回车,换行,tab 键表现出来 标记将取消浏览器由于窗口大小变化而换行。 在 HTML 文档中加入标记，使标记内的 HTML 标记不起作用。 示例示例： 标题部分 这是一个段落标记。p 这是一个br 居中显示 abc #sdfsd%#% de f g! A 页面-A 页面A 页面A 页面 A 页面A 页面A 页面A 页面 B.html: HTML 框架 B 页面B 页

6、面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

7、/no 默认为 auto noresize 不能调整窗口大小 示例示例： 无标题文档 HTML iframe 标签标签 使用格式： src 设置要链接的 HTML 文件 frameborder 是否显示边框 yes/no,1/0 width 设置宽度 height 设置高度 scrolling 设置窗口是否使用滚动条 yes/on 默认为 auto 示例示例： HTML 框架 不支持 iframe 进入谷歌 HTMl 加入图像加入图像 插入图片的元素标记 格式: 常用属性: src =“图片源地址” alt =“替换文字“ width =“宽度“ height =“高度” hspace =“垂

8、直边距“ vspace =“水平边距” border =“边框“ align =“对齐方式” 示例示例： 无标题文档 =111) this.width=300 ;“ HTML 加入声音加入声音 1 src=“文件的位置 URL” autostart=“true/false”自动启动 loop=“循环次数” 示例示例： 无标题文档 var bool=true; function next() if(bool=true) bool=false; bg.src=“dt.mp3“; else bool=true; bg.src=“spain.mp3“; function Min() if(bg.vol

9、ume=-10000) return; else bg.volume-=500; this.txt.value=bg.volume; function Max() if(bg.volume=0) gb.Max.disabled=“disabled“ return; else bg.volume+=500; this.txt.value=bg.volume; HTML 加入声音加入声音 2 src =“文件的位置 URL” volume=“音量” -10000 到 0 之间 0 最高音量 balance=”声道“-10000 到 10000 之间的值 loop=“循环次数” HTML 加入视频加

10、入视频 示例示例 1： 无标题文档 示例示例 2： 无标题文档 HTML DIV 与与 CSS 样式样式 DIVCSS 是网页设计标准 可以把这个 DIV 元素看作一个层，也可以把他看成一个容器。他是用来在页面上具体定位的一个层 。 CSS 是 Cascading Style Sheets(层叠式样式表)的简称. 1 使页面加载更快 2 修改设计更有效率 3 代码从用度高 HTML CSS 样式样式-内联式样式内联式样式 内联式样式：它利于现有的 HTML 标记，把特殊的样式加入到那些由标记控制的信息中。 基本格式： CSS 控制显示区域 示例示例： 无标题文档 a:link font-siz

11、e:1cm; a:hovercolor:#00FF00; a:visitedcolor:#0033FF aaaaaa HTML CSS 样式样式-嵌入式样式嵌入式样式 嵌入式样式：它和 Javascript 一样可以嵌入到 HTML 文件的头部中 （和标记之间） ，使用 和容器装载，例如： p color : red ; font-weight : bold ， 这样会对页面中所有标记都起作用 HTML CSS 样式样式-外部式样式外部式样式 外部式样式：是一种保存在外部的样式单文件，外部文件以.CSS 为扩展名。 例如: HTML CSS 样式样式-输入式样式输入式样式 输入样式表： imp

12、ort url(demo.css); 作用:导入 CSS 文件。 HTML - CSS 标签选择器标签选择器 标签选择器 class 选择器 id 选择器 关联选择器 组合选择器 伪元素选择器 HTML DIV 网页布局网页布局 使用 DIV+CSS 布局，使页面代码更精简。 示例示例_index.html： 无标题文档 head 登录： 密码： 保存 Cookies 统计信息 排行榜 排行榜 最 新 动 态欢迎到 欢迎到 欢迎到 欢迎到 互动学习 最新动态 互动学习 最新动态 互动学习 food 示例示例_demo.css: /* CSS Document */ body text-

13、align:center; background:#e5eef5; margin:0px; #one background:#f6f6f6; width:816; height:1200px; #left width:8px; height:1200px; background:url(img/left1.gif); float:left #center width:800px; height:1200px; background:#FFFFFF; float:left #right width:8px; height:1200px; background:url(img/right1.gif

14、); float:right #head width:800px; height:80; background:#e5eef5; float:left #bd width:800px; height:1000px; background:#f6f6f6; margin-top:20px; #foodwidth:800px; height:80px; background:#e5eef5; margin-top:20px; #bd_left width:230px; height:1000px; float:left; #bd_right width:570px; height:1000px;

15、float:right; #login width:200px; height:120px; margin-top:20px;border:1px solid #84b0c7; background:#FFFFFF .count width:200px; height:230px; background:#f6f6f6; margin-top:20px;border:1px solid #84b0c7; .bd_right1 width:260px; height:310px; margin-top:20px; border:1px solid #84b0c7; background:#f6f6f6; float:left; text-align:left .bd_right2 width:260px; height:310px; ma