搜索
一、HTML（一）Html基础1．什么是html?超文本标记语言(hypertextmarkuplanguage)。它由一些标签（这些标签是由w3c创建，不能扩展）及标签之间的内容组成，浏览器会解释执行，生成相应的界面。html文件以.html或者.htm结尾。2．w3c推荐的web页面设计标准web页面当中，内容由html文件来负责；页面的表现形式（外观），由样式文件(css)来负责;页面的动态行为，由ECMAScript(javascript,jscript)文件来负责。3．html文件的基本结构htmlheadtitlehello/title!--元标记，可以设置一些模拟的消息头、设置搜索的关键字等--!--告诉浏览器，当前返回的是一个html页面，并且，应该以utf-8编码来显示该页面的内容--metahttp-equiv=content-typecontent=text/html;charset=utf-8!--告诉浏览器，按指定的时间间隔重新加载页面--metahttp-equiv=refreshcontent=3;url=!--引入一个外部的样式文件--linkrel=stylesheettype=text/csshref=style.css!--定义一个内部的样式--style#d1{width:200px;height:80px;border:1pxdottedred;}/style!--引入外部的脚本文件或者定义脚本--scriptalert('hello');/script/headbodyh1...h6:标题p/p:段落br/:换行hr/:分隔张块标记:另起一行的标记,常见的块标记h1...h6pformtableimgulli...行内标记:不另起一行的标记,常见的行内标记spanstrong/body/html（二）四个重点标签1．链接（1）基本使用ahref=html01.htmltarget=_blankclickMe/ahref:指定链接的地址target:在哪儿显示链接内容（缺省值是_self:表示在当前打开链接的窗口中显示;_blank:在新窗口中显示）。（2）使用图片打开链接ahref=imgsrc=border=0width=height=//aimg标记:border:边框width:宽度，单位是像素height:宽度（3）使用热点(使用图片的区域作为链接)imgsrc=index04.jpgwidth=772height=357border=0usemap=#Mapmapname=Mapareashape=rectcoords=407,20,560,77href=qy.htmlareashape=rectcoords=580,22,734,76href=gr.html/map（4）使用锚点(在页面内部跳转)先定义一个锚点：aname=toptopcontent.../a跳转ahref=#toptotop/a（5）发送邮件ahref=mailto:sally@126.com?subject=hello给我发邮件/a（6）链接中的伪样式(讲样式时再讲)2．表格（1）基本使用tableborder=1width=60%cellpadding=0cellspacing=0trtdid/tdtd姓名/tdtd薪水/td/trtrtd1/tdtd张三/tdtd10000/td/tr/tablecellpadding:单元格内边距，即数据与单元格之间的空隙cellspacing:单元格之间的空隙水平对齐:align=left/right/center垂直对齐:valign=top/bottom/middle（2）不规则表格colspan:跨列合并单元格rowspan:跨行合并单元格（3）表格的完整结构table!--表格的标题,可选--caption员工信息列表/caption!--表头，可选，可以出现0/1次--theadtrtd工号/tdtd姓名/tdtd工资/td/tr/thead!--表脚,可选，可以出现0/1次--tfoottrtd工资合计/tdtdcolspan=210000/td/tr/tfoot!--表体，必须有，可以出现1次或多次--tbodytrtdsd1000/tdtd张老大/tdtd8000/td/trtrtdsd1001/tdtd李老大/tdtd2000/td/tr/tbody/table（4）表格可以嵌套3．表单formaction=method=!--input标记--!--文本输入框name属性如果不定义，则浏览器会忽略该值，不会将该值发送给服务器来处理--inputtype=textname=usernamevalue=ls/!--密码输入框--inputtype=passwordname=pwd/!--多选框如果用户没有选择任何选项，则浏览器不会将多选框数值发送给服务器，服务器要注意判断null--inputtype=checkboxname=interestvalue=cookingchecked=checked/!--单选框checked属性定义缺省选项，注意name属性值必须一样。--inputtype=radioname=gendarvalue=mchecked=checked/!--隐含域,不会直接显示在界面上，一般用于向服务器传递参数--inputtype=hiddenname=flagvalue=123/!--提交按钮,点击该按钮，浏览器会将表单中的数据提交给服务器来处理--inputtype=submitvalue=确认/!--重置按钮,点击，将会将表单中用户填写的内容清空--inputtype=resetvalue=重置/!--普通按钮,点击，没有任何动作，需要编写相应的脚本来处理--inputtype=buttonvalue=/!--非input标记--!--下拉列表,option表示某个选项，value设置提交给服务器的值，另外，可以添加multiple属性，此时，下拉列表变成了一个多选框--selectname=cityoptionvalue=bj北京/option/select!--多行文本输入框--textareaname=rows=cols=/textarea/formaction:表单提交给哪一个应用程序来处理method:表单提交方式4．列表（1）无序列表ulli选项1/lili选项2/lili选项3/li/ul（2）有序列表olli选项1/lili选项2/lili选项3/li/ol嵌套列表（三）框架(将一个窗口划分成多个子窗口)1．framesetframeset所在的html文件，不能出现body。framesetrows=cols=frame/也可以嵌套另外一个frameset//frameset2．iframe可以出现body里。iframesrc=width=height=/二、CSS（一）css是什么？cascadingstylesheet:级联样式表。用来为网页提供外观，也就是表现的形式。因为css技术能实现网页数据与表现的分离，所以非常利于网页代码的维护。css文件以.css为后缀。（二）基本语法selector{propertyName1:proertyValue1;...propertyNamen:proertyValuen}selector:称为选择器，其作用是，浏览器依据选择器定义的规则，将合适的样式施加到相应的html标记之上。（三）选择器的类型1．标记选择器(简单选择器)p{font-size:30px;color:green;}对所有的名叫p的标记起作用。2．class选择器.s1{font-size:60px;color:red;}针对class属性值为s1的标记起作用。也可以这样定义div.s2{font-size:80px;color:yellow;}针对div标记，并且该标记的class属性值必须是s2。3．id选择器#d1{width:100px;height:80px;border:1pxsolidgreen;}针对id属性值是d1的标记起作用。4．选择器的分组h1,h2,h3{font-style:italic;font-family:宋体}针对h1,h2,h3标记起作用。5．选择器的派生#d2p{font-style:italic;font-weight:900;}针对id属性值是d2的标记下面的名叫p的标记起作用（四）选择器的优先级默认样式（浏览器内置的样式）外部样式（在.css文件里定义的样式）内部样式（在.html文件里定义的样式）内联样式（在标记内部，使用style属性定义的样式）从上到下，优先级越来越高。（五）常用的css属性1．文本相关的font-size:30px;//字体大小font-weight:900;//100~900字体的粗细font-family:隶书//字体font-style:italic/nomal//斜体/正常text-align:left/right/center//水平对齐方式line-height:80px;//行高cursor:pointer/wait;//光标的形状2．背景相关的background-color:red;/#ff88ee;/rgb(211,88,90)background-image:url(imags/gf.jpg);background-repeat:no-repeat;/repeat-x;/repeat-y;background-position:80px60px;background-attachment:fixed/scroll;3．定位width:80px;height:80px;margin:外边距margin-left:10px;margin-top:20px;margin-bottom:30px;margin-right:40px;也可以这样写:margin:20px40px30px10px;//顶，右，底，左还有简略写法:margin:20pxauto;padding:内边距padding-left:10px;padding-top:20px;padding-bottom:30px;padding-right:40px;也可以这样写:padding:20px40px30px10px;//顶，右，底，左内边距会撑开父标记。4．边框border:1pxsolid/dottedred;//宽度类型颜色也可以border-left:1pxsolid/dottedred;border-right:border-bottom:border-top:5．列表list-style-type:none;//取消列表项前面的图标6．浮动float:left/right;//取消标记独占一行的特性。clear:both;//取消浮动。7．链接a:link{color:red}没有访问时a:visited{color:blue}访问后a:active{color:lime}鼠标点击但还没有放开时a:hover{colo