HTML复习的知识点可编辑修改word版.docx

1、HTML复习的知识点可编辑修改word版第 1 章：网页的分类与扩展名、WEB 标准(1)网页分类：静态网页、动态(2)扩展名：Html 网页: .html, .htm CSS: .cssJavascript: .js(3)web 标准结构标准: html表现标准 :css 层叠样式表行为标准：javaScript第 2 章：常见的 HTML 标记、常用的图片格式1、HTML 标记：创建一个 HTML 文档,也称根标记。：设置文档标题和其它在网页中不显示的信息，也成为头部标记。：设置文档的标题。：用于定义 HTML 文档所要显示的内容,也称主题标记。：用来定义一条水平线。：最大的标题到最小的标

2、题。使用 align 属性加以下：left：设置标题文字左对齐； center：设置标题文字居中对齐； right：设置标题文字右对齐；：创建一个段落。：将段落按左、中、右对齐。使用 align 属性加以下：left：设置标题文字左对齐； center：设置标题文字居中对齐； right：设置标题文字右对齐；：换行,插入换行符。：定义页面元信息标记。：规定文本的字体、字体尺寸、字体颜色。font-family：字体font-weight：字体粗细font-variant：变体font-style：字体风格font：综合设置字体样式fac：设置文字的字体size：设置文字的大小color：设置文

3、字的颜色CSS 文本外观属性：letter-spacing 字间距word-spacing 单词间距line-height 行间距text-align：left 左对齐,height 右对齐,center 居中对齐src：图像的路径 alt：图像不能显示时的替换文本title：鼠标悬停时显示的内容width：设置图像的宽度heighr：设置图像的高度border：设置图像边框的高度vspace：设置图像顶部和底部的空白（垂直边距） hspace：设置图像左侧和右侧的空白（水平边距） 用 align 属性：left：将图像对齐到左边right：将图像对齐到右边top：将图像的顶端和文本的第一行文

4、字对齐，其他文字居于图像下方middle：将图像的水平中线和文本的第一行文字对齐，其他文字居于图像下方bottom：将图像的底部和文本的第一行文字对齐，其他文字居于图像下方区域容器标记 行内容器标记定义项目符号disc：circle： square：列表项，结合 无序有序使用无序列表有序列表引入 CSS 样式表文件创建一个表单 text：单行文本输入框password：密码输入框radio：单选按钮checkbox：复选框button：普通按钮submit：提交按钮reset：重置按钮image：图像形式的提交按钮hidden： 隐 藏 域 file：文件域下拉菜单（2）常用的图片格式：JEP

5、G，GIF，PNG第 3 章：CSS 样式规则、引入 CSS 样式、CSS 基础选择器、定义 CSS 样式，CSS 字体样式属性、CSS 文本外观样式属性、复合选择器的定义1.Css 样式规则选择器属性 1：属性 1 值; 属性 2：属性 2 值;例：P Color : red ; Border : 或 h2 font-size : 20px ; color : red ; 2、引入 css 样式方式（1）行内式内容 例：(2)内嵌式例：选择器属性 1：属性 1 值; 属性 2：属性 2 值;（3）链入式 3、css 基础选择器（1）标记选择器 p （2）类选择器 .类名（3）id 选择器 #

6、id（4）通配符选择器 *4、复合选择器（书本 P66）(1)标签指定式选择器 p.speacial 书本 demo3-8 (2)后代选择器 p strong 书本 demo3-9(3)并集选择器 p,div 书本 demo3-10 5、CSS 字体属性font-family：字体font-variant：变体font-style：字体风格 italic:斜体font-weight：字体粗细font：综合设置字体样式6、外观属性color:text_decoration:文本装饰 underline 下划线 overline 上划线 line-through 删除线text-align:水平对

7、齐方式 left 左对齐 right 右对齐 center 居中对齐text-indent:首行缩进 2em：2 字符line-height:行间距第 4 章 CSS 盒子模型：认识盒子、边框属性 内外边距属性、设置背景图像、行内元素及块元素1、认识盒子（书本 p79 图 4-5） 基础属性：width：宽height：高padding 内边距四个方向值：上,右,下,左；top,right,left,bottom 两个值时为上下,左右；一个值时为四边；三个值时为上,左右,下；margin: 外边距border：边框2、边框属性（1）border-style: border-width:bord

