初学html和css的可以查看，该文档为自己自学是所做

 

html

div标签的局限？

div，division 块区域的意思、在html里，div是负责划分大块区域的

 

 

div是没有“语义性”的

div和h1标签放在一块比较，最为典型

<div>hello world</div>

<h1>hello world<h1>

两者的显示效果不一样，h1里面的文字大

 

原因就在于：div仅用来划分区域，至于里面的内容，是标签，还是段落，分析不出来。

而且对于文字的颜色，粗细，大小等并没有影响，

因此，我们说：div是没有语义性的，无语以标签

 

 

但是对于搜索引擎来说，如果全用<div>，不利于seo的优化

 

 

以h1为例，h1里面的文字会被搜索引擎作为分析页面内容时候的重要参考：：因为h1代表“1号大标题”，有其意义，有语义性。

 

 

有些内容类型是DIV是表达不出来的

比如：要求你在页面内引入超链接，引入一副图片，或者一个flash，或者一段视频

 

有一些内容形式，用DIV来实现非常麻烦，也不适合

例：

#中国

#美国

#日本

 

 

 

 

 

 

 

id选择器

就是，给页面上元素起一个不重要的id;然后css通过

#id，就能控制给元素。这个概念为css选择器。

 

类选择器

用法：页面里有<class="类名">来声明类

css里，用点=类名来选择这一类元素

 

 

派生选择器

通过元素的上下级关系来进行选择，（像地区由大到小

的选择一样）

比如：

#header img{

}

#header ul{

}

则意味这分别选中#header元素下面所有img元素和ul元

素

 

 

群选择器

例如：

#header，.intro{

}

则意味着，括号内的css同时对#header，.intro生效

 

伪类选择器：

【顺序：l v h a】

伪类选择器，选择不是某一种元素，而是某种元素的某种效果。

对于链接，我们可以针对的4种状态设置显示效果。

1．  链接没被点击过【不加或link】

2．  链接被点击过:【visited】

3．  鼠标放在链接上【a:hover】

4．  鼠标点击的瞬间：【active】

 

通配选择器：*{}，通配页面上所有元素（效率低，用

的少）

有序列表与无序列表

<ul>无序

<ol>有序

 

内联元素与块状元素

内联元素--->就像是橡皮筋或行内框

陈朝霞<span>是猪！</span>

 

内联元素，只对每一行的文字起作用，或者说，内联的作用范围，不能跳出的区域

、内联元素的特点：

 

内联元素--->就像是橡皮筋或行内框

陈朝霞<span>是猪！</span>

 

内联元素，只对每一行的文字起作用，或者说，内联的作用范围，不能跳出的区域

、内联元素的特点：

1，

内联元素与块状元素可以相互转化

通过display属性：

block ；块状

inline；内联（行内）元素

none；没有，该元素不显示（设置之后，该元素和该元素的子元素不再显示）等同于这段代码被删除的效果，在页面内一点空间都不占

 

内联元素下方的空白问题

 

在一大段N行（N>2）文字中文字的行与行之间，有行行距也相等。但是在最后一行，与后面的块状元素，则有一个明显的边距这个边距是我们用css控制不了的

 

 

图片是内联元素还是块状元素；目前我们所学的：

div，p,h*,pre,form是块状元素。

a,span,br是内联元素

 

 

开发中，常碰到的图片下方留白的问题如何解决

 

原因是：因为图片是内联元素，所有图片元素介绍后，与后面的块状元素有一段空白，

解决：通过display来转换img为块状元素，然后再通过margin：0来解决。

 

 

（display：black）

 

如果只想对一句话进行修饰那么就可以用

<float>标签

 

<p>段落

<h1~6>越来越小

<pre>保持源码的原样格式输出

<a>超链接，用法<ahref=""></a>

<a href="" ,title="提示效果"></a>

上一级文件内用  ../图片名

 

提示语的设置

鼠标放在图片上有提示用---title

如：<img src="图片名" title="提示语"/>

 

加alt的作用：

1.如果图片丢失，或者图片太大，导致图片没能正常显示，alt的值就会体现出来。

2.对于搜索引擎来说，alt是提示图片信息的重要内容。

 

图片里不加alt是不合规范的。<盒子的制作代码中实现>

 

多媒体的插入

网页里面可以嵌入多媒体，

如：swf,wmv...

如：

《《《插入swf视频》》》

<objecttype="application/x-shockwave-flash" data="插入flash文件的路径(.swf)"width="" height="">

<paran name="movie"value=".swf"/>--》》刷新自动播放

</object>

 

 

《《《插入wmv视频》》》

