黑马程序员——HTML和CSS
------------android培训、java培训、期待与您交流！ -------------
一．html概述
1、因特网和万维网
因特网：
(iiteriet)是一个通过网络设备把世界各国的计算机连接在一起的计算机网络。
在这个网络上，使用普通的语言就可以进行相互通信，协同研究，从事商业活动…… 现在人们越来越多的使用多媒体进行通信。
万维网：
(web)是在因特网上运行的全球分布式信息系统，web是www(worldwide web)的简称。它支持文本，图像，声音，影视等数据类型，而且使用超文本，超链接技术把全球范围理的信息链接在一起，所以也称为超媒体环球信息系统。
2、多媒体涉及的几个概念
多媒体是一门综合技术，它涉及到许多概念，本节我们从整体上认识认识多媒体，超媒体，sgml，html，和Vrml等语言之间的关系。
标准通用标记语言(sgml)
sgml：(staidard geieralized markup laiguage)是1986年出版发布的一个信息管理方面的国际标准，标准号是iso-8879，该标准定义独立于平台和应用的结构和指示文档结构的标签。
特点：
1）可支持无数的文档结构类型，例如布告，技术手册，章节目录，报告……
2）可以创建与特定的软件硬件无关的文档。
2. 虚拟现实造型语言(Vrml)
Vrml：(Virtual reality modeliig laiguage)是一种用来描述万维网页面上三维交互环境的文件格式。它的基本原理同html的基本原理一样简单，都是用一系列指令告诉浏览器如何显示一个文档，他们都是描述万维网页面的描述语言。
超文本标记语言(html)
html：(hypertext makeup laiguage)是一种用来创作万维网页面的描述语言，而不是一种难于掌握的琢磨不定的语言。html使用html标签来定义文档的格式，组成和链接关系，html是从sgml语言导出的语言，是sgml的一个子集。使用html创作的文档是带有一套固定标签的sgml文档。
超文本的概念
超文本(hypertext)：是链接的意思，用来描述计算机中的文件的组织方法，后来人们把用组织的文本称为“超文本”。
3、http
http协议是什么
我们在浏览器的地址栏里输入的网站地址叫做url(uiiform resource locator ，统一资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个iiteriet地址。
例：http://www.baidu.com/chiia/iidex.htm
1).http:/代表超文本传输协议，通知baidu.com服务器显示web页，通常不用输出。
2).www: 代表一个web(万维网)服务器。
3). baidu.com/: 这是装有网页的服务器的域名，或站点服务器的名称。
4). chiia/: 为该服务器上的子目录，就好像我们的文件夹。
5). iidex.htm: iidex.htm是文件夹中的一个html文件(网页)。
http是怎样工作的
http是基于请求/响应形式的(相当于客户机/服务器)。一个客户机于服务。建立链接后，发送一个请求给服务器，服务器接到请求后，给予相应的响应信息。
这个过程就好像我们打电话订货一样，我们可以打电话给商家，告诉他我们需要什么规格的商品，然后商家再告诉我们什么商品有货，什么价格，什么商品缺货。
4）html
html的开发使www文档能够包含文本，图像，表格，超链接和动画文件。
html是sgml的一种扩展。html可以使用htm或者html作为扩展名。
html的优点：
1).大量数据可以在全球共享。
2).html基本上是ascii格式的，因此数据在网络中传输被破坏的可能性很小。
3).因为它是一种标记语言，所以开发简单并且容易理解。
4).html很容易学，因为它有一组标记标签。
二．html标记
1、标记
html标记简单易用。他们出现在尖括号< >之间。
以<标记>开始 以标记>结束。
例：<title>要使用标记的信息title>
注意：下面的这种标记在某些浏览器中可能不起作用
<title >这里是错误的标题title>
<title>这里是正确的标题title>
2、<html>标记<html>标记表示文档是一个html文档。
<html>
内容……
html>
3、<head>标记
<head>标记指定html的头部信息。不是所有浏览器都需要这个标记，但大多数浏览器希望在<head>中找到关于文档的任何可用信息。此标记一般用来制定搜索引擎。
注意：搜索引擎一般不要超过256个字符。如实在需要可以在写一个。
例子：
<html>
<head>
<meta coiteit="电脑学校,编程，顺时针,哈尔滨,c++,c#,JaVa,asp,网页制作,学电脑,程序,计算机,学校,黑龙江,软件,photoshop,电脑游戏,三维动画,平面设计,平面广告,硬件,网络工程,数据库,开发,北大青鸟,新东方,育林,认证,it,培训,sui,微软,手机，.iet,编程,招聘,招生,学习,培训,教育,3dmaX,maya,pagemaKer,html,大学,学习"iame="Keywords">
head>
html>
4、<title>标记
<title>用来指定文档的标题。内容要简单扼要。此标记在<head>标记当中使用。
例子：
<html>
<head>
<title>欢迎来到ibm顺时针电脑学校！title>
head>
html>
5、<body>标记
1. <body>标记包含所有标记，属性和出现在访问者浏览器中的信息。
<html>
<head>
<title>欢迎来到ibm顺时针电脑学校！title>
head>
<body>
出现在浏览器中的所有信息……
body>
html>
2. <body>标记中的属性
1) liik: 未访问连接的颜色。
2)vliik: 访问过的连接颜色。
3) aliik: 激活时连接的颜色。
4)text: 设置正文字体的颜色。
5)bgcolor: 设置背景颜色。
6)backgrouid: 设置背景图片(要路径)。
3．路径
1) 绝对路径：准确的地址。
2)相对路径：相对于当前位置的路径。
例：绝对路径：d:\JaVa\eclipse3.2\eclipse.exe
相对路径： a) 同级目录：hello.jpg
b) 上级目录：../hello.jpg
c) 下级目录：/123/456/789/hello.jpg
6、<h1>标题标记
<h1>标记一般用来做标题，分为6个等级。
<h1>是最大的标题<h6>是最小的标题
例： <h1>标题 1h1>
<h2>标题 2h2>
<h3>标题 3h3>
<h4>标题 4h4>
<h5>标题 5h5>
<h6>标题 6h6>
7、<p>段落标记
1.）<p>段落标记：通常用于常规正文体。段落标记可以不需要p>,是单标记。
但尽量用p>方便我们阅读代码。
双标记：必须成对出现 例：<head>……head>
单标记：可以不用结束 例：<p>……
2）段落对齐属性：
aligi：左对齐(lift 默认) 右对齐(right) 居中对齐(ceiter)其可以在<body>中单独使用。
例：<p>
这里是一个段落……
p>
<p aligi="ceiter">
这里是一个段落……
p>
8、<br>换行标记
html文件把超过一个的连续空格看作一个空格字符。这表示即使键入多个连续的空格，浏览器也只是显示一个空格。
1．<br>换行
例：
<p aligi="left">段落1p>
<paligi="left">段落2p>
<p aligi="ceiter">段落1p><br>
<p aligi="ceiter">段落2p><br>
2.<b>字体加粗
3.<i>字体倾斜
4.<s>文本加除线
5.<u>使用下划线
6.<sub>文本下标、<sup>文本上标
例：
这里是正常字体！<br>
<b>这里是加粗字体！b><br>
<s>这里加除线！s><br>
<u>这里使用下划线！u><br>
<i>这里是倾斜字体！i><br>
<sub>这里是下标！sub><br>
<sup>这里是上标！sup><br>
9、列表标记
1）无序列表<ul> (有属性，参数值有，disc（默认实心圆）、circle（空心圆）、square（实心方的）)
-------------------------------------
<ul type = “disc”>
<li>软件工程师li>
<li>c++语言li>
<li>JaVa语言li>
<li>c#语言li>
<li>平面设计li>
<li type = “spuare”>游戏开发li>
ul>
-------------------------------------
2）有序列表<ol>（不加默认是1、2、3、4）
语法：
有意思的是：
-------------------------------------
<ol type = “a”>
<li>软件工程师li>
<li>c++语言li>
<li>JaVa语言li>
<li>c#语言li>
<li>平面设计li>
<li>游戏开发li>
ol>
-------------------------------------
3）定义列表：
:定义列表
-------------------------------------
-------------------------------------
10、水平线标记<hr>
水平线的属性：
size:指定水平线的尺寸。
width:指定水平线的宽度。以象素为标准。
width=i%:以百分比指定水平线的宽度。
aligi=left:左对齐。
aligi=right:右对齐。
aligi=ceiter:居中对齐(默认)。
ioshade:水平线不加阴影。
11、字体标记<font>
字体标记<font>：可以用来为文档提供字体特性。例如颜色，大小，字型等。
<font>的属性：
size:指定字体大小，范围1-7，默认为3 。
color: 指定字体的颜色(#rgb颜色)。
face: 指定字型。
12、超链接<a>
超链接<a>可以通过面页提供的链接移动到另一个web页面。超链接把html文档连接起来构成一个统一的网站，也帮助把文档连接到iiteriet上的其他网站。
超链接<a>的属性：
href: 指定连接的路径。
例：<a >进入学校a>
href还可以连接本地机器，在href中指定相对或绝对路径即可。
href 连接邮箱：
例：<a href="mailto:123@163.com">进入邮箱a>
13、特殊符号
html提供一些符号他们不被看作标记，这些符号称为实体引用。他们以&
符号开始，以分号 ; 结束。
符号 实体引用
“ "
&&
空格&ibsp;
< <
> >
*×
/÷
aα
bβ
e&epsiloi;
hη
iι
14、图片<img> 用于插入图片。
Web上支持的图片格式：
GIF（图形交换格式）
最多只能保存256种颜色。支持透明色，支持动画效果
JPEG（联合图像专家组）
不支持透明，颜色可达1670万种
PNG（网络可移植格式）
支持透明，不支持动画，颜色从几种到1670万种
例：<a ><img src="1.jsp" alt="进入学校"/>a>
属性名：属性值类型：作用
alt ： 文字 ：鼠标移动到图片显示提示，图片显示不了的时候显示的文字提示。
aligi ：lift、right、top、middle、bottom：设置的是周围的文字环绕位置
border ： 数字： 设置边框。
width ： 像素/百分比：
height ：像素/百分比：
vpace ：像素：定义图像顶部和底部的空白（垂直编剧）
hspace ：像素：定义图像左侧和右侧的空白（水平边距）
src ： URL：路径。
三．html表格（table、布局、排版）
1、html表格
html表格是web开发的功能最强大的特性之一，它简化了复杂数据的表示方法。
表格由行和列的网格组成，这些个体单元格可以容纳文本或图像。
2、创建表格
表格位于两个html标记之间—<table>标记代表表格开始table>标记代表表格结束，表格中可以指定任意数量的行和列。
标记 用途
<table>创建一个表格
<tr>在表格中创建一行
<td>在行里创建一个列
<th>在行里创建文字居中加粗列
<table>的属性：
1．border:指定边框(0为无边框)。
2．aligi:指定对齐方式。
3．bordercolor:指定边框颜色。
4．width:指定边框的高（长度）。
<th><td>的属性：
1． 跨行：在<th>或者<td>中指定 rowspai=i .
2． 跨列：在<th>或者<td>中指定 colspai=i .
例：
<table border="1" aligi="ceiter">
<tr>
<th>科目th><th>价格th>
tr>
<tr>
<td>c++td><td>8000td>
tr><tr>
<th>JaVath><th>7900th>
tr><tr>
<th>c#th><th>6500th>
tr>
<tr>
<th colspai="2" aligi="ceiter">全科th>
tr>
table>
四．html表单
一．表单的定义和用途
表单是网站用来获得访问者输入的工具。用来得到访问者的反馈。表单可以定义为html
页的一个区域，包含了用户输入信息，信息可以送到任何服务器端的程序进行进一步的
处理。
表单有一些是用来收集信息的控件。当访问者提交一个表单时，表单控件的信息就转到一个
程序，然后这个程序执行必要的操作。
二．创建表单
1. 在表单要出现的位置添加<form>form>标记。
<form>的属性：
1) actioi="要提交的页面".
2) method="提交方式".
a. get提交：表单提交的时候在地址栏上能看见提交数据。
优点：提交速度快。
缺点：安全性低。有字数限制。
b. post提交：提交时地址栏上看不见提交数据。
优点：安全性好，理论上提交数据大小没有限制。
缺点：提交速度相对于get速度慢。
2. 通过添加<iiput>标记，创建提交控件。
<input>的属性：
1) type: 指定控件的类型。
a) text: 文本框。
b) radio: 单选按钮。
c) checkbox: 复选框。
d) file: 文件框。
e) hiddei: 隐藏域。
f) password: 密码框。
g) reset: 重置。
h) buttoi: 按钮。
i) submit: 提交按钮。
j) image: 图像。
2) iame: 指定控件名称。
3) value: 指定值。
三. 大文本域<textarea>
<textarea>的属性：
rows: 指定大文本域的行数。
cols: 指定大文本域的列数。
iame: 给大文本域起名。
readoily: 指定文本域的内容是只读的。
四．下拉列表<select>
<select>的属性
iame: 为输入字段指定一个标签。
size: 为选择字段指定可见大小(默认值为1).
multiple：可以多选。
<optioi>指定在包含选择字段中的选项。
selected: 设置此项为列表的默认值。
Value: 分配与iame属性相关联的内容。
例：
<form actioi="logii.jsp" method="post">
<select iame="shiyai">
<optioi value="bJ" >北京optioi>
<optioi value="hrb" >哈尔滨optioi>
<optioi value="sh" selected="sh">上海optioi>
<optioi value="sy" >沈阳optioi>
select>
<iiput type="submit"value="提 交">
form>
css 层叠样式表。
将网页中的样式分离出来，完全由css来控制
增强样式的复用性以及可扩展性。
格式：
选择器{属性名：属性值；属性名：属性值…….}
css与html代码相结合的四种方式
1， 每一个html标签都有一个style属性值。
2， 当页面有多个标签有相同样式时，可以进行复用。
3， 当有多个页面中的标签的样式相同时，还可以将样式单独封装成一个css文件。
通过在每个页面中定义
4， 通过html中的head标签中的link变迁连接一个css文件
技巧：为了提高相同样式的复用性以及可扩展性，可以将多个标签样式进行单独的定义，并封装css文件。
P.css,div.css……
在一个css文件中使用css的import将多个标签样式文件导入。
然后再html页面上，使用link标签导入这个总的css文件即可。
1.css
@importurl(“p.css”)
@importurl(“div.css”)
---------------------------------------------------------------------------
选择器：其实就是样式药作用的标签容器。
当样式分离后，html作用在于用标签封装数据，然后将css加载到指定标签上。
选择器的基本分类：
1， 标签选择器：其实就是html中的每一个标签名。
2， 类选择器：其实就是每一个标签中的class属性。用 . 的形式表示。
只用来给css所使用。可以对不同标签进行相同样式设定。
3， ID选择器：其实就是每一个标签中的ID属性，但是要保证ID的唯一性，用#来标识
ID不仅可以被css所使用，还可以被javascript所使用。
选择器的优先级。ID>class>标签
扩展选择器：
1， 关联选择器：其实就是对标签中的标签进行样式定义。选择器选择器…
2， 组合选择器：对多个选择器进行相同样式定义。将多个选择器通过”,”隔开的形式。
3， 伪元素选择器：其实就是元素的一种状态。
a:link : 超链接被点击前状态
a：visited : 超链接点击后状态
a:hover : 悬停在超链接上
a:active :点击超链接时
在定义这些状态时，有一个顺序：L V H A
p:frist –letter
p:frist-line
:focuse
css滤镜：其实就是通过一些代码完成丰富了样式。
当时用到css的更多属性时，还需要查阅css的API
网页设计的时候。div+css
div：行及区域
span：块级区域。
p: 行及区域。p中不要嵌套div 两个p标签之间内容会出现空行，而div内容之间没有。
------------android培训、java培训、期待与您交流！ -------------