html网页设计总结.docx

1、html网页设计总结目录1 第一章 31.1 第一节 31.1.1 第一课 认识HTML 31.1.2 第二课 段落及超链接 41.1.3 第三课 设置背景图及图片 61.1.4 第四课 表格 61.1.5 第五课 hr属性、滚动字符、列表 81.2 第二节 101.2.1 第一课 表单 101.2.2 第二课按钮及下拉框 111.2.3 第三课 框架，标签iframe 131.2.4 第四课背景音乐，多媒体 141.3 第三节css 151.3.1 第一课 了解css 151.3.2 第二课 属性 151.3.3 第三课 样式表的三类应用方式 171 第一章1.1 第一节1.1.1 第一课

2、认识HTML1. html：超文本标记语言 网页又称WEB页面2. html：包括文字，表格，图片，声音，视频.以及各种功能按钮3. 首页：进入一个网站第一个显示的页面4. 网页的格式是国际标准组织定义的叫做W3C.具体标准是HTML，标记语言格式5. 标记的基本语法：6. 新建一个网页：先新建文本文档，然后把后缀名改成“*.html”即可7. html文件的后缀名：*.html或*.htm用html语言编写的文档就是html文档，也常被称为“静态网页”文件8. html标记语言规定：（1）html标签必须是成对出现 （2）html标签不区分大小写9.常用标签 加粗 斜体下划线换行 下标上标水

3、平线标题10.font字体标签字体内容Face:字体的风格 size：设置字体的大小11.当开始标签与结束标签中间有内容时使用内容当开始标签与结束标签中间没有内容时使用例：1.1.2 第二课 段落及超链接1.段落标签 多个段落之间会自动换行，并且每个段落中间会空一行。 行级层标签： 多个span之间没有换行。 块级层标签： 多个div之间会自动换行，但是没有空行。 预格式化段落标签： 在代码写的内容，在显示时完全相同。2.特殊符号的处理： 空格：   : >3.属性： 对标签的描述称为属性。 属性的说法: 属性的名称=值 属性所写的位置：要写到开始标签的里面，每个属性之间用空格

4、隔开。4.标签的属性 bgcolor:设置背景色 text:设置文字的颜色5.超链接 链接分类： 外部链接：在多个页面之间使用的效果 内部链接（锚链接）：只能在一个页面中的链接 邮件链接：点击一个地址，可以快速的写邮件。6.链接的标签： 标签： 在点击的文字7.绝对路径 和相对路径 绝对路径：在链接地址中带有盘符的路径称为绝对路径 相对路径：相对于某一个文件夹的路径称为相对路径8.邮件链接 文字9. 内部链接书签内容单击此处使浏览器调到“标签a”1.1.3 第三课 设置背景图及图片1.dw的运行网页的快捷键：f122.设置网页的背景图片的属性：background当路径中出现./时，代表是上一

5、级的信息3.在网页中添加图片 解释：src:图片的路径width:宽度height:高度border:边框的大小(0代表无边框)alt:图片不存在时，显示的文字1.1.4 第四课 表格1.表格标签： 表格标签 代表行的标签 代表列的标签 使文字加粗并且居中解释： 设置行的背景色：bgcolor 设置列的背景色：bgcolor 设置行的边框颜色:bordercolor 2.表格的合并 行合并：在不同行中单元格的合并称为行合并 列合并：在同一行中单元格的合并称为列合并3.列合并单元格的属性：colspan行合并单元格的属性：rowspan4.表格中线的宽度属性：cellspacing这个属性必须写

6、到table标签中表格中的文字到表格线的距离：cellpadding这个属性必须写到table标签中5.设置表格中文字的位置： (1)左（left），中（center），右（right） 的属性align (2)上（top），中（middle），下（bottom） 的属性valign6.表格镶嵌：在表格中添加一个表格1.1.5 第五课 hr属性、滚动字符、列表1. hr标签的属性 color:可以设置水平线的颜色 width:可以设置水平线的宽度 align:可以设置水平线的位置，左，中，右2.滚动字符 ：marquee 要滚动的字体 属性： bgcolor:滚动轨迹的颜色 direction

