HTML 标签复习 2、表单和服务器连接 3、框架笔记

一、概念：

1、html（hypertext markup language）超文本标记语言，在网页上显示文字，图片，视频，音频等。

2、Html语言是通过标签来声明的，例如<img>标签生命这是一个图片。

3、Html的标签都是闭合的，有开始有结束，如果标签内没有内容可以简写成：<img src=” ”/> 。

4、Html的标签是由属性名和属性只构成<标签 属性名=属性值>

二、html标签复习（有笔记，有代码）

段落：	<p>标签	Html图像	<img/>
超链接标签 ：	<a> </a>	Html表格	<table>
框架	<iframe></iframe>

html标题标签 ：<h1> <h2> <h3> <h4> <h5> <h6>

HTML 段落 ：

段落是通过 <p> 标题定义的。

HTML 换行：

换行是通过<br/>标签定义的。

<Strong>标签和<b>标签解释：

<Strong> 加强语气的，所以对搜索引擎来说更重要。

<b> 定义粗体文本。

<strong> 定义加重语气。

<sub> 定义下标字。

<sup> 定义上标字。

<pre> 定义预格式文本。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

<blockquote> 定义长的引用。

<q> 定义短的引用语。

1、标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

h1 最重要的， h2（次重要的），再其次是 h3，以此类推。

2、HTML 水平线

<hr /> 标签在 HTML 页面中创建水平线。

3、HTML 注释

<!-- This is a comment -->

三、HTML 属性

四、HTML 样式

style 属性：改变html的样式

1、style 属性淘汰了“旧的” bgcolor 属性。

<h2 style="background-color:red">This is a heading</h2>

2、style 属性淘汰了旧的 <font> 标签。

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

3、style 属性淘汰了旧的 "align" 属性。

<h1 style="text-align:center">This is a heading</h1>

注意：

不建议使用 style属性定义html元素的样式，建议使用CSS来控制样式

五 、HTML超链接

1、href 属性规定链接的目标

Href属性 指向目标连接

Target属性 _blank 弹出一个新的窗口 _self （替换当前窗口） _parent 在父窗口基础上打开（火狐的话）

<a href="http://www.tmall.com/">跳转到淘宝</a>

2、target 属性定义被链接的文档在何处显示

新窗口打开文档：<a href="xxx" target="_blank">xxx!</a>

3、name 属性

使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链 接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

<a name="tips">Useful Tips Section</a>

<a href="#tips">Visit the Useful Tips Section</a>

六、表格：

1、表格边框：border属性

2、表格中的表头：<th>

3、带有标题的表格：<caption></caption>

4、跨行、跨列的单元格 colspan rowspan

5、单元格边距：cellpadding 单元格内容和边框之间的距离

6、单元格间距：cellspacing 单元格与单元格之间的距离

七、有序列表、无序列表

<ol> ordered line

无序列表

<ul> unordered

<Li>

1、有序列表

有序列表类型：A、a、I、i

2、无序列表

无序列表类型通过type属性：circle、disc、square

八、HTML表单

1、表单使用表单标签（<form>）定义

2、文本域 <input type="text" name="firstname" />

3、单选按钮 <input type="radio" name="sex" value="male" /> Male

4、复选框 <input type="checkbox" name="car" />

5、下拉列表 <select> 和 <option> 预选值selected

6、文本域 <textarea>

7、表单提交 action 属性、提交方式 和 submit提交按钮

8、隐藏域 hidden属性

Type=hidden

在浏览器端，是看不到的，为了数据更安全，偷偷的提交过去的

9、Enctype属性，如果需要上传图片，enctype属性的值，必须是 multipart/form-data

10、Method属性，表弟那提交的方式，get post

11、Action 属性，表单提交的地址

12、文本域：

Text

Value属性，控制默认值

Size 属性，控制表单显示多少个字符

Maxlength属性，限制表单最多输入几个字符

Readonly属性，控制表单的内容为只读的

密码

Name属性 和 id属性通常都是用来定位到某个表单的

九、HTML 图像

1、背景图片 background="eg_background.jpg">

2、排列图片 align属性 对齐方式：bottom middle top

3、调整图像尺寸 "height" 和 "width" 属性

4、替换文本 alt属性

5、制作图像链接 <a href="xxx"><img src="xxx" /></a>

6、img图像映射 通过<img/>后添加<map>和<area>设置

