李炎辉css+html学习笔记1-12div+css+html总结

第1章HTML介绍万维网（）是虚拟的。它无数不断变化的、种类不同的文档的集合，这些文档驻留在因特网的某个地方，都是用某种形式的HTML编写的。HTML（超文本标记语言）有两个基本特性——超文本和普适性。超文本意味着可以在网页中创建一个链接，从而将访问者链接到其他任何网页，实际上可以链接到因特网上的任何东西。这意味着可以通过许多不通的路径访问Web上的信息。Web的创建者TimBerners-Lee希望Web能像人的大脑那样在信息之间建立广泛的联系，而不是像书籍那样只是静态数据源。1.1普适性的意思是：因为HTML文档保存为纯文本文件，所以实际上任何计算机都可以读取网页。无论访问者是使用Macintosh、Windows还是UNIX计算机，甚至是Palm这样的手持设备，都可以打开网页。Web对所有计算机都是开放的第2章HTML基本结构1.HTML的基本结构2.HTML控制标记的格式3.最常用的控制标记本章讲解最基本的HTML元素，也就是创建文档结构所需的元素。例如：标题、段落、页面分隔、注释等等。2.1HTML的基本结构html-------根控制标记head-------头控制标记title标题/title-------标题标记/head-------头控制标记（尾）body-------网页显示区域/body/html-------根控制标记(尾)(1).html…/html根控制标记开头和结尾成对出现，双标签(2).head…/head头控制标记1.title很单纯的文件标题声明2.meta控制标记的动态文件转换声明3.base超链接网址基准参考点4.Javascript和VBScript程序5.stylesheet可用来设置排版来的声明6.link可引用外部文件，如CSS排版样本(3).title…/title设置浏览器的视窗标题(4).body…/body页面可见内容2.2HTML控制标记的格式(1).标记名称单一型,无设置值的。如：br(2).标记名称属性=”属性值”单一型，有设置值的。如：hrwidth=”80%”(3).标记名称…/标记名称对称型，无设置值。如：title…/title(4).标记名称属性=”属性值”…/标记名称对称型，有设置值。如：bodybgcolor=”red”…/bodyfontsize=”7”…/font2.3最常用的控制标记(1).跳行br格式：br无属性设置(2).段落p格式：palign=”排列方式”…/p属性名称属性值说明alignleft往左靠（默认）center往中靠right往右靠(3).水平直线hr格式：hr属性名称属性值说明size像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗width像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade实体线(4).向中对齐center(被废弃的标签)格式：center…/center(5).背景色与文字设置格式：bodybgcolor=”背景色”text=”文字颜色”整体页面的边距，行距bodyleftmargin=”像素”topmargin=”像素”(6).标题文字设置格式：h1…/h1h2…/h2h3…/h3h4…/h4h5…/h5h6…/h6属性名称属性值说明alignleft靠左center靠中right靠右(7).特殊字符设置格式：lt;gt;&“quot;(8).在HTML备注格式：!--…--(9).实体字符控制标记1.b…/b粗2.i…/i斜3.s…/s删4.u…/u下划5.tt…/tt电报6.sub…/sub下标7.sup…/sup上标(10).语意字符控制1.address…/address地址2.big…/big大字3.del…/del删除第3章排列清单控制标记1.无序号条例式清单ul2.有序号条例式清单ol3.无序列表和有序列表的结合应用4.叙述式清单dl排列清单控制标记可以创建一般的列表、编号列表或加着重号列表，以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容，列表是非常方便的。3.1无序号条例式清单ul与li格式:ulli…/lili…/lili…/lili…/li/ul功能:ul无序条列清单的开始./ul表示结束.li…/li表示一个项目.li的属性属性名称属性值说明typedise实心圆(默认值)circle空心圆square实心方块3.2有序号条例式清单ol与li格式:olli…/lili…/lili…/lili…/li/ol功能:ol有序条列清单的开始./ol表示结束.li…/li表示一个项目.ol的属性属性名称属性值说明type1表示以1,2,3,4来表示a表示以a,b,c,d来表示A表示以A,B,C,D来表示i表示以i,ii,iii来表示I表示以I,II,III来表示3.3无序列表和有序列表的结合应用格式:ulli.....olli…/lili…/li/ol/lili.....olli…/lili…/lili…/li/ol/li/ul3.4叙述式清单(定义列表)格式:dldt…/dtdd…/dddd…/dddd…/dddt…/dtdd…/dddd…/dddd…/dd/dl功能:dl叙述清单的开始dt表示一个项目dd表示一个项目下的更详细的内容第4章表格1.表格的基本格式2.table标签下的常用属性3.table标签下的边框设置4.trthtd标签下的常用属性5.拆分与合并单元格6.表格的结构化、直列化、标题7.表格的嵌套在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多。4.1表格的基本格式格式:tabletr…th…/thth…/thth…/th/trtrtd…/tdtd…/tdtd…/td/tr/table功能:table…/table用来声明表格开始与结束.tr…/tr用来设置表格的行.th…/th用来设置标题栏位.td…/td用来设置数据栏位.4.2table标签下的属性属性名称属性值说明border像素设置表格的边线cellspacing像素绝对设置,存储格框线宽度百分比相对设置,存储格框线宽度cellpadding像素绝对设置,数据与框线的距离百分比相对设置,数据与框线的距离width像素绝对设置,像素表示表格宽度百分比相对设置,百分比表表格宽度height像素绝对设置,像素表示表格宽度百分比绝对设置,百分比表表格宽度alignleft表格往左靠(默认)center表格往中靠right表格网右靠bgcolor英文/十六表格的背景颜色backgroundURL表格的背景图片summary字符串用来描述表格数据说明bordercolor英文/十六边框的颜色bordercolorlight同上边框的亮色bordercolordark同上边框的暗色4.3table标签下的边框设置属性名称frame该属性必须在border的属性值不为0的状态下!rules属性值说明void不要显现表格的边线above只要显现出表格的上边线below只显现出表格的下边线hsides只显示表格的上下边线vsides只显现表格的左右边线lhs只显现表格的左边线rhs只显现表格的右边线border/box会显现出表格的所有边线rows只显示出横行的格框线cols只显示出直行的格框线all显示全部格框线groups表示列组合水平部分none不显示任何格框线4.4trthtd标签下的常用属性属性名称属性值说明width像素绝对设置,以像素值设置宽百分比相对设置,以百分比设置宽height像素绝对设置,以像素值设置高百分比相对设置,以百分比设置宽bgcolor英文/十六数据栏的颜色设置align(水平方向)left数据靠左center数据靠中right数据靠右valign(垂直方向)top数据靠上middle数据靠中bottom数据靠下nowrap无在单元格中换行4.5拆分与合并单元格属性名称属性值说明colspan数字向两边扩展栏位rowspan数字向下扩展栏位4.6表格的结构化、直列化、标题(1).结构化格式tablethead……/thead--------表头区tbody……/tbody--------表体区………………………tfoot……/tfoot--------表尾区/table(2).直列化格式：colgroup…./colgroup属性名称属性值说明alignleft靠左center靠中right靠右valigntop靠上middle靠中bottom靠下span数字直列数目width像素/百分比宽度个别直列设置第5章图像1.背景图案的设置2.将图片插入到网页中去3.用图像作为超链接4.使用工具建立地图索引5.切片索引6.为网站添加图标5.1背景图案的设置格式：bodybackground=”URL”5.2将图片插入到网页中去格式:imgsrc=URL功能:将图片插入到网页中去,单一标签img下的属性属性名称属性值说明srcURL图片的路径图片的注解属性名称属性值说明alt字符串给图片做注解图象大小的设置属性名称属性值说明width像素绝对设置,宽百分比相对设置,宽height像素绝对设置,高百分比相对设置,高图象边框的设置属性名称属性值说明border数字图象边框文字图象的排列属性名称属性值说明alignleft图象靠左,文字靠右right图片靠右,文字靠左top文字往上靠middle文字靠中bottom文字靠下空隙的设置属性名称属性值说明vspace像素垂直上下两端与物件的距离hspace像素水平左右两段与物件的距离5.3用图像作为超链接格式:ahref=URLimgsrc=URL/a注意点:边框的问题.5.4地图索引格式:mapname=图象名称id=图象名称areashape=选取区块的形状coords=坐标href=URLalt=文字说明/mapimgsrc=URLUSEMAP=#图象名称map声明整张图使用地图链接方式进行连接.name,id指此图的名称.area表示我们所要链接其中一点的区快shape表示我们所选择的形状,如:rect矩形circle圆poly多边形coords表示地图的坐标位置!!5.5切片索引使用Firework来进行!!用表格进行定位!!5.6为网站添加图标linkrel=shortcuticonhref=favicon.icotype=image/x-icon第6章超链接1.超链接的基本格式2.超链接的种类3.相对链接和绝对链接4.书签的链接5.基准参考点6.超链接事件7.为链接创建键盘快捷键8.为链接设置制表符次序超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需