网页设计知识点合集.docx

1、网页设计知识点合集网页设计知识点合集网页设计知识点第一部分：HTML1、html基本结构： 第一个HTML示例 HTML的基本结构 2、html常用标签：HTML 主体 标签 双标签定义和用法body 元素定义文档的主体。body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）可选属性： background bgcolor text leftmargin topmargin rightmargin bottommargin 文字与段落HTML 标签 双标签定义和用法 规定文本的字体、字体尺寸、字体颜色。可选的属性 color face sizeHTML 到 标签 双标签定

2、义和用法 .备注： - 标签可定义标题。 定义最大的标题。 定义最小的标题。可选的属性align（ left right center）HTML 标签 可单独使用 也可以成对使用定义和用法. 标签定义段落可选的属性align（ left right center）HTML 标签 双标签定义和用法.定义文档中已被删除的文本。粗体标签 文字 用于以粗体方式显示标签内的文字。斜体标签 文字用于以斜体方式显示标签内的文字。下划线标签 文字用于在标签内的文字下加下划线。HTML 下标 标签 双标签定义和用法例如：x1-x1HTML 上标 标签 双标签定义和用法例如：x的平方-x2HTML 标签 双标签定

3、义和用法请在此添加地址信息 可定义一个地址（比如电子邮件地址）。HTML 标签 单标签定义和用法 可插入一个简单的换行符。HTML 标签 双标签定义和用法.对其所包括的文本进行水平居中。HTML 标签 双标签定义和用法pre 元素可定义预格式化的文本。HTML 标签 双标签定义和用法 标签定义块段落缩进。一个相当于5个 HTML 标签定义和用法 标签在 HTML 页面中创建一条水平线。可选的属性align（ left right center） size width 建立和使用列表HTML 定义列表 标签 双标签定义和用法 标签定义了定义列表（definition list）。 标签

4、用于结合 （定义列表中的项目）和 （描述列表中的项目）。实例 计算机 用来计算的仪器 . . 显示器 以视觉方式显示信息的装置 . .HTML 有序列表 标签 双标签定义和用法 标签定义无序列表。可选属性type（disc square circle ）实例无序 HTML 列表： Coffee Tea MilkHTML 无序列表 标签 双标签定义和用法 标签定义有序列表。可选属性start type（A a I i 1 ）实例有序 HTML 列表： Coffee Tea Milk 超链接超链接标签 双标签格式： 超链接文字网页中插入图片 标签 格式：设置图像映射设置名称时,名称前面不能忘记#

5、表格的建立和使用HTML 标签定义和用法 标签定义 HTML 表格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。可选属性：width height border cellpadding cellspacing align bgcolor frame rules backgroundHTML 标签定义和用法 标签定义 HTML 表格中的行。tr 元素包含一个或多个 th 或 td 元素。可选的属性Align（left right center） bgcolor valign（top middl bottom）HTML 标签定义和用法定义表格内的表头单

6、元格。可选的属性Align（left right center） bgcolor valign（top middl bottom）Colspan rowspan height width HTML 标签定义和用法 标签定义 HTML 表格中的标准单元格。Align（left right center） bgcolor valign（top middl bottom）Colspan rowspan height width backgroundHTML 标签定义和用法标签定义滚动文字 可选的属性Bgcolor direction（up down left right） behavior（scro

7、ll slide alternate） scrollmount width heightHTML 标签定义和用法标签定义多媒体文件基本语法： HTML 标签定义和用法标签定义背景音乐基本语法 用在，之间 表单的应用HTML 表单标记 标签 双标签基本语法：注意：一般使用最多的是name，method，action3个属性，其它的现在知道就可以了HTML 信息输入 标签 基本语法： 标签的属性：文本框-text；密码框-password；文件域-file；复选框-checkbox；单选按钮-radio；标准按钮-button；提交按钮-submit；重置按钮-reset；图像域-image；隐藏

