html和CSS笔记.doc

Html/Css语言剖析紫竹林HTML语言剖析 字体标记-目录 n 实体标记与逻辑标记 ：实体标记与逻辑标记的区别：1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。 例如逻辑标记的 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加下划线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。 2. 多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。例如两个逻辑标记及同时标示一字句于旧浏览器常失去作用。 实体标记有： 逻辑标记有： 注：若要求真确的效果当然以实体标记为佳。 n ：两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。n ：这些标记于 Internet Explorer 都产生斜体效果，而只有 于 Netscape Netvigator 失去作用。这些标记中只有 较为特别，因为它自身具备换行效果所以不需要在它前面加上标记。n 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。 加上删除线的标记。 令字体加大。 令字体变细。 为下标字， 则为上标字，仅剩的数学标记n ：这些是标题标记，由 至 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。n ： 可以 用于文件的开头部分，即 与 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。 是应用于文件的内文部分，即 与 之间的位置，只影响 所标示的字句，是一个围堵标记。 两标记可同时存在，唯没被 所标示的字句才直接受 所影 响，而 本身亦受 的影响。 的参数设定： 例：我把青春献给你 face =Arial 设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字形。 size =+2 设定文字的大小。其值可以是 绝对 或 相对 ， 绝对的意思便是标记自己决定文字的大小，不受 的影响，如 size= 5 表示其大小便是 5 ， 而html内定值为 3，即 size= 3 和没有设定是一样的。 相对的意思便是在内定值 3 的基础上增加或减少大小级数，如 size= +2 便等同绝 对表示法的 size= 5 ，但若已设定 则其实际大小便是 n+2 不 再是 3+2 了。只有绝对表示法。 color =#008000 设定文字的颜色。 #008000 表示绿色 HTML语言剖析 段落标记-目录 ； ； ； ； ； ； ； ； n ： 为文中不同部份加上说明，方便日后修改。 例： 用作版权声明。 假如你不希望别人使用或复制你的网页，可加上警告字眼。 例： n ：称为段落标记。作用：在文字、图、表格之间增加一空白行。 原来是一成对标记，标于一段落的头尾，但从 HTML 2.0 开始己不需要作结尾。的常用参数：如： align =center 可选值：right, left, center。 内定值： align= left n ：称为 换行标记 。作用：使文字、图、表格等显示于下一行。 由于浏览器会自动忽略原始码中空白和换行的部分，这令到成为最常用的标记之一。因为无论你在原始码中编好了多漂亮的文章，若不适当地加上换行标记或段落标记，浏览器只会将它显示成一大段。 例：错误示范：（邮局不会接受一行过的地址） 源代码9686# No.55 feixi roadhefei anhui The Peoples Republic of China结果9686# No.55 feixi road hefei anhui The Peoples Republic of China正确例子：源代码9686# No.55 feixi roadhefei anhui The Peoples Republic of China结果9686# No.55 feixi roadhefei anhui The Peoples Republic of Chinan ：称为水平线 。作用：插入一条水平线。 之参数修改： 以： 为例。 align =LEFT 设定线条置放位置，可选择：left；right；center 三种设定值。 size =2 设定线条高度，以像素作单位，默认为 2。 width =70% 设定线条长度，可以是绝对值（以像素作单位）或相对值，默认为 100%。 color =#0000FF 只适用于IE 设定线条颜色，默认为黑色（#000000）。 #0000FF 代表蓝色，亦可以采用颜色的名称，即 text=blue。双引号可以省略 noshade 设定线条为平面显示，若删去则具阴影或立体，这是默认值。 即默认水平线是具备阴影效果，如加上noshade，则水平线实现为一个二维的黑线，不具备三维效果。 n ：称为 居中标记 。作用：使文字、图片、表格等显示于中间。 这标记原先是 Netscape 所定义，后来其它浏览器都支持它，但你会发现很多标记已有 align =CENTER 的参数，似乎多余了，事实上它还是常用的标记之一，其简单易用，常用于文字上，对于己加有align=CENTER参数的 标记亦要不厌其烦地加上居中标记，因有许多浏览器不支持标记中的align=CENTER参数。 例：滚滚长江东逝水 这几天心里颇不宁静 这几天心里颇不宁静n ：称为预设格式标记 。作用：令文字按照原始的排列方式显示。 这标记允许保留你于原始码中输入的空白。细看以下例子你便可体会到此标记的威力。除了运用一大堆表格标记之外你只有采用这标记才能有此效果。 n ：称为区域标记 。作用：设定文字、图片、表格等的摆放位置。 应用于Style Sheet（样式表）方面功能会更显得强大，它最终目的是给设计者另一种组织能力，有Class; Style; title ; ID等属性，在CSS部分详细讲解，这处只介绍一个属性设定。 以 为例： align =center 可选值：center ; left ; right 。决定字、画、表格等居中、靠左或靠右。 的作用和居中标记 一样，前者是由 HTML3.0 开始 的标准，后者是通用己久的标示法。 n ：称为 不折行标记 。作用：某些文字因太长而分开，以显示于同一行或下一行。它对网址、数学公式、一行数字、程序代码等尤为有用。n ：称为 建议折行标记 。作用：预设折行部位。 它没有抵触到 的格式规范，只是作建议而已，若观者的系统解像度够高的话，那么它是不会折行的。HTML语言剖析 列表标记-目录 n :称为有序列表标记。则用以标示列表项目。 所谓有序列表就是在每一项前面加上 1,2,3. 等数目，又称编号列表。 1type=11,2,3, .atype=aa,b,c,Atype=AA,B,C,itype=ii,ii,iii,type=I,1. 的参数设定（常用）： 例： type=i 设定数目样式，其值有五种，请参考右表，内定为 type=1。 start=4 设定开始数目，不论设定了哪一数目样式，其值只能是 1,2,3.等整数，默认为 start=1。 2. 的参数设定（常用）： 例： type =square 只适用于 非顺序列表 ，设定符号款式，其值有三种，如下，内定为 type= disc ： 符号 是当 type= disc 时的列项符号。 符号 是当 type= circle 时的列项符号。 符号 是当 type= square 时的列项符号。 value =3 只适用于顺序列表 ，设定该一项的数目，其后各项将以此作为起始数目而递增， 但前面各项则不受影响，其值只能是 1,2,3. 等整数，没有内定值。 n ：称为 无序列表标记。 所谓无序列表就是在每一项前面加上 、 、 等符号，故又称符号列表。 的参数设定（常用）：例： type =square 设定符号款式，其值有三种，如下，内定为 type=disc： 符号 是当 type=disc 时的列项符号。 符号 是当 type=circle 时的列项符号。 符号 是当 type=square 时的列项符号。 注意：由于 及 都有 type 这个参数，两者尽可能选用其一。n :称为定义列表标记。 用以标示定义条目， 则用以标示定义内容。 所谓定义列表就是一种分二层的项目列表，其不顾符号及数目。 三个标记都没有常用的参数。而 可以独立使用，只是一些旧的浏览器并不支 援，如 IE 3.0。常用的如 标记可用以制造段落第一个字前面的空白。例：古典文学三国演义水浒传 HTML语言剖析 表格标记-目录 n ：这三个标记是定义表格的最重要的标记，是一个定义一个表格标记，用以声明这是表格而且其他表格标记只能在他的范围内才适用，属于表格标记的还有其它。 用以表示表格列 （row） 用以表示表格单元格（cell）1. 的参数设定（常用）： 例： width=400 表格宽度，接受绝对值（如 80）及相对值（如 80%）。 border=1 表格边框宽度，不同浏览器有不同的设置值，使用时请指出。 cellspacing=2 表格格线宽度， cellpadding=2 文字与单元格距离（填充）， align=CENTER 表格的摆放位置（水平），可选值为：left ,right ,center ， valign=TOP. 表格内文字图片等的摆放位置（垂直），可选值为：top,middle,bottom。 background=myweb.gif 表格背景图片，与bgcolor不能同时使用。 bgcolor=#0000FF 表格背景颜色，与background不能同时使用 bordercolor=#FF00FF 表格边框颜色，NC与IE有不同的效果 bordercolorlight=#00FF00 表格亮（外）边框部分的颜色 。只适用于 IE bordercolordark =#00FFFF 表格暗（内）边框部分的颜色，使用bordercolorlight 或 bordercolordark 时 注注意：bordercolor 将会失效。只适用于 IE cols=2 表格跨行数目，让浏览器在下载表格前先画出整个表格 frame 边框 表格的边框有 4 个：左边框、右边框、上边框、下边框。这四个边框都可以设置为显 示或者隐藏。设置表格边框显示状态的基本语法如下：显示整个表格边框 不显示表格边框 只显示表格的上下边框 只显示表格的左右边框 只显示表格的上边框 只显示表格的下边框 只显示表格的左边框 只显示表格的右边框 表格中分隔线的显示同样可以进行各种设置，设置表格中分隔线的显示状态的基本语法如下： 显示所有分隔线 只显示组与组的分隔线 只显示行与行的分隔线 只显示列与列的分隔线 所有分隔线都不显示 2. 的参数设定（常用）： 例： align=RIGHT 该一列内文字图片等的摆放位置（水平），可选值为： left , center , right 。 valign=MIDDLE 该一列内文字图片等的摆放位置（垂直），可选值为： top , middle , bottom 。 bgcolor=#0000FF 该一列背景颜色， bordercolor =#FF00FF 该一列边框颜色只适用于 IE bordercolorlight =#808080 该一列边框亮（外）边框部分的颜色，只适用于 IE bordercolordark =#FF0000 该一列边框暗（内）边框部分的颜色，使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。 只适用于 IE 3. 的参数设定（常用）： 例： width =48% 该一单元格宽度，接受绝对值（如 80）及相对值（如 80%）。 height =400 该一单元格高度。 colspan =5 该一单元格向右打通的栏数。 rowspan =4 该一单元格向下打通的列数。 align =RIGHT 该一单元格内字画等的摆放位置（水平），可选值为： left , center , right 。 valign =BOTTOM 该一单元格内字画等的摆放位置（垂直），可选值为： top , middle , bottom 。 bgcolor =#FF00FF 该一单元格底色， bordercolor =#808080 该一单元格边框颜色，只适用于 IE bordercolorlight =#FF0000 该一单元格边框亮（外）边框部分的颜色 只适用于 IE bordercolordark =#00FF00 该一单元格边框暗（内）边框部分的颜色使用 bordercolorlight 或 bordercolordark 时 bordercolor 将会失效。 只适用于 IE background=myweb.gif 该一单元格背景图片，与 bgcolor 任用其一。 n ：与同样是标示一个单元格，不同的是所标示的单元格中的文字是加粗且居中。通常用于表格第一列以标示栏目。用法是取代的位置便可以，其参数 设定请参考。当然若为所标示的单元格中的文字加上粗体标记便等如的效果。n ： 的作用是为表格标示一个标题列 ，就像是在表格上方加上一没格线的打通列。 当然亦可置于下方，通常用以存放该表格的标题。 的参数设定（常用）： 例： align =TOP 该表格标题列相对于表格的摆放位置（水平），可选值为：left , center , right , top , middle , bottom ，若 align= bottom 的话标题列便会出现对表格的下方，不管你的原始码中把 放在 中的头部或尾部。 valign =TOP 该表格标题列相对于表格的摆放位置（上下），可选值为：top , bottom。和 align =TOP或align =BOTTOM 相同。只有标题列置于下方及向右或向左贴，此参数值就可发挥作用。当只用一个参数时，首选 align，valign 是由 HTML3.0 才开始的参数。 HTML语言剖析 链接标记-目录 n : 称链接标记，由 与 所围的文字、图片等等可以成为一个链接。 的一般参数设定:1. 页面链接 例： href=index.html 这参数不能与name 同时使用，使用这参数才能生成可点击的链接。 o 当作为一外部链接时： href所设定的是该链接所要连到的文件名称，若该文件与此html 档不是同在一目录请加上适当的路径，相对绝对皆可。 o 当作为一内部链接时： href所设定的是该链接所要连到的同文件内锚点或指定文件之锚点，且不要其他标签只加上结束标示 便可以，例如 、 及 其中there便是锚点，并与其前加上符号#以作识别，参考点由下一个参数name。 name=hello 这参数是为文件设置锚点，作为被链接，不会被显示。所以说构成一个内部链接要使用两次链接标记。一次使用参数 name 先在文件中插入一个锚点，另一个使用参数 href链接到这个锚点。 target=_top 设定链接被点击的结果所要显示的窗口。可选值为： _blank , _parent , _self , _top , 打开方式名称 。 o target= 打开方式名称 这只运用与框架中，若被设定则链接结果将显示与该“打开方式名称”之框架中，框架名称是事先由框架标记所命名。 o target=_blank 或 target=new 将链接的窗口内容，开在新的浏览器中打开。 o target=_parent 将链接的画面内容，当成文件的上一个画面。 o target=_self 将链接的画面内容，显示在目前的视窗中。(默认值) o target=_top 将框架中链接的画面内容，显示在没有框架的窗口中。（即除去了框架) 2. 文件链接3. 锚点链接先在页面上插入一个锚点，然后在页面上设一个链接（href=路径#锚点名）到这个锚点上。大致格式：;4. 空链接5. 脚本链接javascript:self.print()javascript:self.close()6. 电子邮件链接： n ： 是一个链接基准标记，用以改变文件中所有链接标记的参数内定值。它只能应用与文件的开头部分，即标记 与 之间。 的一般参数设定： 例： href=/ 设定该页网页中所有 HTTP文件及图形（包括相对路径链接及图形标记等）的默认路径，其他如 ftp:/ 及 gopher:/ 等则不受影响。这个参数只可填入一个相对或绝对的路径，不必填入文件名称。一般相对路径链接及 图形标记等是内定以该页网页所在的目录作为起点，若依这例子，该文件中所有链接将会以 / 作为起点，若其中有链接如 Back to Main Page ，那末它不会连到自已目录下的 index.html，它将会连到 Microsoft 的 首页，这是因为相对路径己给 转成绝对的了。 target =_top 设定该页网页中所有链接被点击之结果所要显示的视窗，免得分别为所有链接加上 target 参数，常应用于框架中。其设定与 链接标记中 target 参数相同。HTML语言剖析 表单标记-目录表单的用处很多，在网上无处不见，当然是配合ASP，JSP，ASP 使用为佳，所以使用或学习动态网页的话，表单设计是必需的，表单的标记不多，但其参数变化很多。一份表单的基本架构是： 在标记的包围下加上一种或多个的表单输入方式及一个或多个的按键。表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。 INPUT 的种类： Text , Radio , Checkbox , Password , Submit/Reset , Image , File , Hidden , Button 。 n ：称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，便是其中的一个，用以设定各种输入资料的方法。它是一个空标记。 的参数设定（常用）： 例： action =http:/localhost/example.asp 表单通常是与动态网页设计语言配合使用的，参数action 便是用以指明该动态语言页面的位置，这样此表单所填的资料才能正确传给动态页面或者数据库作处理。可设定此参数为 ACTION=mailto: 那样该表单所填的资料将会寄至此电邮地址（红色部分）。 method =POST 传送资料给数据库或者动态网页的的方式，可选值为 POST , GET 。请注意POST允许传送大量资料，但GET则只接受低于1K的资料，所以你若看过别人的表单原代码的话，你会发现申请表单用的是POST而搜索用的是GET。 的参数设定（常用）： 由于其第一个参数type己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。 type =Text 可选值为 Text , Radio , Checkbox , Password , Submit/Reset , Image , File , Hidden , Button 。 1. Text （单行文本字段） 例： type=Text 输入方式为 Text，能产生一单行文本字段，上限为255字符。 name=age 此一单行文本字段名称，这是最重要的一个，方便动态网页辨认由表单传来的资料，可随便命名，但通常动态页面及数据库中都有指定名称，若转用其它名称便需要修改该动态页面和数据库字段了，名称可为空白或者特别符号的英文或数字，有大小写的分别，可以写成 Your_Age，若有访客于此表单此一文本字段填入40的话，那传给动态页面的值字 串便是Your_Age=40。 value=20 此一单行文本字段默认值。若不填写则文本字段是空白的，等待访客亲自键入，若value=20的话，20便会出现在文本字段中，当然访客可以修改之。 align=MIDDLE 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大用处。 size=2 此一单行文本字段显示的长度，若采用 Big5 编码的中文网页便要小心，同size的文本字段NC会显示得比IE冗长。 maxlength=255 此一单行文本字段可输入字符的上限，为方便编排资料或避免错输入等，宜设定上限，例如输入电话或QQ号码可设为 9，年龄为2等。 disabled：不发生作用2. Radio （单选） 例: type=Radio 输入方式为 Radio，能产生一单选按钮，以供点选。 name=gender 此一Radio名称，参考Text部分的说明 。 value=female 默认值。每一个radio 必须及仅有一个value，通常有同时采用两个或以上同name 不同 value 的Radio 输入方式，可让使用使任选其一。 align=middle 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 checked 设该Radio 为默认被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这参数。 3. Checkbox （复选按钮） 例： type=Checkbox 输入方式为 Checkbox，能产生一复选按钮 ，以供复选。 name=idol 此一 Checkbox 名称， 参考Text部分的说明 。 value=Leon 默认值。每一个Checkbox 有切只有一个 value，当被选择时这值便会传给动态页面，例如所传字串 idol=Leon 。 align=RIGHT 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 checked 设该Checkbox 为默认被选。每个Checkbox都是独立的，所以每一个都可使用这参数，不像Radio。4. Password （密码框） 例： Password 的其他参数和 Text 是完全相同的， 请参考 Text 的介绍 。 两者作用不同，Password 所输入的字元全以 * 号表示。5. Submit （提交）及 Reset （重写） 这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。 例： type =Submit 设定输入方式为 Submit 或 Reset。 name =other_funtion Submit 的功能随 name 的不同而不同，须和动态语言配合。若只需要普通的提交键，则是其默认，不必用此参数。 value =确定 这个值不是输给动态语言的，而是显示在按键上，可以不用，传送键的内定值为Submit Query ，重写键的默认值为 Reset 。 align =MIDDLE 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。6. Image （图片按键） 通常用以取代Submit及Reset两个按键，因为由程式产生的按键并不漂亮，这 Image 参数便允许采用自已制作的按键。 例： type =Image 输入方式为 Image。 name =submit 所要代表的按键，可以是 submit, reset, 或其它。 align =bottom 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 src =new017.gif 按键图片来源，若此图片文件不与该html 文件在同一目录下，请加上相对或绝对路径。7. File 例： input type =File 输入方式为 Image。通常用以传输文件。 name =upload 这文件传输的名称，用以识别之用。 align =BOTTOM 可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle。 size =20 所显示文本字段的长度。 maxlength =100 可输入字符的上限。 accept =text/html 所接受的文件类别，有二十六种选择，但可不设定。8. Hidden 例： type =Hidden 输入方式为隐藏或默认。它不会显示任何输入介面，而是一个默认值随表单一起传给ASP，列如由ASP产生的会员号码，或传入可更改的参数以调整ASP而避免修改ASP原代码。 name =ID 这文件传输的名称，用以识别之用。 value =6618 内定值，会以如 ID=6618 形式传给 ASP。9. Button type =Button 输入方式为一般按键。常配合 Java Script 作为其启动按键。 name =useless 这文件传输的名称，用处不大。 value =Back 按键显示名称。 n ：是 列表选单 标记，每一选项皆由 所标示，把它当作围堵标记或空标记使用都可以。 的参数设定（常用）： 例： name =where 这列表选择项的名称，作识别之用，将会传及 ASP。 size =6 这列表选择项的列数，即其高度，请自行修改。若使用此参数则不会有 Pop Up 效 果。 multiple 令这列表选择项容许多重选择。 的参数设定（常用）： 例： value =tw 这选项的值，将会传及 ASP。请自行修改，但不同选项必须有不同的值。 selected 设该选项为内定被选。一个单选列表选择项只能有一项或零可默认被选。 n ：是 表单文字区块 标记，常用于 bug report, feedback 等需要填写大量资料的用 途。 的参数设定（常用）： 例： name =comments 这文字区块的名称，作识别之用，将会传及 ASP。 cols =40 这文字区块的宽度，单位是单个字符宽度。 rows =4 这文字区块的列数，即其高度，单位是单个字符宽度。 wrap =VIRTUAL 设定其折行问题，可选值为： off , physical , virtual 。off 表示不使用此属性，physical 时则会强迫刘览器在送资料到 ASP（Web 服务器端）必须将实文字中的换行一 并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。Css样式在表单中的应该：CSS层叠样式单，它可以定义页面元素的外观，包括字体样式、背景颜色和图像样式、边框样式、补白样式、边界样式等等。1. 字体样式的应用：字体样式包括：字体族科(font-family)、字体风格(font-style)、字体变形(font-variant)、字体加粗(font-weight)、字体大小(font-size)、字体(font) 文本框里的文字是加粗的，大小是9pt，字体是宋体，代码：input type=text name=formExam size=10 maxlength=10 style=font-family:宋体; font-size: 12px; font-weight: bold value=加粗 口令框文字是红色的，代码：input type=password name=formExam3 style=font-size: 9pt; color: #FF0000 size=8 maxlength=8 下拉框文字颜色是红色的，字体是Verdana，大小是9pt，代码：select name=select size=1 style=font-family:Verdana,Arial; font-size: 9pt; color: #FF0000option value=2 /optionoption value=1/option/select 多行文本框了的字体是Verdana，有下划线，大小是9pt，代码：TEXTAREA name=formExam2 cols=30 rows=3 style=font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline align=rightunderline css style/TEXTAREA 2. 背景颜色和图像样式的应用背景颜色利用background-color属性，背景图像利用background-image属性 文本框背景是黑色的，字体是白色的，代码：input type=text name=RedFld size=10 maxlength=10 style=color: #FFFFFF; background-color: #000000 口令框背景是灰色的，代码：input type=password name=RedFld3 size=10 maxlength=10 style=background-color: #999999 单选和复选按钮的背景是红色的，代码：input type=checkbox name=checkbox value=checkbox style=background-color: #FF0000input type=radio name=radiobutton value=radiobutton style=background-color: #FF0000 下拉选择框的选项是丰富多彩的背景，代码：select name=sele