合并_00基础班html+css(6days)

基础班课程安排

Html 3天Css：3天
一个静态网页项目：呱呱网
Javascript：8-9天

????—— 当当网js动态效果网页

php web编程入门：6天（apache，mysql，php）

????—— 留言板（一个真正实用的php动态网站）

html介绍

html：超文本标记语言（ HyperText Markup Language ）

html其实主要是为了将文件（文档）的内容以一定的形式和含义表现出来，这就是html的设计思想：

表形：以一定的外形外观表现出来。
表意：规定一定的含义让人（和电脑）能够识别出来。

html的一般形式：

????html是由一个一个的标签所构成的，标签之间永远都是相互嵌套。

????一个标签的一般形式：

????<标签名属性名1=值1 属性名2=值2 …….. > 内容部分 </标签名>

????说明：

属性可以有若干个，每个标签的属性不太一样。当然属性也可以没有。
属性实际上是用来给标签做进一步的设定用的。
有少数标签没有内容部分，则此时标签的后半部分也不需要——被称为"单标签"
有少数属性没有值，则直接写属性名。

一个网页的基本结构性标签如下：

<html >

????<head>

????????<title >这是网页标题</title>

????</head>

????<body>

????????。。。。。。。。。。。。。。。。（网页的主要内容都在这里）

????</body>

</html>

字体元素

strong：强调字体: <strong > 文字</strong>

b????????粗体字体

i????????斜体字体

u????????下划线字体

sub????????下标字体

sup????????上标字体

font????：用于设定文字颜色，大小和具体字体的标签，其格式为：

????<font color="某颜色" size="某大小" face="字体名字" > 内容文字 </font>

address: 设定地址信息文字

big????：让文字"大一号"——相对来说的，相当于当前版面中的文字大小。

small????：让文字"小一号"

要学会常常查手册《HTML4 参考手册.chm》

排版元素：

h1, h2, h3, h4, h5, h6: 这6个标签都表示"标题"，h1是最大的标题，h6最小。

hr：在网页上显示一条横线，其更多多的属性使用如下：

????<hr color="颜色值" width="线长" size="线高(线宽)" noshade >

????noshade：设定该线没有阴影（即如果没有该属性，就会有阴影）。

p：段落标签，用来表示一个段落，其中的文字会连续出现，每个段落都有其自身的前后空隙（间隙）

br：换行。——在html中，如果没有自身的换行特性，则需要使用br来换行。

pre：预格式化文本文字，其中的换行符（不是br标签），空格，tab符等都能够原样输出。——通常用于在网页上显示程序内容

blockquote：引用标签，表示其中的内容是引用别的网站内容或别人的内容。

以下两个标签可以认为是最没用的标签，但以后会用的最多。

最没用：没有特定的外形，没有特定的含义，基本上，他们只表示一个原始含义：就是一个范围。

div：表示一个"自成一行"的范围区域

span：表示一个简单的文字范围区域——通常只用于文字。

颜色介绍

世界只有3种颜色，所有其他颜色都是由这3种颜色以一定的比例关系混合而成。

我们可以把以下3种基色，每种颜色的深浅程度分成256份，分别用0-255来表示。

红：red ：

绿: green：

蓝：blue：

我们如果用100个红，150个绿，200个蓝，则其颜色为： rgb(100, 150, 200)

常见颜色：

红：rgb(255,0,0)

绿：rgb(0,255,0)

蓝：rgb(0,0.255)

黄：rgb(255,255,0)

黑：rgb(0,0,0)

白：rgb(255,255,255)

上述数字都是10进制来说的，如果将上述数字写成16进制，则他们分别是：00-FF（对应0-255），则可以写成另一种形式：

????color="#红绿蓝"

列表标签（元素）

无序列表：由ul 和 li 共同构成，其基本格式为：

????<li>第1 项</li>

????<li>第 2 项</li>

????<li>第 3 项</li>

????<li>第 4 项</li>

</ul>

type="disc // square // circle"：分别表示该列表的前导符是原点，方块，圆圈。

有序列表：由ol 和 li 共同构成，其基本格式为：

????<li>第1 项</li>

????<li>第 2 项</li>

????<li>第 3 项</li>

????<li>第 4 项</li>

</ol>

type=" 1 // A // a // I // i "：分别表示该列表的前导符是数字，大些字母，小些字母，大些罗马数字，小写罗马数字。

start="开始序号"：设定列表从哪个位置开始排（即起始位置）。不管用什么符号，这里都只用数字。

定义列表：由dl，dt，dd共同构成的用于表示类型"字典词条解释"那种界面效果，其基本格式为：

dl其实是 definition list dt是 definition title dd是 definition description

<dl>

????<dt>词条或标题1</dt>

????<dd>对应解释/内容/描述</dd>

????<dt>词条或标题2</dt>

????<dd>对应解释/内容/描述</dd>

????<dt>词条或标题3</dt>

????<dd>对应解释/内容/描述</dd>

</dl>

常见快捷键：

ctrl + c : 复制

ctrl + v：粘贴

ctrl + s：保存

ctrl + z：撤销

ctrl + y：恢复

ctrl + x：剪切掉

ctrl + J：复制并粘贴当前光标所在行（editplus）

ctrl + f：查找

ctrl + h：替换

双击一个单词可以选中该单词。

a标签

a就是链接标签，使用形式：

target="在哪里打开"：用于指定该链接会在哪个窗口里打开，通常，有以下几个值可用：

????_blank: 新建窗口

????_self: "本窗口"，即当前窗口自身，现在网页通常都是这样的，属于默认值。