<object classid="classid 属性用于指定浏览器中包含的对象的位置，通常是一个 Java 类。" width="" height="">

<paran name="antostart"valve="true" />//antostart刷新自动播放

<paran name="URL" value="文件名路径"/>

<embed autostart="ture"src="文件名并且与value保持一致" type="video/x-ms-wmv" width=""heigth="" controls="imageWindow"console="cons">

</object>

 

《插入MP4格式用video》  其中还是有高和宽的属性

<video src="天狼星行动-第1集.mp4"controls="controls"></video>

 

 

《《插入音乐MP3用audio》

<audio src="天狼星行动-第1集.mp4"controls="controls"></audio>

 

背景：

background：color image   例：background：gray url(图片路径)no-repeat

color：代表纯颜色背景。

image:url(图片路径)  注意：图片路径不加引号

repeat：铺排效果。例：repeat-x,repeat-y，repeat，no-repeat

 

attachment：滚动效果； 例：fixed相对屏幕不变位置，像被钉住，scorll（默认效果）随元素滚动（兼容性不好，用的不多）

 

postion:背景图片位置  例：center top/-20px-30px

 

多个元素共用一个背景图！

这种现象在很多大网站非常常见

作用：可以节省很多次的请求，把众多的背景图的请求压缩为1次，因为，大网站每天的访问量都可能上亿

 

 

做网站时背景图片的一个小技巧：

比如某个元素设置了以黑色为主的图片做背景图，那么，一般要为该元素设一个背景色，目的是，当背景图片失效时，使网站的视觉效果不会反差太大。

【在开发过程中，用图片做背景的同时，往往那个还要用图片的主色调，来作为元素的背景色，目的是：防止背景图片丢失，导致页面的视觉效果变化太大】

 

 

利用像素定位的关键：

1：在计算机屏幕上，左上角是原点。X轴往右为正，Y轴往下为正

2：默认是背景图的原点和元素的原点重合。

计算机里面的坐标（重要）

 

 

 

 

                                              在数学中的坐标，x轴往右为正，Y轴往上为正，

 

 

 

 

 

 

 

 

 

计算机原点在左上角，x轴往右为正，Y为向下为正

而在计算机里，

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

如果用一个比元素还要大的图片做背景时，图片与元素是如何重合的，或者说，用图片的一部分做元素的背景呢？

 

答：默认是把 背景图的原点与元素的原点重合，元素有多大，自然截出多大的背景图

 

 

 

 

 

 

 

 

 

 

文本控制：

 

段落缩进text-indent

作用：控制一段首行的缩进距离

例：css选择器（text-indent：20px）

 

水平对齐：text-align

作用：控制文字在水平方向上的对齐方式

例：css选择器（text-align：left；）//可选值left、right、center  默认是left

 

 

文本装饰：text-decoration

作用：给文字加一些修饰的效果

例：css选择器（text-decoration：underline）//可选值：none；underline；overline；line-through；blink

 

 

字母间距：letter-spacing

作用：控制单个字符之间的距离

例：css选择器（letter-spacing：20px）

 

词间距：word-spacing（对中文无效）

作用：控制单词与单词之间的距离

例：css选择器（word-spacing：20px）

 

大小写转换：text-transform

作用：按一定规则转换字母的大小写

例：css选择器（text-transform：uppercase；）//uppercase；lowercase；capitalize；【capitalize ：是把首字母大写，其他不改变】

 

 

字体控制：

 

font-style  显示风格

作用：控制文字的是否斜体显示或正常显示；

例：css选择器（font-style：italic；）//normal；oblique

 

 

font-weight字体粗细

作用：控制文字的粗细程度

例：css选择器（font-weight：bold;）//normal/bold

 

 

font-size:字体的大小

作用：控制字体的大小

例：css选择器（font-size：30px）//则每个字符以30像素的大小显示；

 

 

line-height行高

作用：设置每行文字所占的高度（特点：在一行内，文字总是相对于行居中显示，所以可以利用这个特性让文字相对于容器居中）

例：css选择器（line-height：30px）//则每一行占据30个像素高

 

Font-family设置字体

作用：设置显示文字所用的字体。

 

 

要点：

l  先英文字体，在中文字体

l  先特殊字体，再安全字体

l  先具体字体，再字体大类

注意：当声明多个字体，如果某个字体名称含多个单词，或者中文字体，则字体用双引号包起来

把所有字体属性写在一行里：

Font：style weight size/line-height family

字的颜色如何控制：

Color：red/#EEE.

 

 

字体可分大致归为哪两类？

有衬线—serif--（如宋体）