7、:设置内容滚动的方向 Behavior：设置内容滚动的方式 Height：高度 Width:宽度 scrolldelay：设置二次滚动的时间间隔 Loop：滚动的次数3.列表 无序列表:列表内容前面的符号是一样的 有序列表:列表内容前面的符号是自动排列的 自定义列表: 自己设置列表内容前面的符号 无序列表的标签: 无序列表内容项的标签： 在无序列表中有一个重要的属性：type 第一个 第八个 type的值有： circle：空心圆 disc：实心圆 square：方块 有序列表的标签: 有序列表内容项的标签： 在有序列表中有一个重要的属性：type 童年 老年 自定义列表的标签： 设置自定义列

8、表的图标标签： 自定义列表内容项的标签: 自定义图标内容 内容 4.热点： 把一张图片分为多个区域进行超链接1.2 第二节1.2.1 第一课 表单1.表单标签： 标签的属性： id:编号 (不能重复) name:名称(可以重复) method:数据提交的方式，只有二个值 get:显示的提交数据 post:隐式的提交数据 action:提交的路径 类似于 2.输入标签： 分类： 文本框: maxlength:在文本框中可输入的最大长度 value：文本框中的默认值 密码框： 单选框： checked:代表默认选中的选项，值true false true :选中，false代表不选中。 注意点：要

9、想多个单选框成为一组，必须把name的值设置为相同。 复选框： 1.2.2 第二课按钮及下拉框 1.type=button 普通按钮 2.type=submit 提交按钮 注意点：当使用提交按钮时，需要把form表单标签中的action属性赋值。 3.type=image 图片提交按钮 4.type=reset 重置按钮 作用：把页面中所有用户输入的内容恢复到 初始状态。 5.type=file 上传文件标签（可以选择要上传的内容） 6.type=hidden 隐藏内容标签 7.下拉框标签： 值 值 标签的属性： 标签的属性： 陕西省 说明：id是option的编号 value：一般去保持编号

10、如（张三的编号是：s10010） 张三8.多行文本框：标签 属性： 默认值1.2.3 第三课 框架，标签iframe1.iframe的属性 标签： 的属性： 当使用标签时，需要和一起使用。 在Target:blank 显示一个新的窗口 self 显示在同一个窗口 parent 显示在iframe的前一份文件的窗口 top 显示整个浏览器2.框架（混合排列多个窗口）必须写在head里面 1.2.4 第四课背景音乐，多媒体1. 插入背景音乐2. 插入多媒体没有控制条的多媒体 Start：mouseover鼠标滑到文件时播放 Fileopen 打开网页就播放有控制条的多媒体 1.3 第三节css1.

11、3.1 第一课 了解css1. css写在中2. html样式 P属性：值；属性：值;3. 类样式以点开始后面随意起名字 例如：.red1.3.2 第二课 属性1. textalign 文本对齐 fontsize 字体大小fontfamily 字体类型fontstyle 字体样式 color设置或检索文本的颜色2. 背景的属性Backgroundcolor 设置背景颜色Backgroundimage 设置背景图片Backgroundrepeat 设置一个指定的图像如何被重复3. 方框属性 Paddingleft 设置内容与左边框之间的距离 Paddingright设置内容与右边框之间的距离 P

12、addingtop设置内容与上边框之间的距离 Paddingbottom设置内容与下边框之间的距离margin-top设置对象的上边距margin-bottom设置对象的下边距margin-left设置对象的左边距margin-right设置对象的右边距border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色4. 特殊样式 a：linkcolor：#ff0000 未被访问的链接红色 a：visitedcolor：#00ff00 已被访问的链接绿色 a：hovercolor：#ffcc00 鼠标悬浮在上的颜色橙色 a：activecolor：#0000ff 鼠标点中激活链接蓝色1.3.3 第三课 样式表的三类应用方式1. 内嵌样式表 样式规则 2. 行内（嵌入）样式表 文字 行内样式适用范围小，只适用于某一个标签，对其他标签不起作用3. 外部样式表文件需要在桌面新建一个css文件（1.新建文本文档2.该后缀名为css）1） 标签link 2) import语句 import 路径；