图像映射：

<map>元素表明映射的开始，他只有一个name属性

<area>元素表明每个区域，如果要把一个图片分4个区域，则用4个area。

area元素的属性：

shape：rectangle\poly\circle 映射区的形状

coords：指定区域的坐标。

href和nohref：href指定目的的链接，如果不指定href属性，则需要指定nohref，nohref="nohref"

target：和<a>一样

十、表单和服务器连接

浏览器 提交数据到服务器-----需要：

1，服务器地址 action

2，确定提交方式，以post方式提交的，那么在服务器段就必须使用post方式接收，

3，enctype="multipart/form-data" 不是必须的，只有当我们向服务器端上传图片的时候，使用

如何在服务器端获得复选框的值？

1，首先，我们需要保证name属性=“name[]”这种形式的

2，接收的时候，因为传递过来的是一个数组，接收的时候以数组的形式来接收

总之，大家只需要记住，我们传递的时候是通过 数组的形式传递，接收的时候也是通过数组下标的形式接收

<input type=”chackbox” name=”sports[]” value=”篮球”/>

<input type=”chackbox” name=”sports[]” value=”足球球”/>

<input type=”chackbox” name=”sports[]” value=”乒乓球”/>

Echo $_POST[‘sports’][0];

Echo $_POST[‘sports’][1];

Echo $_POST[‘sports’][2];

Html 框架的学习：

1，框架集，是通过frameset标签来实现的

Rows属性，将整个窗口横向分割成几部分

Cols属性，将整个浏览器窗口纵向分割成几部分

<frameset rows=”20%,*” frameborder=”1”>

<frame src=”top.html”>

<frameset cols=”20%,*” noresize>

<frame src=”left.html” name=”frame1”>

<frame src=”right.html”name=”frame2”>

</frameset>

</frameset>

Noresize属性，控制框架的边框不能拖动

Scrolling=“no” 无滚动条

2，iframe 活动框架

用法非常灵活

属性控制框架的大小 width height

打开超链接后在哪里显示内容，是通过target属性实现的

<a href="ldh.htm" target="agou">刘德华</a>

<a href="zxy.htm" target="agou">张学友</a>

<iframe src="bottom.htm" height="300px" name="agou"/>

3，利用table 和 框架来搭建hao123

使用技术：table + 框架

Hao123其他模块

1，左侧导航部分，使用框架技术

2，右侧列表部分

思路：

1，将整个表格 分成两个小的table，各自做自己的布局

2，最左侧的table，我们可以分成 2行2列的表格，第二行是一个活动框架，我们可以将他提取出来

3，最右侧的table是一个8行6列的表格

CSS复习：

由于样式和html内容写在一起，导致代码特别紊乱，于是提出思想：

Html内容 和 显示 相分离

Html 只负责写内容，搭建框架

CSS只负责装饰内容，装饰框架

举例子：html 比喻房子 css比喻修饰、装饰房子（挂一幅画、粉刷颜色...）

Css---- cascade style sheet 层叠样式表

1，CSS的基本语法

（1）CSS是由 选择器 和 声明（声明=属性+值）来组成的

（2）每一条声明里面 有属性、值

选择器{属性：值；属性：值....}

选择器：找到某个标签的一种方法/机器

Css属性的单位：

颜色值：

英文单词 red、green、blue...

16进制 #ff0000;

rgb颜色值：rgb(255,0,0);

大小值：

浏览器默认的字体大小，16px

Px----像素（pixel）-----

电脑的分辨率：1366x768像素

整个屏幕 是由 1366像素点组成 纵向是由 768个像素点组成，像素点 一个一个的颜色值

16px 是什么意思？

所以像素 是一个相对的长度，和浏览器的分辨率相关

他是分辨的百分比 16/浏览器所占的大小

2，CSS的四种样式表

（1）内联样式表

缺点是如果给很多元素设置样式太繁琐

<p style=”color:red;background-color:yellow;”>;sldkj’ldkj’k’aAFDEF

</p>

（2）嵌套样式表

缺点：如果其他文件也需要这种样式的话，需要反复再去写同样的样式

嵌入样式表，像嵌入javascript代码一样，将css代码嵌入到style标签中

缺点是，如果其他文档也需要样式表，还是需要反复写style标签

<style>

A{border:2px solid green;

}

</style>

（3）外部样式表

最常用的

