HTML静态网页知识点

1、./default.htmldefault :缺省的意思Browser浏览器；Client客户端；Server服务器文中的XXX “黄色”标记为易错的，重要的第一章网页编程基础1、互联网？2、分别解释 tcp/ip; ;ftp;html;bbs;url;php ; css3、url的5种形式？4、服务器、服务端？客户端？5、超文本？超？6、网页的3种基本类型？7、一个完整的hml文件结构有多少个标记？分别是？8、文字的属性代码？9、注释标记？标题标记？换行？空格？段落？加粗？加斜？10、meta标记常用的刷新/语言编码代码？增加的：关键字、主题容、强行的调用网上最新版本、文档作者11、link

2、 标记？（）12、base标记？（文档原始地址）13、常见的html编辑器？答案：1、Internet2、tcp/ip:传输控制协议:超文本传输协议ftp:文件传输协议html:超文本标记语言bbs:电子公告板服务:W world wide web ）网维网或全球围网url:统一资源定位符php:一种用来制作动态网页的服务器端的脚本语言css层叠样式表（样式表）一种设计网页样式的标准3、file:文件地址（最后以单个文件结尾） ,4、server； client【B-B;C-C;B-C模式 B代表企业；C代表个人；B/S; C/S5、HT(hyper txet) , HL( hyper lin

3、k)6、静态网页 html ; css 动态网页 *.jsp, *.php *.asp(以do?开始的是Java平台编写的) 交互式网页 JavaScript7、4 个；分别是 8、文字 9、注释 ;标题：x 为 16,其中 h1 最大;换行：或 空格：段落;力口粗 ;力口斜 10、刷新：meta-equiv= refresh content=时间；网页地址文字编码：(简体中文：gb2312, utf-8是英语编码，繁体字编码：BIG5)关键字： 主题容： 强行调用网上的最新版本：mata-equiv= pragma content= no-cache”或文档11、12、（注意 XX 与 ad

4、dress 之间是空格。）13、常见的 html 编辑器：Dreamweaver、 Notepad+、 first page 2006、 we builder 2006（以前的 Dreamweaver 是 macromedia 公司的，现在隶属于 adobe 公司）第二章认识Dreamweaver1、?分支？ xhtml前的x表示什么？在Dreamweaver中什么键可实现预览功能？2、重做的快捷键？撤销的快捷键？打开时间轴的快捷键？目标地址？3、在a href=#点击这里/a中的#表示什么？4、在表格中，填充的含义是什么？间距指的是什么？答案：1、link, subject, x表示此网页符

5、合 web2.0的标准，F122、ctrl+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、

6、strong 力口强强调 /strong、em 强调 /em、；address显示网址、/address、code显示代码指令 /code6、滚动字幕、图片的所有属性代码？答案：1、nobr/nobr2、居中：center/center 段落缩进：blockquote/blockquote 原版显示标记：pre/pre 或 xmp/xmppre/pre可解析代码地完全显示区别：1xmp/xmp不可解析代码，绝对地原版显示3、p align=center/left/right /p4、 hr color= width= size= align=left/right/center “ noshad

7、e=noshade hr为单标签，若该属性中不设noshade,则默认为有阴影。5、容 6、滚动字幕：滚动字幕滚动图片（与滚动字幕类似）滚动图片地址：Friday 容1、写出背景的所有属性：（颜色、图片 ：平铺xy, x、v、居中、居右、居左，txet, link, alink, vlink）2、在滚动字幕中，设置鼠标移上去停止，移开后开始的命令。3、常用特殊符号：千分号，,&,空格，钱币符号，平方，立方 m3。4、上标，下标5、超格式。（包括在新窗口打开/在上一级打开/在自身打开覆盖原来的网页 /在整个窗口打开）。6、在相对路径中当前目录和上级目录分别用什么表示？7、外部（设置一个打开学校的

8、服务器）（思考：若要访问：开发 15班公用/参考页面/07.jpg直接编代码，怎么编？）8、锚点的语法代码？9、常用的网页图片的格式？分别支持？种色彩，分别解释10、插入图片的代码？（包括图像宽高，边框，水平/垂直空白，文字相对于图片基线的位置）（知识点：基线：baseline;宽，高只设一个，默认等比例放大，缩小；若同时设置宽高，图片就会变形。） 11、图片的超级代码？12、热点区域 （:shape.rectc/cricle/polyroods,href） 完全的格式13、图片的优化：低分辨率显示：lowsrc 文字替代图片：alt/tilte 14、外部超级（www 型，ftp 型，tel

9、net 型，news 型 mailto 型）答案：1、2、在命令里面增加：onmouseover=stop（） onmouseout=start（）3、千分号o；左尖括号:地址符 &: & 引号： 空格：钱币符号 ： 平方 M2： m3: 4、上标：下标：5、6、当前目录：./ 上级目录：./7、点击到学校服务器 （思考题：点击这里打开 07.jpg ）8、锚点 点击锚点后显示的容9、gif:图像交换格式，无损压缩图片格式，支持 256种色，jpg:联合照片专家组，有损压缩图片格式，支持 1670万种色10、11、12、 , ”一，一容 13、低分辨率：lowsrc 文字替代图片：14、.Si