无衬线---sans--（黑体）

 

< > 空格这在html中怎样显示

&gt;

&lt;

&nbsp;

-----------------这种东西叫“符号实体”

 

IE6双倍margin值

如何解决IE6双倍margin值将会加倍的bug？

双倍margin bug是指IE6对于浮动元素，其浮动元素方向上的margin值将会加倍，导致bug

例：float：left； margin-left：10px

那么实际体现的margin-left是20px；

 

解决：给这种元素设置_display：inline；

 

 

 

常见的符号实体：

<   &gt

>  &lt

空格    &nbst;

版权符号&copy  

 

bug调试

1.doctype 没有声明，带来的IE浏览器盒模型解析bug

解决：进行xhtml正确声明。如strict声明

 

2.浏览器的初始值不同带来的

解决：进行css初始化

 

3.自身代码不规范带来的bug

解决：面壁

 

4.浏览器的bug带来的

 

4.1 IE6有双倍margin bug

是指浮动方向上的margin值会加倍。

例如：某元素float：left；margin-left的值是10px，那么页面上会解析为20px 同时float：right ；margin-right也会加倍。

解决方案：设置漂浮元素的_display：inline；

 

4.2 3像素bug

解决：规范float的用法

 

4.3 IE关于a标签的4个伪类的兼容bug

答：对于IE，如果a:link方式声明了标签的样式；可能会引来visited伪类的解析异常

 

解决：去掉a:link，以a来代替。

 

Img object，select，input，textarea的特殊性

Img object，select，input，textarea这五种元素，和其他的内联元素相比。即使是空标签，也已经有一定的显示效果；或者是标签本身体现的内容，是一个外部资源。

例img—>src,    objectàwmv/flash等

 

解决 ：直接转换为块状，避免了同时具有两种特性。

 

对于这一类元素，w3c给出的名称是replaced element，置换元素

置换元素，可以设置宽和高，以及竖直和水平方向的margin，padding，和块一样

但是，他们又不换行，体现内联元素的特性，并且，结束后，下方会留白，也是体现内联的特性。

 

框架集

框架集就是一个网页嵌套多个网页

 

框架集：framset

1.最外层的框架页面，doctype声明用framset声明，不用strict

2.framset页面，不能有body标签

 

具体用法：

拆成2行为例：

 

 <framesetrows="150px,300px,100px">

 <frame src="logo.html"  name="logo"></frame>

 <frameset cols="20%,*">

 <frame src="list.html"name="list"></frame>

 <frame src="body.html"name="body"></frame>

 </frameset>

 <frame src="footer.html"name="footer"></frame>

 </frameset>

 

品字形可以用上面这个。。

 

行用rows 列是用cols

 

 

典型问题：左侧的导航链接点击时，页面如何在右侧区域显示？

答：给右侧的fram加一个name属性，然后，左侧的链接，加上一个target属性，且值为右侧fram的name；

 

 

如何点击链接，页面如何跳出框架，直接在浏览器上显示（如退出登录效果）

 

答：target属性值设为"_top"，即链接效果直接跳到浏览器顶层。

 

表单总结：

1，任何的类型的表单项，必有2个最本质的东西；

Name<----->value,即：变量名<--->变量值

 

2.表单的action，method

action：代表，表单要提交到的地址；

method：代表表单提交的方法（即：表单数据如何发送）

 

3.method的两种方法比较

get与post

get提交，表单的值直接体现在浏览器上的地址栏

post提交，直接提交到action规则的url，url不变

 

get提交，因为数据在地址栏上体现，因此，能够提交的数据大小受限（一般来说受浏览器和服务器的具体限制。）一般来说，能够提交2K以内的数据。

 

post提交理论上没有规定上限值。

 

get无法上传文件类型、

post可以上传文件类型

 

表单

Select是块状标签并且他是一个下拉选择框

如何写表单的默认值？

 

答：对于text文本框，password密码框也是直接加value=“XXX”

 

对于textare大块文本域，默认值直接写在textare标签之间

 

对于单选radio的默认值用checked="checked"

 

对于多选框checkbox的默认值可以用checked="checked"多选。

 

对于select下拉框，

option选项加selected=“selected”就能默认选中

 

对于文件类型——不能设置--默认值

 

Html中的嵌套

在一个html里嵌套另一个html网页

<iframe align="center" width="950" height="170" src="你要添加的html路径" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

 

相对路径中加\与不加\的区别

加\后访问的地址直接变成http://localhost:8080目录下

 

背景透明度

filter: Alpha(Opacity=30);

    opacity:0.6;

 

opacity越小越透