多个文件需要同一种样式的时候，我们可以将共同的样式 封装起来，保存成一个css文件

通过link标签 加载的

<link rel=”stylesheet” type=”text/css” href=”layout.css”/>

注意：不要写在<style> </style>标签中

（4）输入样式表

（1）在CSS文件中通过 @import 加载

@import url(bg.css);

@import url(text-align.css);

@import url(font.css);

@import url(border.css);

（2）在html文件<style>标签中嵌套：

<style>

@import url(XXX.css);

</style>

CSS样式的优先级：

1，就近原则,

2，加载顺序，后加载的会修改之前的样式

<link rel="stylesheet" href="css/border.css"/>

<style>

p{

border:2px solid green;

}

</style>

2，CSS选择器

分类：

1，类选择器，就是通过class属性找到某个标签的方法

任何html的标签至少会有 class属性、id、name、style

Class属性的xxx标签

.P1{ text-align:center;

Font-size:25px;

Color:green;

}

.p2{background-color:red;

}

2，id选择器，通过id属性来找到某个标签的方法

#div1{border:1px solid green;}

3，关联选择器，又称上下文关系选择器。通过上下文关系来确定标签的位置

Ul li.vegetable{italic;}

意思：找到ul标签里面 class 为 vegetable的li标签

4，组合选择器

就是组合 多个 html 标签，来设置样式

需求：

给 class='vegetable'，id="div1"， class="p1"设置样式，让其字体为 30px，颜色为蓝色

注意：

同一个标签，只能有一个 id属性，因为id是唯一的

Class属性可以有多个，为了区别其他的，建议这样写：标签名.class属性名 p.p1

5，伪元素选择器

伪元素，就是 同一个html标签，在不同的状态下，有不同的效果，这样的元素称为伪元素

目前，支持伪元素的，只有 a标签 和 p标签

伪元素的状态：

超链接：

A:hover 鼠标移上去的时候

A:link 默认状态
A:visited 访问过之后
A:active 选择超链接的状态
由于伪元素选择器 兼容性不好，不建议大家使用，可以以后通过javascript来实现

3，选择器的继承

和CSS样式优先级，有类似之处

关联的选择器 > id选择器 > 类选择器 > 元素选择器

越精确的优先级越高

3、CSS中常见的属性和值：

1，字体属性：

字体族谱 font-family

字体风格 font-style normal 普通，italic 斜体

字体大小 font-size

字体加粗 font-weight bold

Color：字体颜色

2，控制文本的属性：

字母间隔 letter-spacing 允许负值

文字间隔 word-spacing

文字修饰 text-decoration

underline下划线 overline 上划线 line-through 删除线 blink闪烁

横向排列 text-align

文本缩进 text-indent

行高 line-height

字体变形 text-transform uppercase大写

控制文本的属性

Letter-spacing：字母间隔

Word-spacing：文字间隔

3，背景属性：

背景颜色：background-color

背景图片：background-image:url()

背景平铺：background-repeat repeat repeat-x repeat-y no-repeat

背景附件：background-attachment

背景位置：background-position 横向：left center right 纵向：top center bottom

DIV+CSS来布局网站

21世纪初，2000年左右，网站

搜索引擎，开始反思了：如何判断一个网是好是坏？

结果：看内容，看搜索引擎抓取内容的速度

Div+css-----div只写内容，然后css控制他的样式
1，由于之前的table，布局网站，层层嵌套，导致搜索引擎抓取的障碍增大，所以被淘汰，div 抓取内容比较顺利
2，Table----显示的时候，等整个table框架加载完毕一块显示，div---加载一部分显示一部分，如果页面太长的话，导致后面可能会出现空白

但是，网站布局也并不是绝对的，现在 数据报表，后台管理方面 table比较方便的

DIV+CSS布局网站的优点：
1，内容、显示相分离；
2，提高工作效率
3，利于改版和维护
4，利于搜索引擎优化
5，代码简洁，提高访问速度

盒子模型：

调试工具：

IE系列浏览器： IE Tester

非IE系列的浏览器：FF---Firefox 火狐浏览器---Firebug插件

工具---附加组件----Frebug---安装

安装软件：尽量不要出现 中文、特殊字符、空格

任何一个html的标签我们都可以看成是一个容器（盒子），既然有盒子肯定有 宽（width）、高（height），边框（border），内容和边框之间有一个空隙（padding），如果有多个盒子，会存在盒子与盒子之间存在边距，margin

