html知识点.doc

HTML标签及属性网页制作：标签：在制作网页中写命令单标签：双标签：属性：写在开始标签的里面，属性敲空格选择。每一个标签的属性个数是不同，每个属性都是对标签的具体的描述；标签+属性=完整命令一个网页的格式：网页标题 设置网页头部信息所有内容 网页身体信息 标致这所有中间的内容必须是html命令Shift+7为特殊符号Body:网页身体信息Background:网页背景Font:文字命令Size：文字字号Color:文字颜色Face:字体格式Br：换行Center:让内容居中A：点击内容跳转网页（超链接）Href：跳转网页的地址Marquee:滚动Scrollamount:滚动速度Behavior：滚动方式Width：滚动宽度Height：滚动高度Direction：滚动方向Img:图片Src:图片的地址Width：图片宽度Height：图片高度Border：图片边框Alt:图片底部文字，指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；Tittle:图片名字，提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；Bgsound:背景音乐Src:音乐文件的地址Loop:设置循环播放的次数，当值是-1或infinite时，表示无限循环播放Balance：声道，值为-1000到1000之间，负值将声音发送到左声道，正值将声音发送到右声道，0为立体 声。Volume：音量Video:视频Src：视频的位置Autoplay：自动播放Controls:控制条Height：视频高度Width：视频宽度Embed：播放器Src：文件位置Width：播放器宽度Height：播放器高度 或文字加粗文字倾斜 下划线 删除线 Ul：无序排列Type:列表形式，有三个选项：circle：空心圆 disc:实心圆 square:实心方块Li：列表选项ol:有序排列Type：列表形式，有三个选项：1，i，aStart：开始序列Li:列表选项表单：注册网页Form：表单Action:指定链接地址Method：提交方式（两种）Post：不会将表单所填内容显示在地址栏中Get：可以将表单所填内容显示在地址栏中Input：表单元素Type=”text”：文本框Size：文本框长度Maxlength:文本框允许输入的最大长度Value：文本框默认内容Name:给文本框命名Type=”password”：密码框Size：密码框长度Maxlength:密码框允许输入的最大长度Value：密码框默认内容Name:给密码框命名 Type=“radio”：单选框Name:起名字Checked：默认内容Type=“checkbox”：多选框Name:起名字Checked：默认内容Type=“file“：上传域Name:起名字 Select：下拉框，下拉列表也可以进行多选操作，在标签中设置multiple=multiple属性，就可以实现多选功能， Name:起名字Option：选项Selected：默认选中 Textarea：文本域Rows：文本域高度Cols:文本域高度Type=”submit“：提交按钮（跳转网页）Value：默认提交Name:起名字Type=”reset“：重置按钮（跳转网页）Value：默认重置Name:起名字Type=”image“：图片按钮Src:图片地址Width：图片宽度Height：图片高度Type=”hidden“ :隐藏域（隐藏起来的文本框）Type=”button“：普通按钮Value：默认普通按钮Hr:横线Color：横线颜色Size：横线粗细Width：横线宽度P:段落Pre：预处理（工具中的空格和回车起作用）Sub:下标签Sup:上标签表格：局部排版Table：表格Align:表格整体水平方向对齐方式（与内容无关）Background：表格背景图片Bgcolor：表格背景颜色Border：表格边框Bordercolor:表格边框颜色Bordercolordark：表格右下边框颜色Bordercolorlight：表格左上边框颜色Width：表格宽度Height：表格高度Cellpadding:表格内容距边框距离Cellspacing；表格边框间距Caption：表格标题Align:标题位置 Tr：行Align：该行内容水平方向对齐方式（左、中、又）Valign:该行内容垂直方向对齐方式（上、中、下）Bgcolor:该行背景颜色Height：行高Td:格Align:该格内容水平方向对齐方式（左、中、右）Valign:该格内容垂直方向对齐方式（上、中、下）Bgcolor：该格的背景颜色Width：该列高度Height：该行高度Colspan:列合并（左右合并），找到前面一格，写属性，删除后面一格Rowspan:行合并（上下合并），找到前面一格，写属性，删除后面一格与一样，可以让内容加粗居中。网页分割（框架）：把body删掉Frameset:外框架Rows:页面水平方向分割Cols:页面垂直方向分割Border：变框Frame：引入页面Src：引入页面的路径Noresize:固定框架【注释】若把某一个区域再次进行分割，把该区域对应的frame标签删掉，添加frameset分割页面，再进行引入页面Iframe:内框架Src：框架默认内容Width：内框架宽度Height：内框架高度Frameborder：边框Name:名字如何设置锚点？第一种：锚点人的一生应该这样度过，当他回忆往事的时候，不会因碌碌无为而羞愧，也不会因虚度年华而悔恨。第二种：1. html: 锚点2. html: 挺住，就意味这一切。里尔克如是说。 人生几何，去日苦多。何以解忧，唯有杜康。CSS:层叠样式表（控制网页的样式）网页引入的方式1.内联样式表：在所有的标签中都有style（css的属性）属性，给该标签添加css的内容。2. 嵌入样式表 css内容3. 链接样式表CSS使用方式选择器：css中对网页哪些标签进行选择1. 标记选择器：对网页中所有该标记进行选择标签名2. 关联类选择器：对网页中的该标签并且class=a的标签进行设置标签名.a3. 独立类选择器：对网页中class=b的标签进行设置.b4. ID选择器：对网页中ID=c的标签进行设置#c【注意】class和ID禁止用数字或数字为开头起名字:层标签，一行一列的表格，一个div默认占一行CSS属性及属性值Border:边框粗细（1px）;边框实线（solid）；边框颜色Width：边框宽度Height：边框高度Font-size；文字字号Font-family:文字字体Color：文字颜色Font-weight：设置文字是否加粗Border-bottom：下边框线Bottom-top：上边框线Bottom-left：左边框线Bottom-right：右边框线 与border的属性值相似。Background：背景图或背景颜色Float：left or right div对齐方式，左或者右，一行当中放多个div，每一个div都需要加对齐方式Float,并且用一个大div把该行多个小div包起来 Margin-top：该div距上边一个div的距离Margin-left：该div距左边一个div的距离Margin-right：该div距右边一个div的距离，右边必须有东西Margin-bottom：该div距下边一个div的距离，下边必须有东西Margin：auto该div居中，与内容无关Text-align:left/center/right 内容水平方向对齐方式，左中右 text-indent：内容缩进距离Line-height：内容中心点距上距离Cursor： 鼠标显示形式Text-decoration：添加下划线 上划线 删除线 没有线 Margin：属性在一个声明中设置所有外边距属性。Padding：属性设置元素内边距(空白)。text-transform：属性控制文本的大小写font：first-child 选择网页中第一个font标签 a:link 连接前的样式a:visited连接后的样式a:hover 连接时鼠标指上时的样式a:active 连接时鼠标按下时的样式overflow:hidden; scroll 出现滚动条,hidden 隐藏滚动条.aborder:1px solid #006666;width:40px;height:18px;overflow:hidden; 出现滚动条.a:hoverheight:90px;本来.a这个div的高度是18，而且把该div的内容在滚动条中隐藏一部分，.a:hover ：伪类选择器：当把鼠标指在.a这个div上时，把.a这个div的高度改成90position:absolute;绝对位置：该div上浮一层:如果有2个div，是上下排版，第一个上浮，会不占原来的位置，下面的div自动补上面的置。z-index:n div上浮n层Js：javascript：理解+练习，是面向对象编程的脚本语言脚本语言：是一种运行在客户端的语言。程序语言：在服务端运行引入方式：1：内联式：2：嵌入式：Js内容3：连接式：Js：语法：一句话代表一条命令，每句命令写完后，需要用分号（；）结束变量相当于容器，放东西（放的是：数字，字符串，布尔），变量是程序语言中的最基本单元。声明变量： var 变量名 = 值；数据类型：数字类型 字符串类型(用“ ”表示) 布尔类型（用“true或false”表示）【注意】1：在声明变量时，变量的数值一定要清楚是什么数据类型； 2：变量名命名规则(即标识符的命名规则)：以字母,$,下划线开头，后面可以有数字，字母，$,下划线 3：变量名不能重复；document.write(内容); 在网页的body部分写内容；【例子】var b =12345;document.write(b);document.write(“b”);document.write(b);/注意输出语句中，输出的是变量b,即：12345document.write(b);/注意输出语句中，输出的内容，即：b 【例子】var a = 345;var b = “acd”document.write(a+b);/2个变量拼接，因为b是字符串，所以是拼接,即：345+acddocument.write(a+a);/2个变量求和，因为a是数字，所以是求和,即：690*document.write(a+b);/“a+b”是个字符串内容,即：a+b*document.write(a+a);/“a+a”是个字符串内容，即：a+ajs注释方式 1：/ 单行注释 2：/* */ 多行注释 3：/* */ 多行注释 运算符：算术运算符：操作数字，结果数字+ - * / % + - += -= *= /= %= +:求和（2个数字相加求和，和数学一样，） 拼接（字符串和任何类型的变量拼接）-：和数学一样*：和数学一样/：和数学一样%：取余或取模，即：求余数【前小后大，结果是前面的数字；前大后小，需要先算除法，求余数】【注释】+：在变量名后面：永远都是先操作（输出或赋值），后+1变量+：1:var a1 = 5;a1+;/当a1+是单独一句话时，意思就是a1=a1+1document.write(a1);2:var a2 = 5; document.write(a2+);/如果a2+放在输出语句中，意思是先输出a2; (输出完以后，再执行a2=a2+1)3:var a3 = 2;var a4 = 1;a4 = a3+;/ 先执行a4=a3:把a3的值给a4,再执行a3=a3+1document.write(a3);document.write(a4);*4：var a7 = 1;a7 = a7+;/不执行 document.write(a7); -：和+完全一样，-11:var a1 = 5;a1-;/当a-是单独一句话时，意思就是a1=a1-1document.write(a1);2:var a2 = 5; document.write(a2-);/如果a2-放在输出语句中，意思是先输出a2, (输出完以后，再执行a2=a2-1)3:var a3 = 2;var a4 = 1;a4 = a3-;/ 先执行a4=a3:把a3的值给a4,再执行a3=a3-1document.write(a3);document.write(a4);*4：var a7 = 1;a7 = a7-;/不执行 document.write(a7);【例子】var b1 = 2;var b2 = 5;document.write(b1);document.write(b2);+=： b2+=b1; 即：b2=b2+b1 -=： b2-=b1; 即：b2=b2-b1*=： b2*=b1; 即：b2=b2*b1 /=： b2/=b1; 即：b2=b2/b1%=： b2%=b1; 即：b2=b2%b1关系运算符：操作数字，结果是布尔（boolean） = != =【=和=的区别】= 是判断是否等于 a=b 判断a和b是否相等 相等结果为true 不等结果为false=：赋值 a=b 把b的值赋给a逻辑运算符：操作布尔，如果逻辑运算符运算左边时，能够决定结果的时候，右边不运算！ & | ！&：短路与：如果两边同时为true，结果为true，其他情况全是false|： 短路或：如果两边同时为false，结果为false，其他情况全是true！： 逻辑非：逻辑取反 【例子】var a = 1;var b = 1;var c = true;var d = false;var e = a+b=a+ & a=b-; / 2=1(a=a+1) & a=b-/true(a=a+1) & a=b- (21) (b=b-1)*a+b与a+比较时或a与b-比较时，a+和b-不进行运算document.write(e);/truedocument.write(a);/2document.write(b);/0【例子*】1、 document.write(true & true & 1); /同级运算 从左到右2、 var a = 1;document.write(true | 2 | a+1); /同级运算 从左到右 true | 2 结果转化为十进制数字3（3可以当成true），右边不算 (记得一定要转化成十进制数字) 【注意】算术运算符可以连用，先* / % ， 后 + -关系运算符不能连用。逻辑运算符可以连用：先非，再与，最后或。算术和关系和逻辑可以连用： 先算术，再关系，最后逻辑。位运算符：可以运算数字，也可以运算逻辑 & | &： 按位与 ， 上下对齐，上下同时为1结果为1 其他全为0，最后转换成十进制； |： 按位或 ， 上下对齐，上下同时为0结果为0 其他全为1，最后转换成十进制；： 按位非 ， 先取负数，再-（减）1 ，或者 先+1 再取负值；： 按位异或 ， 上下对齐，上下内容相同时为0，不相同时为1；如果运算数字：先把数字转换成二进制。【例子】var a = 3; / 0 0 1 1（位数不够的依次用零补齐）var b = 9; / 1 0 0 1 document.write(a & b); / 0 0 0 1var a = 33; / 1 0 0 0 0 1var b = 44; / 1 0 1 1 0 0document.write(a | b); / 1 0 1 1 0 1 var a = -99; document.write(a);/先+1，再取负值var a = 33; /1 0 0 0 0 1var b = 44; / 1 0 1 1 0 0document.write(ab); / 0 0 1 1 0 1 按位运算符操作数字结果为十进制数字按位运算符操作逻辑结果为十进制数字运算符按操作类型分为：算术运算符 关系运算符 逻辑运算符 位运算符按操作变量个数分为：一元（目）运算符：+ - ！ 二元（目）运算符：剩下所有 三元（目）运算符： ? ：表达式1 ? 表达式2 ： 表达式3（问号或冒号前后必须要有表达式。）先计算表达式1，如果表达式1的结果是true，那么该三目运算符结果是表达式2；如果表达式1的结果是false，那么该三目运算符结果是表达式3。表达式：用变量和操作符连接的算式；一个变量就是最简单的表达式；表达式不能单独存在，必须赋值或者输出。在判断真假的时候，可以把非0的数字当成true ，0代表false。【例子】var c = 1;var d = 2;var x = c+d*c/d%c+d+5 ? c : d; /8?1:2 document.write(x); 即结果为1在运算时，true当成1，false当成0。【例子】var a = true;var b = false;var c = 1;var d = 2;document.write(a & b); /结果为0 代表falsedocument.write(a | b); /结果为1 代表truedocument.write(b); /b是false,也就是0 先-0=0 0-1=-1 或者0+1=1 -1document.write(a); /a是true,也就是1 先1取负即-1 -1-1=-2 或者1+1=2 -2document.write(ab); /上下对齐，上下同内容相同时为0，不相同时为1；1与0不相同，即结果为1。document.write(a+b); /在运算时，true当成1 ，false当成0 十进制数字：阿拉伯数字0-9。二进制：只是由0 与 1组成。程序中全是10进制参与运算【例子】document.write(0x17);/输出的是10进制数字 ， 需要把16进制转换成10进制document.write(011);/输出的是10进制数字 ， 需要把8进制转换成10进制注释：0x，零X代表十六进制数字；0，零代表八进制数字。程序流程控制：不一定非要一句一句往下运行；第一种switch（表达式） switch：选择执行语句case 数值1：语句；break;case 数值2：语句；case 数值3：语句；break;default：语句；case 数值4：语句；break;1：先计算表达式；然后在case中找相等的值，找到之后，从该句向后运行，直到大括号结束；2：如果没有找到，则找default：从default开始执行一直到大括号结束；3：无论是1还2哪种情况，在执行过程中，碰到break，则立刻结束switch语句。Default：只能有一个，可以写在任意位置；Break：可以有多个，只能写在每种情况语句的最后一句；【例子】var a = a;switch(a+bc)case abc:document.write(111);break;case aa:document.write(222);default:document.write(ddd);break;case 1:document.write(333);break;case 1.5:document.write(444);case true:document.write(555);break;第二种1：if(表达式)语句组；计算表达式，如果表达式结果为真（true），执行大括号内容，如果表达式为假（false），不执行大括号【例子】var a = 19;if(a1)document.write(111);if(a100)document.write(333);if(a+1)document.write(555);if(a -10)document.write(777);if(a -11)document.write(999);2：if(表达式)语句组；else语句组；计算表达式，如果表达式结果为真（true），执行大括号内容，如果表达式为假（false），执行else内容【例子】1、var a=15;if(a10)document.write(111);elsedocument.write(222);2、var b=7;if(b10)document.write(111);elsedocument.write(222);3：if(表达式)语句组；else if(表达式)语句组；else if(表达式)语句组；else if(表达式)语句组；else if(表达式)语句组；.从上到下依次判断表达式，谁先成立，则执行大括号里面内容，其他都不执行；如果都不成立：则什么都不执行！【例子】var a=75;if(a80)document.write(IPHONE);else if(a70)document.write(ANYCALL);else if(a60)document.write(OPPO);else if(a50)document.write(NOKIA);4：if(表达式)语句组；else if(表达式)语句组；else if(表达式)语句组；else if(表达式)语句组；else语句组；.从上到下依次判断表达式，谁先成立，则执行大括号里面内容，其他都不执行；如果都不成立：则执行else【例子】var a=75;if(a80)document.write(IPHONE);else if(a70)document.write(ANYCALL);else if(a60)document.write(OPPO);elsedocument.write(NOKIA);注意：1.else后面没有表达式2.如果以上4种情况去掉任意的大括号！则把语句组，改成语句（一句话）；【例子】var a= 25if(a10)document.write(111); /没有大括号，则if后面只能跟一句话 if(a20)document.write(111);/111是属于判断语句的document.write(222); /222不属于判断， 任何情况下都会输出222if(a20);/因为这里有分号结束了，相当与if（a20）什么都没有document.write(111);/不属于判断if(a20)document.write(444);else if(a30)document.write(555);document.write(777); 语法错误 整个代码块不执行else if(a40)document.write(666);document.write(888);var b = 1;if(b+1)document.write(111);if(b-)/因为-在变量后面，先执行，后-1document.write(222);/属于判断语句document.write(b);/不属于判断语句，始终会执行；if(b)/b=0,不执行document.write(333);var a = 1;if(a10) /a10不成立 所以执行elseif(a0)document.write(111);elsedocument.write(222);elseif(a5) /a5不成立 所以执行elsedocument.write(333);elsedocument.write(444);/以上为if else嵌套，可以套无数层var a = 75; if(a90)document.write(IPHOE);else if(a80)document.write(ANYCALL);else if(a70)document.write(HUAWEI);else if(a60)document.write(NOKIA);elsedocument.write(KO); 将上面的改为下面的嵌套形式即为：if(a90)document.write(IPHOE);elseif(a80)document.write(ANYCALL);elseif(a70)document.write(HUAWEI);elseif(a60)document.write(NOKIA);elsedocument.write(KO);循环1：循环执行某内容for(声明变量;循环条件;变量改值)循环的内容；第一步，执行声明变量，第二步，判断循环条件是否为true，如果为真，则第三步执行循环内容；如果第二部判断条件为false，则跳出结束循环；第三部执行完成后，第四步，执行变量改值，在执行第二步-第三步-第四步.也可以没有大括号，和if没有大括号的意思一样声明变量：js中可以在大括号外面用，java只能在for循环里面用！要求：对for不熟时，把每一步执行什么写出来【例子】for(var a=1;a10;a+)document.write(a);/a=1 a10true a/a=2 a10true a /a=3 a10true a/a=4 a10true a/a=5 a10true a/a=6 a10true a/a=7 a10true a/a=8 a10true a/a=9 a10true a/a=10 a10false 结束for(var a=1;a10;a+)document.write(a);/a=1 a10true 1/a=2 a10true 2 /a=3 a10true 3/a=4 a10true 4/a=5 a10true 5/a=6 a10true 6/a=7 a10true 7/a=8 a10true 8/a=9 a10true 9/a=10 a10false 结束for(var a=1;a10;a+)/没有大括号，则后面只有一句话属于循环document.write(a);/a=1 a10true 1/a=2 a10true 2 /a=3 a10true 3/a=4 a10true 4/a=5 a10true 5/a=6 a10true 6/a=7 a10true 7/a=8 a10true 8/a=9 a10true 9/a=10 a10false 结束var b = 1;for(var a=1;a7;a+)a+;b=a+;a+=b;b-;document.write(a);document.write(b);/a=1 b=1 a3true a+(2) b=a+(b=2 a=3) a+=b(a=a+b=5) b-(1) a=5 b=1/a=6 b=1 a7true a+(7) b=a+(b=7 a=8) a+=b(a=a+b=15) b-(6) a=15 b=6for(var a=1;a10;a+)/a=1 a10true 大括号里没有内容/a=2 a10true 大括号里没有内容 /a=3 a10true 大括号里没有内容/a=4 a10true 大括号里没有内容/a=5 a10true 大括号里没有内容/a=6 a10true 大括号里没有内容/a=7 a10true 大括号里没有内容/a=8 a10true 大括号里没有内容/a=9 a10true 大括号里没有内容/a=10 a10false 结束document.write(a);for(var a=1;a10;a+);/a=1 a10true 没有大括号即：大括号里也没有内容/a=2 a10true 没有大括号即：大括号里也没有内容 /a=3 a10true 没有大括号即：大括号里也没有内容/a=4 a10true 没有大括号即：大括号里也没有内容/a=5 a10true 没有大括号即：大括号里也没有内容/a=6 a10true 没有大括号即：大括号里也没有内容/a=7 a10true 没有大括号即：大括号里也没有内容/