完整版HTML复习的知识点

1、第1章:网页的分类与扩展名、 WEB标准(1)网页分类：静态网页、动态扩展名:Html 网页：.html, .htmCSS: .cssJavascri pt: .jsweb标准结构标准：html表现标准：CSS层叠样式表行为标准：javaScri pt第2 章:常见的HTML标记、常用的图片格式1、HTML标记 :创建一个HTML文档,也称根标记。vheadx /head：设置文档标题和其它在网页中不显示的信息，也成为头部标记。vtitlex /title:设置文档的标题。 /body：用于定义HTML文档所要显示的内容，也称主题标记。:最大的标题到最小的标题。 :用来定义一条水平线。使用al

2、ign属性加以下： left :设置标题文字左对齐； center :设置标题文字居中对齐;right :设置标题文字右对齐；vpv/p :创建一个段落。 :将段落按左、中、右对齐。 使用align属性加以下：left :设置标题文字左对齐；center :设置标题文字居中对齐；right :设置标题文字右对齐； :换行，插入换行符。vmeta / :定义页面元信息标记。vfont x/fo nt:规定文本的字体、字体尺寸、字体颜色。font-family :字体 |font-weight :字体粗细font-variant :变体font-style :字体风格font:综合设置字体样式 f

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

4、到左边right :将图像对齐到右边top：将图像的顶端和文本的第一行文字对齐，其他文字居于图像下方 middle :将图像的水平中线和文本的第一行文字对齐，其他文字居于图像下方 bottom :将图像的底部和文本的第一行文字对齐，其他文字居于图像下方 区域容器标记 V/S pan行内容器标记ultype=定义项目符号disc：circle : Osquare : li/li列表项，结合ul无序ol有序使用VUIV/UI 无序列表volv/ol有序列表引入CSS样式表文件a href=跳转目标” 创建一个表单text :单行文本输入框password :密码输入框radio :单选按钮chec

5、kbox:复选框 butt on :普通按钮submit :提交按钮reset :重置按钮image:图像形式的提交按钮 hidden :隐藏域file :文件域下拉菜单 (2)常用的图片格式：JEPG 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)行内式标记名 sty

6、le=例： (2)内嵌式例： 选择器 属性 1：属性 1 值;属性 2：属性 2 值;3)链入式3、css基础选择器1)标记选择器 p 类选择器.类名id 选择器 #id通配符选择器 *4、复合选择器(书本 P66)(1)标签指定式选择器p.speacial 书本 demo3-8(2)后代选择器p strong 书本 demo3-9(3)并集选择器p,div 书本 demo3 -105、CSS字体属性font -family ：字体font -variant ：变体fon t-style :字体风格italic:斜体font-weight :字体粗细font:综合设置字体样式6、外观属性col

7、or:”属性 1:属性 1值; 属性 2:属性 2值”内容/标记名 text_decoration: 文本装饰 underline 下划线 overline 上划线 line-through 删除线text-align: 水平对齐方式 left 左对齐 right 右对齐 center 居中对齐text-indent: 首行缩进 2em： 2 字符line -height: 行间距第4章CSS盒子模型:认识盒子、边框属性 内外边距属性、设置背景图像、行内元素及块元素1、认识盒子 （书本 p79 图 4-5）基础属性:width :宽height :高padding 内边距四个方向值:上 ,右,

8、下,左； top,right,left,bottom两个值时为上下 ,左右；一个值时为四边；三个值时为上 ,左右 ,下；margin: 外边距border :边框2、边框属性1) border -style:border -width:border -color:综合: border: border -width 边框宽度 border-style 边框样式 border-color 边框颜色 ;border:1px solid red; 四个方向都是相同的设置2）某个方向设置border -t op- style:上边框样式border -top -width: 上边框宽度border -t

9、op -color: 上边框颜色综合: border-top border-top-width borde-top-style border-top-color;border-top:1pxsolid red; 只是对上边框的设置3、背景属性(书本P95页)background -color :背景颜色background -image :背景图像背景图像平铺:background-repeat: : repeat-x 只沿水平方向平铺repeat-y只沿垂直方向平铺no-repeat不平铺background -position :水平垂直Left/ce nter/righttop/cen

10、ter/bottom20p x/-10 px30px;20pxcenter综合:background :颜色urlno-rep eat水平位置垂直位置backgournd : redimage/1.j pgrep eat -xleftcen ter;backgournd : redimage/1.j pgrep eat -x20 px50p x;4.行内元素及块元素(1)行元素： P103 块元素：P102 (2)元素转换dis play:Inline:行内元素Block：块元素Inlin e-block :行内块元素None：隐藏第5章列表与超链接超链接标记链接的伪类1.超链接标记href:

11、用于链接目标的url地址target: _self在原窗口打开 _blank在新窗口打开border= ”去掉图像边框 P1272.链接的伪类a:linkCSS样式规则；未访问时超链接的状态a:visitedCSS样式规则;访问后超链接的状态a:hoverCSS样式规则；鼠标经过、悬停时超链接的状态a:acrtiveCSS样式规则；鼠标单击不动时超链接的状态第6章HTML表单认识表单、创建表单、input控件1、认识表单P138表单输入控件定义多行文本框定义一个下拉列表size指定下拉菜单的可见选项数用selected属性时，当前项就为默认选中项action用于指定接收并处理表单数据的url地

12、址method用于设置表单数据的提交方式，其取值为get和post2、创建表单 3.input 控制P143 表 6-2属性属性值描述typetext单行文本输入框p assword密码输入框radio单选按钮checkbox复选框butt on普通按钮submit提交按钮reset重置按钮image图像形式的提交按钮hidde n隐藏域file文件域n ame由用户自定义控件的名称value由用户自定义input控件中的默认文本值size正整数input控件在页面中的显示宽度第7章浮动与定位:float属性、clear属性元素的定位属性、利用盒子模型与浮动进行页面布局 1. float: l

13、eft左浮动right右浮动 none不浮动 2. clear:清除当前元素的浮动对其后元素影响。left清除左侧浮动影响right清除右侧浮动影响both同时清除左右两侧浮动影响 3. overflow : hidden清除子元素浮动对父元素的影响。4. 定位(1)相对定位：相对自己本身原来的位置变化。绝对定位：相对于父元素的位置变化。记得：在父元素中，对父元素设置为相 对定位，这样子元素的绝对定位才会有效。属性:postion : relative 相对定位 /absolute 绝对定位 /fixed 固定定位 /static 自动定位 位偏移量:top :顶咅Bleft :左侧right :右狈 g bottom :底咅B(4)页面布局(一列二列、三列、五列)浮动 定位布局第8章JS编程基础JS代码的引入、DOM节点的访问、向页面输出内容的方法1、js代码的引入” x/scri pt(1)内嵌式 script type=” text/javascript (2)外链式2.DOM节点访问P213表8-3记忆类型方法说明访冋指定节点getEleme ntByld()获取id的元素对象getEleme ntByName()获取指定名称的元素getEleme ntByTagName()获取带