需求1：

需求2：盒子这两个字 和包含他的盒子的 间距稍微大一点

需求3：盒子两个字 居中显示

注意：：：谷歌浏览器下，margin-top 不起作用解决之道：

增加 float 浮动，即可

Margin、padding 值复制

margin:25px; 如果只有一个值，其他都会复制这一个值

而且，margin、padding 顺序，上右下左

1，如果是一个值，其他三个方向都复制这一个值

2，如果是两个值，上下对应一个值，左右对应一个值

3，如果是3个值，也就是缺左边的，于是复制右边的

定位分为 relative，absolute，fixed，static

绝对定位：

position	用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）
top	一个元素上外边距边界与其包含块之间的偏移
left	一个元素左外边距边界与其包含块之间的偏移
vertical-align	设置元素的垂直对齐方式
z-index	设置元素的堆叠顺序，值高的元素会覆盖值比较低的元素
z-index	设置元素的堆叠顺序，值高的元素会覆盖值比较低的元素
display	Display：none， 表示不显示 Display：block，块状显示，会在元素后面添加换行符 Display：inline，内联显示，在元素后面删除换行符，多个可以在一行内显示
Visibility	visible，显示 hidden，隐藏 inherit，继承父元素的值
Overflow	Overflow：hidden 超出的部分隐藏

属 性	描 述
float	left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动
clear	left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。

1、区块浮动

绝对定位：脱离正常的文档流，相当于飘起来

向哪里飘起来，于是就有了float：

1，div 是块级元素，他会自动换行

2，对元素使用 float 浮动的话，他会自动的把定位方式变为 绝对定位

如果绝对定位之后，这个元素下面还有元素，会顶上去

注释：图片正常情况下，按照上下的顺序正常显示，当图片浮动起来，他下面的文字开始网上挤，于是生成一个围绕的效果

即使浮动起来也是有顺序的，按照从左向右的顺序

但是有时候，即使某个元素浮动起来，我们也不希望 他下面的元素受影响，于是我们可以使用 clear：属性

他有4个值，left（左边不受浮动元素的影响）、

right（右侧不受浮动元素的影响）、

both（左右都不受浮动元素的影响）、none，

浏览器---目的就是美化显示效果的

1，文本居中：,

Line-height：行高，设置为 等于 包含他的父元素的高度

Vertical-align：垂直居中

Text-align：水平居中

2，Padding-top 失效的解决： 增加float浮动即可

专题网页制作：

整体的结构：

一个网站整体是由3部分组成：头部、内容主体部分、尾部

1，顶部3个导航条

什么时候使用 id 选择器？

独一无二的元素，建议使用 id

2，Body 部分默认和 其他盒子之间有一个外边距，通常我们上来先body 的外边距清除掉

IE 和 其他浏览器 在居中方面区别：

FF/Chrome margin-left margin-right 居中

IE

百分比：

班级90分数以上的 占 100%，意味着 90分以上的人 / 总人数 = 100%

我们说 header width=100% ，header的div 占 包含他的元素的比例

/*height:800px;*/

/*background:green; 测试用*/

3，分割头部为3部分

<html>

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="css/layout.css"/>

</head>

<body>

<div id="container">

<div id="header">

<div id="logo"></div>

<div id="banner"></div>

<div id="custom"></div>

</div>

<div id="main"></div>

<div id="footer"></div>

</div>

</body>

</html>

body{

margin:0px;

padding:0px;

text-align:center;

}

#container{

width:960px;

/*height:800px;*/

/*background:green; 测试用*/

border:1px solid;

margin-left:auto;

margin-right:auto;

}

#header{

width:100%;

height:80px;

/*background:red;*/

}

#main{

width:100%;

height:600px;

background:yellow;

}

#footer{

width:100%;

height:60px;

background:green;

}

#logo{

float:left;

width:200px;

height:80px;

background:pink;

margin-right:10px;

}

#banner{

float:left;

width:600px;

height:80px;

background:blue;

}

#custom{

float:right;

width:140px;

height:80px;

background:#ccc;

}

4，header 部分 和 内容主体部分有一个分隔条

解决 IE 和 FF/Chrome 分隔条高度上的差别：

IE浏览器会自动的调整高度

FF浏览器不会，你给他分配多少他就是用多少