HTML的标签

表单标签

<form action=”表单数据提交的地址--->默认提交到当前页面”

       method=”提交方式--->常用的有get和post，默认为get”

注意：GET：数据显示到地址栏中，有大小限制

POST：数据不会显示到地址栏中，无大小限制

表单元素：

表单的输入：<input >

根据type属性有不同的输入类型：

Ø Date ：显示的是日历输入

Ø Email：邮箱输入格式

Ø Number：数字的输入格式

Ø Color：颜色的输入格式

Ø Text：文本框输入格式

Ø Checkbox：复选按钮

Ø File：上传

Ø Submit：提交按钮

Ø Reset：重置按钮

Ø Button：普通按钮，没有任何功能

Ø Image：图片按钮

Ø Hidden：隐藏字段

表单文本域：textarea

Ø Rows：行数

Ø Cols：列数

表单下拉列表：select

<selsct selected：默认选择>

<option > </option>

</selsct>

常用属性：

Name：表单元素的名称，必须有属性，后台才可以接收数据

Value：文本框默认值

Size：文本框长度

Maxlength：文本框输入的最大长度

Readonly：只读文本框

Disabled：废弃文本框

Password：密码框

Radio：单选按钮

checked：默认被选中

表格

<table  cellspacing = “表格之间间隙空间”align = “表格位置”

Border = “边框”>

<tr>-->行

<td  colspan = “列合并”rowspan = “行合并”>-->列</td>

</tr>

图片

<img  src = “图片来源(相对路径)”alt=“图片找不到时出现”/>

注意：px是像素单位

超链接

<a href = “超链接的路径”target = “打开方式：_self在自身页面打开，_blank新打开一个窗口,_parent = “在框架中使用”></a>

有序列表

<ol  type=”数字，英文，罗马字符（i）”  start= “从哪开始”>

<li>列表项</li>

</ol>

无序列表

<ul  type=”disc：点 ，circle：空心圆，sequare：“方块”>

<li>列表项</li>

</ul>

<font size=”字体大小(1-7)“ face=”字体”></font>

排版标签

<!-- html的标题标签-->：注释

<h1></h1>

<h2></h2>：1-6

<p></p>:段落标签

<b></b>:字体加粗标签

<i></i>:斜体标签

<u>:下划线标签

<center>:居中标签

标签可嵌套

<br/>换行

<hr/>横线分隔线

<pre>：原生标签

空格

框架标签

<frameset  rows = “行切割”cols = “列切割”>

      <frame src = “引入页面地址” name = “地址名”/>

注意：

Frame：代表切分成的每个部分

Frameset：与body冲突，不可同用

【HTML的块标签】

<div></div>                :默认一个div独占一行.

<span></span>        :默认在同一行.

CSS

【CSS的选择器】

Ø 元素选择器：

div{

border:1px solid blue;

width:40px;

height:45px;

}

Ø ID选择器：

#d1{

border:2px solid red;

}

Ø 类选择器：

.divClass{

border:2px solid yellow;

}

Ø 后代选择器：

div a{ }

Ø 子元素选择器：

div > span找这个div中的第一层级的span元素.

【CSS的浮动】

Ø 使用float属性可以完成DIV的浮动.

Ø 清除浮动效果：使用clear属性进行清除

#d3{

float:left;

}

.clear{

clear:both;

}

css中的盒子模型

Ø 内边距：

Padding：

H{padding：10px}

H{padding:top上，right右，bottom下，left左}

Ø 外边距：margin

Css中的定位：

Position：定位属：

Relative：相对定位

Absolute：绝对定位

Fixed：相对定位

Ø 使用另外两个属性：left,top

Dispaly:none :隐藏  block显示

Ø 伪类：

A:Link:没动之前（为访问的链接）

A:Visited：动了之后（已访问的链接）

a:hover:悬停（鼠标移动到到链接上）

A:Active：放上去之后（已选定的链接）

