HTML、CSS基础知识(网页设计必备)

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

第1页共50页1.HTML的基本结构htmlheadtitle标题/title/headbody/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.HTML控制标记的格式(1).标记名称/单一型,无设置值的。如:br/(2).标记名称属性=”属性值”/单一型,有设置值的。如:hrwidth=”80%”/(3).标记名称…/标记名称对称型,无设置值。如:title…/title(4).标记名称属性=”属性值”…/标记名称对称型,有设置值。如:bodybgcolor=”red”…/body第2页共50页fontsize=”7”…/font3.最常用的控制标记(1).跳行br/格式:br/无属性设置(2).段落p格式:palign=”排列方式”…/p属性名称属性值说明alignleft往左靠(默认)center往中靠right往右靠(3).水平直线hr/格式:hr/属性名称属性值说明size像素绝对设置,以数字表示,属性值越大,线越粗百分比相对设置,以%表示,属性值越大,线越粗width像素绝对设置,长度不会应视窗的改变而改变百分比相对设置,长度会随着视窗宽度而改变noshade实体线(4).向中对齐center(被废弃的标签)格式:center…/center(5).背景色与文字设置格式:bodybgcolor=”背景色”text=”文字颜色”(6).整体页面的边距,行距格式:bodyleftmargin=”像素”topmargin=”像素”(7).标题文字设置格式:h1…/h1、h2…/h2、h3…/h3、h4…/h4、h5…/h5、h6…/h6属性名称属性值说明alignleft往左靠(默认)center往中靠right往右靠第3页共50页(8).特殊字符设置格式:lt;gt;&“quot;(9).在HTML备注格式:!--…--(10).实体字符控制标记1.b…/b粗2.i…/i斜3.s…/s删4.u…/u下划5.tt…/tt电报6.sub…/sub下标7.sup…/sup上标(11).语意字符控制1.address…/address地址2.big…/big大字3.del…/del删除4.ins.../ins修改5.samll…/small小字6.strong…/strong加强语气(加粗)7.em.../em加强语气(倾斜)(12).font字体控制(被废弃的标签)格式:font…/font属性名称属性值说明size0-7字体大小color英文或十六进制(6位)字符颜色face字体字体(13).格式化格式:pre…/pre,让书写的文字格式化!(14).引用文本第4页共50页格式:blockquote.../blockquote属性名称属性值说明citeurl被引用的地址排列清单控制标记可以创建一般的列表、编号列表或加着重号列表,以及定义列表。还可以在一种列表中嵌套另一种列表。对于概括因特网上的内容,列表是非常方便的。4.无序号条例式清单ul与li格式:ulli…/lili…/lili…/lili…/li/ul功能:ul无序条列清单的开始;/ul表示结束;li…/li表示一个项目.li的属性:属性名称属性值说明typedise实心圆(默认值)circle空心圆square实心方块5.有序号条例式清单ol与li格式:olli…/lili…/lili…/lili…/li/ol第5页共50页功能: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来表示6.无序列表和有序列表的结合应用格式:ulliolli…/lili…/lili…/li/ol/lili.olli…/lili…/lili…/li/ol/li/ul7.叙述式清单(定义列表)格式:dldt…/dt第6页共50页dd…/dddd…/dddd…/dddt…/dtdd…/dddd…/dddd…/dd/dl功能:dl叙述清单的开始dt表示一个项目dd表示一个项目下的更详细的内容在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,如文字、图像、表单、超链接、表格等等,所有在HTML中可以使用的数据,都可以被设置在表格中,所以有关表格设置的标记与属性页特别多。8.表格的基本格式格式:tabletr…th…/thth…/thth…/th/trtrtd…/tdtd…/tdtd…/td/tr/table功能:table…/table用来声明表格开始与结束.tr…/tr用来设置表格的行.第7页共50页th…/th用来设置标题栏位.td…/td用来设置数据栏位.9.table标签下的属性属性名称属性值说明border像素设置表格的边线cellspacing像素绝对设置,存储格框线宽度百分比相对设置,存储格框线宽度cellpadding像素绝对设置,数据与框线的距离百分比相对设置,数据与框线的距离width像素绝对设置,像素表示表格宽度百分比相对设置,百分比表表格宽度height像素绝对设置,像素表示表格宽度百分比绝对设置,百分比表表格宽度alignleft表格往左靠(默认)center表格往中靠right表格网右靠bgcolor英文或十六进制(6位)字符表格的背景颜色backgroundURL表格的背景图片summary字符串用来描述表格数据说明bordercolor英文或十六进制(6位)字符边框的颜色bordercolorlight英文或十六进制(6位)字符边框的亮色bordercolordark英文或十六进制(6位)字符边框的亮色10.table标签下的边框设置属性名称属性值说明Frame(该属性必须在border的属性值不为0的状态下!)void不要显现表格的边线above只要显现出表格的上边线below只显现出表格的下边线hsides只显示表格的上下边线vsides只显现表格的左右边线lhs只显现表格的左边线第8页共50页rhs只显现表格的右边线border/box会显现出表格的所有边线rulesrows只显示出横行的格框线cols只显示出直行的格框线all显示全部格框线groups表示列组合水平部分none不显示任何格框线11.trthtd标签下的常用属性属性名称属性值说明width像素绝对设置,以像素值设置宽百分比相对设置,以百分比设置宽height像素绝对设置,以像素值设置高百分比相对设置,以百分比设置宽bgcolor英文或十六进制(6位)字符数据栏的颜色设置align(水平方向)left数据靠左center数据靠中right数据靠右valign(垂直方向)top数据靠上middle数据靠中bottom数据靠下nowrap无在单元格中换行12.拆分与合并单元格属性名称属性值说明colspan数字向两边扩展栏位rowspan数字向下扩展栏位13.表格的结构化、直列化、标题(1).结构化格式:第9页共50页tablethead……/thead--------表头区tbody……/tbody--------表体区tfoot……/tfoot--------表尾区/table(2).直列化格式:colgroup…./colgroup属性名称属性值说明alignleft靠左center靠中right靠右valigntop靠上middle靠中bottom靠下span数字直列数目width像素/百分比宽度格式:col功能完全和colgroup一样.(3).表格的标题:tablecaption…./caption/tablecaption下的属性值有:属性名称属性值说明aligntop标题在表格上方bottom标题在表格下方14.背景图案的设置格式:bodybackground=”URL”15.将图片插入到网页中去格式:imgsrc=URL/功能:将图片插入到网页中去,单一标签img下的属性第10页共50页属性名称属性值说明src(图片的注解)URL图片的路径alt(图象大小的设置)字符串给图片做注解width像素绝对设置,宽百分比相对设置,宽height像素绝对设置,高百分比相对设置,高border(图象边框的设置)数字图象边框文字图象的排列属性名称属性值说明alignleft图象靠左,文字靠右right图片靠右,文字靠左top文字往上靠middle文字靠中bottom文字靠下vspace像素垂直上下两端与物件的距离hspace像素水平左右两段与物件的距离16.用图像作为超链接格式:ahref=URLimgsrc=URL/a注意点:边框的问题.17.地图索引格式:mapname=图象名称id=图象名称areashape=选取区块的形状coords=坐标href=URLalt=文字说明/mapimgsrc=URLUSEMAP=#图象名称map声明整张图使用地图链接方式进行连接.name,id指此图的名称.第11页共50页area表示我们所要链接其中一点的区快shape表示我们所选择的形状,如:rect矩形;circle圆;poly多边形;coords表示地图的坐标位置!!18.切片索引使用Firework来进行!!用表格进行定位!!19.为网站添加图标linkrel=shortcuticonhref=favicon.icotype=image/x-icon超链接也叫URL,中文翻译为资源定址器。这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。20.超链接的基本格式格式:scheme://host[:post]/path/filenamescheme指的是http,ftp,file,mailto,news,gopher,telnet七种host指的是IP地址或计算机名称post指的是服务器端口path指的是文件路径filename指的是文件名ahref=scheme://host[:post]/path/filename…/a21.超链接的种类一般常用的分为四种:1.http声明ahref=网易logo/a2.file声明ahref=file:///e/images/pic.j

1 / 50
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功