????_top: 在"最上层窗口"——后面学。

????_parent: 在"父级窗口"——后面学。

????自定义窗口名：我们可以在某些标签或技术中自己定义窗口名字，并指定在其中打开。

链接地址：通常会使用url来称呼。

相对地址：????相对于当前的网页文件所在的位置来说的，通过地址上的信息不能明确确定其文件位置的，通常就是相对地址。

????相对路径的几个特殊符号：

????????./ : 代表"本地"（当前位置），可以省略。

????????../ : 代表上一级路径（位置）

????举例：<a href="abc.html" >xxx</a>

????????<a href="./d1/abc.html" >xxx</a>——当前目录中的d1中的abc.html

????????<a href="d1/abc.html" >xxx</a>——同上

????????<a href="../ abc.html" >xxx</a>——上一级目录中的abc.html

????????<a href="../../abc.html" >xxx</a>——上2级目录中的abc.html

????????<a href="../ d2/d3/abc.html" >xxx</a>——上一级目录中的d2目录中的d3目录中的abc.html

绝对地址：

????互联网绝对地址： http://www.abc.com, http://www.def.com/abc/page1.html

????本地绝对地址： file:///C:/itcast/class/php130707/day1/8列表案例.html ——绝对不要用本地绝对路径

a标签的另一个应用：锚点应用

????锚点就是指一个网页内部的"链接"，其实就是在该网页的另一个位置而已——通常用于一个网页上的内容比较多（比较长）的的时候，在网页的顶部进行快速定位。

实现锚点功能，需要使用两个至少两个a标签相互配合，形式如下：

<a href="#锚点名" >文字</a>——表示点击的文字

………………………………………（中间的很多其他内容。。。。）

<a name="锚点名" ></a>——表示位置的标签

a标签的第三个应用：用于发送邮件

<a href="mailto:[email protected]" >没事给我mail</a>

a标签的第4个应用：用于下载：

二进制介绍

10进制

10?

11?

12?

13?

14?

15?

16?

8进制

10?

11?

12?

13?

14?

15?

16?

17?

20?

16进制

10?

2进制

10?

11?

100?

101?

110?

111?

1000?

1001?

1010?

1011?

1100?

1101?

1110?

1111?

10000?

2⁰

2¹

2²

2³

2⁴

16?

10000(10) = 10⁴

10000(2) = 2⁴

字符编码介绍

在计算机中，本质上，任何东西其实都是用数字来表达的。我们的所有文字（包括中英文，各种符号，各种运算符）其实都是使用了一个数字来代表，比如：

Ａ：６５

Ｂ：６６

ａ：９７

中：５０００（假设）

华：５５００（假设）

．．．．．．．．

这样的数字被称为"字符编号"，每个字符都有一个固定的编号，一般来说，每个国家都会对其国家的文字进行一个文字编码标准化。

问题就来了：

在日文字中，其编码如下：

田：５０００（假设）

中：５００１（假设）

．．．．．．．．．

乱码的成因：一个人用某个编码写的字，在另一个人的电脑里，用另一个编码去识别并显示，就可能出现乱码。

对我们网页来说，需要注意两个编码方面的问题：

一个文件中的代码使用什么编码，是由其所使用的编辑器来决定。
一个网页文件，浏览器使用什么编码来显示，通常由html代码来设定：
1. <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
2. 这一行的意思是，程序员生成"我的网页是什么编码"

当我们浏览一个网页的时候，如果浏览器所使用的显示编码跟这个网页文件创建和编辑的时候所使用的编码不一致，就可能导致乱码。

我们中文编程中的常见编码：gb2312, gbk, utf-8,

昨日回顾

html是一种用来对所要表现的内容以一定的形式进行修饰的一种标签语法——从外观和含义两个方面来修饰。

????html标签的一般形式：

????<标签名属性名="属性值" …… >内容</标签名>

????特殊情况：

单标签: <br > <hr> <img> <input>

????????没有值得属性：noshade

<font color="red" size="7" >afasfasdf</font>

????????noshade：表示没有阴影。意思是，如果不写该属性，则一根横线默认情况下是有阴影。

常见标签：

????b，i，u，font，sub， sup， big， small， strong

????p，h1~h6， pre（预定义格式），blockquote（引用内容）， address（地址）， div，span

????ol》li， ul》li， dl》dt//dd

网页中常见编码对应总结：

????文件编码utf-8 —— meta声明编码utf-8

????文件编码ANSI —— meta声明编码gb2312

????文件编码ANSI —— meta声明编码gbk

meta标签

meta标签通常用来整体上对当前网页做一些额外的特性设置，这些设置并不会在网页上表现出来，而是出于对网页的各种描述或声明。常用的有3个：

????声明编码：<meta http-equiv="content-type" content="text/html; charset=编码名" >

????声明关键字：设定页面的关键字，有利于搜索

????声明内容描述：类似一篇文章的"概要"，引语，论文的简介，有利于搜索

????举例：

????<meta name="keywords" content="养猪, 增肥, 技巧" />

????<meta name="description" content="本网页介绍了某养猪大户几十年积累的养猪增肥技巧及详细操作" />

xml语言介绍

html语言： HyperText Markup Language

xml语言： eXtensible Markup Language——可扩展标记语言

xml语言不是为了在浏览器中显示，而是为了保存和传送数据。

举例：

<china>

????<Beijing>人口1600万，面积1600</Beijing>

????<shangdong shenghui="济南">

????????<jinan >人口300万</jinan>

????????<qingdao>海边度假胜地，人口200万</qingdao>

