页面设计总结：

1.首先分析布局由几部分组成确定盒子分布。

width, height, margin, background-color:便于查看（body使用border 1px solidblack margin：0 auto 查看位置）

2.必要时候盒子模型里面也会套着盒子模型;

3.必要时候可以使用父子选择器控制特定标签;

4.可以定义一个字体的类选择器设置常用字体。

5HTML的基本结构:
<元素属性 =‘属性值’。。。>内容</元素>
如果没有内容，可以这样写
<元素属性 =‘属性值’。。。/ >
<元素属性 =‘属性值’。。。></元素>

特别注释：元素就是标记

HTML基本语法知识点

1、html 的超链接

<a href=”mailto:[email protected]”>给管理员写信</a>

2、html 图像元素

3、html 表格

<table border=”边框宽度”cellspacing=”空隙大小”cellpadding=”填充大小” ><tr align =”center”><td>1</td><td>2</td><td>4</td></tr></table>
<tr></tr>表示行
<td></td>表示列
cellspacing=”空隙大小：指两个列，行间的距离。
cellpadding=”填充大小：各行各列中的内容被填充，这样就会在一定程度上撑大格子。

4、html 列表---无序列表

5、html 列表---有序列表

6、html 列表---框架

7、html form （表单）元素

html的表单元素，主要用于让用户输入数据，并提交给服务器。

基本语法：

表单元素的格式：
<input type = * name = **/>
type = text[文本框] password[密码框] hidden [隐藏框] checkbox[复选框]
radio[单选框] submit[提交按钮] reset[重置按钮] image [图片按钮]
name 是你给该表单元素取名

div+css（层叠样式表单）（使得内容和样式分离）

Div是用于存放内容（文字，图片，元素）的容器。

Css 是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。

选择器

①类选择器 ②id选择器 ③html选择器 ④通配符选择器

1、类选择器

类选择器的语法：
.类选择器名{
属性名：属性值；
。。。

}

2、id 选择器

选择器基本语法：
#id 选择器名{
属性名：属性值；

}

3、html 选择器

基本语法：
html 元素名称{
属性名：属性值；

}

例：

/*html 的选择器*/
body {
color:orange;

}

4、通配符选择器

如果希望所有的元素都符合一种样式，可以使用通配符选择器。

基本语法：

属性名：属性值；

}

内部CSS

<html>

<head>

...............

. style{

font-size: 20px

color: red;

}

</head>

<body>

.................

</body>

</html>

外部CSS

.......

<head>

</head>

<body>

<div class=”style1”>

<table>

..........

</table>

</div>

</body>

</html>

My.css文件

.style1{

width:300px;

heigth:200px;

}

/*子选择器*/

.style1 table{

width:298px;

heigth:180px;

}

块元素和行内元素

行内元素（inline element）：特点是只占内容的宽度，默认不会换行，行内元素一般放文本或者其它的行内元素。常见内联元素<span><a>
块元素(block element)：特点不管内容有多少，他要换行，同时沾满整行，块元素可以放文本，行内元素，块元素。常见块元素<div><p>

块元素和行内元素的转换
如果我们希望一个元素按照块元素方式显示，则：
style = “Display：block；”->转为块元素（比如a）
如果我们希望一个元素按照行内元素方式显示，则：

style =Display：inline； ->转为行内元素（比如div）

浮动

左浮动： float：left 是指让该元素，尽量向左边移动，让出自己右边空间，给下一个元素显示。

右浮动： float：right 是指让该元素，尽量向右移动，直到碰到他的父元素的右边界。（特别强调：浮动对块元素和行内元素都生效！）

清除浮动：clear:right; clear:left; clear:both

 如果我们的div框很多，外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下移动，直到有足够的空间。

 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

定位

position：static ：元素正常生成

position：relative ：元素框偏移某个距离，它原本空间任保留

position：absolute ：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

position：fixed ：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。（以body本身来定位）

//Relative.html源代码： 
<div class="s1">Sunny</div> 
<div id="special" class="s1">Alison</div> 
<div class="s1">Alice</div> 
<div class="s1">Jasun</div> 

//Relative.css源代码：
.s1{width:100px; 
height: 60px; 
background-color: yellow; 
margin-left: 10px; 
float: left;} 
#special{position: relative;/*这里我们使用了相对定位*/ left:40px;/*在原来的位置，向右移动大小（如果向左移动，则值是负数*/ 
top:70px;/*在原来的位置，向下移动大小（如果向上移动，则值是负数）*/}

HTML相关知识