关于一些学习html和css的笔记
一.Html简介
全写： HyperText Mark-up Language
译名： 超文本标识语言
简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件 达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver，submit,webstrom。
1. Html特点：
► 描述性语言，结构语言，用于决定网页内容以什么样的形式显示；
► 通过标签来控制网页的文档、字符和段落等的格式，以及对脚本语言等的调用；
► 纯文本文件，可以使用各种文本编辑器编写； (submit,webstrom是首选)
► 文件扩展名： .htm 或 .html；
► html文件必须在Web浏览器上运行；（运行环境）
► 具有跨平台性。
1. HTML语法结构：
► HTML文件是由一系列的元素和标签（tag）组成的；
► 元素：网页中的内容；
► 标签：用于规定元素的属性和它在文件中的位置；
► 格式：<元素名称 属性="值"...>元素资料</元素名称>,<元素名称 属性="值"...>
► 不区分大小写。
2. HTML文件结构：
► 起始标记：<html> </html> 表示HTML网页的起始；
► 文件头部：<head> </head> 设置初始化文档信息和文档管理标注；
► 文件主体：<body> </body> 设置格式化的浏览器显示的文档（内容）；
► 注释部分：<!-- --> 可以放在任何位置；
► <! >
※ 例:
<html>
<head>
<title>Html简介</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<!--网页内容-->
</body>
</html>
1. 成对标签
顾名思义，它以起始标签及终结标签将文字围住，令其达到预期显示效果。
例如 HTML 源码 ： <b>我愿意和大家显示成：我愿意和大家一起学好html/css!大家有信心吗？</b>
其中 <b> </b> 便称为成对标签。
它以起始标签 <b> 及结尾标签 </b> 标示文字我愿意和大家一起学好html/css!令它显示成粗体，两者失其一都会发生错误显示。
2. 单标签
是指标签单独出现，只有起始标签没有终结标签。
※ 例如 HTML 源码：
I love my hometown. <br> It's a beautiful place.
显示成：
I love my hometown.
It's a beautiful place.
其中换行标签<br>便属单标签。
它的作用便是将标签后所有东西显示于下一行，可见结尾标签对于它是没意义的， 但有些人会为空标签加上终结标签，如果加上结尾标签，对 HTML没有影响。 便于记忆。
二.文件标记
<HTML> ； <HEAD> ； <TITLE> ； <BODY>；<meta>；<base>；<link>；-文件头部标签
HTML 基本架构：
1. 以下 HTML Source Code(源代码) 便是一份 HTML 文件的基本架构 ：
<HTML>
<HEAD>
<title>HTML超文本标记语言在线教程</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="author" content="合肥世杰">
<meta name="keywords" content="html,css,asp,jsp,php">
<meta name="description" content="世杰教育网站！">
<meta http-equiv="refresh" content="10">
<meta http-equiv="refresh" content="2;url=http://www.163.com">
<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">
<base href="http://www.sje.com.cn" target="_blank">
<link href="../css.css" rel="stylesheet" type="text/css">
<link rel="fontdef" src="Amelia.pfr">
</HEAD>
<BODY> 网页的内容，很多标记都作用于此
</BODY>
</HTML>
2. 特点解说：
► 整个文件处于标记<HTML>与</HTML>之间。<HTML>用以声明这是HTML文件，让浏览器认出并正确处理此HTML文件。
► 文件分两部分，由<HEAD>至</HEAD>称为开头 ，<BODY>至</BODY>称主体（或者称之为正文）。
基本上两者各有适用的标记，如<TITLE>只可出现于开头部分。
► 开头部分用以保存重要信息，而只有主体部分会被显示。所以大部分标记会运用于主体部分。
► <TITLE>所标示的是文件的标题。会出现于窗口标题及别人加入收藏时显示的名称，所以每页有不同而明确的标题是有必要的。
上述标记中只有<BODY>具有参数设定。
3. <META>标签相关属性
► 文档标题标签：<title>HTML超文本标记语言在线教程</title>
► <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
► 作者：<meta name="author" content="合肥世杰">
► 关键字：<meta name="keywords" content="html,css,asp,jsp,php">
► 描述信息：<meta name="description" content="世杰教育网站！">
► 刷新：<meta http-equiv="refresh" content="10">
► 跳转：<meta http-equiv="refresh" content="2;url=http://www.163.com">
► 文档过期：<meta http-equiv="Expires" content="01 Jan 2008 00:00:00">
► 基础地址：<base href="http://www.sje.com.cn" target="_blank"> 为当前文档提供了完整的URL
► 链接文件：<link href="../css.css" rel="stylesheet" type="text/css">
<link rel="fontdef" src="Amelia.pfr">
定义在当前文档和其它文档之间的关系
属性 描述：
| href |
提供被链接的文档的Internet地址。 |
| rel |
提供向前链接的类型。 |
| rev |
指明反向链接。 |
| title |
提供一个建议的标题。 |
| type |
指明连接的style sheet媒体类型。 |
► 页面过渡效果：
<meta HTTP-EQUIV="page-enter" CONTENT="revealtrans(duration=5,transition=23)">
<meta HTTP-EQUIV="page-exit" CONTENT="revealtrans(duration=5,transition=23)">
n <BODY> 之参数设定：
※ 例:
<BODY text ="#000000" link ="#0000FF" alink ="#FF0000" vlink ="#0000FF" background ="bg1.gif" bgcolor ="#FFFFFF" leftmargin =2 topmargin =2 bgproperties ="fixed">
► text ="#000000"
用以设定文字颜色。 #000000 代表黑色，亦可以采用颜色的名称，即 text=" black " 。各种颜色的值及名称可参考【调色原理】一节。
► link ="#0000FF"
设定一般文字链接颜色。（默认为蓝色）
► alink ="#FF0000"
设定鼠标刚按下时文字颜色。
► vlink ="#0000FF"
设定链接访问后的颜色。（被点击过）。
► background ="bg1.gif"
设定背景图片。GIF 或 JPEG 皆可，可以是绝对途径或相对途径。
► bgcolor ="#FFFFFF"
设定背景颜色。当己设定背景图片时会失去作用，除非图片有透明部分。
► leftmargin =2
设置网页的左边距，单位为像素。 『只适用于IE』
► topmargin =2
设置网页的上边距。 『只适用于IE』
► bgproperties ="fixed"
固定背景图片，当滚动条拖动时背景图片不会跟着滚动。 『只适用于IE』
注：标记及参数之字母大小都可以。
HTML语言剖析
字体标记-目录
<STRONG> <B>
<I> <EM> <VAR> <CITE> <DFN> <ADDRESS>
<TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
<H1> <H2> <H3> <H4> <H5> <H6>
<FONT> <BASEFONT>
n 实体标记与逻辑标记 ：
实体标记与逻辑标记的区别：
1. 实体标记有固定的显示效果，逻辑标记则依不同浏览器而不同。
例如逻辑标记的 <EM> 由于浏览器的不同它所标示的文字不一定出现斜体效果， 它可能是加下划线、粗体或反白等，所以这一节是以它们在IE和NC中的效果作介绍。
2. 多个实体标记也可有效标示同一语句，逻辑标记则通常于旧浏览器不能有效显示多重的标示。
例如两个逻辑标记<EM>及<STRONG>同时标示一字句于旧浏览器常失去作用。
► 实体标记有：
<I> <B> <U>
► 逻辑标记有：
<STRONG> <EM> <VAR> <CITE> <DFN> <ADDRESS> <CODE> <KBO> <SAMP> <TT>
n <STRONG> <B> ：
两者皆能产生字体加粗的效果，但必须注意的是当文件被设为 gb2312 Encoding 时，两者所标示的中文字不会于 Netscape Netvigator 显示粗体效果。
n <I> <EM> <VAR> <CITE> <DFN> <ADDRESS>：
这些标记于 Internet Explorer 都产生斜体效果，而只 有</DFN> 于 Netscape Netvigator 失去作用。这些标记中只有 <ADDRESS>较为特别，因为它 自身具备换行效果所以不需要在它前面加上<BR>标记。
n <TT> <SAMP> <CODE> <KBD> <U> <STRIKE> <BIG> <SMALL> <SUP> <SUB>
► <TT> <SAMP> <CODE> <KBD> 可令每字母有相等宽度且每字母之间的距离稍为加宽。但于 NC 不见得如此。
► <U> 是加底线的标记，一些特别的浏览器并不支援，因顾虑到与连结混淆。
► <STRIKE> 加上删除线的标记。
► <BIG> 令字体加大。
► <SMALL> 令字体变细。
► <SUB> 为下标字， <SUP> 则为上标字，仅剩的数学标记
n <H1> <H2> <H3> <H4> <H5> <H6>：
这些是标题标记，由 <H1> 至 <H6> 变粗变大加宽的程度逐渐减小。每个标题标记所标示 的字句将独占一行且上下留一空白行。
n <FONT> <BASEFONT>：
► <BASEFONT> 可以 用于文件的开头部分，即 <HEAD> 与 </HEAD> 之间的位置，将 影响全文字句，是一个空标记，用以改变字体显示的内定值。
<FONT> 是应用于文件的内文部分，即 <BODY> 与 </BODY> 之间的位置，只影响 所标示的字句，是一个围堵标记。
► 两标记可同时存在，唯没被 <FONT> 所标示的字句才直接受 <BASEFONT> 所影 响，而 <FONT> 本身亦受 <BASEFONT> 的影响。
<FONT>的参数设定：
※例：
<font face ="Arial" size ="+2" color ="#008000">我把青春献给你</font>
► face ="Arial"
设定文字的字形。Arial 是常用的一种，请不要使用 Window 内建字 形以外的字形。于没有设定为 Gb2312 Encoding 的中文网页，Netscape Netvigator 不会显示此标记 所指明的任何中文字形。
► size ="+2"
设定文字的大小。其值可以是 绝对 或 相对 ，
绝对的意思便是标记自己决定文字的大小，不受 <BASEFONT> 的影响，如
size=" 5 " 表示其大小便是 5 ， 而html内定值为 3，即 size=" 3 "和没有设定是一样的。
相对的意思便是在内定值 3 的基础上增加或减少大小级数， 如 size=" +2 " 便等同绝 对表示法的 size=" 5 "，但若已设定 <BASEFONT size=" n "> 则其 实际大小便是 n+2 不 再是 3+2 了。<BASEFONT>只有绝对表示法。
► color ="#008000"
设定文字的颜色。 #008000 表示绿色.........