8、域-hidden（一般很少用）文本框-text 基本语法：密码框-password 基本语法：文件域-file 基本语法：备注：如果需要在一个表单中添加一个文件时，如发送邮件，添加附件时可以使用file属性复选框-checkbox 基本语法：备注：id和value可以不记，考试不考；单选按钮-radio 基本语法：备注：id可以不记，考试不考，value必须加上标准按钮-button 基本语法：备注：id可以不记，考试不考，value=”标准按钮”必须加上，注意是标准按钮提交按钮-submit 基本语法：备注：id可以不记，考试不考，value=”提交按钮”必须加上，注意是提交按钮重置按钮-r

9、eset 基本语法：备注：id可以不记，考试不考，value=”重置按钮”必须加上，注意是重置按钮图像域-image 基本语法：HTML 插入文字域 标签 双标签基本语法：HTML 插入下拉列表 和列表项标签 双标签基本语法：.第二部分：CSS一、Css基本语法：Selectorproperty:value;.property:value例如：tablefont-size:4;color:red注意：属性与属性值之间要用 : 隔开，每个属性之间要用 ； 隔开备注：Selector代表选择符，property代表属性，value代表属性值，其中选择符包括多种形式，所有的HTML的标签都可以是选择

10、符，如body，p，table等等CSS选择符类型1、类选择符 基本语法：在.中定义标记名.类命样式属性：取值；.样式属性：取值例如：.p1font-size:2;text-align:center.p2font-family:宋体; color:red在.调用类选择符.2、Id选择符 基本语法：在.中定义例如：#p1font-size:2;text-align:center在.调用类选择符.备注:要分清两种选择符的定义符号 .与# id选择符一般只用来定义唯一的标示符3、包含选择符 基本语法 在.中定义例如：Table bfont-size:2;color:red备注:定义过后.只能在tab

11、le标签中使用4、伪类 基本语法 在.中定义 a:linkcolor:red-未连接时超链接部分处于红色 a:visitedcolor:blue-已连接时超链接部分处于蓝色a:color:white-指针悬浮在连接上时超链接部分处于白色a:activecolor:yellow-点击连接时超链接部分处于黄色备注:该类是与超链接组合使用的二、编写CSS文件 编写CSS文件分4种样式1、编写头部的CSS：在.中定义例如： 编写头部的CSS .p1font-size:2;text-align:center.p2font-family:宋体; color:red 喜欢你！ 2、链入样式表：将样式表保存在

12、一个单独的文件中，然后在Html文件中调用例如：先将 .p1font-size:2;text-align:center.p2font-family:宋体; color:red这部分写到一个单独的文件中，注意该文件的的拓展名一定要改成 .css 假如文件名为”4”然后在一个Html文件里写入 链入样式表 我爱你！ 3、嵌入样式表：在。里直接定义4、例如： 嵌入样式表 我爱你 4、导入样式表：因为有的浏览器识别不出来导入样式表的代码，所以一般很少用，想掌握的话可以自己看看书（P140）三、CSS文件中字体的设置 （以定义段落标签为例）1、设置文字字体：font-family 用法：pfont-fa

13、mily:宋体2、 这只字体大小：font-size用法：pfont-size：20cm备注：font-size后面可以跟绝对尺寸，相对尺寸，关键字，百分比，绝对尺寸的单位有：px像素、in英寸、cm厘米、mm毫米、pt点、pc皮卡；相对尺寸的单位是em；绝对尺寸的关键字有7个：xx-small极小、x-small较小、small小、medium、large大、x-large较大、xx-large极大；相对尺寸的关键字有2个：larger、smaller3、设置字体样式 font-style用法：pfont-style：normal正常显示|italic斜体|oblique歪体4、设置字体粗细

14、 font-weight用法：pfont-weight：normal正常|bold粗体|bolder加粗|lighter细体|数字备注：font-weight后可以跟数字 单数字只有9个级别-100到900如pfont-Weight：1005、设置字体变体font-variant用法：pfont-variant：normal正常|small-caps备注：small-caps属性值的意思是将英文字母显示成小型的大写字母6、组合设置字体属性 font用法：pfont：font-style|font-variant|font-weight|font-size|font-family例如：pfont:italic bold 20px 宋体备注：属性与属性之间一定要用空格隔开； 特别需要注意的是使用组合设置font是一定要注意属性的顺序，即font：font-style字体样式 font-variant字体变体 font-weight字体粗细 font-size字体大小 font-family字体类型顺序一旦出现混乱，便没有了任何效果