搜索
第一部分：HTML页面与基本标签1、URL:网址2、HTML：超文本标记语言扩展名：.html或.htm3、HTML标记的基本格式：标记文件内容/标记某些标记还可以包含一些属性：标记名称属性1属性2属性3……用来注释的标记!--内容--3、html/html:HTML文档的开始和结束4、head/head:HTML头部分，用于显示标题和网页属性信息5、title/title:文档标题6、body/body:HTML主体部分，用于放主要内容属性：bgcolor:设置背景颜色background:背景图片7、br/：换行标记（注意是单标记，没有结束标签）8、p/p:段落标签,会自动换行。属性：align：对齐方式align=”left”:左对齐align=”right”:右对齐align=”center”:居中对齐9、h/h：标题标签，字号越大,字体越小h1/h1,h2/h3…h6/h6属性：align:对齐方式---对齐方式跟段落标记一样。10、 :表示空格(了解)11、font/font:字体标记属性：face：设置文字的字形size：设置文字的大小，1号最小，7号最大，默认字号为3color：设置文字的颜色12、字体的物理风格：(了解)b/b把字体加粗i/i斜体u/u下划线s/s删除线字体的逻辑风格：(了解)sup/sup上标sub/sub下标strong/strong粗体字small/small文本以小体字显示big/big文本以大号字显示13、hr:水平线标签(注意：它是单标记，没有结束标记)属性：align:对齐方式---同上size:高度width:宽度color:颜色14、img:图像标记(注意：它是单标记，没有结束标记)属性:src:设置图片的路径width和height:设置图片的宽和高,一般要么都不写，显示的是图片的真实大小，要么只是宽或者高，让图片等比例缩放，避免失真。border:设置图像的边框，以像素为单位。（了解）align：(了解)用来调整图片的位置：top：偏上方middle：中间bottom：底部left：左right:右15、ol/ol:有序列表ul/ul:无序列表li/li:有序和无序列表的内容16、a/a:超链接标记属性：href:设置超链接的访问地址，可以是网址，邮箱，html文件target:(了解)设置打开链接的方式target=_blank:在新窗口打开mailto:超链接到邮箱地址ahref==_blank我要去百度/aahref=mailto:124880184@qq.com我要去邮箱/a16、pre/pre:预排版标记pre标记允许保留你在原代码中输入的空格和回车。15、marquee/marquee:滚动字符(了解)direction设置活动字幕的滚动方向，可以是up、down、left、rightbehavior设置滚动的方式，可以是scroll(一端滚动到另一端)、slide(一端快速滑动到另一端，且不再重复)、alternate(在两端之间来回滚动)height设置滚动字幕的高度。17、注意：1、HTML不区分大小写，大写小写都可以2、有内容的标签，必须要成对出现第二部分：HTML表格应用1、table/table:表格的开始和结束属性：width:用来设置表格的宽度height:用来设置表格的高度border:用来设置表格边框尺寸大小bordercolor:用来设置表格边框颜色bgcolor:设置表格的背景颜色align:水平对齐方式left:左对齐center:居中对齐right:右对齐background：属性用来设置表格的背景图片cellspacing：属性用来设置表格单元格间距cellpadding：属性用来设置表格单元格填充2、tr/tr：表示行属性：bgcolor:设置行的背景颜色align:水平对齐方式valign:(了解)垂直对齐方式top:顶端对齐middle:居中对齐bottom:底端对齐3、td/td:表示列属性：rowspan:跨行colspan:跨列width：用来设置单元格的宽度height：用来设置单元格的高度bgcolor:设置单元格的背景颜色align:水平对齐方式valign:(了解)垂直对齐方式第三部分：浮动窗口1、iframe/iframe标记，又称为浮动帧标记，可以用来将一个HTML文档嵌套在另外一个HTML文档中显示。语法：iframesrc=iframe.htmlwidth=400height=300scrolling=autoframeborder=1/iframe属性：src:设置文件的路径width和height:分别设置浮动窗口的宽和高scrolling:设置是否出现滚动条，可选值有auto(自动)、yes(出现)、no(不出现)frameborder:设置是否出现边框，可选值有1(出现)、0(不出现)2、iframe的name属性和超链接a的target属性配合使用，可以做出导航栏的效果。3、fieldset/fieldset：分组标签legend/legend:分组标签的标题第四部分：表单与页面控件1、form/form：表单标签name属性：表单的名称action属性：表单提交的地址2、input:用户输入信息标签语法：inputtype=“”type属性常用的值可以是：text(文本框)、password(密码框)、checkbox(复选框)、radio(单选框)、button(按钮)、submit(提交按钮)、reset(重置按钮)注意：1)单选按钮的name属性必须要写，并且name的值必须相同。2)checked=checked：默认选中一个选框3)复选框如果写了name属性，name可以相同，也可以不同4)select和textarea不属于输入标签3、select/select:下拉列表的开始option/option:显示下拉列表的目录内容selected=selected:写在option标签里，表示默认选中那个目录内容4、textarea/textarea:多行文本标签cols:有多少列rows：有多少行第五部分：CSS样式定义与应用1、CSS：层叠样式表2、1)css使用规则选择器定义样式，一般写在style标记里styletype=text/css/style2)style标记一般写在head里。3、标签选择器：语法：标签名称1,标签名称2…{属性:值;属性:值;属性:值;....}注意：1、标签选择器都是以标签开头的，以,号来分割,可以写多个标签2、字体大小单位px，必须要写3、属性一般用–进行连接。4、css样式用/**/进行注释。4、类选择器:语法：.自定义名称{属性:值;属性:值;属性:值;....}注意：1、必须以.开头2、必须要在标签里写class=”自定义名称”;5、ID选择器：语法：#自定义名称{属性:值;属性:值;属性:值;....}注意：1、必须以#开头。2、必须要在标签里写：id=自定义名称3、ID选择器是唯一的，只能唯一的给一个标签使用。6、注意：任何标签都有class和id属性。7、常用的样式属性：font-size：字体大小font-family：字体类型color：设置文本的颜色vertical-align：文本垂直对齐方式text-align：文本水平对齐方式8、超链接的样式属性：text-decoration属性规定添加到文本的修饰。none默认。定义标准的文本。underline：定义文本下的一条线。overline：定义文本上的一条线。注意：超链接样式顺序：a:linka:visiteda:hovera:active可以简单记忆为：爱哈LoVeHA（每个的首字母）为什么要使用这个顺序呢？因为如果顺序乱写的话，超链接的样式可能会不生效或者出问题。9、背景样式的使用：10、样式表的使用：内嵌样式表包括：标签选择器，类选择器，ID选择器内嵌样式表的优先级为：ID选择器类选择器标签选择器行内样式表的作用范围：仅限当前的标签。语法为：pstyle=”属性：值;属性：值;…”/p注意：任何标签都具有style属性。外部样式表：把CSS样式写在样式文件里，后缀名为.css引用CSS文件的方式有2种：1、链接式：语法：headlinktype=text/cssrel=stylesheethref=css/style.css//head2、导入式：语法：headstyletype=text/css@importurl(css/style.css);/style/head样式表的优先级：行内样式表内部样式表外部样式表第六部分：盒子模型1、border（边框属性）border-top:上边框border-bottom:下边框border-left:左边框border-right:右边框写法有以下几种：1、border-top-width:1px;只设置上边框的宽度2、border-top:solid1pxred;设置上边框3、border:solidred1px;同时设置四个边框注意：同时设置粗细、颜色、样式，顺序可以随便写。2、padding（内边距）内边距的写法：1、padding-top:1cm;只设置上边距2、padding:1cm0.5cm1cm0.5cm;四个边距都写，顺序是上，右，下，左3、padding:1cm0.5cm1cm;写3个边距：顺序是：上，左和右，下4、padding:0.5cm1cm;写2个边距：顺序是：上和下，左和右5、padding:0.5cm;写1个边距：边距的距离都是一样的3、margin（外边距）外边距的写法跟内边距是一样的。第七部分：CSS定位与DIV1、普通定位：是浏览器默认的定位方式，即浏览器自动将所有元素按正常出现顺序显示。2、绝对定位：以网页坐标系为基准定位。语法：table{position:absolute;left:30px;top:20px;}3、相对定位：即相对本来正常的位置定位。#box_re{position:relative;left:30px;top:20px;}4、网页中的层：层在网页中是一种容器,用span/span或者div/div表示1、div是块级元素，实际上就是一个区域，主要用于容纳其他签。2、span是行内元素，主要用于容纳文字。区别：1、div一般应用与排版,而span一般是里面的文字的展示优化,局部文字的样式等等。2、div会自动换行，span不会自动换行。5、层的显示和隐藏：1、display：属性设定元素块的显示和隐藏用法：display:block;显示display:none;隐藏2、visvibility：属性设定元素在网页中是否可见用法：visibility:visible;显示visibility:hidden;隐藏区别：visibility隐藏了元素，但元素还占据原来的位置,display隐藏了元素，但不占据原来的位置。6、鼠标事件：1、onclick：属性由元素上的鼠标点击触发。当鼠标点击的时候，响应的事件。语法：divclass=p2id=d2我是小BOSS/divahref=#onclick=d2.style.display='block';显示/a2、onmouseover：鼠标滑入事件onmouseout：鼠标滑出事件语法：spanid=“sp”onmou