1、nbsp;:表示空格表示空格(了解了解)11、:字体标记字体标记属性:face:设置文字的字形:设置文字的字形size:设置文字的大小,:设置文字的大小,1 号最小,号最小,7 号最大,默认字号为号最大,默认字号为 3color:设置文字的颜色:设置文字的颜色12、字体的物理风格:字体的物理风格:(了解了解)把字体加粗把字体加粗斜体斜体下划线下划线删除线删除线字体的逻辑风格:字体的逻辑风格:(了解了解)上标上标下标下标粗体字粗体字文本以小体字显示文本以小体字显示文本以大号字显示文本以大号字显示13、:水平线标签水平线标签(注意:它是单标记,没有结束标记注意:它是单标记,没有结束标记)属性:对齐
2、方式对齐方式-同上同上size:高度高度width:宽度宽度color:颜色颜色14、:图像标记图像标记(注意:它是单标记,没有结束标记)属性属性:src:设置图片的路径设置图片的路径width 和和 height:设置图片的宽和高设置图片的宽和高,一般要么都不写,显示一般要么都不写,显示的是图片的真实大小,要么只是宽或者高,让图片等比例缩放,的是图片的真实大小,要么只是宽或者高,让图片等比例缩放,避免失真。避免失真。border:设置图像的边框,以像素为单位设置图像的边框,以像素为单位。(了解)(了解)align:(了解了解)用来调整图片的位置:用来调整图片的位置:top:偏上方:偏上方mi
3、ddle:中间:中间bottom:底部:底部left:左:左right:右右15、:有序列表有序列表:无序列表无序列表:有序和无序列表的内容有序和无序列表的内容16、:超链接标记超链接标记属性:href:设置超链接的访问地址,可以是网址,邮箱,设置超链接的访问地址,可以是网址,邮箱,html 文件文件target:(了解了解)设置打开链接的方式设置打开链接的方式target=_blank:在新窗口打开在新窗口打开mailto:超链接到邮箱地址超链接到邮箱地址我要去百度我要去百度我要去邮箱我要去邮箱16、:预排版标记预排版标记标记允许保留你在原代码中输入的空格和回车。标记允许保留你在原代码中输入
4、的空格和回车。15、:滚动字符滚动字符(了解了解)direction 设置活动字幕的滚动方向,可以是设置活动字幕的滚动方向,可以是 up、down、left、rightbehavior 设置滚动的方式设置滚动的方式,可以是可以是 scroll(一端滚动到另一端一端滚动到另一端)、slide(一端快速一端快速滑动到另一端,且不再重复滑动到另一端,且不再重复)、alternate(在两端之间来回滚动在两端之间来回滚动)height 设置滚动字幕的高度。设置滚动字幕的高度。17、注意:注意:1、HTML 不区分大小写,大写小写都可以不区分大小写,大写小写都可以2、有内容的标签,必须要成对出现、有内容
5、的标签,必须要成对出现第二部分:第二部分:HTML 表格应用表格应用1、:表格的开始和结束表格的开始和结束属性:width:用来设置表格的宽度用来设置表格的宽度height:用来设置表格的高度用来设置表格的高度border:用来设置表格边框尺寸大小用来设置表格边框尺寸大小bordercolor:用来设置表格边框颜色用来设置表格边框颜色bgcolor:设置表格的背景颜色设置表格的背景颜色align:水平对齐方式水平对齐方式 left:左对齐左对齐center:居中对齐居中对齐right:右对齐右对齐background:属性用来设置表格的背景图片属性用来设置表格的背景图片cellspacing:
6、属性用来设置表格单元格间距:属性用来设置表格单元格间距cellpadding:属性用来设置表格单元格填充:属性用来设置表格单元格填充2、:表示行:表示行属性:设置行的背景颜色设置行的背景颜色align:水平对齐方式水平对齐方式valign:(了解了解)垂直对齐方式垂直对齐方式 top:顶端对齐顶端对齐middle:居中对齐居中对齐bottom:底端对齐底端对齐3、:表示列表示列属性:rowspan:跨行跨行colspan:跨列跨列width:用来设置单元格的宽度:用来设置单元格的宽度height:用来设置单元格的高度:用来设置单元格的高度bgcolor:设置单元格的背景颜色设置单元格的背景颜色
7、align:(了解了解)垂直对齐方式垂直对齐方式第三部分:浮动窗口第三部分:浮动窗口1、标记标记,又称为浮动帧标记又称为浮动帧标记,可以用来将一个可以用来将一个 HTML 文档嵌套文档嵌套在另外一个在另外一个 HTML 文档中显示。文档中显示。语法:设置文件的路径设置文件的路径width 和和 height:分别设置浮动窗口的宽和高分别设置浮动窗口的宽和高scrolling:设置是否出现滚动条,设置是否出现滚动条,可选值有可选值有 auto(自动自动)、yes(出现出现)、no(不出现不出现)frameborder:设置是否出现边框,设置是否出现边框,可选值有可选值有 1(出现出现)、0(不出
8、现不出现)2、iframe 的的 name 属性和超链接属性和超链接的的 target 属性配合使用,可以做出导航栏的属性配合使用,可以做出导航栏的效果。效果。3、:分组标签:分组标签:分组标签的标题分组标签的标题第四部分:表单与页面控件第四部分:表单与页面控件1、:表单标签:表单标签name 属性:表单的名称属性:表单的名称action 属性:表单提交的地址属性:表单提交的地址2、:用户输入信息标签用户输入信息标签语法:type 属性常用的值可以是:属性常用的值可以是:text(文本框文本框)、password(密码框密码框)、checkbox(复选框复选框)、radio(单选框单选框)、b
9、utton(按钮按钮)、submit(提交按钮提交按钮)、reset(重置按重置按钮钮)注意:1)单选按钮的单选按钮的 name 属性必须要写,并且属性必须要写,并且 name 的值必须相同。的值必须相同。2)checked=checked:默认选中一个选框:默认选中一个选框3)复选框如果写了复选框如果写了 name 属性,属性,name 可以相同,也可以不同可以相同,也可以不同4)select 和和 textarea 不属于输入标签不属于输入标签3、:下拉列表的开始下拉列表的开始:显示下拉列表的目录内容显示下拉列表的目录内容selected=selected:写在写在 option 标签里,
10、表示默认选中那个目录内容标签里,表示默认选中那个目录内容4、:多行文本标签多行文本标签cols:有多少列有多少列rows:有多少行有多少行第五部分:第五部分:CSS 样式定义与应用样式定义与应用1、CSS:层叠样式表:层叠样式表2、1)css 使用规则选择器定义样式,一般写在使用规则选择器定义样式,一般写在 style 标记里标记里2)style 标记一般写在标记一般写在 head 里。里。3、标签选择器:标签选择器:标签名称标签名称 1,标签名称标签名称 2属性属性:值值;属性属性:.注意:1、标签选择器都是以标签开头的,以、标签选择器都是以标签开头的,以,号来分割号来分割,可以写多个标签可
11、以写多个标签2、字体大小单位、字体大小单位 px,必须要写,必须要写3、属性一般用、属性一般用 进行连接。进行连接。4、css 样式用样式用/*/进行注释。进行注释。4、类选择器类选择器:.自定义名称自定义名称属性属性:1、必须以、必须以.开头开头2、必须要在标签里写、必须要在标签里写 class=”自定义名称自定义名称”;5、ID 选择器:选择器:#自定义名称自定义名称属性属性:1、必须以、必须以#开头。开头。2、必须要在标签里写:、必须要在标签里写:id=自定义名称自定义名称3、ID 选择器是唯一的,只能唯一的给一个标签使用。选择器是唯一的,只能唯一的给一个标签使用。6、注意:任何标签都有
12、注意:任何标签都有 class 和和 id 属性。属性。7、常用的样式属性:常用的样式属性:font-size:字体大小字体大小font-family:字体类型:字体类型color:设置文本的颜色:设置文本的颜色vertical-align:文本垂直对齐方式:文本垂直对齐方式text-align:文本水平对齐方式:文本水平对齐方式8、超链接的样式属性:超链接的样式属性:text-decoration 属性规定添加到文本的修饰。属性规定添加到文本的修饰。none默认。定义标准的文本。默认。underline:定义文本下的一条线。:overline:定义文本上的一条线。超链接样式顺序:a:link
13、a:visiteda:hovera:active可以简单记忆为:可以简单记忆为:爱哈爱哈LoVe HA(每个的首字母)(每个的首字母)为什么要使用这个顺序呢?因为如果顺序乱写的话为什么要使用这个顺序呢?因为如果顺序乱写的话,超链接的样式可能会不超链接的样式可能会不生效或者出问题。生效或者出问题。9、背景样式的使用:背景样式的使用:10、样式表的使用:样式表的使用:内嵌样式表包括:标签选择器,类选择器,内嵌样式表包括:标签选择器,类选择器,ID 选择器选择器内嵌样式表的优先级为:内嵌样式表的优先级为:ID 选择器选择器类选择器类选择器标签选择器标签选择器行内样式表的作用范围:仅限当前的标签。行内
14、样式表的作用范围:语法为:任何标签都具有注意:任何标签都具有 style 属性。外部样式表:把外部样式表:把 CSS 样式写在样式文件里,后缀名为样式写在样式文件里,后缀名为.css引用引用 CSS 文件的方式有文件的方式有 2 种:种:1、链接式:链接式:2、导入式:导入式:import url(css/style.css);样式表的优先级:行内样式表行内样式表内部样式表内部样式表外部样式表外部样式表第六部分:盒子模型第六部分:盒子模型1、border(边框属性)(边框属性)border-top:上边框上边框border-bottom:下边框下边框border-left:左边框左边框bord
15、er-right:右边框右边框写法有以下几种:写法有以下几种:1、border-top-width:1px;只设置上边框的宽度只设置上边框的宽度2、border-top:solid 1px red;设置上边框设置上边框3、border:solid red 1px;同时设置四个边框同时设置四个边框注意:同时设置粗细、颜色、样式注意:同时设置粗细、颜色、样式,顺序可以随便写。,顺序可以随便写。2、padding(内边距)(内边距)内边距的写法:内边距的写法:1、padding-top:1cm;只设置上边距只设置上边距2、padding:1cm 0.5cm 1cm 0.5cm;四个边距都写,顺序是四
16、个边距都写,顺序是 上,右,下,左上,右,下,左3、padding:1cm 0.5cm 1cm;写写 3 个边距:顺序是:上,左和右,下个边距:上,左和右,下4、padding:0.5cm 1cm;写写 2 个边距:上和下,左和右个边距:上和下,左和右5、padding:0.5cm;写写 1 个边距:边距的距离都是一样的个边距:边距的距离都是一样的3、margin(外边距)(外边距)外边距的写法跟内边距是一样的。外边距的写法跟内边距是一样的。第七部分:CSS 定位与定位与 DIV1、普通定位普通定位:是浏览器默认的定位方式是浏览器默认的定位方式,即浏览器自动将所有元素按正常出现顺序显即浏览器自
17、动将所有元素按正常出现顺序显示。示。2、绝对定位:以网页坐标系为基准定位。绝对定位:tableposition:absolute;left:30px;top:20px;3、相对定位:即相对本来正常的位置定位。、相对定位:#box_re position:relative;4、网页中的层:层在网页中是一种容器、网页中的层:层在网页中是一种容器,用用或者或者表示表示1、div 是块级元素,是块级元素,实际上就是一个区域,主要用于容纳其他签。实际上就是一个区域,主要用于容纳其他签。2、span 是行内元素,是行内元素,主要用于容纳文字。主要用于容纳文字。区别区别:1、div 一般应用与排版一般应用与
18、排版,而而 span 一般是里面的文字的展示优化一般是里面的文字的展示优化,局部文字局部文字的样式等等。的样式等等。2、div 会自动换行,会自动换行,span 不会自动换行。不会自动换行。5、层的显示和隐藏:、层的显示和隐藏:1、display:属性设定元素块的显示和隐藏:属性设定元素块的显示和隐藏用法:用法:display:block;显示显示display:none;隐藏隐藏2、visvibility:属性设定元素在网页中是否可见:属性设定元素在网页中是否可见用法:visibility:visible;显示显示visibility:hidden;隐藏隐藏区别:区别:visibility 隐藏了元素,但元素还占据原来的位置隐藏了元素,但元素还占据原来的位置,display 隐藏了元素,但不占据原来的位置。隐藏了元素,但不占据原来的位置。6、鼠标事件:、鼠标事件:1、onclick:属性由元素上的鼠标点击触发。当鼠标点击的时候,响应的事件:当鼠标点击的时候,响应的事件。我是小我是小 BOSS显示显示2、onmouseover:鼠标滑入事件:鼠标滑入事件onmouseout:鼠标滑出事件:鼠标滑出事件语法:鼠标事件鼠标事件