</china>

????xml语言的基本规则：

xml语言区分大小写（html不区分大小写）
xml语言中所有标签和属性都可以是自定义的（没有固定标签）
xml语言的标签必须闭合，有两种做法：
1. 常规做法： <标签名>内容部分</标签名>
2. 空内容做法：<标签名 />
xml标签必须严格完整嵌套: 每个标签都应该完整在其他某个标签中
xml的属性必须有值，且必须使用引号引起来。
xml文件中的空白字符也是有效内容。
xml的注释格式同html：

文档类型：

html在发展的过程中，经历的若干个版本，比如1.0, 2.0, 3.2, 4.0, 4.01

从另一个角度来说，4.0版本中，也有其不同的"副版本"——主要是3个：

????严格版：其中的标签和属性相对较少，能兼容的浏览器就更多：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

????宽松版：其中的标签和属性相对较多，能兼容的浏览器就更少。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

????框架型：是专门针对有关frameset标签而是用的类型。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

一个html文件的第一行可以声明当前网页的文档类型，这样，浏览器就可以使用我们声明的文档类型的那些标签定义去显示我们的网页。

我们的html通常语法都相对比较"随意"，这样，对浏览器没有什么太大的影响，但对其他应用来说，就比较麻烦。如果我们将我们的html写得更为严格，去遵守xml的规范，则我们的html文件就除了在浏览器中可以使用之后，在别的场合也可以使用。这种遵守只要稍做修改就可以了：

????1, 单标签使用一个斜杠进行结束，类似： <标签名。。。。。。 />

????2, 无值属性，需要给其加一个值，通常设置其值就等于这个属性名，比如：<hr noshade="noshade" />

????3, 区分大小写，推荐使用小写来写那些标签和属性名。

这就是所谓xhtml：

????xhtml = html + xml

这样，我们对应xhtml，就有了另外3个文档类型：

严格型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

过渡型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

框架型：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<br />

图片标签

align="对齐方式"：有 left，right，center

alt="图片说明信息"：用于搜素引擎"识别"该图片的具体内容。

title="文字提示信息"：用于供人看的信息，鼠标放上去就可以显示。这个属性是一个"通用属性"，几乎用在所有标签上都可以。

border="边框线宽度"：设定的宽度值直接写一个数字，其单位是像素（px）

图像映射技术

一个图片通常类似一个文字（只是通常更大）。其也可以在其外面加一个a标签产生链接。

如果让一张图上产生多个链接，以链接到不同的网页？

我们通过图像映射技术就可以实现，在一张图的内部的不同区域，产生不同的链接，其语法格式如下：

????

????

????<area shape="rect" coords="135,85,216, 152" href="http://www.xinjiang.gov.cn" />

????

????<area shape="circle" coords="440, 137, 15" href="http://www.beijing.gov.cn" />

????

????<area shape="poly" coords="100, 300, 200, 400, 300,200, 200, 300" href="http://www.beijing.gov.cn" />

</map>

计算机上的平面坐标通常都是以左上角为原点（0，0），向右为x正向，向下为y正向。

多媒体及外部插件介绍：

html4对多媒体的支持非常有限，而且，各浏览器的兼容性相当不理想。实际应用中，我们都是通过ｆｌａｓｈ这个插件来播放各种多媒体资源。

object：将外部"软件"（也就是所谓插件）安插到浏览器中。

embed：类似上面ｏｂｊｅｃｔ标签的功能。

用Dreamweaver 插入多媒体！

学完jsjquery后再仔细讨论！

表格应用

a?	b?	c?	?			?	?
aa?	bb?	cc?	?	?	?	?
?	?	?	?	?	?	?
?	?	?	?	?	?	?	?

实现表格至少需要以下３个标签并相互配合：

<table>

????<tr>

????????<td>a</td>

????????<td>b</td>

????????<td>c</td>

????</tr>

????<tr>

????????<td>aa</td>

????????<td>bb</td>

????????<td>cc</td>

????</tr>

</table>

所有表格的可见的内容，均应该出现在td标签中间。

table的常用属性：

border: 设定整个表格的边框线的宽度

width：表格整体宽,可是设定数值，也可以设定百分比。

height：表格整体高。

cellpadding：单元格里面的内容跟这个单元格的边框线之间的间隙。

cellspacing: 设定各个单元格相互之间的间隙（边框线之间）

bgcolor: 设定表格的背景颜色： bgcolor="yellow"

background: 设定表格的背景图： background="images/chinamap.jpg"

align：设定表格作为整体的放置方式： left，center，right

bordercolor：设定表格边框线的颜色

td的常用属性：

????colspan：横向合并单元格，指的是"向右合并"： colspan="2"， col指"列"，span表示"跨越"

????rowspan: 纵向合并单元格，指定是"向下合并"： rowspan="2"， row指"行"

????bgcolor: 设定背景颜色

????background：设定背景图片

????width， height: 设定宽高

????align: 设定其中的内容在单元格中的水平对齐方式：left，center，right

????valign: 设定其中的内容在单元格中的垂直对齐方式：top，middle，bottom

表格深入

table中可以使用caption来设定表格的标题文字
td可以使用另一个标签th来完全代替，但th具有"标题单元格" 的含义，且其中的文字自动粗体并水平居中对齐。
实际上，一个表格（table）还可以将其中的行（tr）进行"分块"，可以有如下分法：
1. thead：表示表格的"头部"区域
2. tbody：表示表格的"主体区域"。如果一个tr没有明确规定属于哪个区域，则其默认就属于tbody区域（tbody不写也存在）
3. tfoot：表示表格的"尾部区域"

