标签：
HTML会是一种超文本标记语言（Hyper Text Mark Language）,也就是说，HTML不是一种编程语言，仅是一种标记语言（Markup Language）.
网页基本信息：
1、DOCTYPE声明
HTML代码中最上面有两行关于“DOCTYPE”文档类型的声明，他约束HTML文档结构，检验是否符合相关Web标准，同时高速浏览器，使用哪种规范来解释这个文档中的代码。DOCTYPE声明必须位于HTML文档的第一行，XHTML3.0规定了3种级别的声明。
（1）Strict（严格类型）：这种生命完全符合W3C的标准，但要求比较严格。对应的声明为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
（2）Transitional（过渡类型）：也称松散（loose）声明。相比Strict而言，要求相对宽松一些。对应的声明为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
（3）Frameset（框架类型）：Strict声明中不允许使用框架，当页面中需要使用框架时，则使用该声明。对应的声明为：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
Strict语法较为严格，对代码的编写要求较高；Frameset在一些浏览器中不支持，因此在使用时受到浏览器的限制，所以并不常用；因此使用最多的是Transitional。
注意：目前，建议使用XHTML 1.0 Transitional （XHTML 1.0过渡类型），这样可以按照XHTML的标准书写符合Web标准的网页代码，同时在一些特殊情况下，还可以使用传统的做法。
2、<title>标签
使用<title>标签描述网页的标题，类似一篇文章的标题，一般为一个简洁的主题，并能吸引读者有兴趣读下去。例如，SOHU网站的主页，对应的网页标题为
<title>搜狐-中国最大的门户网站</title>
3、<meta>标签
使用该标签描述网页具体的摘要信息，包括文档内容类型、字符编码信息、搜索关键字、网站提供的功能和服务的详细描述等。<meta>标签描述的内容并不显示，其目的是方便浏览器解析或利用搜索引擎搜索，它采用“名陈/值”对的方式描述摘要信息。
/1/文档内容类型，字符编码信息
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
其中，属性“http-equiv”提供“名称/值”中的名称，“content”提供“名称/值”中的值，HTML代码的含义如下。
名称：Content-Type（文档内容类型）。
值：text/html;charset=gb2312（文本类别的html类型，字符编码为简体中文），charset表示字符集编码。常用的编码有以下几种。
gb2312：简体中文，一般用于包含中文和英文的页面。
ISO-885901：纯英文，一般用于只包含英文的页面。
big5：繁体，一般用于带有繁体字的页面。
utf-8：国际通用的字符编码，同样适用于中文和英文的页面。和gb2312编码相比，国际通用性更好，但字符的压缩比较低，对网页性能有一定影响。
/2/搜索关键字和内容描述信息。
<meta name="keywords" content="北大青鸟，IT培训" />
<meta name="description" content="北大青鸟是国内最大的IT教育集团，致力于为中国培养优秀的IT技术人才。" />
实现方式仍然为“名称/值”对的形式，方便搜索引擎的搜索。
W3C标准
1、HTML版本
在前面讲价HTML剪接师，已介绍过HTML出现了许多的版本，其中在制作网页是大家使用最多的两个版本是HTML4.01和XHTML1.0，虽然目前的浏览器都兼容这两个版本，但是这两个版本中的标签在使用时有许多的区别，下面介绍两者之间的一些区别。
2、HTML和XHTML之间的区别
/1/在XHTML中标签名称必须小写；在HTML中，标签名既可以大写，也可以小写。
/2/在XHTML中属性名称必须小写；在HTML中，属性的名称也必须是小写的。
/3/在XHTML中标签必须严格嵌套；在HTML中，对标签的嵌套没有严格的规定。
/4/在XHTML中标签必须封闭；在HTML中，标签不闭合和也是正确的，即标签可以不成对出现。例如，“<p>我没有结束标签”和“<p>我有开始标签和结束标签</p>”,这两条代码的显示结果，在HTML规范中是完全相同的，但是，在XHTML中，第一条语句是不允许的（不能正常显示），而必须像第二条语句那样，严格的使标签闭合。
/5/在XHTML中即使是空元素的标签页必须封闭，这里说的空标签，就是指<img>或<img/>军事正确的，但在XHTML规范中，必须写<img/>才正确。
/6/在XHTML中属性值必须用双引号引起来；在HTML中，属性可以不必使用双引号。
/7/在XHTML中属性值必须使用完整形式，如<input disabled="disabled">；在HTML中，一些属性经常使用简写方式设定属性值，如<input disable>。
/8/在XHTML中，应该区分“内容标签”与“结构标签”。例如，<p>标签是一个内容标签，而<table>标签是结构标签，因此，不允许将<table>标签置于<p>标签内部。反之，如果将<p>标签置于<td></td>之间，则是完全正确的。
3、HTML内容结构语义化
仅根据HTML代码能看出这部分内容是什么，代表什么含义。例如，是标题、段落，还是项目列表等。这样做有几个好处，一是前面提及的方便搜索引擎搜索；二是方便在各种平台中传递，除普通的计算机外，还包括手机、PDA、MP4等。因为对于手机、PDA等轻量级显示终端，可能不具备普通计算机上浏览器的渲染能力，她将按照HTML结构的语义，使用自身设备的渲染能力显示页面内容。因此，HTML结构语义化越来越成为一种主流趋势。
具体如何编写具有语义化的HTML结构？要点就是根据页面文档表达的含义，选用对应含义的HTML标签。
网页的基本标签
1、标题标签
标题标签标示一段文字的标题或主题，并且支持多层次的内容结构。例如，一级标题采用<h1>,二级标题采用<h2>,其他以此类推。HTML共提供了6级标题<h1>~<h6>，并赋予了标题一定的外观，所有标题字体加粗，<h1>字号最大，<h6>字号最小。
2、段落和换行标签
段落标签<p>……</p>表示一段文字等内容。例如，希望描述“北京欢迎你”这首歌，包括歌名（标题）和歌词（段落）。
换行标签<br/>表示强制换行显示，该标签比较特殊，没有结束标签，直接使用<br/>表示标签的开始和结束。
3、水平线标签
水平线标签表示一条水平线，注意该标签与<br/>标签一样，比较特殊，没有结束标签。
4、字体样式标签
在网页中，经常会遇到字体加粗或斜体字，字体加粗的标签是<strong>…….</strong>，斜体字的标签是<em>……</em>。
5、注释和特殊符号
HTML中的注释是为了方便代码阅读和调试。当浏览器遇到注释时会自动忽略注释内容。HTML的注释格式如下。
<!-- 注释内容 -->
在HTML中常用的特殊符号及对应的字符实体如下表所示，这些实体符号都以“&”开头，以“；”结束。
|
特殊符号 |
字符实体 |
示例 |
|
空格 |
|
<a href="#">百度</a> | <a href="#">Google</a> |
|
大于号（>） |
> |
如果时间>晚上6点，就坐车回家 |
|
小于号（<） |
< |
如果时间<早上7点，就走路去上学 |
|
引号（"） |
" |
W3C规范中，HTML的属性值必须用成对的"引起来 |
|
版权符号（@） |
© |
©2003-2013北大青鸟 |
图像标签
在浏览网页时，随时都可以看到页面上的各种图像，图像是网页中不可缺少的一种元素，下面介绍常见的图像格式和如何在网页中使用图像。
1、常见的图像格式
在日常生活中没使用比较多的图像格式有4总，即JPG、GIF、BMP、PNG。在网页中使用比较多得是JPG、GIF和PNG，大多数浏览器都可以显示这些图像，PNG格式比较新，部分浏览器不支持此格式。
/1/JPG
JPG（JPEG）格式图像是在Internet上被广泛和支持的图像格式，它是联合图像专家组（Joint Photographic Experts Group）文件格式的英文缩写。JPG格式采用的是有损压缩，会造成图像画面的失真， 不过压缩之后的体积很小，而且比较清晰，所以比较适合在网页中应用。
此格式最适合用于摄影或连续色调图像的高级格式，这是因为JPG文件可以包含数百万种颜色。随着JPG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPG文件在图像品质和文件大小之间达到良好的平衡。
/2/GIF
GIF图像是网页中使用最广泛、最普遍的一种图像格式，他是图像交换格式（Graphics Interchange Format）的英文缩写。GIF文件支持透明色，使得GIF在网页背景和一些多层特效的显示上用的非常多，还支持动画，这是它最突出的一个特点，因此GIF图像在网页中应用非常广泛。
/3/PNG
PNG是20世纪90年代中期开始开发的图像文件存储格式，它兼有GIF和JPG的优势，同时具有GIF文件格式不具备的特性。流式网络图形格式（Portable Network Graphic Format,PNG）名称来源于非官方的“PNG`s NOT GIF”,读成“ping”。唯一遗憾的是，PNG是一种新兴的Web图像格式，还存在部分旧版本浏览器（如IE5、IE6等）不支持的问题。
2、图像标签的基本语法
<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />
其中，src表示图片路径，alt属性指定的替代文本，表示图像无想法显示时（如图片路径错误或网速太慢等）替代显示的文本，这样，即使当图像无法显示时，用户还是可以看到网页丢失的信息内容，所以alt属性在制作网页时和src配合使用。
Title属性可以提供额外的提示或帮助信息，当鼠标移至图片上时显示提示信息。
width和height两个属性分别表示图片的宽度和高度，有时可以不设置，那么图片默认显示原始大小。
链接标签
1、超链接的基本用法
超链接包含两部分内容，一是链接地址，即链接的目标，可以是某个网址或文件的路径，对应为<a>标签的href属性；二是链接文本或图像，单击该文本或图像，将跳转到href属性指定的链接地址，超链接的基本语法如下。
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
href:表示链接地址的路径。
target：指定链接在哪个窗口打开，常用的取值有_self（自身窗口）、_blank（新建窗口）。
超链接既可以是文本超链接，也可以是图像超链接。
|
文本超链接 |
<a href="sl08.html" target="_blank">无漂白薄皮核桃</a> |
|
图像超链接 |
<a href="sl08.html" target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a> |
网页中，当单击某个链接时，将指向万维网上的文档。万维网使用URL（Uniform Resource Location，统一资源定位器）的方式来定义一个链接地址。例如，一个完整的链接地址的常见形式为http://www.bdqn.cn。
根据链接的地址是指向站外文件还是站内文件，链接地址又分为绝对路径和相对路径。
绝对路径：指向目标地址的完整描述，一般指向本站点外的文件。
例如,<a href="http://www.sohu.com/index.html">搜狐</a>。
相对路径：相对于当前页面的路径，一般指向本站点内的文件，所以一般不需要一个完整的URL地址的形式。
例如，<a href="login/login.html">登录</a>表示链接地址为当前页面所在路径的“login”目录下的“login.html”页面。假定当前页面所在的目录为“D:\root”，则链接地址对应的页面为“D:\root\login\login.html”。
另外，站内使用相对路径时常用到两个特殊符号：“../”表示当前目录的上级目录，“../../”表示当前目录的上上级目录。假定当前页面中包含两个超链接，分别指向上级目录的web1.html及上级目录的web2.html。
当前目录下index.html网页中的两个链接，即上级目录中web1.html及上上级目录中web2.html，对应的HTML代码如下。
<a href="../web1.html">上级目录</a>
<a href="../../web2.html">上上级目录</a>
注意：当超链接href链接路径为“#”时，表示空链接，如<a href="#">首页</a>。
超链接的应用场合
大家在上网时，会发现不同的连接方式，有的链接到其他页面，有的链接到当前页面，还有单击一个链接直接打开邮件，实际上根据超链接的应用场合，可以把链接分为3类。
页面间链接：A页到B页，最常用，用于网站导航。
锚链接：A页甲位置到A页的乙位置或A页加位置到B页的乙位置。
功能性连接：在页面中调用其他程序功能，如电子邮件、QQ、MSN等。
1、页面间链接
页面间链接就是从一个页面链接到另外一个页面。
2、锚链接
常用于目标页内容很多，需定位到目标页中的某个具体位置时。例如，网上常见的新手帮助页面，当单击某个超链接时，将跳转到对应帮助的内容介绍处，这种方式就是前面说的从A页面的甲位置跳转到本页中的乙位置，做起来很简单，需要两个步骤。
首先在页面的乙位置设置标记：
< a name="marker">目标位置乙</a>
"name"为<a>标签的属性，“marker”为标记名，其功能类似古时用于固定船的锚（或钩），所以也称为锚名。
然后在甲位置链接路径href属性值为“#标记名”,语法如下。
<a href="#marker">当前位置甲</a>
如果要实现不同页面间的锚链接，即从A页面甲位置跳到B页面的乙位置，如单击A页面上的“用户登录帮助”链接，将跳转到帮助页面的对应用户登录帮助内容处，该如何实现呢？实际上实现步骤与同页面间的锚链接一样，同样首先在B页面（帮助页面）对应位置设置锚标记，如<a name="login">登录</a>,然后再A页面设置锚链接，假设B页面（帮助页面）名称为help.html,那么锚链接为<a href="help.html#login">用户登录帮助</a>。
3、功能性连接
功能性链接比较特殊，当单击链接时不是打开某个网页，而是启动本机自带的某个应用程序，如网上常见的电子邮件、QQ、MSN等链接。接下来以最常用的电子邮件为例，当单击“联系我们”邮件链接，将打开用户的电子邮件程序，并自动填写“收件人”文本框中的电子邮件地址。
电子邮件链接的用法是“mailto:电子邮件地址”。例如：< a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>
S1/使用HTML语言和CSS开发商业站点/01-HTML基础
标签：
原文地址：http://www.cnblogs.com/water5832/p/5721892.html