10、na.（网址）ftp:/192. HYPERLINK ftp:/wish ftp:/wish mailto:XXX163.?subject=主题&*=抄送地址&bcc=暗送收件人&body=主题”单标签总结:水平分隔线：、插入图片标记：、换行标记或不换行标记：居中：center、区域：下划线：underline简称u图像文件夹：image10.22作业：1、建立站点，管理站点。2、制作AP-DIV,漂浮的图片或flash o其他资讯考试在人事局考试计算机职称，程序员中级，高级对工作有保障 第四章列表与表格 (所有容)1、有序列表(ordered list)标记？改变序号标记？有多少种类？指定序

11、号标记？列表项(list item)标记？详解：有序列表,改变序号标记：type有5种(1/a/A/i / I)、指定序号标记：strat=列表项：完整的格式为：2、无序列表(unordered list )标记？更改标记样式？其他无序列表？详解：无序列表 ,更改标记样式：type,其他无序列表：;前两者差不多，靠左完整的格式：- - 3、定义列表(definition list )标记？定义术语(definition term )即标题？定义说明(definition Description )即容详解：定义列表：,定义术语： ,定义容：4、表格的3个标记？表格的所有属性表格边框的属性：（外

12、/边框粗细，文字到边框的距离）？边框颜色？表格边框的显示状态（上、下、左、右、上下、左右、显示整个、整个不显示）表格宽、高（单 位为像素px和百分比）表格颜色？表格的水平位置（左、中、右）分隔线的显示状态（显示所有、 组与组、行与行、列与列、不显示所有）详解：3个标记是：表格 行 列表格的所有属性代码：XXXXXX5、表格行的属性（单行高度、边框颜色、背景颜色、单行文字的水平对齐方式左、中、右卜单行的垂直位置上、中、下） 详解：表格行的属性代码：XXXX6、单元格属性（单元格的宽、边框颜色、背景颜色、单元格文字的水平位置（左、中、右）/垂直位置（上、中、下）详解：单元格即（列）属性代码：文字

13、7、标题标记与属性，表标题标记详解： 标题标记： 表标题标记：8、单元格的合并（合并行/列）详解：合并行/歹U:rowspan/colspan均用在标签中。英语角：Menu :菜单， column :歹U,row ：行 cell：单元格，layout:布局第五章表单与框架（重点）1、表单标记？主要有几个属性？完整的格式？2、输入元素有？包含的所有？共9个属性全部写出来。3、多行文本标记？解释 wrap ?4、下拉选框的所有属性？答案：;主要有 3 个属性：action , method , name 和不常见的 onsubmit 完整的格式为：.：2、输入元素：input标记包含10个属性：

14、本框：密码： 单选按钮，单选框：提交：重置：多选按钮，复选框：按钮：图片按钮：隐藏域：10、打开、上传文件 实例：制作如下按钮：要求如图：解答:请先在第一个框中输入字符点击输入，然后点输出，输出框就会显示你刚才输的字符输入完整的代码如下:请先在第一个框中输入字符，点击输入，然后点输出，输出框就会显示你刚才输的字符 3、多行文本标记：textarea 其属性为： name,cols,rows,wrap , value其完整的格式为： 默认时显示的字详解：wrap:容超出文本右边界日的显示方式。wrap的值有3种：off （永久不换行）/virtual（自动换行，在提交数据的时候自动换彳T的地方没

15、有换行符physical （自动换行在提交数据时，换行符一起提交）4、下拉选框 select name=：框名字size=xmultiple= y详解：x为要显示的项目数，y为允许选择多行、允许列表项目被多选的项数：取值围为：（0, +8）框架frame框架集，框式支架：framesetFrameset标记的属性：f frameborder边框的显示：0:无，1:有border边框粗细：默认为 5px,单位：px （像素）bordercolor边框颜色：cols:rows： J均用“像素”和“百分比”分割，用“ *”表示剩下的。framespacing ：框架与框架间的间距I noresize

16、：设定框架不能调节，只要设定了前面，后面将继承。【考过】详解：窗口框架： 不能与 body 混用。水平分割：rows, eg:frameset rows= 30%,*“ 其中单位为 px或百分比（即占总窗口的百分比）垂直分害 U: cols, eg:i框架边框：border=x, x只能以px为单位，边框隐藏：frameborder= 0,可设置为：0,1 0为无，1 为有，不设则默认为有。它也可以用在 中，对单个框架有效，Frame标记的属性：Src： frame其作用是显示网页，用 src设置。，Scrolling=yes/no”有/无滚动条。若不设，则默认为“ auto自动”。I Nam

17、e:窗口名称。Iframe标记属性：N Name:名字Width :宽度Height:高度-Bgcolor：浮动窗口的背景颜色Align : （left/right/ middle ）水平对齐方式Valign： （top/middle/bottom）垂直对齐方式、Scrolling：（滚动条）在这里也可以用英语角动作：action 水平的：horizontal表单，形状：form垂直的：vertical方法：method框架（集）：frame （set）css样式表 （重点）文中“ _”表示空格Css概念：全称：Cascading style sheet （层叠样式表）所谓样式，就是网页里显示