8、er-color:综合：border: border-width 边框宽度 border-style 边框样式 border-color 边框颜色; border:1px solid red; 四个方向都是相同的设置（2）某个方向设置border-top-style:上边框样式border-top -width:上边框宽度border-top -color:上边框颜色综合：border-top border-top-width borde-top-style border-top-color; border-top:1px solid red; 只是对上边框的设置3、背景属性(书本 P95 页

9、) background-color：背景颜色background-image：背景图像背景图像平铺：background-repeat:：repeat-x 只沿水平方向平铺repeat-y 只沿垂直方向平铺no-repeat 不平铺background-position： 水平 垂直Left/center/right top/center/bottom 20px/-10px 30px;20px center综合：background：颜色urlno-repeat水平位置垂直位置backgournd：re dimage/1.jpgrepeat-xleftcenter;backgournd：re

10、 dimage/1.jpgrepeat-x20px50px;4.行内元素及块元素(1)行元素：P103 块元素：P102 (2)元素转换display:Inline: 行内元素Block：块元素Inline-block：行内块元素None：隐藏第 5 章列表与超链接超链接标记 链接的伪类1 超链接标记href:用于链接目标的 url 地址target: _self 在原窗口打开 _blank 在新窗口打开border=”0”去掉图像边框 P127 2.链接的伪类a:linkCSS 样式规则;未访问时超链接的状态a:visitedCSS 样式规则;访问后超链接的状态a:hoverCSS 样式规则

11、;鼠标经过、悬停时超链接的状态a:acrtiveCSS 样式规则;鼠标单击不动时超链接的状态第 6 章 HTML 表单认识表单、创建表单、input 控件1、 认识表单 P138表单输入控件定义多行文本框定义一个下拉列表size 指定下拉菜单的可见选项数用 selected 属性时，当前项就为默认选中项action 用于指定接收并处理表单数据的 url 地址method 用于设置表单数据的提交方式，其取值为 get 和 post 2、 创建表单 3.input 控制 P143 表 6-2属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选

12、框button普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidden隐藏域file文件域name由用户自定义控件的名称value由用户自定义input 控件中的默认文本值size正整数input 控件在页面中的显示宽度第 7 章浮动与定位：float 属性、clear 属性 元素的定位属性、利用盒子模型与浮动进行页面布局1.float：left 左浮动 right 右浮动 none 不浮动2.clear：清除当前元素的浮动对其后元素影响。left 清除左侧浮动影响 right 清除右侧浮动影响 both 同时清除左右两侧浮动影响3.overflow：hidden

13、 清除子元素浮动对父元素的影响。4.定位（1）相对定位：相对自己本身原来的位置变化。（2）绝对定位：相对于父元素的位置变化。 记得：在父元素中，对父元素设置为相对定位，这样子元素的绝对定位才会有效。（3）属性：postion：relative 相对定位/absolute 绝对定位/fixed 固定定位/static 自动定位位偏移量：top：顶部left：左侧right：右侧bottom：底部（4）页面布局(一列 二列、三列、五列) 浮动定位布局第 8 章 JS 编程基础JS 代码的引入、DOM 节点的访问、向页面输出内容的方法1、 js 代码的引入(1)内嵌式 (2)外链式 2.DOM 节点

14、访问 P213 表 8-3 记忆类型方法说明访问指定节点getElementById()获取 id 的元素对象getElementByName()获取指定名称的元素getElementByTagName()获取带指定标签名的元素getElementByClassName()获取带 class 的元素3，页面输出内容的方法document.write(“ ”);第 10 章简答网站制作的流程1 准备工作（1）建立站点（2）站点初始化（3）素材准备（4）效果分析结构分析样式分析特效分析（5）页面布局（一列，二列）2.制作详细页面（1）分析效果（2）准备素材（3）搭建结构（body）（4）控制样式(css)（5）添加 javaScript 特效3、测试与发布