《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