HTML的标签

表单标签

<form action=”表单数据提交的地址--->默认提交到当前页面”

       method=”提交方式--->常用的有get和post，默认为get”

注意：GET：数据显示到地址栏中，有大小限制

POST：数据不会显示到地址栏中，无大小限制

表单元素：

表单的输入：<input >

根据type属性有不同的输入类型：

Ø Date ：显示的是日历输入

Ø Email：邮箱输入格式

Ø Number：数字的输入格式

Ø Color：颜色的输入格式

Ø Text：文本框输入格式

Ø Checkbox：复选按钮

Ø File：上传

Ø Submit：提交按钮

Ø Reset：重置按钮

Ø Button：普通按钮，没有任何功能

Ø Image：图片按钮

Ø Hidden：隐藏字段

表单文本域：textarea

Ø Rows：行数

Ø Cols：列数

表单下拉列表：select

<selsct selected：默认选择>

<option > </option>

</selsct>

常用属性：

Name：表单元素的名称，必须有属性，后台才可以接收数据

Value：文本框默认值

Size：文本框长度

Maxlength：文本框输入的最大长度

Readonly：只读文本框

Disabled：废弃文本框

Password：密码框

Radio：单选按钮

checked：默认被选中

表格

<table  cellspacing = “表格之间间隙空间”align = “表格位置”

Border = “边框”>

<tr>-->行

<td  colspan = “列合并”rowspan = “行合并”>-->列</td>

</tr>

图片

<img  src = “图片来源(相对路径)”alt=“图片找不到时出现”/>

注意：px是像素单位

超链接

<a href = “超链接的路径”target = “打开方式：_self在自身页面打开，_blank新打开一个窗口,_parent = “在框架中使用”></a>

有序列表

<ol  type=”数字，英文，罗马字符（i）”  start= “从哪开始”>

<li>列表项</li>

</ol>

无序列表

<ul  type=”disc：点 ，circle：空心圆，sequare：“方块”>

<li>列表项</li>

</ul>

<font size=”字体大小(1-7)“ face=”字体”></font>

排版标签

<!-- html的标题标签-->：注释

<h1></h1>

<h2></h2>：1-6

<p></p>:段落标签

<b></b>:字体加粗标签

<i></i>:斜体标签

<u>:下划线标签

<center>:居中标签

标签可嵌套

<br/>换行

<hr/>横线分隔线

<pre>：原生标签

空格

框架标签

<frameset  rows = “行切割”cols = “列切割”>

      <frame src = “引入页面地址” name = “地址名”/>

注意：

Frame：代表切分成的每个部分

Frameset：与body冲突，不可同用

【HTML的块标签】

<div></div>                :默认一个div独占一行.

<span></span>        :默认在同一行.

CSS

【CSS的选择器】

Ø 元素选择器：

div{

border:1px solid blue;

width:40px;

height:45px;

}

Ø ID选择器：

#d1{

border:2px solid red;

}

Ø 类选择器：

.divClass{

border:2px solid yellow;

}

Ø 后代选择器：

div a{ }

Ø 子元素选择器：

div > span找这个div中的第一层级的span元素.

【CSS的浮动】

Ø 使用float属性可以完成DIV的浮动.

Ø 清除浮动效果：使用clear属性进行清除

#d3{

float:left;

}

.clear{

clear:both;

}

css中的盒子模型

Ø 内边距：

Padding：

H{padding：10px}

H{padding:top上，right右，bottom下，left左}

Ø 外边距：margin

Css中的定位：

Position：定位属：

Relative：相对定位

Absolute：绝对定位

Fixed：相对定位

Ø 使用另外两个属性：left,top

Dispaly:none :隐藏  block显示

Ø 伪类：

A:Link:没动之前（为访问的链接）

A:Visited：动了之后（已访问的链接）

a:hover:悬停（鼠标移动到到链接上）

A:Active：放上去之后（已选定的链接）