HTML静态网页知识点

文中的XXX 黄色标记为易错的，重要的第_章网页编程基础1、互联网？2、分别解释 tcp/ip;http;ftp;html;bbs;www;url;php ; css3、url的5种形式？4、服务器、服务端？客户端？5、超文本？超链接？6、网页的3种基本类型？7、一个完整的hml文件结构有多少个标记？分别是？8、文字的属性代码？9、注释标记？标题标记？换行？空格？段落？加粗？加斜？10、meta标记常用的刷新/语言编码代码？增加的：关键字、主题内容、强行的调用网上最新版本、文档作者11、link标记？（链接）12、base标记？（文档原始地址）13、常见的html编辑器？ 答案：1、Internet2S tcp/ip:传输控制协议http:超文本传输协议 ftp:文件传输协议 html :超文本标记语言 bbs :电子公告板服务www: （ world wide web ）网维网或全球范围网url :统一资源定位符php: 一种用来制作动态网页的服务器端的脚本语言css:层叠样式表（样式表）一种设计网页样式的标准3、file:/文件地址（最后以单个文件结尾） http:/www.w3.org/default.htmlldefault:缺省的意思rowser浏览器；Client 客户端；Server 服务器 ftp:/192.168.0.123/ newsy/地址 telnet:/地址4、server ； client【B-B;C-C;B-C;模式 B 代表企业；C 代表个人;B/S ；C/S】5、HT（hyper txet） , HL（ hyper link）6、静态网页html ； css 动态网页 *.jsp, *.php*.asp（以do?开始的是Java平台编写的） 交互式网页JavaScript7、4 个；分别是 8、文字9、注释；标题：x为16，其中h1最大 ；换行：或空格：  段落 ; 加粗; 加斜10、刷新:文字编码：（简体中文：gb2312, utf-8是英语编码，繁体字编码：BIG5）关键字：主题内容：强行调用网上的最新版本:或文档作者：11、12、（注意 XX 与 address之间是空格。）13、常见的 html 编辑器：Dreamweaver、Notepad + +、first page 2006、we builder 2006（以前的Dreamweaver是macromedia公司的，现在隶属于adobe公司）第二章 认识Dreamweaver1、链接？分支？xhtml前的x表示什么？在Dreamweaver中什么键可实现预览功能？2、重做的快捷键？撤销的快捷键？打开时间轴的快捷键？目标链接地址？3、在合href=# 点击这里/a中的#表示什么？4、在表格中，填充的含义是什么？间距指的是什么？ 答案：1、2、link , subject, x表示此网页符合web2.0的标准，F12ctrl+Y , Ctrl+Z , Alt+F9 , target3、表示空链接(或者链接的地址)4、填充的含义是：内容到边框的值，间距(cellspacing ):指单元格间的距离。第二章文字超链接图片10.22 Wednesday, October 28, 20091、单行显示、强制不换行标记？2、居中显示标记？段落缩进标记？原版显示标记？3、段落位置，段落居中，居左，居右？4、水平分隔线的所有属性？ 5、文字格式标记，属性？文字的附加属性：常用的有：b加粗/b、i加斜/i、u加下划线/u、s加删除线/s只需了解的有：small缩小/small、big加大一点/big、strong加强强调/strong、em强调/em、address显示网址、邮件/address、code显示代码指令/code 6、滚动字幕、图片的所有属性代码？答案：1、2、居中：段落缩进：原版显示标记：或；可解析代码地完全显示区别:不可解析代码，绝对地原版显示3、4、为单标签，若该属性中不设noshade,则默认为有阴影。5、内容6、滚动字幕：滚动字幕 滚动图片（与滚动字幕类似）滚动图片地址： Friday内容1、写出背景的所有属性：（颜色、图片：平铺xy,x、y、居中、居右、居左，txet,link,alink,vlink）2、在滚动字幕中，设置鼠标移上去停止，移开后开始的命令。3、常用特殊符号：千分号,&,空格，钱币符号，平方，立方m3。4、上标，下标5、超链接格式。（包括在新窗口打开/在上一级打开/在自身打开覆盖原来的网页/在整个窗口打开），6、在相对路径中当前目录和上级目录分别用什么表示？7、外部链接（设置一个链接打开学校的服务器）（思考：若要访问：开发15班公用/参考页面/07.jpg 直接编代码，怎么编？）8、锚点链接的语法代码？9、常用的网页图片的格式？分别支持？种色彩，分别解释10、插入图片的代码？（包括图像宽高，边框，水平/垂直空白，文字相对于图片基线的位置）（知识点：基线：baseline ;宽，高只设一个，默认等比例放大，缩小；若同时设置宽高，图片就会变形。）11、图片的超级链接代码？12、热点区域 (:shape.rectc/cricle/polyroods,href)完全的格式13、图片的优化：低分辨率显示：lowsrc 文字替代图片：alt/tilte14、外部超级链接(www型，ftp型，telnet型，news型mailto型)答案：1、2、在命令里面增加：onmouseover=stop() onmouseout=start()3、千分号。； ‰左尖括号 :< 右尖括号：>地址符& : &引号：" 空格： 钱币符号：¥ 平方 M2 : ²m3： ³4、上标：下标：5、6、当前目录：./ 上级目录：./7、点击到学校服务器(思考题：点击这里打开 07.jpg )8、锚点点击锚点后显示的内容9、gif:图像交换格式，无损压缩图片格式，支持256种色，jpg :联合照片专家组，有损压缩图片格式，支持1670万种色10、img src二图片名称.jpg width=值height=值border=值hspace/vspace=align=top/center/middle/bottom/left/right 11、12、内容13、低分辨率：lowsrc 文字替代图片：14、“（网 址）J ftp:/192.168.0.123“ftp:/wish15:wish15192.168.0.123链接 “news:/.地址“mailto:XXX?subject=主题&cc二抄送地址 &bcc二暗送收件人 &body=主题单标签总结：水平分隔线：、插入图片标记：、换行标记或不换行标记：居中：、区域：英语角：下划线：underline简称u图像文件夹：image10.22作业:1、建立站点，管理站点。2、制作AP-DIV，漂浮的图片或flash。其他资讯考试在人事局考试计算机职称，程序员中级，高级对工作有保障第四章列表与表格(所有内容)1、有序列表(ordered list)标记？改变序号标记？有多少种类？指定序号标记？列表项(list item)标记？详解：有序列表,改变序号标记：type有5种(1/a/A/i /1指定序号标记：strat=列表项：完整的格式为：2、无序列表(unordered list)标记？更改标记样式？其他无序列表？详解：无序列表,更改标记样式：type ,其他无序列表：;前两者差不多，靠左完整的格式：.3、定义列表(definition list)标记？定义术语(definition term )即标题？定义说明(definition Description )即内容详解：定义列表:,定义术语：,定义内容：4、表格的3个标记？表格的所有属性表格边框的属性:(外/内边框粗细，文字到内边框的距离)？边框颜色？表格边框的显示状态(上、下、左、右、上下、左右、显示整个、整个不显示)表格宽、高(单位为像素px和百分比%)表格颜色？表格的水平位置(左、中、右)分隔线的显示状态(显示所有、组与组、行与行、列与列、不显示所有）详解：3个标记是：表格行列表格的所有属性代码：XXXXXX5、表格行的属性（单行高度、边框颜色、背景颜色、单行内文字的水平对齐方戒左、中、右、单行内 的垂直位置上、中、下）详解：表格行的属性代码：XXXX6、单元格属性（单元格的宽、边框颜色、背景颜色、单元格内文字的水平位置（左、中、右）/垂直位置（上、 中、下）详解：单元格即（列）属性代码：文字7、标题标记及属性，表标题标记-引疝-Acapuona=gnn、-top、cen1:el7bosOITrv电 s7rowsparvco-spansm2dvS孕47 计 9-蒯吊盼耙丽EE。 3，愈-|I舛耳疝7案浦wra p 7 4,-H首季借昏孕4蒯吊7D z.尸 人 fo rm v蒯吊-acion、meihod、nameaTMssonsubmK 洲瞩昏懿丹苛-人form acuonn 皿昏圜词 meihodnw POSMeT、namenw XXforirT onsubm#% V10 fwH?-0借人inpuiiypenw -texT、va-ue%、name%、max-engihnw 珈汁木网、sizenw VEszinpuiiypellpassworcr va-uens name%、max-engihns sizenw x+ 阳尊ffi、普借-人inpuiiypenw radio namenw 甬郦旅+倏 va-uens checked checked 滞冷人mpuiiypen subm name%、va-uenwffiJZs处、V 重置： 多选按钮，复选框:value=按钮上显示的字/name=value=/ 按钮：input type二button name= 图片按钮：input type= image src= 隐藏域：10、打开、上传文件实例：制作如下按钮：要求如图：解答：请先在第一个框中输入字符:点击输入，然后点输出，输出框就会显示你刚才输的字符输入|箭出|完整的代码如下：请先在第一个框中输入字符，点击输入，然后点输出，输出框就会显示你刚才输的字符A、=.qqH n-05.q=Hp=uuo -SSH 当云 =uo=nq=H 殳; nduv_A9=HU6 凭 PJVv 人 pv=*=H Eeornt Ns Jnduv_A60Ln=Hp _ m PJVA_uv A、=.a5a5H n-05.qq=Hp一Pup-Vs-H n-05 =uo=nq=Hed:unduv 人o=$n云 =qf H Eec ppz-d;nduv_A9=HU6凭 PJVvA-q%v会一qcuvvAt;os、vAt;OSV 骐垠iaK-/ (螫早 ) _8 _ sqd、lh堡怔愚何芸留农堡相皿座苗留蜓瘢炫映出、农堡相 皿)云m5、(史堡K-X必)ito -隹codcuM。宿何旧咀留苗晾玮W长杈田S3如长Q.O5M -S批A05x$、vrbg/n=lsYfA、当云 I_ESqdwm54o)deMrhrHSMO4s_e、seNglh0=$Ee$x$v-春警暮M n-05、da5M、SM0、s-0T lucuu -TRffiDIMcu051X3 -辰长杈lh&CX A-LUJq、vApoq、vAluoM、VAju U、VA-qa5J、vAJ、v 人 pv -q Eeorn-Ns Jnduv人 PJVApvvselect name=选框名字size=xmultiple=y 详解：x为要显示的项目数，y为允许选择多行、允许列表项目被多选的项数：取值范围为：（0,+8） 框架frame 框架集，框式支架：framesetFrameset标记的属性：1 frameborder边框的显示：0：无，1：有border边框粗细：默认为5px，单位：px （像素）bordercolor边框颜色：cols :台rows :均用像素和百分比分割，用*表示剩下的。framespacing :框架与框架间的间距noresize :设定框架不能调节，只要设定了前面，后面将继承。【考过】详解：窗口框架：不能与 body 混用。水平分割：rows , eg : 其中单位为 px或百分比（即占总窗口的百分比）垂直分害U : cols , eg:框架边框：border=x ,xR能以px为单位，边框隐藏：frameborder= 0，可设置为0, 1 0为无，1”为有，不设则默认为有。它也可以用在中，对单个框架有 效，Frame标记的属性：Src : frame其作用是显示网页，用src设置。Scrolling=yes/no 有/无滚动条。若不设，则默认为auto自动。Name :窗口名称。Iframe标记属性：Name :名字Width :宽度Height :高度Bgcolor :浮动窗口的背景颜色Align : （left/right/middle ）水平对齐方式Valign : （top/middle/bottom）垂直对齐方式Scrolling :（滚动条）在这里也可以用英语角动作：action表单，形状：form方法：method水平的：horizontal垂直的：vertical框架（集）：frame （ set）CSS样式表（重点）文中_”表示空格Css概念: 全称：Cascading style sheet （层叠样式表）所谓样式，就是网页里显示图片文字的方式（文字的颜色、背景等）；层叠指当cs定义的样式发生冲突时，将据层的先后来处理网页的 内容。 独立网页的样式，方便批量管理。 Cs样式用于控制页面的显示、页面的布局。二、调用css的4种方式： 嵌入式：写在应用样式（即HTML标记中）的标签中，格式为：文字 或这是span标记 夕卜联（外部样式表）：调一个外部的cs文档，其外部链接写在里面。格式为： 内联式：把写在标记内的，eg :* margin:0;Padding:0;Pbgcolor:red;font-size:20px; 导入式:import url（XX.css）;区别:外联（浏览时它是与网页同步运行，常用）L.导入式（与页面一起加载，当网速较慢时，可能显示不完全HTML代码，导致白屏。）外联的优点: 独立于html文件，便于修改。 多个html文件可以引用一个样式表，保持了页面外观的一致性。 样式表文件只需下载一次，就可以让其他链接到本样式表的页面使用。 浏览器会先显示html的内容，然后再根据样式表文件进行渲染，让访问者更快的看到网页的内容。三、选择符:（符合就近原则） HTML 选择符（标签选择器）:eg : p，a，img，tr，td，table，body 等，其格式为:p，a， img，tr，td，table，body。 类选择器：以.开头的，用class调用，class可以在标签里可写属性的任何地方使用。Eg：.a .b .tr .td等 ID选择器：以#开头的，用id=调用。 包含选择器：（其优先级高于HTML选择符）eg : XX,XX在td里面，则为td p（） 分组选择器:eg:p,hx,tr,td,.xx 则为：p,hx,tr,td,.xx四、通配符选择器：*【多个对象的通用样式】五、单位:相对：px , em绝对：pt（点数，是最基本的显示单位,in（不是国际标准单位，少用）,（cm , mm）国际标准单位 pc:印刷（1pc=12pt）六、颜色:命名颜色，在此定义下，只有16种颜色能被浏览器识别。eg : pcolor:blue; RGB颜色每种单色的取值范围为：0255 eg : Pcolor:rgb(0,0,0); 16 进制颜色：eg : pcolor:#ff0000;七、文本属性：文字字体：font-family（ 1到多种字体名称，用，隔开） 首行缩进：text-indent（后跟数值，单位px/em）水平对齐方式：text-align （left、right、center、justify 分散对齐）垂直对齐方式 :vertical-align （基线：baseline、上：top、中：middle、下：bottom、上标：super、下标：sub) 字符间距常指字母间距 : letter-spacing （跟数值;+为加宽，”-为缩紧）文字间距：word-spacing; 段落行距：line-height（跟数值，px） 字体效果：font-style（正常：normal，斜体：Italic，歪斜体：oblique） 字体粗细：font-weight（正常：normal，粗：bold，更粗：bolder，更细：lighter，100-900px（ 100，200，300.900，数字越大字体越粗） 字体大小：font-size（数值，xx-small , small , medium :标准,large , x-large ,xx-large ）（11）文字装饰效果，none（正常显示），underline（下划线），overline（上划线），linethrough删除线），blink（文字闪烁）（12）英文大小写转换;text-transform【none/capitalize（每个单词首写字母转换为大写）/uppercase（全部转换为大写）/lowercase（全部转换为小写）】关于文本属性的具体代码：bodyfont-family:宋体，X,XX,XX,sans-self;（注意你要选择的字体为宋体，所以要弓侄1起）.atext-indent:XXpx;text-align:left/center/left/justify;color:#XXX;.btext-decoration:none/underline/overline/linethrough/blink （闪烁）；text-transform:none/capitalize/uppercase/lowercase;.cvertical-align:baseline/top/middle/bottom/supper/sub;.dletter-spacing:+XX/-XX;line-height:XXpx;.efont-style:normal（正常）/italic（斜）/oblique（歪斜）;font-weight:normal/bold/bolder/lighter/（100900九级）汁。小习2。:数值/xx-small/x-small/small/medium（标准）/large/x-large/xx-large 世界你好八、 列表属性：有3个（图像image、类型style、位置position ）统一或者混合设置： list-style:XX_XX_XX 列表图像符号/标记：list-style-image:（url）或 none 列表符号类型：list-style-type：（decimal :阿拉伯数字、小写罗马字：lower-roman、大写罗马字: upper-roman,小写英文：lower-alpha,大写英文：upper-alpha） 列表符号位置：list-style-position;（inside/outside）列表属性cs代码具体是：/*直接就是组合的写法*/#alist-style:none/url（XXJpg）_outside_upper-roman;color:#XXXX;/*代码中的；_分别表示不同类的属性隔开，和相同类的隔开*/九、模块边框的属性：分为3大类：margin外边界、border边框、padding内边界（边框到内容的距离）Border-collapse相邻的边框线是否合并显示。（separate :独立显示、collapse :合并显示）,Border-top-width:Border-right-width:Boder-width Border-bottom-width:其中 border-width 后面可跟（边框的宽）Border-left-width:数值/thin（细）/medium（中等）/thick（粗）border-top-color:（边框颜色）border-right-color:border-color border-bottom-color:border-left-color:（边框线型）border-top-style:其中边框线型有：none/实线:solid /vborder-style border-bottom-style:小点虚线:dotted/大点虚线:dashed/ 双直 虹线:doubleborder-left-style:3D 凹线:groove/ 3D 凸线:ridge/border-right-style:3D 陷入线:inset/ 3D 突出线:outsete.g1. : #1border-width:50px;border-color:red;boeder-style:none;e.g2.:按 border-width, border-color,border-sty屈勺顺序，设置属性，中间用_隔开：#2border:5px_red_solid;若要加其他属性则用”隔开。margin后面跟数值（px）,表示模块与其他组件间的空白距离margin-top:上 = 统一设：margin:XXpx;margin-right:右margin:apx_bpx_cpx_dpx;则顺序为：上、右、下、左（外边界） margin-bottom下margin:mpx_auto则为上下均为mpx，左右自动。margin-left:左（padding-top:设置与 margi n 类似：padding-bottom:统-设 Padding padding-left:上右下左padding-right:上下，左右盒子模型：content:内容 padding:内容和边框之间的距离（上、右、下、左）border:边框（border-width边框粗细、border-color边框颜色、border-style边框样式）margin:盒子与盒子之间的距离（两个相邻的盒子都设置了该属性的时候，取较大的）十、背景属性: 背景颜色：background-color其格式为：（background-color:#00000或颜色名称； 背景图片：background-image其格式为：background-image:url路径）； 背景图片并排设置：repeat （repeat -x/repeat-y/ no-repeat/repeat） 背景图片位置定位：position :X,Y对应英文或百分比。格式为：background -position : XX_XX ; background-attachment背景图片是否固定（属性值为fixed的时候，背景图片固定不动）其坐标为：0%+y% 规律：0,50，100 1 - 1 I - b %规律：3J 350F 310top-lefttop-center top-right left-center center-centerright-center bottom-left bottom-center bottom-right一、伪类和span行内标记 伪类有 a:link;/a:visited;/a:hover;/a:active;其 cs 代码的写法为：a:link/ a:visited /a:hover /a:active （属性；color:#颜色或名称若页面有多种链接，而需要颜色不一样，则需要用到分类选择。 Span标记其代码为：. 十二、英语角： 装饰：decoration,text-decoration:文字装饰效果 衬垫：padding indent:凹陷，缩进 justify :证明.正当 十二、美化滚动条常用的属性代码：scrollbar 滚动条及箭头按钮表面颜色：scroll-face-color 滚动条及箭头边缘阴影的颜色：sroll-shadow-color 滚动条、箭头、按钮边框的颜色：scroll-highlight-color 滚动条、箭头、按钮的3d光影颜色：scroll-3dlight-color 3D 阴影：scroll-darkshadow-color; 滚动区域的颜色：scroll-track-color; 箭头按钮箭头的颜色：scroll-arrow-color:第七章css应用DIV+CSS布局（重点、难点）一、 Id用于控制全局的改变或变动具有唯一性。区别ID和class:class用于局部，局部控制和变动。二在cs中若不设定width则默认为浏览器的整个宽。 默认为每个div都纵向排列不重复，且占据一行的距离。 区域的定位：position属性：absolute绝对（相对于整个浏览器而言）relative相对（相对于最近的div或其他容器而言） static以HTML默认位置来设置。Top , left单位：？乂或其他 三维空间z-index :【1,+8 ）数值越大越在上层。二、盒子模型：内容：content内边界：margin 夕卜边界：padding边框：border附加知识：1、浮动：float:浮动（主要有left和right）clear:清除浮动（主要可以清除left、right、both ）2、间距word-spacing:字母与字母之间的间距letter-spacing:文字和文字之间的距离line-height:行与行之间的间距3、DIV位置的控制position:位置方式（一般使用absolute :如果是一个div该属性值就是指的绝对位置，如果是多个DIV，该属性值指的是相对位置，里面的DIV相对外面DIV的距离）top:距离上面的距离left:距离左边的距离z-index:分层（数字越小越在下面）