下载文档原格式
html+css总结HTML (Hypertext Markup Language) 和 CSS (Cascading Style Sheets) 是两个最基础的 Web 技术，它们共同构成了网页的设计和开发基础。
HTML 是一种标记语言，用于创建 Web 页面的结构，它描述了页面上的内容和画面组织的基础；CSS 则是一种样式表语言，用于控制 Web 页面的外观和布局，它描述了页面的样式和排版目标。
HTML 和 CSS 在 Web 开发中都有着广泛的应用和重要作用，尤其是在现代 Web 设计和开发领域中。
通过 HTML 的标签，我们可以轻松地定义各种元素，如文本、图像、链接、表单等等，同时还可以将它们组织成一个整体，形成层次结构，便于浏览器解析并展示页面内容；而 CSS 则提供了丰富的样式表属性，包括颜色、字体、宽度、高度、边距、浮动等等，通过这些属性的设置，我们可以灵活地控制Web 页面的布局、配色和风格。
除此之外，HTML 和 CSS 还具有以下一些特点：1. 易学易用。
HTML 和 CSS 是非常简单、易学、易用的技术，即使是初学者也可以很快掌握。
2. 横跨所有设备。
HTML 和 CSS 可以运行在几乎所有现代 Web设备上，包括电脑、平板、手机、电视等等，从而保证了 Web 页面的可访问性。
3. 维护性高。
HTML 和 CSS 可以使得 Web 页面的设计和开发过程更加模块化，结构更加清晰，代码更加易于维护。
4. 实时响应。
通过使用 HTML 和 CSS 编写的 Web 页面，可以自动适应不同的窗口大小和分辨率，从而保证了网页的实时响应性。
总之，HTML 和 CSS 的重要性不言而喻，无论是 Web 设计师还是开发者，都必须掌握这两种技术，并不断精进自己的技能。
在未来，HTML 和 CSS 也将继续演化和发展，为 Web 设计和开发带来更多的机会和挑战。
HTML语言剖析Html简介-目录全写： HyperText Mark-up Language译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。
由文字（字母，数字、标点符号）及标签组合而成。
任何文字编辑器都可以，这里推荐用：Dreamweaver。
1. Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；►纯文本文件，可以使用各种文本编辑器编写； (Dreamweaver是首选)►文件扩展名： .htm 或 .html；►html文件必须在Web浏览器上运行；（运行环境）►具有跨平台性。
2.HTML语法结构：►HTML文件是由一系列的元素和标签（tag）组成的；►元素：网页中的内容；►标签：用于规定元素的属性和它在文件中的位置；►格式：<元素名称属性="值"...>元素资料</元素名称>,<元素名称属性="值"...> ►不区分大小写。
3.HTML文件结构：►起始标记：<html> </html> 表示HTML网页的起始；►文件头部：<head> </head> 设置初始化文档信息和文档管理标注；►文件主体：<body> </body> 设置格式化的浏览器显示的文档（内容）；►注释部分：<!-- --> 可以放在任何位置；►<! >※例:<html><head><title>Html简介</title><meta http-equiv="Content-Type" content="text/html;charset=gb2312"></head><body bgcolor="#FFFFFF" text="#000000"><!--网页内容--></body></html>⏹标签写法：►任何标签皆由"<>"所包含，如 <b>►标签名与小于号之间不能留有空白字符。
Html+Css学习总结 HTML（Hypertext Markup Language）翻译过来就是超⽂本标记语⾔。
超⽂本即超越⽂本，可以显⽰⽂字图⽚视频⾳频，最重要的是可以包含超链接。
标记语⾔：当我们把特定的英⽂单词放⼊到我们的标记（单标记:</>、双标记<></>）当中，我们的标记具有了新的语义,⽽由具有特定语义的标记的规范，我们可以称之为标记语⾔。
当我们将英语单词放⼊到标记当中，这时候我们可以称之为标签（单标签、双标签）。
Html基本结构<!DOCTYPE html<!--⽂档头（类型）声明不是标签，代表的是 HTML 5 的标准--><html><!--根元素所有的标签都要放在根元素中--><head><!--头部⾥⾯包含的绝⼤部分内容都是不可见的，⾥⾯的内容主要⽤于辅助页⾯的展⽰--><title>页⾯标题</title><!-- 定义页⾯标题 --><meta charset="utf-8"/><!-- 定义页⾯的元数据 --><!-- chasrt="utf-8" 针对搜索引擎和解析格式的属性 --></head><body><!--⾥⾯包含的绝⼤部分在页⾯中都是可见的，主要⽤于搭建 HTML 结构--></body></html> 其中需要注意的就是<meta charset="utf-8"/>这⾏代码，UTF-8（8-bit Unicode Transformation Format）是⼀种针对Unicode的可变长度字符编码，也是⼀种，⼜称万国码。
由Ken Thompson于1992年创建。
html和css期末总结在过去的一个学期里，我学习并使用了HTML和CSS这两门技术，对于网页设计和开发有了更深入的了解和掌握。
本文将对我在学习HTML和CSS过程中的经验和收获进行总结。
首先，HTML是一种标记语言，用于描述网页的结构和内容。
在学习HTML的过程中，我了解了HTML的基本语法和标签的用法。
通过使用不同的HTML标签，我可以创建标题、段落、超链接、图像等网页元素。
此外，我还学习了HTML表单的设计和处理，以及如何在网页中嵌入音频和视频。
在实践中，我发现使用语义化的HTML标签可以提高网页的可读性和可访问性。
通过使用合适的标签，可以向搜索引擎和屏幕阅读器提供更好的信息，使网页更易于被理解和使用。
我也学会了使用HTML5的一些新特性，如新的表单元素、多媒体标签和语义化标签，以提升网页的功能和用户体验。
另一方面，CSS是一种样式表语言，用于控制网页的外观和布局。
在学习CSS的过程中，我了解了CSS的基本语法和选择器的用法。
通过定义不同的样式规则，我可以改变网页元素的外观，如字体、颜色、边框和背景等。
我还学习了CSS的盒模型和布局技术，以调整和控制网页的版面和结构。
在应用CSS样式时，我发现使用外部样式表可以提高代码的可维护性和重用性。
通过将CSS代码独立于HTML文档，我可以在多个网页中共享同一套样式规则，从而节省了代码量并简化了网页维护的工作。
我也学会了使用CSS预处理器，如Sass和Less，以提高CSS代码的编写效率和可读性。
除了基本的HTML和CSS知识外，我还学习了一些与网页开发相关的技术和工具。
比如，我学习了响应式网页设计的原理和实现方法，以确保网页在不同设备和屏幕尺寸下的良好展示。
我还学习了网页性能优化的技巧和工具，以提高网页加载速度和用户体验。
在学习和应用HTML和CSS的过程中，我发现实践是最好的学习方式。
通过完成一些小型的项目和练习，我能够将理论知识转化为实际能力。
html，css学习实践总结⽹页的布局⽅式1.什么是⽹页的布局⽅式?⽹页的布局⽅式其实就是指浏览器是如何对⽹页中的元素进⾏排版的1.标准流(⽂档流/普通流)排版⽅式1.1其实浏览器默认的排版⽅式就是标准流的排版⽅式1.2在CSS中将元素分为三类, 分别是块级元素/⾏内元素/⾏内块级元素1.3 在标准流中有两种排版⽅式, ⼀种是垂直排版, ⼀种是⽔平排版垂直排版, 如果元素是块级元素, 那么就会垂直排版⽔平排版, 如果元素是⾏内元素/⾏内块级元素, 那么就会⽔平排版2.浮动流排版⽅式2.1浮动流是⼀种"半脱离标准流"的排版⽅式2.2浮动流只有⼀种排版⽅式, 就是⽔平排版. 它只能设置某个元素左对齐或者右对齐注意点:1.浮动流中没有居中对齐, 也就是没有center这个取值2.在浮动流中是不可以使⽤margin: 0 auto;特点:1.在浮动流中是不区分块级元素/⾏内元素/⾏内块级元素的⽆论是级元素/⾏内元素/⾏内块级元素都可以⽔平排版2.在浮动流中⽆论是块级元素/⾏内元素/⾏内块级元素都可以设置宽⾼3.综上所述, 浮动流中的元素和标准流中的⾏内块级元素很像3.定位流排版⽅式浮动元素的脱标1.什么是浮动元素的脱标?脱标: 脱离标准流当某⼀个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了⼀样, 这个就是浮动元素的脱标2.浮动元素脱标之后会有什么影响?如果前⾯⼀个元素浮动了, ⽽后⾯⼀个元素没有浮动 , 那么这个时候前⾯⼀个元就会盖住后⾯⼀个元素浮动元素的排序规则1.浮动元素排序规则1.1相同⽅向上的浮动元素, 先浮动的元素会显⽰在前⾯, 后浮动的元素会显⽰在后⾯1.2不同⽅向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动1.3浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定浮动元素贴靠现象1.什么是浮动元素贴靠现象?1.如果⽗元素的宽度能够显⽰所有浮动元素, 那么浮动的元素会并排显⽰2.如果⽗元素的宽度不能显⽰所有浮动元素, 那么会从最后⼀个元开始往前贴靠3.如果贴靠了前⾯所有浮动元素之后都不能显⽰, 最终会贴靠到⽗元素的左边或者右边浮动元素字围现象1.什么是浮动元素字围现象?浮动元素不会挡住没有浮动元素中的⽂字, 没有浮动的⽂字会⾃动给浮动的元素让位置,这个就是浮动元素字围现象1.企业开发中什么时候使⽤标准流什么时候使⽤浮动流?垂直⽅向使⽤标准流, ⽔平⽅向使⽤浮动流2.拿到⼀个很复杂的界⾯如何⼊⼿?2.1从上⾄下布局2.2从外向内布局2.3⽔平⽅向可以先划分为⼀左⼀右再对左边或者右边进⾏进⼀步布局浮动元素⾼度问题1.在标准流中内容的⾼度可以撑起⽗元素的⾼度2.在浮动流中浮动的元素是不可以撑起⽗元素的⾼度的清除浮动定义⼀个类.clear:after{display: block;content: '';clear: both;}1.清除浮动的第⼀种⽅式给前⾯⼀个⽗元素设置⾼度注意点:在企业开发中, 我们能不写⾼度就不写⾼度, 所以这种⽅式⽤得很少1.清除浮动的第⼆种⽅式给后⾯的盒⼦添加clear属性clear属性取值:none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)left: 不要找前⾯的左浮动元素right: 不要找前⾯的右浮动元素both: 不要找前⾯的左浮动元素和右浮动元素注意点:当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效1.清除浮动的第三种⽅式隔墙法2.外墙法2.1在两个盒⼦中间添加⼀个额外的块级元素2.2给这个额外添加的块级元素设置clear: both;属性注意点:外墙法它可以让第⼆个盒⼦使⽤margin-top属性外墙法不可以让第⼀个盒⼦使⽤margin-bottom属性3.内墙法3.1在第⼀个盒⼦中所有⼦元素最后添加⼀个额外的块级元素3.2给这个额外添加的块级元素设置clear: both;属性注意点:内墙法它可以让第⼆个盒⼦使⽤margin-top属性内墙法它可以让第⼀个盒⼦使⽤margin-bottom属性4.外墙法和内墙法区别?外墙法不能撑起第⼀个盒⼦的⾼度, ⽽内墙法可以撑起第⼀个盒⼦的⾼度5.在企业开发中不常⽤隔墙法来清除浮动伪元素选择器1.什么是伪元素选择器?伪元素选择器作⽤就是给指定标签的内容前⾯添加⼀个⼦元素或者给指定标签的内容后⾯添加⼀个⼦元素2.格式:标签名称::before{属性名称:值;}给指定标签的内容前⾯添加⼀个⼦元素标签名称::after{属性名称:值;}给指定标签的内容后⾯添加⼀个⼦元素1.清除浮动的第四种⽅式利⽤伪元素选择器清除浮动本质上就是内墙法, 只不过是直接通过CSS代码添加了内墙, 其它特性和内墙法都⼀样注意点:IE6中不⽀持这种⽅式, 为了兼容IE6必须给前⾯的盒⼦添加*zoom:1;属性清除浮动⽅式五1.overflow: hidden;作⽤1.1可以将超出标签范围的内容裁剪掉1.2清除浮动1.3可以通过overflow: hidden;让⾥⾯的盒⼦设置margin-top之后, 外⾯的盒⼦不被顶下来定位流定位流1.定位流分类1.1相对定位1.2绝对定位1.3固定定位1.4静态定位2.什么是相对定位?相对定位就是相对于⾃⼰以前在标准流中的位置来移动3.相对定位注意点3.1相对定位是不脱离标准流的, 会继续在标准流中占⽤⼀份空间3.2在相对定位中同⼀个⽅向上的定位属性只能使⽤⼀个3.3由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/⾏内元素/⾏内块级元素3.4由于相对定位是不脱离标准流的, 并且相对定位的元素会占⽤标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局4.相对定位应⽤场景4.1⽤于对元素进⾏微调4.2配合后⾯学习的绝对定位来使⽤定位流-绝对定位1.什么是绝对定位?绝对定位就是相对于body来定位2.绝对定位注意点2.1绝对定位的元素是脱离标准流的2.2绝对定位的元素是不区分块级元素/⾏内元素/⾏内块级元素绝对定位-参考点1.规律1.默认情况下所有的绝对定位的元素, ⽆论有没有祖先元素, 都会以body作为参考点2.如果⼀个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流的那个祖先元素作为参考点2.1只要是这个绝对定位元素的祖先元素都可以2.2指的定位流是指绝对定位/相对定位/固定定位2.3定位流中只有静态定位不⾏3.如果⼀个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, ⽽且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点绝对定位-注意点1.如果⼀个绝对定位的元素是以body作为参考点, 那么其实是以⽹页⾸屏的宽度和⾼度作为参考点, ⽽不是以整个⽹页的宽度和⾼度作为参考点2.⼀个绝对定位的元素会忽略祖先元素的padding绝对定位-⼦绝⽗相相对定位弊端:相对定位不会脱离标准流, 会继续在标准流中占⽤⼀份空间, 所以不利于布局界⾯绝对定位弊端:默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度⾼度的变化⽽变化⼦绝⽗相⼦元素⽤绝对定位, ⽗元素⽤相对定位绝对定位-⽔平居中1.如何让绝对定位的元素⽔平居中只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的 margin-left: -元素宽度的⼀半px;定位流-固定定位1.什么是固定定位?固定定位和前⾯学习的背景关联⽅式很像, 背景定位可以让背景图⽚不随着滚动条的滚动⽽滚动, ⽽固定定位可以让某个盒⼦不随着滚动条的滚动⽽滚动注意点:1.固定定位的元素是脱离标准流的, 不会占⽤标准流中的空间2.固定定位和绝对定位⼀样不区分⾏内/块级/⾏内块级3.IE6不⽀持固定定位定位流-z-index属性1.什么是z-index属性?默认情况下所有的元素都有⼀个默认的z-index属性, 取值是0.z-index属性的作⽤是专门⽤于控制定位流元素的覆盖关系的1.默认情况下定位流的元素会盖住标准流的元素2.默认情况下定位流的元素后⾯编写的会盖住前⾯编写的3.如果定位流的元素设置了z-index属性, 那么谁的z-index属性⽐较⼤, 谁就会显⽰在上⾯注意点:1.从⽗现象1.1如果两个元素的⽗元素都没有设置z-index属性, 那么谁的z-index属性⽐较⼤谁就显⽰在上⾯1.2如果两个元素的⽗元素设置了z-index属性, 那么⼦元素的z-index属性就会失效, 也就是说谁的⽗元素的z-index属性⽐较⼤谁就会显⽰在上⾯。
1.基本结构这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。
<html><head>...</head><body>...</body></html>2.语义化。
那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）语义化的好处：1.更容易被搜索引擎收录。
2.更容易让屏幕阅读器读出网页内容。
3.如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。
语法：<p>段落文本</p>4.我们将使用<hx>标签来制作文章的标题。
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。
并且依据重要性递减。
<h1>是最高的等级。
语法：<hx>标题文本</hx> (x为1-6)5.想在一段话中特别强调某几个文字这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。
并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。
语法：<em>需要强调的文本</em> <strong>需要强调的文本</strong>6.<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
语法：<span>文本</span>7.想在你的html中加一段引用比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。
课程安排Html+css 网页版游戏制作花生壳将内网IP映射到外网IP 飞秋局域网即时通讯Httpwatch 插件一，Html开发工具记事本Zend studioEditplus vimDwFrontpage其他二，html的基本结构<html><head></head><body><元素属性1 = “属性值”..>内容</元素 ><元素属性= “属性值“/></body></html>三，html的标记用尖括号<>括起来。
标记通常是成对出现的，单标记 <br/>.四，Html的属性后缀html和htm的区别？答：1，如果一个网站有index.html和index.htm默认情况下，优先访问.html2, htm后缀为了兼容以前dos系统8.3命名规范、手册。
W3school教程（第一天课程，7.18.）传智播客。
一，html的符号实体。
网页上显示一些特殊的符号。
二，html的超链接。
1)基本语法：<a href= “url”>………</a><a href = “mailto :电子邮箱地址”></a><a href= “”>跳转到百度</a>2)跳转到页面的另一个地方<a href = “#name”>…..</a><a name = “name”>…..</a>3)跳转到另一个页面的某个地方<a href = “URL#name”>…..</a><a href =”name”>…</a>超链接的案例：Demo1.html<br/><a href = "a.html">连接到a.html</a><br/><br/><!--如果我们希望再点击该超链接后，就跳转到外网的某个地址，则应当写完整得url--><a href = "">跳转到百度</a><a href ="mailto:veaglefly@">联系管理员</a><br/>A．htmla.html<!--如果你希望跳转的页面实在网落上，则在href属性写完整的url--><a href = "demo1.html">返回demo1页面</a> 图片： <img src =”图片的路径/该图片也可以是一个url”width = “宽度” height = “高度”>Html的表格元素在以前对网页布局要求不高的情况下，使用table布局（即使用表格来显示数据）表格太多搜索引擎不喜欢。
html+css总结1. HTML简介HTML（Hypertext Markup Language）是一种用于创建网页结构和内容的标记语言。
它使用标记来描述网页的结构，并通过标签来定义网页的元素。
HTML是构建Web页面的基础，它定义了页面的内容和语义。
2. CSS简介CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。
它通过选择器和属性来定义元素的外观，使得网页设计变得更加灵活和可控。
3. HTML基础标签3.1 DOCTYPE声明DOCTYPE声明位于HTML文档的开头，用于告诉浏览器使用哪个HTML版本解析页面。
3.2 head标签head标签包含了文档的元数据信息，如标题、字符编码、样式表链接、脚本引用等。
3.3 body标签body标签包含了文档可见部分，如文字、图片、链接等内容。
4. HTML常见元素4.1 标题（h1-h6）标题元素用于定义文档中不同级别的标题，h1为最高级别标题，h6为最低级别标题。
合理使用标题可以提高页面结构清晰度，并对SEO优化有帮助。
4.2 段落（p）段落元素用于定义段落文本，在段落之间自动添加适当的间距，使得文本更易读。
4.3 链接（a）链接元素用于创建超链接，可以跳转到其他页面、下载文件或发送电子邮件。
通过href属性指定链接目标。
4.4 图像（img）图像元素用于插入图像文件，通过src属性指定图像的URL。
可以使用alt属性为图像添加替代文本，以提供对于无法显示图像的用户的说明。
4.5 列表（ul、ol、li）无序列表（ul）和有序列表（ol）用于创建项目列表，每个项目使用li标签定义。
5. CSS基础语法5.1 选择器选择器用于选择要应用样式的HTML元素。
常见的选择器有标签选择器、类选择器和ID选择器等。
5.2 属性和值CSS样式由属性和值组成。
属性定义要改变的样式特性，值定义要应用到该特性上的具体数值或关键词。
CSS学习笔记一、设置CSS样式的三种方法1、元素内联--直接在空间内写2、页面嵌入--在head中加入<style type ="text/css">input{border-color:Yellow;color:red;}</style>3、外部引用--引用.CSS文件<link type="text/css" rel="Stylesheet" href="s1.css">二、层DIV和SPAN定义层<div></div>将内容放到层中,就以将这些内容当成一个整体进行处理。
例如隐藏、整体移动等。
div 非常强大和常用。
类似于winform的Panel。
div是将内容放到一个矩形的区块中，会影响布局。
span是把一段内容定义成一个整体进行操作，但不影响布局、显示三、CSS计量单位CSS中表示宽度、距离时有多种计量单位px(像素) 例如10px (火狐必须加px) 30%（百分百）em（相对单位）JavaScript学习笔记一、直接在超链接中调用javascript(只有在href中才需要写javascript:说明交给javascript引擎处理)<a href="javascript:alert('hello')">hello</a><a href="" onclick="alert('hello2')">点击我2</a>二、在javascript中既可以用单引号也可以用双引号声明字符串只是方便和html集成，避免转义字符麻烦。
三、javascript 是若类型如果不声明var i 直接写i=10;声明的是一个全局变量(千万别这么用,避免冲突)var i=10; //声明一个变量,名字为i 指向10这个整数,i就是int类型i='abc' ; //现在是字符串了四、调试Javascript1、IE--高级--禁用脚本提示点上√2、VS--工具--选项--打开行号3、DebugBar JS调试工具4、 调试JS 和C#一样的可能得把对勾去掉五、判断变量是否初始化的三种方式var x;if (x==null){alert('null');}if (typeof(x)=="undefined"){alert('undefined');}if (!x){alert('不X');}六、函数的声明(这里的大括号推荐这么写，因为以后可能引起歧义)function add(i1,i2){ //只是声明,不会立即执行return i1+i2;}注意:function compare(i1,i2){if (i1>i2)return i1;}这样的写法不会报错假设 compare(6,4)返回6 否则返回undefine 七、匿名函数--避免冲突var f1=function (i1,i2){return i1+i2;}alert(f1(5,9));alert(function (i1,i2){return i1*i2;}(10,9));八、JS面向对象基础—“类”的概念( ***)注意：Javascript没有类的语法,是用函数闭包(closure)模拟出来的, Javascript声明类(类不是类,是对象)function Person(name,age){ //声明一个函数,当成类用=name; //动态增加的一个变量this.Age=age;this.SayHello=function(){alert();}}var p1=new Person("tom",20); //必须new,否则变成调用函数了 p1.SayHello();p1.Gender='男';alert(p1.Gender);九、Array对象JavaScript中的Array是个动态的数组(类似C#arraylist)var names=new Array(); //这里必须是大写names[0]='liyang';names[1]='zhangsan';names[2]='lisi';for(var i=0;i<names.length;i++){alert(names[i]);}十、求数组最大数var arr1=new Array();arr1[0]=30;arr1[1]=11;arr1[2]=3;arr1[3]=55;alert(arr1[3]);function getMax(arr){var max=arr[0];for(var i=0;i<arr.length;i++){alert(arr[i]);if (arr[i]>max){max=arr[i];}}return max;}alert(getMax(arr1));十一、反转联合function myReverse(arr1) {for (var i = 0; i < arr1.length/2; i++) { var tmp = arr[i];arr1[i] = arr1[arr1.length - i-1];arr1[arr1.length - i-1] = tmp;}return arr1;}function myjoin(arrs) {if (arrs.length <= 0) {return "";}var s = arrs[0];for (var i = 1; i < arrs.length; i++) { s = s + "|" + arrs[i];}return s;}十二、JS数组当字典使用<%--字典键值对应 --%><script type="text/javascript">var dict = Array();dict["人"] = "ren";dict["猫"] = "mao";alert(dict["人"]);alert(dict.猫);for (var k in dict) { //js中的foreach语法 //遍历出来是key 不是值alert(k);}var arr = new Array();arr[0] = "1";arr[1] = "2";for (var k in arr) {alert(arr[k]);}</script>十三、Array的简化声明<%--Array的简化声明--%><script type="text/javascript">var arr = [1, 3, 4, 5, 6, 8];arr = { "tom": 30, "liyang": 25 }for (var k in arr) {alert(k +"---" +arr[k]); }</script>十四、获得对象所有成员因为对象的成员就是以对象的Key的形式出现的<%--知道一个对象的所有方法例如 document --%> <script type="text/javascript">for (var k in document) {alert(k);}var p1 = new Object(); = "tom";p1.Age = "30";p1.SayHello=function() {alert("hello")}; p1.SayHello();for (var k in p1){ //获取出p1的所有成员alert(k);}</script>。
HTML部分笔记一、 HTML基础部分 (5)1. 基本的 HTML 标签 (5)(1) HTML段落 (5)(2) HTML链接 (5)(3) HTML图像 (5)(4) HTML标题 (5)(5) HTML水平线 (5)(6) HTML注释 (5)(7) HTML折行 (5)2. HTML属性 (5)(1) HTML属性的作用 (5)(2) 始终为属性值加引号 (5)(3) HTML元素的核心属性(每个标签都有) (5)3. HTML文本格式化标签 (5)(1) 文本格式化标签 (5)(2) “计算机输出”标签 (5)(3) 引用和术语定义 (5)4. HTML超链接 (5)(1) HTML超链接target属性 (5)(2) HTML超链接name 属性 (5)5. HTML表格 (6)(1) 表格的定义 (6)(2) 使用colSpan和rowspan (6)(3) cellpadding属性设置边距 (6)(4) cellspacing属性设置单元格间距 (6)(5) background属性 (6)(6) align属性设置对齐方式 (6)(7) frame属性 (6)(8) 表格标签 (6)6. HTML 列表 (7)(1) 定义列表的标签 (7)(2) 无序列表 (7)(3) 有序列表 (7)(4) 自定义列表 (7)(5) type属性 (7)7. HTML表单和输入 (7)(1) 各种表单标签 (7)(2) 包含各种表单元素的示例 (7)8. HTML颜色 (7)(1) HTML颜色名 (7)(2) HTML颜色值 (8)二、 HTML高级部分 (8)1. HTML框架 (8)(1) 框架的作用 (8)(2) 框架结构标签（<frameset>） (8)(3) 框架标签（Frame） (8)(4) 框架的注意事项 (8)(5) 混合框架结构(框架的嵌套) (8)(6) 内联框架(<iframe>) (8)(7) 使用框架导航(点导航框架里的超链接，使其到内容框架显示) (8)(1) 外部样式表 (9)(2) 内部样式表 (9)(3) 内联样式 (9)(4) 样式标签 (9)3. HTML字符实体 (9)(1) 字符实体说明 (9)(2) 最常用的字符实体 (9)(3) 其他一些常用的字符实体 (9)4. HTML头部 (10)(1) 头元素内的信息 (10)(2) Head标签 (10)5. HTML元信息 (10)(1) Meta元素说明 (10)(2) 针对搜索引擎的关键字 (10)6. URL(统一资源定位器) (10)(1) URL说明 (10)(2) URL Schemes (10)7. HTML 4.0 事件属性 (10)(1) 窗口事件 (Window Events) (10)(2) 表单元素事件 (Form Element Events) (10)(3) 图像事件 (Image Events) (10)(4) 键盘事件 (Keyboard Events) (11)(5) 鼠标事件 (Mouse Events) (11)8. XHTML文档类型 (11)(1) STRICT（严格类型） (11)(2) TRANSITIONAL（过渡类型） (11)(3) FRAMESET（框架类型） (11)CSS部分笔记三、 CSS基础 (11)1. CSS 基础语法 (11)(1) 层叠次序 (11)(2) CSS 语法 (11)(3) 值的不同写法和单位 (12)(4) 空格和大小写 (12)2. CSS选择器 (12)(1) 选择器的分组 (12)(2) 继承及其问题 (12)(3) CSS 派生选择器 (12)(4) CSS 子元素选择器 (12)(5) CSS 相邻兄弟选择器 (12)(6) CSS id 选择器 (13)(7) CSS 类选择器 (13)(8) CSS 属性选择器 (13)(9) CSS 伪类 (Pseudo-classes) (13)(10) CSS 伪元素 (Pseudo-elements) (13)3. 如何创建 CSS (14)(1) 外部样式表 (14)(2) 内部样式表 (14)(3) 内联样式 (14)四、 CSS样式 (14)(1) 背景色 (14)(2) 背景图像 (14)(3) 背景重复 (14)(4) 背景定位 (15)(5) 背景关联(防止背景图滚动) (15)(6) CSS 背景属性 (15)2. CSS 文本 (15)(1) 缩进文本 (15)(2) 水平对齐 (15)(3) 字间隔 (15)(4) 字母间隔 (15)(5) 字符转换 (15)(6) 文本装饰 (16)(7) 处理空白符 (16)(8) 文本方向 (16)(9) CSS 文本属性 (16)3. CSS 字体 (16)(1) 指定字体系列 (16)(2) 使用引号 (16)(3) 字体风格 (16)(4) 字体变形 (16)(5) 字体加粗 (16)(6) 字体大小 (17)(7) CSS 字体属性 (17)4. CSS 列表 (17)(1) 列表类型 (17)(2) 列表项图像 (17)(3) 列表标志位置 (17)(4) CSS 列表属性(list) (17)5. CSS 表格 (17)(1) 表格边框 (17)(2) 折叠边框 (17)(3) 表格宽度和高度 (17)(4) 表格文本对齐 (17)(5) 表格内边距 (17)(6) 表格颜色 (17)(7) CSS Table 属性 (17)6. CSS 轮廓 (17)(1) 轮廓说明 (17)(2) CSS 轮廓属性 (17)五、 CSS框模型 (18)1. CSS 框模型概述 (18)(1) 框模型说明 (18)(2) 框模型图解 (18)(3) 术语翻译 (18)2. CSS 内边距 (18)(1) CSS padding 属性 (18)(2) 单边内边距属性 (18)3. CSS 边框 (18)(1) 元素边框说明 (18)(2) 边框与背景 (18)(3) 边框的样式 (18)(4) 边框的宽度 (18)(5) 边框的颜色 (19)(6) CSS 边框属性 (19)4. CSS 外边距 (19)(1) CSS margin 属性 (19)(2) 单边外边距属性 (19)(3) CSS 外边距属性 (19)5. CSS 外边距合并 (19)(1) 外边距合并说明 (19)(2) 外边距合并说明图解 (19)六、 CSS定位 (20)1. 定位概述 (20)(1) CSS 定位和浮动 (20)(2) 一切皆为框 (20)(3) CSS 定位机制 (20)(4) CSS position 属性 (20)(5) CSS 定位属性 (20)2. CSS 相对定位 (21)(1) 相对定位说明 (21)(2) 相对定位图解 (21)3. CSS 绝对定位 (21)(1) CSS 绝对定位 (21)(2) CSS 绝对定位图解 (21)4. CSS 浮动 (21)(1) 浮动说明 (21)(2) CSS 浮动图解 (21)(3) CSS float 属性 (22)(4) 行框和清理 (22)(5) CSS clear 属性 (23)七、 CSS高级 (23)1. CSS 尺寸 (Dimension) (23)(1) CSS尺寸说明 (23)(2) CSS 尺寸属性 (23)2. CSS 分类 (24)(1) CSS 分类说明 (24)(2) CSS 分类属性 (24)作者：李志伟编写完成时间：2013-11-14一、HTML基础部分1.基本的 HTML 标签(1)HTML段落<p>第一个段落</p><p>第二个段落</p>(2)HTML链接<a href=""title="百度首页">百度</a>(3)HTML图像<img src="w3school.jpg"width="104"height="142"/><img> 定义图像。
html标记<span></span> <em></em> <strong></strong><sup></sup> <sub></sub><b>加粗</b> <u>下划</u> <i>倾斜</i> <s>删除</s><pre></pre>预格式化标记<center></center>居中标记<blockquote cite=””>……</blockquote> 该标签可定义一个块引用。
文本缩进HTML文档中的特殊字符：空格： < : < > : >版权号：© 注册商标：®图片标记：<img src=”url” alt=”” title=”” width=”” height=”” border=””align=”” vspace=”” hspace=”” />说明：src=”url”图片的路径；alt=”文本”图片无法显示时替代的文本；title=”文本”鼠标悬停时显示的内容；width=” px/%”设置图片宽；height=”px/%”设置图片高；border=”数字”设置图像边框；align=””left ( right ) 图片靠左，文字靠右（right相反）；top/middle/bottom 文字垂直居上、中、下（默认）；vspace=”px”定义图像顶部和底部的空白（垂直边距）；hspace=”px”定义图像左侧和右侧的空白（水平边距）；提示：img的align属性只体现图片与文字之间的关系，不能改变图片在网页中的对齐方式。
如果想让插入网页中的图片居中显示，则可以设置包含<img>标记的外层标记的align=”center”属性。
如：<p align=”center”> <img src=”” alt=”” title=”” /> </p>表格元素的属性：<table bgcolor=””> 背景颜色；<table background=””> 背景图片；<table border=””> 边框宽，默认为0；<table cellpadding=””> 表格边距（边框与内容），默认为2；<table cellspacing=””> 单元格间距，默认为2；<table bordercolor=””> 边框颜色；<table bordercolorlight=””> 边框亮部分颜色；<table bordercolordark=””> 边框暗部分颜色；<table align=””> 对齐方式（left/center/right）；<table width=””> 表格宽度（px/%）表格列（单元格）的属性：<td width=””> 宽度；（样式取代）<td height=””> 高度；（样式取代）<td bgcolor=””> 背景颜色；（样式取代）<td background=””> 背景图片；<td align=””> 水平对方方式；<td valign=””> 垂直对齐方式；<td rowspan=””> 设置行合并的数目；<td colspan=””> 设置列合并的数目；<td nowrap=” nowrap”> 设置在单元格中不换行；（样式取代）<table>标签下的边框设置：frame=””void 不要显现表格的边线；above 只要显现出表格的上边线；below 只要显现出表格的下边线hsides 只显示表格的上下边线；vsides 只显示表格的左右边线；lhs 只显示表格的左边线；rhs 只显示表格的右边线；border/box 显示表格的所有边线；rules=””rows 只显示横行的格框线；cols 只显示直行的格框线；all 显示全部格框线；groups 表示列组合水平部分；none 不显示任何格框线；表格的结构化：<table><thead>……</thead> 表头区；<tbody>……<tbody> 表体区；<tfoot>……</tfoot> 表尾区；</table>直列化表格：<colgroup></colgroup> <col></col>功能完全一样。
<colgroup span=”n-1”> </colgroup><colgroup bgcolor=”blue”> </colgroup>align=” left/center/right”水平对齐方式；valign=” top/middle/bottom”垂直对齐方式；span=”数字”直列数；bgcolor=”颜色”背景颜色；超级链接：<a href=”url” title=”注释” target=”打开链接窗口的形式”>内容 </a>_blank 在新窗口中打开；_self 在自身窗口中打开（默认值）；_parent 在上一级窗口中打开，框架会经常使用；_top 在浏览器的整个窗口中打开，忽略任何框架；链接类型：①内部链接、②外部链接、③E-mail链接<a href=”mailto:地址”>、④锚点链接：创建锚点：<a name=”锚点名称”>链接目标位置内容</a>链接锚点：<a href=”#锚点名称”>超链接对象内容</a>如果要跳转到其它网页的一个位置，创建超链接时的写法：<a href=”目标网页#html”></a>⑤空链接:<a href=”#”></a>设为首页：<a href=”#”onClick=”this.style.behavior=’url(#default#homepage)’;this.sethomepage(‘http://www.xinde ’)”>设为首页</a>添加收藏：<a href=”#”onClick=”javascript:window.external.addfavorite(‘’,’我看频道’)”>加入收藏夹</a>⑥脚本链接:单击该链接可以运行相应的javascript语句。
例：<a href=javascript:window,open(“”)></a>关闭窗口：<a href=”javascript:window.close()”>关闭窗口</a>打开窗口：<a href=”javascript:window.open(‘文件名’)”>打开某窗口</a>表单标记：<form action=url(…) method= name=””></form> 【放置表单元素的容器】action=url(传送目标，规定当提交表单时，向何处发送表单数据)method=”get/post”规定如何发送表单数据name=””规定表单的名称表单元素标记：文本框：<input name=”文本框名” type=”text” value=”初始值” size=”显示字符数”maxlength=”最多容纳字符数” readonly=”readonly” disabled=”disabled” />注：disabled (设置为不可操作)密码框：<input name=”名称” type=”password” value=”初始值” size=”显示字符数” />单选框：<input name=”名称” type=”radio” value=”提交值” checked=”checked” />注：checked(是否被选中)复选框：<input name=”” type=”checkbox” value=”提交值” checked=”checked” /><lable>标注内容</lable> 该标签可为input元素定义标注。
for的值应与id的值相同。
<lable for=”man”>男</lable><input type=”radio” name=”sex” value=”男” id=”man” />按钮：<input type=”reset/submit/button” name=”” value=”按钮显示文本” />注：按钮类型（reset-重置表单，submit-提交表单、button-普通按钮）图片按钮：<input name=”” type=”image” src=”图片路径” />隐藏域：<input name=”” type=”hidden” value=”提交值” />浏览框：<input name=”” type=”file” size=”显示长度” />表单外框：<fieldset> （定义围绕表单元素的边框）<legend>为fieldset定义标题（写在此处）</legend></fieldset>菜单式列表框：<select name=”列表框名称”><option selected=”selected” value=”提交值”>列表1</option><option value=”提交值”>列表2</option>……<!--selected=”selected”哪个设为初始值就给它添加（只有一个） -->分组：<optgroup label=”分组名称”></optgroup>列表式列表框：<select name=”列表框名称” size=”显示的行数” multiple=”multiple”><option value=”提交值”>列表1</option><option value=”提交值”>列表2</option>……<!--注：multiple=”multiple”，如果允许多选则有该命令，否则没有。
