网页编程笔记讲解

网页编程笔记网站设计师：1、设计1）PS网页效果图设计2）Flash网页动画设计2、制作1）html、xhtml、DIV+CSS2）javascript、jqury——前端3、创建方式：记事本、dreamweaver、动态生成4、语法:1）标记符/标记符双标记2）标记符/单标记3）标记的属性：标记属性1=参数1属性2=参数2……内容标记/说明：标记与属性、属性之间以空格分隔属性不分顺序，且属性不是必须的（有默认值）文档结构：html/*头部信息*/headtitle标题/title/head/*主题部分*/body正文/body/html一、HTML1.名词解释：：WordWideWeb，万维网W3C：WorldWideWebConsortium，万维网联盟/W3C理事会。HTML：HyperTextMarkupLanguage，超文本标记语言。CSS：CascadingStyleSheet，级联样式表。XHTML：eXtensibleHyperTextMarkupLanguage，可扩展超文本标记语言。2.参考网页的源代码。右击，查看源文件。3.HTML不是编程语言，而是一种描述性的标记语言。标记：就是用来描述网页内容的一些特定符号。4.html标记的语法：标记分为两种，单标记、双标记标记符没有结束的标记—单标记开始标记符/结束标记符—双标记5.需要注意的：在xhtml中规定，所有html标记，都要小写所有的标记，都是要有关闭符号的。如下：html-------xhtmlbr------br/标记名称属性=属性值……/标记名称所有html都有一个基本结构。网页的head信息，标识网页文件的头部信息，如标题、搜索引擎关键字等。6.meta标记：meta标记用于定义文件信息，是对网页文件进行说明，便于搜索引擎查找。放置于head/head之间。用meta设置关键字：metaname=keywordscontent=关键字多个关键字用“,”分隔。设置描述：metaname=descriptioncontent=对关键字的扩展说明设置作者：metaname=authorcontent=作者名设置字符集：metahttp-equiv=content-typecontent=text/html;charset=gb2312编码格式：GB2312编码占用2个字节，UTF-8占用3个字节，如果网页文字较多，选择GB2312编码。设置页面定时跳转：metahttp-equiv=refreshcontent=2;URL=里面的2，代表2秒上面的几个地方需要特别注意：1.http-equiv之间不能加空格，否则没用，也就是不能写成“http-equiv”！2.content-type也是一个整体，不能以空格分隔。7.body标记的详解：【1】body是网页的主体标记。【2】注释的写法：!--这里面填写注释内容--。【3】body的属性：bodybgcolor=背景颜色backgroud=背景图片的路径text=文本颜色link=链接文本颜色vlink=访问过的链接颜色alink=激活的链接颜色leftmargin=左边界rightmargin=右边界topmargin=上边界bottommargint=下边界。上面的边界的单位都是像素。【4】html元素、html标签、html标记都是一样的。【5】有些html元素，有默认的值，比如margin，它不是直接靠在页面的边缘或顶端的，而是空了一点距离，如果想取消这个可以把leftmargin或者topmargin都设置为0。8.标记语义的应用：【1】font标记没有语义上的作用。【2】普通加粗标记：b文字内容/b普通倾斜标记：i文字内容/i，二者都没有在语义上突出是重点的意思。【3】语义加强加粗标记：strong文本内容/strong语义加强的倾斜标记：em文本内容/em，二者都告诉了浏览器，加粗或倾斜的是重点。【4】各个标记之间的权限不同，当控制比较重要的内容时，可以用strong，标题部分，一般都用h1标记。【5】下划线u文本/u；删除线s文本/s；上标sup文本sup；下标sub文本sub，br/换行标记。【6】段落(paragraph)标记p/p：格式：palign=对齐方式(left、center、right)……/p【7】用适合的html标记，去描述网页内容，这才是网页优化的核心。9.标题：【1】hnalign=“对齐方式”标题内容hn，标题标记，n的取值范围是1-6。标题标记内的文本会以加粗方式显示，hn针对的是段落，font标记针对的是任意对象的文字。【2】align属性。10.br/换行标记：【1】br/换行不分段，在一个段落里面换行。11.hr/水平分割线：【1】主要属性：align属性，分割线的对齐方式；size属性，像素值和百分比，数值越大，线越粗；width属性，像素值和百分比，决定线的长度。其中，像素值是一个绝对的值，不会随着窗体大小的改变而改变。noshade属性，不带阴影，纯色的实体线。color属性，颜色。11.在xhtml中，所有的标签都必须有属性值，如果没有，就是用属性名，例如：hrnoshade=noshade/，在html中，可以直接写成hrnoshade。12.特殊标记：【1】定义一个块应用：文本缩进标记blockquote.../blockquote属性：citeurl被引用的地址。如：blockquotecite=!--这里的链接不会显示在网页中--引用的正文……/blockquote【2】center……/center居中(在xhtml中已被废弃的标记)。【3】预格式化：pre/pre13.特殊字符（转义符）的输入：【1】特殊字符转义码空格： 版权号©：©注册商标®：®引号："and符号＆：&小于符号（＜）：<大于符号（＞）：>14.网页中信息的排序显示：【1】列表的标记：1、无序列表ul.../ul[UnorderedList无序列表]语法：ultype=项目符号类型litype=项目符号类型列表内容1/lili列表内容2/li……/ul说明：li.../li表示一个列表。项目符号类型有三种，disc是实心圆圈，circle是空心圆○，square是正方形。2、有序列表ol.../ol[OrderList（有序列表），li=list]语法：olstart=列表起点type=项目符号类型li列表内容1/li/ol说明：start属性，表示列表从哪个数字开始，type属性的值有：1、a、A、i、I。也可用上面无序列表的符号。1表示编号从阿拉伯数字1开始依次往后。a表示小写英文字母开始，a、b、c、dA表示大写的英文字母。i表示小写的罗马数字，i、ii、iii、ivI表示大写的罗马数字，I、II、III、IV3、定义列表dl.../dl[definelist定义列表]语法：dldt标题1/dtdd内容1/dddd内容2/dddt标题1/dtdd内容1/dddd内容2/dd/dl说明：dl.../dl定义一个列表；dt.../dt表示一个项目（标题）；dd.../dd表示一个项目（标题）下更详细的内容的解释。15.图片：【1】语法：imgsrc=图片路径/。注：src=source。【2】网页常用图片格式：GIF：最多只能保存256种颜色，支持透明色，支持动画；JPEG：不支持透明及动画，颜色可达1670万种。PNG：支持透明色，不支持动画，颜色从几种到1670万种。【3】路径：绝对路径：提供文档全部主机名、路径及文档名称。相对路径：当前文档开始的路径。一般都用相对路径，把图片和网页放在同一个文件夹内。../向上一级目录。根相对路径：【4】标记属性：■src：图片的路径，URL。■alt：规定图片的替代文本（图片无法显示时），文本。■title：鼠标悬停时显示的内容，文本。■width：设置图片宽度，像素值和百分比，设置成百分比的时候，是相对于浏览器窗口的。■height：设置图片高度，像素值和百分比。■border：设置图像的边框，像素值。■align：对齐方式。●left：图片靠左，文字靠右●right：图片靠右，文字靠左●top：文字垂直居上，文字在右边。●middle：文字垂直居中，文字在右边。●bottom：文字垂直居下（默认值），文字在右边。■vspace：定义图像顶部和底部的空格（垂直边距），像素值。■hspace：定义图像左侧和右侧的空白（水平边距），像素值。16.网页布局思想：【1】传统的table标记，发展到DIV+CSS。【2】从大到小排列。【3】从左到右，从上到下。17.网页布局之table标记：【1】基本结构：●table.../table定义表格●tr.../tr定义表行，是tablerow的缩写，row，“行”的意思。●td.../td定义单元格，是tabledatacell的缩写，cell，“单元格”。●th.../th定义标题栏（文字加粗）。【2】属性：●tablebgcolor=，设置表格的背景颜色。●tablebackground=，设置表格的背景图片。●tableborder=，设置表格边框的宽度，不设置，默认为0。●tablecellpadding=，单元格边框与内容之间距离的大小，默认为2（表格边距），内填充。●tablecellspacing=，设置单元格之间空间的大小（单元格间距），外填充。●tablebordercolor=，设置表格边框的颜色。●tablebordercolorlight=，设置边框高亮部分的颜色（边框大于1时可用）。●tablebordercolordark=，设置边框暗部分的颜色（边框大于1时可用）。●tablealign=表格的对齐方式（left、right、center）。●tablewidth=，设置整个表格的宽度，像素值和百分比。【3】列（单元格）td的属性：●tdwidth=，设置单元格的宽度。●tdheight=，设置单元格的高度。●tdbgcolor=，设置单元格的背景颜色。●tdbackground=，设置单元格的背景图片。●tdalign=，设置单元格的水平对齐方式。●tdvalign=，设置单元格的垂直对齐方式。●tdrowspan=，设置行合并的数目（垂直合并）。●tdcolspan=,设置列合并的数目（水平合并）。●tdnowarp=nowarp，设置在单元格中不换行。【4】合并（延伸）单元格之后，就会有多处的单元格，就要删除。合并单元格，就是删除多余的td。【5】合并删除td的公式：删除的个数=合并的个数-1。【6】立体表格效果，就是将表格的亮边框颜色（bordercolorlight）和暗边框颜色（borderclolrdark）对比。【7】细线表格效果的公式：将表格自身的border=0；给表格设置背景颜色→细线的颜色；给表格设置单元格之间的距离→线条的粗细。【8】行（tr）的属性：trwidth=，设置行的宽度。trheight=，设置行的高度。trbgcolor=，设置行的背景色。tralign=，设置行的水平对齐方式。trvalig