table è caption è 标题文字

????è thead

????è tbody????????è tr è td è真正的内容

????è tfoot???????????? è th è真正的内容

html字符实体

在html的语法中，有些字符是用来专门表示某种形式/含义的。，比如"<"，">", """(双引号)

如果要在网页上表示这些特定的字符，则需要对他们做特定的处理，这就是所谓的html实体符号。

再加一个：英文双引号： "

前日回顾

xml è xhtml è 文档类型设定：<!doctype …….. >

????严格型：strict

????宽松型（过渡型）: transitional

????框架型：frameset

设定文档类型是"告诉"浏览器，使用什么"标准"来呈现该网页。

图片及图像映射技术：

????<!—设定区域形状：矩形rect，圆形circle，多边形poly -->

????<area shape="rect" coords="左上角x，y坐标，右下角x，y坐标" href="#" />

????

</map>

表格table：

<table>

????<caption>表格标题</caption>

????<thead>

????????<tr>

????????????<td>内容</td>

????????</tr>

????????<tr>

????????????<th>内容</th>

????????</tr>

????</thead>

????<tbody>

????????<tr>

????????????<td>内容</td>

????????</tr>

????</tbody>

????<tfoot>

????????<tr>

????????????<td>内容</td>

????????</tr>

????</tfoot>

</table>

html字符实体（特殊字符表现）

[空格] ： 

<????????: <????????less than

> ????????: >????????greater than

"????????: "

&????????: &

表单标签

表单：就是用于用来向服务器提供信息的那些标签。

在网页中，使用form这个标签来表示一个表单——

通常，一个表单中会包含若干个"信息提供项"，这些每一项可以成为"表单项"

????<!—该表单的各个项都应该写在此范围中-->

????数据提交方式：其实只有post和get两种方式，php里会进行介绍他么区别。

</form>

表单项主要有：

<input type="text" name="n1" size="20" />: ????????单行文本框

????size: 设定文本框的"宽度"，此时的单位是"字符宽"

????maxlength：设定文本框中最多输入多少个字符

????readonly="readonly"：设定为只读

disabled="disabled"：设定为"不可用"（即无效）

<input type="password" name="n2" size="10" />:????????密码框

<input type="radio" name="n3" />:????????????单选项

????一组的单选项必须name相同，且value不同

????默认选中某项使用属性：checked="checked"

<input type="checkbox" name="n4" />:????????多选项

????一组的多选项必须name相同，且value不同

????默认选中某项使用属性：checked="checked"

<input type="file" name="n5" />:????????????文件上传框

<input type="hidden" name="n6"/>:????????隐藏文本框

????隐藏文本框在页面上不可见，但其主要作用是将其中的数据提交到服务器。

<input type="submit" name="n7"/>:????????提交按钮

????提交就是指将表单的所有数据提交给action所设定的文件，由该文件去接收数据并进行处理。

<input type="reset" name="n8"/>:????????????重置按钮

????重置就是将所有表单项恢复到页面打开的初始状态。

<input type="button" name="n9"/>:????????普通按钮

????普通按钮不为表单服务，而是为后面的"动作"服务，比如"点击"。

下拉列表项：

<select name="n10" >????

????????<option value="1">文字1</option>

????????<option value="2" selected="selected">文字2</option>

</select>

????selected:表示默认选中项

多行列表项：

<select name="n12" size= "行数">????

????????<option>文字1</option>

????????<option>文字2</option>

</select>

????size来控制列表项显示多少行。如果size=1，则其就是下拉列表项了。

????Multiple:可以实现多选，即可以选多个，类似多选项。

多行文本框：

????rows="5" cols="50": 设定文本框的行数和列数（都是以字符为单位）

????textarea是双标签，其中的任何"内容部分"都只会当做"文字（字符）"，即使是标签。同时，textara没有value属性。

通常，一个表单中的表单项，其目的（意义）主要是数据的获取和提交。此时，基本上离不开两个属性：

name：

value：

框架网页实现

框架网页使用frameset文档类型。在该文件中，我们使用frameset来代替body。

frameset实际上并不是象body一样来"容纳"各种内容（文字，a，img，div，h1-h6，p，span，b,…..）

frameset实际上只是做一个简单的"窗口划分"，然后在每个划分出来的窗口（可以称为子窗口）中放置网页。划分的方式有两种：

????水平划分（以高度768举例）：

????????????<frame src="第1个网页url" ></frame>

</frameset>????

????垂直划分（以宽度1280举例）：

????????????<frame src="第1个网页url" ></frame>

</frameset>

????这里"*"表示所有其余剩余部分的宽度

<html>

????<head>

????</head>

????<frameset>

????</frameset>

</html>

br, hr, input, img,

noshade，checked, selected, readonly, disabled, noresize

css技术介绍

css技术可以使我们更精确和批量地控制我们网页上的元素的表现。

CSS：Cascading Style Sheet （层叠样式表）

css的语法思想：

指定某个（些）标签的某方面的特性（属性）是某种样子（也就是某个值），其基本语法形式是：

????

????选择器 { css属性名1:值1
；
css属性名2 : 值2
； ……………….. }

????选择器：就是某种可以对应到网页中的html标签（元素）的语法形式。

选择器的分类

1：标签选择器：使用一个标签名来表示"所有该种标签"

????标签名 { 声明1; 声明2; …….. }

????<style> span{ color :red;} </style>

????<span> 文字 </span>

2：类选择器：在标签上使用一个class名字，然后在样式中使用如下形式：

????.类名 { 声明1; 声明2; …….. }

????<style> .c1{ color :red;} </style>

????<span class="c2"> 文字 </span>

????注意：类选择器通常用于多个同类的标签使用相同的效果的时候（其实单独用于某一个标签也可以）

3：id选择器：在标签上使用一个id名字，然后在样式中使用如下形式：

????#id名 { 声明1; 声明2; …….. }

????<style> #d1 { color :red;} </style>

????<span id="d1"> 文字 </span>

????注意：id选择器几乎用于区分某一个特定的标签，其不可以在一个网页中同名。

4: 通用选择器：只有一个特殊符号（*），其代表的含义就是"所有标签"。

????*{ text-decoration : underline }

5：伪类选择器：伪类选择器通常是固定的几个伪类名，只针对特定的标签或情形。每个伪类有特定的含义，常见的有：

a:link { 声明1; 声明2; …….. } —— 表示一个链接标签的初始表现（状态）

????a:visited { 声明1; 声明2; …….. } —— 表示一个链接标签的点击之后（访问之后）的表现（状态）

????a:hover { 声明1; 声明2; …….. } ——表示一个链接在鼠标放上去的时候的表现。

????a:active { 声明1; 声明2; …….. } —— 表示一个链接标签的点中的时候（即活动状态）的表现（状态）

????注意：以上针对a标签的4个伪类状态，通常需要按上述顺序写出，否则可能在某些特定条件下不能正确显示该显示的效果。

6：复合选择器之：层级选择器：

????某独立选择器1 某独立选择器2 { 声明1; 声明2; …….. }

????解释：表示选择器1所选中的那些标签中再由选择器2所对应的那些标签。

????例：

????????dd p { …….. }

????????.c1 p { …….. }

????????#d1 span { …….. }

????????#d1 .c2 p { …….. }

????????div .c2 #d2 { …….. }

7: 复合选择器之：分组选择器：

????某选择器1，某选择器2， …… { 声明1; 声明2; …….. }

????解释：其实就是指这多个选择器使用相同的声明（即相同的外观）。这里，多个选择器可以是独立选择器，也可以是复合选择器：

????例：

????????p, div { …….. }

????????#d1, .c2, span { …….. }

????????#d1 div, .c2 p span, h1 { …….. }

昨日重现

表单：它是一种接受用户输入或选择的数据并可以将其提交到服务器的一种标签。

????单行文本框：<input type="text" name="n1" value="" size="20" maxlength="40" readonly=" readonly" />

????密码框：<input type="password" name="n2" size="20" maxlength="40" />

????单选项：<input type="radio" name="n3" value="1" checked=" checked" />男

????多选项：<input type="checkbox" name="n4" value="1" checked=" checked" />

????文件域：<input type="file" name="n5" />

????隐藏域：<input type="hidden" name="n6" value="abc" />

????提交按钮：<input type="submit" value="提交" />

????重置按钮：<input type="reset" value="重置" />

????普通按钮：<input type="button" name="n9" value="点我" />

????图片按钮：<input type="image" src="图片url" name="n1" /> ——显示为指定的图片，但其功能是submit

????<select name="n11" size="1, 2, 3 ….. " >

????????<option value="1">文字1</option>

????????<option value="2">文字2</option>

????</select>

????<textarea name="n12" rows="5" cols="30"></textarea>

</form>

框架技术：

????<frame src=" 某url 1" name="f1" frameborder="1 // 0" noresize=" noresize" scrolling="yes // no "></frame>

????<frame src=" 某url 2" name="f2"></frame>

</frameset>

????…………………

</frameset>

css几个选择器分类：

????id选择器：

#id名 {……….}

????类选择器（class选择器）：

????????. class名 { …… }

????标签选择器：

????????标签名 {……….}

????通用选择器：

????????* {……….}

????伪类选择器：是固定的几个名字，并表示特定的含义或状态的选择器。

????????a:link {……….}

????????a:visited {……….}

????????a:hover {……….}

????????a:active {……….}

????????a有时候上述设定还不能完全满足我们的需求，则可以继续扩展为如下：

????????#id1 a:link {……….}

????????#id1 a:visited {……….}

????????#id1 a:hover {……….}

????????#id1 a:active {……….}

????层级选择器：

????????选择器1 选择器2 {……….}

????分组选择器：分组选择器其实只是为了将多个相同效果但不同的选择器集中在一起，简少了代码。

????????选择器1 ，选择器2 {……….}

文字/段落样式：

在html中，使用的各种数字（大小，长宽）通常都不带单位，

在css中，使用的各种数字（大小，长宽）通常都带单位。

color: 设置文字颜色，可以使用单词颜色，也可以使用16进制颜色，还可以使用rgb颜色

font-size: 12px；????设置文字大小，单位像素，必须写。对比：<font size="3" >xxx</font>

font-weight: bold // normal; 设置文字为粗体或非粗体。如果不写则默认是正常。如果要设置为非粗体，则使用normal

font-family: 宋体, 仿宋, arial；设置文字的字体，可以写多个，按顺序依次适用。

font-style：italic // normal; 设置文字为斜体或非斜体

line-height：15px 设置文字的行高。

letter-spacing： ????设置字母之间的间距，包括中文单字

word-spacing：????设置单词（或字）之间的间距，对中文无效。

text-align：????????设置文字的水平对其方式（left， center， right）

text-indent：????????设置一段文字的首行缩进，对中文通常有需求。

vertical-align：????设置文字的垂直对其方式（top， middle， bottom）

text-decoration: ????设置文字的划线方式：underline(下划线), line-through（中划线，删除线），上划线（overline）

盒子初步

所谓"盒子"，其实就是指能够"包容"一定的"内容"（物体）的区域范围，通常都是由一个标签（元素）来表现。比如，div，p，h1，span，b，。。。。。

????——我们可以认为，几乎所有标签其实都是一个盒子。

一个盒子通常具有如下几个部分构成：

????边框：border：可以设定每个方向边框的线形，粗细和颜色

????内容区：可以设定宽高width，height。也就是说，设置一个盒子的宽高，只是其内容区的宽高。

????内边距：padding：可以设定每个方向的padding

????外边距：margin：可以设定每个方向的 margin

以后我们会大量使用div这个"典型盒子"

盒子的初始表现（行内元素和块元素）：

有些盒子，初始状态（即html初始表现），其本身就独占一行——这种就被称为"块元素"。

????比如：div, p, h1~h6, hr, table, pre, blockquote,

有些盒子，初始状态（即html初始表现），其本身会尽量在一行内显示，除非一行满了以后才自动换到下一行——这种就被称为"行内元素"。

????比如：span, img, a, input, select, textarea, b, i, u, strong,

浮动初步

行内盒子本身（包括普通文字）自然会在一行上从左到右排列出来，满行之后才会自动换行。

但：

块盒子，不管其本身的宽度多少，其默认情况下总是会"自占一行"。

则：

要想让块盒子在水平方向上并列放置（布置），就必须对他们进行浮动处理：

左浮动：float:left

????浮动的含义就是指让该盒子（元素，标签）尽量往左边方向挤靠，其他非浮动元素紧随其右

右浮动：float:right

????浮动的含义就是指让该盒子（元素，标签）尽量往右边方向挤靠。其他非浮动元素紧随其左。

一个盒子如果浮动之后，则会影响其上级盒子（父盒子）的自然高度——使其高度失效——现象是，该父盒子已经没有办法"自然"包住其里面的浮动盒子。——此时我们通常就必须去解决该 "高度塌陷"问题。

所有浮动盒子的父盒子高度都需要特别处理，以使父盒子能够包住子盒子。通常有以下几种办法：

将父盒子设置一个固定的高度，且保证能将其中的子盒子包住。
设置父盒子：overflow:hidden;????这里是用于所谓"清除浮动"以使父盒子获得自然高度。
在父盒子内部的最后位置加一个清除浮动的０高度ｄｉｖ，如下：
<div class="cc" ></div>
．ｃｃ｛ｃｌｅａｒ：ｂｏｔｈ；｝

实际上，我们可以将我们正常的（非浮动的）元素看作都在"地上"平铺并相互包含，浮动的盒子可以看作是在"天花板"上作为独立的一层。

命名基本规则

这里指的命名通常是我们今后编程过程中我们自己定义的某个名字，包括（但不限于）如下：

????标签的name值，class名， id名，js或php中的变量名，函数名，类名

名字需要使用字母或下划线开头（a,b,c，A,B, C …… _ ）
其后可以跟若干个（含0个）字母，数字，或下划线。
名字不能跟所在环境的系统内部名字相同。

布局思想

我们设计网页其实只是对网页的"层层瓜分"。每次瓜分都只考虑"当前版面"，将当前版面划分为几个独立的区域，这个划分只有两个做法：横向划分和纵向划分：

横向划分：此时使用若干个div，他们自然就是横向划分，不需要做额外处理，只要考虑他们的内容就可以了。
纵向划分：此时使用若干个div，并将他们浮动起来以达到并列放置的效果，并设置他们的宽度不会超过父盒子总的宽度。此时我们必须严重考虑浮动盒子的父盒子的高度问题，则其处理办法是：
1. 设定父盒子的固定高度：适合于已知子盒子高度且不会变化的情形。
2. 设置父盒子样式为：　overflow:hidden; ——清除浮动方法一
3. 在父盒子的最后内部位置放置清除浮动的元素——清除浮动方法一
  <div style="clear:both"></div>
  （兼容性更好！！！！！）
4. 以上3个做法最终都是达到一个目的：使父盒子能够包住子盒子。

昨日回顾

文字样式：

color: 文字颜色

font-size:

font-style:

font-weight:

font-family:

text-decoration: 文字修饰：下划线(underline) 中划线上划线无(none)

text-indent: 首行缩进

text-align: 文字水平对其

letter-spacing: 字母间距，含中文字间距

word-spacing: 单词间距。

line-height: 行高

vertical-align: 文字垂直对齐

盒子模型：

????margin：外边距：

????border：边框

????padding：内边距

????内容区：width，height

????

如果盒子上下放置，则可以直接实现。

如果盒子要想实现左右放置，则需要进行浮动：

float：left：

float：right：

则此时需要对外层盒子（父盒子）进行高度处理：

设定固定高度
清除浮动以获得自然高度：
1. 给父盒子设置：overflow:hidden
2. 给父盒子额外添加一个清除浮动的空div

布局思想：

????我们的整个网页无非是一级一级往下分割的过程，分隔只有两个模式：

上下分割：只要使用几个div，自然就分开了
左右分割：需要使用几个div并对他们进行浮动处理。
1. 分为2个：通常是一左一右进行浮动
2. 分为3个：通常是两左一右浮动，也可也两右一左浮动。
3. 如果更多，通常是往一个方向浮动
对浮动元素，我们需要对其父盒子进行高度的特别处理：
1. 设定固定高度：使其能够包住子盒子
2. 清除浮动以获得自然高度：
  1. 给父盒子设置：overflow:hidden
  2. 给父盒子额外添加一个清除浮动的空div

overflow: hidden的两个用处：

1,如果一个盒子设定的固定宽高，则其overflow会使其内部的盒子（如果超出了该盒子的边界）超出部分不可见（hidden含义）.

2,如果一个盒子没有设定固定宽高，且其子盒子有浮动，则其本身会获得"自然高度"，这就是所谓的"清除浮动的效果。

页面的css初始化

在html的原始表现上，实际上每个浏览器或多或少总会有差别。

我们的目标是：我们开发的网页应该在用户面前（不管是用什么浏览器）都表现一致。

则我们的处理办法是：

????将所有html的原始表现（即其"表形功能"）全部去除，其每一个外观表现都由我们自己来使用css设定。

这样，我们就会使用一个"清除原始html格式"的css文件来达到"去除初始样式"的目的。

????我们可以使用link标签来引入一个外部的css文件：

样式分类：

行内样式：在标签上使用style属性设定的样式——偶尔临时用。

????<标签 style="声明1；声明2；…… " >….</标签>

页内样式：在网页中使用style标签设定的样式：

????<style>

????????选择器 {声明1；声明2；…… }

????</style>

外部样式：在网页中使用link标签导入一个外部的css文件：

????<link type="text/css" rel="stylesheet" href="外部css文件url" />

导入样式：在css文件中使用import命令引入一个其他css文件。注意，该命令必须在最前面出现，且分号结束：——不推荐使用。

[email protected] url("其他css文件url");

两个样式细节语法：

????格式：标签名.类名 { 声明1；声明2；…… }

????含义：指具有该类名的该标签。

盒子深入

盒子实际占据的"版面区域"其实是由以下几部分构成（从外到里）：

????margin（外边距） border（边框） padding（内边距）内容区（width, height）

一个盒子的实际占宽构成：

????margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

一个盒子的实际占高构成：

????margin-top + border-top + padding-top + height + padding- bottom + border- bottom + margin-bottom

margin分解：

????margin-top:

????margin-right:

????margin-bottom:

????margin-left:

????margin的设定可以有如下形式：

????????margin: 5px;????—— 四周的margin都是5px

????????margin: 5px 10px; ——上下为5px，左右为10px

????????margin: 5px 10px 15px ——上5px，下15px，左右为10px。这个语法不推荐

????????margin：5px 10px 15px 20px ——上右下左分别是5，10， 15， 20

????此时，margin其实就是我们常说的"复合属性"

padding分解：

????同上。

border分解：

????border-top: solid 2px blue;????也可以单独写，比如：

????????border-top-style: 设定线型，比如 solid， dashed， dotted

????????border-top-width: 设定线宽

????????border-top-color:：设定线颜色

????border-right:

????????同上

????border-bottom:

????????同上

????border-left:

????????同上

????还有：

????border-style:设定4个方向的线性，也可以使用1-4个值，含义同margin。

????border-width: 设定4个方向线宽，同上。

????border-color: 设定4个方向线颜色，同上。

????border：线性线宽线色：设定4个方向的3个特性。

背景

一个盒子可以设定其背景，背景包括背景颜色和背景图。

background-color: red; ????设定背景颜色；

background-image: url(图片路径); 设定背景图

background-repeat: 设定背景图的重复性，有：repeat-x（x方向重复）,repeat-y（y方向重复）, no-repeat（不重复）;——默认不设置的时候是双向重复的（repeat）

background-pisition: 设定背景图的定位（x和y方向）。其定位的初始位置（原点）就是盒子的左上角。其可以使用左中右（left，center，right）上中下(top, center, bottom)来设定其水平和垂直方向的位置。也可以使用具体的数值，比如：5px 10px;含义是离左边5px，离顶部10px

????形式： background-position: 水平位置垂直位置。

????举例：background-position: center center; 水平和垂直都剧中

????????background-position: center top;????????水平居中，垂直靠上

????????background-position: 5px 10px;????????????x方向向右出来5个px，y方向向下出来10个px

????????background-position: -5px -10px；同上，方向相反

背景的复合属性：

background: 背景颜色背景图背景重复性背景位置。

????注：背景复合属性的几个属性值可以任意给定其中的某些，而其他不给定。

块盒子和行内盒子的相互转换：

块盒子和行内盒子的区别：

????块盒子通常是"较大"的盒子，里面可以放置其他盒子（包括块盒子和行内盒子）以及普通文字。

????行内盒子通常是"较小"的盒子，里面通常不能放其他块盒子，以及普通文字。

????块盒子可以设定其宽高以及其他margin，padding，border属性等等。

????行内盒子不可以设定宽高，其宽高都是由其内部的内容所决定（撑出来的）

????行内盒子还不可以设定其上下边距（margin-top,margin-bottom, padding-top, padding-bottom）

不过，实际上，行内盒子和块盒子并没有本质的区别，无非是他们的一个固有属性的初始值不同罢了：

????对块盒子：display的初始值为：block；

????对行内盒子，display的初始值为：inline；

我们也可以人为将他们设定为另一个值，这就是相互转换问题：

????<span style="display: block;">abc </span>????——此时该span就成为块元素（块盒子）了

????<div style="display: inline;">abc </div>????——此时该div就成为行内元素（行内盒子）了

列表样式：

????

设定前导符类型：????list-style-type: circle // disc // square // lower-roman // lower-alpha …..;

设定前导符位置：????list-style-position:inside // outside;——在li里还是外

设定前导图：????????list-style-image:url(呱呱/images/wenhao..jpg); ——此时前导符就失效了。

复合属性：????????????list-style: 前导图位置前导符；

浮动的其他特性：

clear:left;????????声明本盒子（元素）左边不要出现浮动元素

clear:right;????声明本盒子（元素）右边不要出现浮动元素

clear:both;????声明本盒子（元素）右边不要出现浮动元素

????

昨日回顾

盒子模型深入：

????一个盒子的尺寸构成：是由以下几部分构成的：

????????margin border padding 内容区

????????宽度方向：左右margin 左右border-width 左右padding 内容区的width

????????高度方向：上下margin 上下border-width 上下padding 内容区的height

块盒子的宽高：完全遵从上述规则

行内盒子的宽高：

????????宽度：左右margin 左右border-width 左右padding 内容区width由其内容决定

????????高度：上下border-width 内容区的height由其内容决定

行内盒子和块盒子其实可以相互转换：

????转换为块盒子： display: block;

????转换为行内盒子：display: inline;

背景：

????背景颜色： background-color:

????背景图片：????background-image: url(图片路径url)；

????背景图片的重复性： background-repeat: repeat // no-repeat // repeat-x // repeat-y

????背景图片的定位：????background-position: x方向 y方向；

????????????????????x方向： left center right 5px -5px

????????????????????y方向： top center bottom 5px -5px

????背景综合： background: 背景颜色背景图片背景图重复性背景图定位；

????对比：

????边框综合： border: 线型线宽线色；

列表样式：

????list-style-type: 前导符设定，比如有： disc // circle //square // lower-roman

????list-style-position: 前导符位置设定：是放在li里面还是li外面， outside // inside

????list-style-image: url(…): 前导图设定。

????综合属性：list-style: ……

div布局总结

内容与表现分离思想

????

分块思想

????

整体到局部，

????

标准流与非标准流

标准流：所有元素如果没有专门设定其定位（或浮动），那么就称这也的盒子的正常表形为"标准流"

????元素的原始定位方式（就是所谓标准流）遵循这个原则：在遵循块盒子和行内盒子的基础上，尽量往左上角挤靠。

非标准流：人为定位或浮动就改变了元素的原始定位方式。

除了浮动能够改变元素（盒子）的定位之外，我们还可以通过如下属性来改变定位方式：

????position: static: 静态定位，其中这是所有元素的原始定位，也就是自然流方式的定位。

????position: relative; 相对定位：相对于其父盒子的定位方式。

????position: absolute; 绝对定位。其实是指在整个网页中任意指定位置（也可以说是相对于body）或其父盒子（父盒子应该是非静态定位的）。绝对定位通常类似"凭空粘在网页上的某个位置"

????position: fixed; ????固定定位。其实是相对于真个浏览器的可视范围而定位的。固定定位通常类似"凭空粘在窗口上的某个位置"

以上相对定位，绝对定位和固定定位，都需要配合left和top属性才能有效。

????left：离指定的元素（定位初始点）的左边多少（px）

????right：离指定的元素（定位初始点）的右边多少（px）

????top：离指定的元素（定位初始点）的顶边多少（px）

????bottom：离指定的元素（定位初始点）的底边多少（px）——很少用

层叠顺序：

正常标准流的所有盒子，我们都可以认为是"平铺"到一个平面（比如地面）上作为一层的东西，可以当作０层。

层叠就是分多层放置盒子（元素，标签），即可以放在第２层，第３层。。。。。。。。

常见居中总结：

行内盒子里面的内容（文字）无所谓中。

文字（行内元素）在块盒子（块元素）中水平居中： text-align: center

文字（行内元素）在块盒子（块元素）中垂直居中：设定行高等于盒子高（height:30px; line-height:30px;）

块盒子在其父块盒子中水平居中： margin: 0 auto;

快盒子在其父块盒子中垂直居中：没有特别的直接属性可以做到。

图片和文字在垂直方向对齐：在图片上使用：vertical-align: middle

外边距溶合：

当两个盒子的上下外边距（margin-top，margin-bottom）相互"触碰"（交汇）的时候，他们之间的实际外间隙是他们中的较大者。

样式作用的优先级：

多个样式（选择器）的设定对某个对象都有效的时候，谁最后说了算（优先）？

基本优先级：

!important设置 > 行内样式 > id选择器 > 类选择器（含伪类） > 标签选择器 > 通用选择器〉继承

选择器的优先级权重计算公式：

id选择器的个数*1000 + 类选择器的个数 * 100 + 标签选择器的个数 * 10 + 通用选择器个数*1

时间： 2024-10-15 23:51:09

合并_00基础班html+css(6days)

基础班课程安排

html介绍

字体元素

排版元素：

颜色介绍

列表标签（元素）

常见快捷键：

a标签

二进制介绍

字符编码介绍

昨日回顾

meta标签

xml语言介绍

文档类型：

图片标签

图像映射技术

多媒体及外部插件介绍：

表格应用

表格深入

html字符实体

前日回顾

表单标签

框架网页实现

css技术介绍

选择器的分类

昨日重现

文字/段落样式：

盒子初步

盒子的初始表现（行内元素和块元素）：

浮动初步

命名基本规则

布局思想

昨日回顾

overflow: hidden的两个用处：

页面的css初始化

样式分类：

盒子深入

背景

块盒子和行内盒子的相互转换：

列表样式：

浮动的其他特性：

昨日回顾

div布局总结

标准流与非标准流

常见居中总结：

外边距溶合：

样式作用的优先级：

合并_00基础班html+css(6days)的相关文章