HTML基础知识总结

几个工具：

IETester：多版本IE测试

Expression Web

DreamWeaver 美工页面

XHTML：符合XML标准的HTML。

标签成对出现。比如<br></br>是符合XML的，而<br />是不符合XML的。

1.属性值：用单引号或者双引号括起来

注释：<!-- -->

特殊字符：< > Space 需要转义

< &lt; less than

> &gt; greater than

空格 &nbsp; no-break space

2.<br>与<p> 段落之间有空白。

<br>：换行，行前空白比较小。

<p>：分段，段前有比较大的空白。

3.URL

/ 表示网站根目录

../ 表示父目录

../../ 表示父目录的父目录

./或不写 表示相对当前路径的目录，站内引用最好用相对URL。

<a>的target属性设定为"_blank"可以在新窗口中打开超链接，默认在当前页面打开超链接

<a href="http://www.baidu.com"> 百度</a>

<a name="Last"><a>设置瞄点

<a href="#Last">跳到最后</a>

4.<img>图片标签

alt属性为图片无法显示时的显示的文本

<img src="/Images/123.jpg" height="40%" width="40%" alt="图片无法显示" />

最好指定width和height。因为网页先加载，图片后加载，先占位。

图片缩略图：

<a href="/Images/123.jpg" target="_blank">

<img src="/Images/123.jpg" height="20%" width="20%" />

</a>

这种方式，仍然会下载大图，再由浏览器缩小显示。流量仍然是下载大图不变。

另一种方式：

两张图，分别存储缩略图和大图。先加载缩略图，点击后再请求大图。

5.列表

<ul> un-ordered list 圆点列表，没序号

<ol> ordered list 有序列表，有序号

6.文件选择框：自带“浏览”按钮

<input type="file" />

7.FieldSet 将控件划分一个区域，类似GroupBox效果

8.样式表

CSS（层叠样式表）是用来美化页面的，可以对页面元素进行更精细的设置，样式主要描述原色的字体颜色、背景颜色、边框等。

CSS有三种方式：

（1）元素内嵌

直接将样式写入元素的style属性中。适用于样式没有可复用性的场合。

例子：

<input type="text" value="123"

style="border-style:double; border-color:Yellow; border-width: 3;

background-color:Blue; height: 24px; width: 152px;" />

（2）页面嵌入

在head中加入：

<style type="text/css">

input{border-color:Yellow,color:Red;}

</style>

例子：

<style type="text/css">

input

{

background-color: Red;

border-color: Black;

}

div

{

background-color: Yellow;

}

p

{

background-color: Green;

}

</style>

表示页面中所有input都是采用指定的样式，适合于样式复用，减小页面体积。

（3）外部引用

将css内容写入css后缀的样式文件，然后在页面中引用，在head中加入。

<link type="text/css" rel="Stylesheet" href="s1.css" />

适合于多个页面共享CSS。

（4）常见样式

（a）css计量单位

px（像素） 30%（百分比） em（相对单位）

width；30px

（b）background-color:Red 背景颜色

color:文本颜色

（c） 边框

border-style:solid;

border-color: 边框颜色

border-width:默认为0

（d）display：元素是否显示

可选none（不显示）

inline（显示为内联元素，元素前后没有换行符）

block（显示为块级元素，元素前后会带有换行符）

（e）cursor：鼠标在元素上时显示的光标图标

可选：

cursor：默认光标

pointer：超链接上的手

text：输入Bean

wait：忙沙漏

help：帮助

……

（f）LI不显示圆点

LIST-STYLE-TYPE:none，一般设在li或者ul上

9.div和span

（1）div：层

div类似panel。

<div> </div>将内容放到层中，整体处理，整体移动

div将所有内容包成一个方块。将内容放在一个矩形的区块中，会影响布局

（2）span：块

<span></span>

span只是把一段内容定义成一个整体进行操作，但不影响布局和显示。

10.样式选择器

对于非元素内联的样式需要定义样式选择器，也就是说明样式适合哪些元素。一共有三种CSS选择器：

（1）标签选择器

对于指定的标签采用统一的样式

input{border-color:Yellow;}

（2）class选择器

以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可以同时设定多个class，名称之间加空格

样式名称开头要加点（.)

.warming{background:Yellow;}

<div class="warming"><div>

（3）id选择器

为指定id的元素设定样式，id前加#

#username

{

font-size:xx-large;

}

<input id="username" type="text" value="aaaa" />

（4）标签+class选择器

class选择器可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

input.account{color:Red;text-align:right;}

label.account{color:Blue;text-align:left;}

<input class="account" type="text" value="1111" />

<label class="account">2222</label>

id、style、class可以同时组合使用：

<input id="username" class="account" style="font-size:xx-large type="text" value="12345" />

（5）关联选择器

P strong{background-color:Blue;}

表示P标签内的strong标签内的内容使用的样式。

（6）组合选择器

同时为多个标签设定一个样式

h1,h2,h3,input{background-color:green;}

（7）伪选择器

为标签的不同状态下设定不同的样式

A:visited 超链接点击过的样式

A:active 选中超链接时的样式

A:link 超链接未被访问时的样式

A:hover 鼠标移到超链接时的样式

A:visited{TEXT-DECORATION:none}

A:active{TEXT-DECORATION:none}

A:link{TEXT-DECORATION:none}

A:hover{TEXT-DECORATION:underline}

上面这个模板一般是写死的，link.css ，同一个项目内共享CSS，所有超链接都一样。

11.样式选择器优先级

内联样式会覆盖标签样式。

<div style="background:Yellow;"></div>