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