18、图片文字的方式（文 字的颜色、背景等）；层叠指当cs定义的样式发生冲突时，将据层的先后来处理网页的容。独立网页的样式，方便批量管理。Cs样式用于控制页面的显示、页面的布局。二、 调用css的4种方式：嵌入式：写在应用样式（即HTML标记中）的标签中， 格式为： 文字 或这是 span 标t己 外联（外部样式表）：调一个外部的cs文档，其外部写在里面。格式为： 联式：把写在标记的， eg：* margin:。;Padding:。； Pbgcolor:red;font-size:20px; 导入式： import url（XX.css）;区别：y卜联（浏览时它是与网页同步运行，常用）1导入式（与页

19、面一起加载，当网速较慢时，可能显示不完全 HTML代码，导致白屏。） 外联的优点： 独立于html文件，便于修改。I 多个html文件可以引用一个样式表，保持了页面外观的一致性。1 样式表文件只需下载一次，就可以让其他到本样式表的页面使用。l 浏览器会先显示html的容，然后再根据样式表文件进行渲染，让访问者更快的 看到网页的容。选择符：（符合就近原则）HTML选择符（标签选择器）：eg: p, a, img, tr, td, table, body 等，其格式为：p, a, img, tr, td, table, body。类选择器：以“.”开头的，用class=调用，class可以在标签里

20、可写属性的任何地方使用。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颜色每种单色的取值围为：025

21、5 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 （跟数值；为加宽，”-“为缩紧） 文字间品巨：w

22、ord-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（下划线），overlin

23、e（上划线），linethrough（删除线），blink（文字闪烁） 英文大小写转换;text-transform【none/capitalize（每个单词首写字母转换为大写）/uppercase（全部转换为大写）/lowercase（全部转换为小写）】关于文本属性的具体代码：bodyfont-family:宋体”,X,XX,XX,sans-self;注意你要选择的字体为宋体，所以要引到起）.atext-indent:XXpx;text-align:left/center/left/justify;color:#XXX; .btext-decoration:none/underline/ov

24、erline/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 九级 力font-size:数值 /xx-small/x-s

25、mall/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;（in

26、side/outside）列表属性cs代码具体是：/*直接就是组合的写法*/#alist-style:none/url（XX.jpg） _outside _upper-roman ;color:#XXXX;/*代码中的;“二”分别表示不同类的属性隔开，和相同类的隔开 */九、模块边框的属性：分为 3大类：margin外边界、border边框、padding边界（边框到容的距离）Border-collapse:相邻的边框，是否合并显示。（separate：独立显示、collapse：合并显示）Border-top-width:Border-right-width:Boder-width Bord

27、er-bottom-width:其中 border-width 后面可跟（边框的宽） Border-left-width:数值/thin（细）/medium（中等）/thick（粗） Borderborder-top-color:（边框宽度） （边框颜色）border-right-color:border-color border-bottom-color:border-left-color:I（边框线型）b border-top-style:其中边框线型有：none/实线:solid /border-style border-bottom-style:小点虚线：dotted/ 大点虚线：da

28、shed/双直线：doubleborder-left-style:3D 凹线:grve/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-style的顺序，设置属性，中间用 _隔开:#2border:5px_red_solid;若要加其他属性则用“；”隔开。 margin后面跟数值（px）,表示模块与其他组件间的空白距离m

29、argin（外边界）后面跟pxD Padding盒子模型：厂 margin-top:上* margin-right:右 margin-bottom:下 margin-left:左p padding-top: padding-bottom:padding-left:i padding-right:l 统一设： margin:XXpx;margin:apx_bpx_cpx_dpx;贝顺序为：上、右、下、左 j margin:mpx_auto;则为上下均为 mpx, 左右 自动。设置与margin类似:统一设上右下左1上下，左右content:容 padding:容和边框之间的距离（上、右、下、左）

30、border:边框（border-width:边框粗细、border-color:边框颜色、border-style:边框样式）margin:盒子与盒子之间的距离（两个相邻的盒子都设置了该属性的时候，取较大的）十、 背景属性：背景颜色：background-color 其格式为：background-color:#00000 或颜色名称；背景图片：background-image 其格式为：background-image:url（路径）；背景图片并排设置：repeat（repeat /repeat-y/ no-repeat/repeat）背景图片位置定位：position :X,Y对应英文或

31、百分比。格式为： background -position : XX_XX; background-attachment:背景图片是否固定（属性值为fixed的时候，背景图片固定不动）其坐标为：左上中上 0%A 50%0%L +x右上*100%左中 no/ZH 1 | 0%上 cnoz+yFJ_L十 50%七I T 100%左卜0 0%中1石卜5 50% 100%0%top-left0%0%/u规 律规律.top-center top-right50%3“left-center050%0center-center50%503right-center100%10050bottom-left100% 】3“bottom-center100%bottom-right伪类和span行标记伪类有 a:link;/a:visited;/a