(X)HTML 基础教程、整理资料、笔记总结
HTML 几个需要注意的地方
1.正确使用DOCTYPE 声明
每个页面中都有这样的一个声明在头部，但如果使用不正确或书写错误，会导致游览器错误的解析，所以在编写网页的时候一定要主要使用正确的DOCTYPE 声明，还需要在什么时候使用哪种DOCTYPE 声明，现在主要分 3 种模式（严谨模式、过渡模式、框架模式），又分为1.0版本、4.0版本，不过现在很多网站还是1.0的过渡版本，现在最新的是HTML5。html 1.0 版本是代表html ，4.0代表 是 xhtml
1.1严谨模式
正所谓严谨模式，就是它要求书写代码的格式非常规范，不能有一点错误，在标签内部不可以出现CSS 样式的定义。一般不建议新手使用。这里列举的是1.0版本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
1.2过渡模式
过渡模式，可以说相对于 严谨模式 来说，代码书写比较宽松，但不代表你就可以刻意在标签内写CSS 样式，因为这是不推荐的，也不建议的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.3框架模式
一看名字就知道这种模式是给使用框架<iframe>的页面声明用的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
最后给一个HTML5的声明，简单、简洁
<!DOCTYPE html> /*html5的声明，简单*/
2.标签正确关闭、嵌套
标签对大部分都是一对的，则有头必有尾，但并不是全部的标签都是一对的，但在使用标签的时候，请注意，一定要关闭标签
2.1正确关闭标签
①正确的标签关闭
<h1>我是正确关闭标签的方式</h1> /*注意到H1 结束标签的尾部有一个斜杆，这就是关闭标签的结束符标志*/
②错误的标签关闭
<h1>我是错误标签标的方式 /*注意到H1 只出现一次，并没有在输完文字后加上</h1>关闭标签的使用，这会导致游览器错误解析的，请注意了*/
2.2正确嵌套
嵌套资料参考：http://www.cnblogs.com/PeunZhang/archive/2012/03/11/2390526.html
嵌套是以一种或是说完整的标签对来内嵌，而不是交叉嵌套，看例子就会明白了
①正确嵌套
<p><span>我是span标签，我是正确的嵌套方式</span></p> /*可以看到span标签是完整的一对标签嵌套在P标签里面p是外层标签，span是内层标签*/
②错误嵌套
<p><span>我是span标签，我是错误的嵌套方式</p></span> /*可以看到span标签不是完整的一对标签嵌套在p里面，而是交叉嵌套了，这种是一种很严重的问题，请大家在书写标签的时候一定要注意，很多人不注意书写，往往是导致页面显示不出效果*/
最后，关于特殊少部分不是一对出现的标签，在最后的块级元素和内行元素会把全部元素划分列出
特殊主要有几个：
<meta/> /*html文件编码格式、以及SEO 相关*/
<br/> /*换行符*/
<hr/> /* 平衡线*/
<input/> /*控件，类型比较多*/
<img/> /*图像*/
3.XHTML建议小写
为什么建议使用小写？这个我自己也忘记了。。。汗。反正建议大家书写html文件格式标签使用小写，调用的方法,多数是事件，以前的是大小写混合的，但是不建议，因为javascript对这样的书写格式敏感。建议统一使用小写，关于这一点，希望大家给我补补，哈哈。补：HTML代码所有的标签名和属性应该都为小写，虽然HTML代码是大小写不敏感的，但是W3c的规范建议为小写；属性值应该用双引号包括。
4.标签结构意义化、正确使用
什么标签结构意义化？所谓标签结构，就类似我们一篇文章，有标题、有正文、有结尾，就是有结构的读取。如果一篇文章只有正文，没标题，也不是一篇完整的文章，失去文章的意义，所以在xhtml 文件结构也一样，常常都有《h1~h6》系列来列举标题,《p》都作为正文、段落的首选。
如下面一个结构：
<h1>我是文章标题</h1> <p>我是文章正文、段落</p> <p>我是文章正文、段落</p> <p>我是文章正文、段落</p>
那么就类似这样的一种结构，这里只是模拟的列举。具体的话，还是要看情况使用的。
5.XHTML代码规范
做任何事情，都要以一种最好的态度完成，所以在学习当中，大家一定要用心。任何代码的混乱都是从命名和格式的混乱开始的，所以一定要有统一和规范的命名和格式，以下是一些基本的规范。
5.1 HTML的命名和格式
给所有的关键元素定义元素的id和class，便于和CSS，JavaScript的交互；id名称中的关键词用下划线（_）连接，class的关键词用中划线（-）连接，根据实际的意义和Dom树的层级关系定义合适的名称。
HTML代码的层级缩进为4个空格；值为空的元素定义应该单独占用一行；包含子元素的元素的起始标签和闭合标签分别单独占用一行。
例子：
<div id="info_container" class="info-container"> <div class="container-top"></div> <article> ... </article> <div class="container-bottom"></div> </div>
同级可以对齐，子级使用缩进（四空格），这样的代码，清晰、结构化
5.2 CSS代码和HTML代码分离
这也是我们常说的，为什么需要分离，为了页面的整洁、结构化、维护性、都有很大的帮助。样式可以直接写在标签的style属性里面，也可以写在页面head区域的style标签里面，这两种方式都是不好的方式，尤其第一种方式。应该把样式单独写到css样式文件中，方便代码的重用和维护。
不该这么写：
<p stype="font-size:20px;">内联样式,字体大小为20像素</p>
例子中：出现 [stype="font-size:20px;"] 我们不建议这样写。
注意的问题就写到这，如果大家觉得哪里有错误或漏的，给我留言，感激不尽!*
下面开始讲解XHTML教程
1.完整的html文件结构
这里以过渡1.0模式为例子,1.0->html 4.0->xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> /*声明*/
<head> /*头部*/
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页的标题</title> <stype>CSS样式</stype>
</head>
<body> /*身体*/
其他标签元素 <srcript>javascript脚本</srcript>
</body>
</html>
html 文件结构，1.声明，2.头部，3.身体部分
1.声明<DOCTYPE>
这里不用说了吧？就是声明文件使用什么DTD标准进行渲染，注意：千万不要写错声明
参考：http://www.w3school.com.cn/html/html_doctype.asp
2.头部<head>
游览器页面不显示效果，除了<title>标题以外。其他元素不会在页面显示。
头部包含了<meta>元素、<title>标题、<stype>CSS样式,但这个是写在页面的，一般不建议，一般是引入文件的方式 ：<link> 标签来实现， 一般CSS写在头，javascript写在尾部，原因：JavaScript文件的下载和解析会阻塞页面的加载，所以在head部分，CSS的引用写在前面，而JavaScript文件的引用写在后面。从优化角度来写！
参考：http://www.w3school.com.cn/html/html_head.asp
3.身体部分<body>
游览器页面显示内容，可以看见的信息
身体部分，里面包含我们使用的大部分标签，都是写在这里，为了显示给用户看的。javascript一般是写在靠近body结束标签前面。关于原因，看上面。
在书写格式，请大家注意规范。
xhtml文件结构就这么简单，但是要掌握，大家还是需要时间和多动手自己去实验，写一下会有更好的体现。
参考：主要在 基础部分 http://www.w3school.com.cn/html/html_intro.asp
下面开始讲解每个标签的用意
关于head标签部分
主要有以下标签
| 标签名称 | 主要作用 |
| meta | 用于声明html文档的编码格式、以及SEO之类的优化 |
| title | 定义浏览器工具栏中的标题，提供页面被添加到收藏夹时显示的标题，显示在搜索引擎结果中的页面标题 |
| link | 一般是用来引用外连接文件，一般是CSS/网页小图标 |
| stype | 一般是测试的使用写在页面的CSS样式，正式发布可以不要 |
| script | javascript脚本，一般是引用js框架之类的文件，而不是写javascript代码 |
meta标签
meta信息描述有关页面的信息，放在页面的head部分，用于搜索引擎更友好的识别。如下是常用的一些定义：
<meta name="author" content="John Doe"> <meta name="copyright" content="© 1997 Acme Corp."> <meta name="keywords" content="corporate,guidelines,cataloging"> <meta name="date" content="1994-11-06T08:49:37+00:00">
详细参考：http://www.w3school.com.cn/tags/tag_meta.asp
link 标签
rel 属性规定当前文档与被链接文档之间的关系。
<link rel="stylesheet" type="text/css" href="theme.css" />
theme.css 为引用文件名称。
详细信息参考：http://www.w3school.com.cn/tags/att_link_rel.asp
style元素
<style> 标签用于为 HTML 文档定义样式信息，一般是写CSS样式的。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head>
base 标签，比较少用，这里不列举
关于body标签部分
这部分比较多，文章可能没办法写完，提供参考文章：http://www.w3school.com.cn/tags/tag_comment.asp
比较常用的以下列举：
<h1>~<h6>
h1到h6是作为标题的，h1是最高级别的标题，网页中显示标题的地方应该使用这些标题标签。
看见绿色的小标题了吗？这就是h1~h6系列的标题
<em>和<strong>
这两个标签的语义是强调和重点强调，代替了没有任何语义的标签<i>(斜体效果)和<b>(没意思，一般可以用于CSS某种效果，但还是不建议，建议使用<span>)。
<table>
table标签最早是经常用于布局，至今还有大量的页面是由table来布局的，table布局遭到了前端工程师们的一致唾弃，使得很多新手不敢使用这个标签了，这里要强调的是table的语义是表格，如果需要列出一些统计数据等，table标签是首选。
table 完整的结构应该是这样的：
<table>
<caption>表格标题</caption>
<thead> <tr>
<th>thead的单元格</th>
</tr> </thead>
<tbody> <tr> <td>tbody的单元格</td> </tr> </tbody> <tfoot> <tr> <td>tfoot的单元格</td> </tr> </tfoot>
</table>
table 后紧跟caption 标签（表格的标题），table里面有thead、tbody、tfoot 它们是同一个等级，但在它们里面的tr，th，td 是互不相干的，也就是说不会影响到对方。
注意一点，就thead标签里面的使用的是th，其他都是使用td代表单元格,tbody不限定出现次数。
但是我们一般使用表格，并不需要全部都用上。而且是根据情况使用的，如上面的那种格式，一般是用在日期框。我们平时使用的是tabel>tr>td 就已经足够。
详细信息参考：http://www.w3school.com.cn/tags/tag_tfoot.asp
<ul>，<ol>，<dl>
<ul>是无序列表，<ol>是有序列表，所以网页的导航菜单最合适用ul，而一些有序的列表，比如章节列表等，则应该用ol标签。自定义可以用<dl>，比如划分种类的时候用
ul 例子：
<ul class="main-menu"> <li>导航1</li> <li>导航2</li> <li>导航3</li> </ul>
ol 例子：
<ol class="main-menu"> <li>第一名</li> <li>第二名</li> <li>第三名</li> </ol>
dl 例子：
<dl> <dt>水仙花</dt> <dd>水仙花是....这是解析</dd> </dl>
注意：dl 标签里面只允许有dt，和dd ，不能出现第四者，因为这是dl结构的规定，一个dt有一个或多个dd。
在使用ul，ol，dl 的时候，请注意正确的嵌套、结构。
参考地址：http://dreamweaver.abang.com/od/html/a/xhtml-ul-li.htm
<a> 标签
平时我们在游览器上点击某个图片或名字的之后会跳出一个页面或直接切换进这个页面，这都归功于 <a> 连接标签，在网页上<a>标签的使用率也是最高的
几乎所有可以插入到网页中的对象都能制作成一个链接，文字、图片、mp3、视频文件等等，仅仅用一个简单的<a></a>标签就能做到这些。<a>也可称之为锚，它的主要格式是
<a href="URL" target="">超级链接文本</a>
href属性：网络地址/URL
target属性：打开网页时候的方式（默认不写这个属性的时候是使用_self）
| target属性 | 解析 | 备注 |
_blank |
新开浏览器窗口访问链接 |
很多情况也可以使用 |
_self |
在原窗口访问链接，是默认属性 |
很多网站默认是这种，但我个人觉得一些列表资料最后不用这种方式吧，不过还是需要根据需要定制 |
_parent |
在父窗口访问链接，用于框架结构页面 |
|
_top |
整个浏览器窗口访问链接，用于框架结构页面。 |
上面是一个文本链接，那我们给图片加上链接呢？如下：
图片链接代码：
<a href="http://www.abang.com"><img src="http://z.abang.com/h/channels/m/ch_logo_011.gif" alt="阿邦网Logo" /></a>
还有几个方式，但网页上很少使用，所以这里不列举出来了
参考地址：http://dreamweaver.abang.com/od/html/a/xhtml-href.htm
img 标签
在这里我就要说一下，在什么情况下才使用这个标签，除了一些装饰的图片、或没有实际用途的，我们一般用CSS的背景图来设置。在一些实用的数据，如：新闻的图片，介绍某种东西的图片，这种情况下，我们建议使用img来实现，相册大家都知道使用img标签吧，如果使用背景，就没办法保存图片，这也就是实用数据的表现!
img标签有2个重要的属性，建议都填写
| img的主要属性 | 作用 | 备注 |
| src | 图片的地址（一般是网络路径/绝对路径） | 一定要有，不然图片就显示了一个红色的叉 |
| alt | 用于描述图片的文字叙述 | 建议写，在某些情况下，如果图片无法显示，都还可以用写文字提示给用户看 |
<img src="路径/url" alt="我是描述图片的文字"/>
表单以及表单控件（在网页上也是很常用，如注册页面，留言板）
form标签
form 标签很容易写错为 from ，所以在书写的时候请十分注意！
input标签分很多类型，但他们都离不开form标签，因为form标签的作用是把所用在它里面的控件(input标签)的值发送到服务器端进行验证。form就是这个作用，form表单在一个页面中可以多次使用。
form的属性有：
| 属性名 | 作用 |
| action | 发送到服务器端的地址，一般是网络地址，也就是绝对路径 |
| method | 发送的方式：分为 get 和 post 默认为：get |
| name | 表单的名字，一般也可以给javascript使用，给服务器端返回数据（很少）可以不要这个属性 |
| id | 表单的id，一般给javascript操作使用，可以不要这个属性 |
label标签
密切跟input标签使用的，label标签可以用来表示某些控件的名字信息，如：你看到登录框，"登录" 这2个字，并且你点击它，焦点会跳到登陆框的文本框里，提示表单的含义(标签说明)作用，写在两个label之间的内容,是要显示的文字。这个标签可以被某些浏览器看做是可以点击的，点击后光标会显示在关联的表单元素内。
有一个属性，必填：
for属性
例子：
<label for="login">登录</label> <input type="text" name="login" vlaue="我是登录文本框" />
input标签
类型主要有
| type属性 | 解析 | 备注 |
| text | 文本框 | 就是我们注册页面用户登录那一种，用来输入文本信息，只能单行，还有一个多行的，但它并不是input标签 |
| button | 按钮 | 就是一个按钮，但是它默认的tpye类型是submit属性，注意点了，这个可以代替submit按钮 |
| password | 密码输入框 | 就是输入文本信息的时候有星号遮挡 |
| raidao | 单选框 | 就是只能选一个，但需要把name 设置为同一个名字才算是一组哦，请注意了！ |
| checkbox | 复选框 | 复选框，可以多选，如果想要是一组的，也是跟上面一样哦 |
| file | 文件域/文件选择框 | 就是一个文本框加上按钮，但是点击按钮会出现一个打开文件的小窗口，这个在各游览器的默认样式都不一样 |
| submit | 提交按钮 | 提交按钮，如果 form 表单有存在表单页面，就会提交数据，会结合javascript进行表单验证才会提交成功 |
| hidden | 隐藏域 | 特殊意义，用来存放某些文本框信息，但又看不见，可以说是个临时存储框，类似temp临时变量 |
| image | 图像域 | 好像没见过在哪里使用过，可能我out了 |
既然有单行文本，那么必定有多行文本，但这并不属于input标签，而且 textarea 标签，表示 文本域，有2个属性来控制，rows(行/高) 、cols(列/宽)
<textarea rows="10" cols="30"> 个人描述： </textarea>
学习网站：http://www.cnblogs.com/nngood2011/
参考地址：http://dreamweaver.abang.com/od/html/a/xhtml-form.htm
=======================我是分割线，下面的知识为学习CSS而打下的基础=======================
关于块级元素和行内元素
补：看了一半CSS权威指南，里面说到，其实还区分出 "替换元素"（自身具有高和宽，如：img） 和 "非替换元素 ，自身可以装有内容，如span"，但img是行内替换元素，他具有块级元素的上下外边距，普通行内非替换元素不具有上下外边距，只具有左右外边距。
非常建议打下看 CSS权威指南《第3版》
参考地址：http://www.w3cwhy.com/css-html/html-hkmarka.html
http://dreamweaver.abang.com/od/html/a/html-tags.htm
xhtml 所有的标签一共是91个
以图例来表述行内元素和块级元素的区别会更加直观：
注：行内元素会再一条直线上，是在同一行的。
注：块级元素各占一行。是垂直方向的！
还有一种是比较特别的，既有块级元素的特征也有行内元素的特征
| 块级元素 | 行内元素 | 可变元素 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
现在游览器的种类繁多，主流的有：谷歌、火狐、opera、苹果、IE系列（最坑爹）
游览器的内核分为:
| 内核类型 | 代表游览器 | 备注 |
| Trident | IE,MaxThon（遨游）,TT（腾讯）,The World（世界之窗）,360,闪游,搜狗浏览器等 | 现在的游览器真是五花八门 |
| Gecko | firefox(火狐) | |
| Presto | Opera7及以上 | |
| Webkit | Safari（苹果）,Chrome（谷歌）等 | |
| 双核（Trident和WebKit） | 搜狗2.0、傲游3.0Beta、QQ浏览器5、猎豹（近年金山出的） |
详细参考资料：http://www.uuxiao.com/diary_show.asp?id=635
http://software.it168.com/a2010/0524/890/000000890176.shtml
http://dreamweaver.abang.com/od/dwskill/a/browser_core.htm
还有一篇是我自己整理的一些css、javascript知识点和常用的一些代码
http://www.cnblogs.com/yyman001/archive/2012/07/30/2615255.html
这是下一篇文章：CSS 基础教程、整理资料、笔记总结
http://www.cnblogs.com/yyman001/archive/2012/09/22/css_base.html
简单WEB开发规范（修正版）http://www.topsage.com/computer/2009/0531/web_871.html
学习网站推荐
http://www.kekaku.com/webdevelop/530 (推荐)
关于一些学习资料，会迟点上传到百度网盘
如果有什么地方错漏的，请指出！谢谢！
会继续修改更新！
