html-综合篇
在几个月前,本人写过三篇关于html的文章.当我们讲解到ASP.net,讲到项目的时候发现学生在做网站的前端的时候，html学的怎一个烂字了得。所以，今天我们把html当中的重点内容做一个全面的回顾。
在很多企业面试的时候，尤其是在面试UI（界面层）的面试当中，很多时候要求我们手写html。当然，这里要求的是比如跟JavaScript或者是跟CSS结合着去写。像登录的界面，或者是写个表单，表格。诸如此类的面试，主要考查的就是我们对这些基础的东西，大家熟悉不熟悉。所以，当我们面试程序员或者是美工的时候，这些都是我们需要注意的地方。当然，只要我们静下心，多敲几遍，甚至是在纸上多写几遍，这样的面试、笔试还是很容易通过的。
好下面我们先介绍下浏览器：
五大浏览器：IE【IE6及以下版本（IE7及以上）】、FF(FireFox)、Chrome、Opera、Safari(Apple)
搜狗、腾讯TT、遨游（Maxthon） 、360浏览器、……(不是一个级别)
浏览器就是解释和执行HTML源码的工具。
同样的一个IE浏览器，不同的版本也会展现出不同的效果，那么在同一台电脑上是不让装多个IE版本的。我们怎么办呢？
一、IETester
htm、html都是静态页面，asp、aspx、jsp、php等都是动态页面。
二、注意的地方
开发工具：
记事本、高级记事本(Editplus、Notepad++、UltraEdit)（推荐）
其他工具：Dreamweaver、Expression Web(FrontPage的改头换面版) 等快速开发工具，这些工具是给页面美工用的。开发人员用VisualStudio写html就够了。
三、基本通用标签
注释使用的是：<!- - - - >
四、注意/title
五、运行时的快捷键
接下来介绍下颜色体系的内容：
六、背景颜色
自己搭配颜色：
七、自己调背景色
八、取色
接下来我们说下HTML和XML的联系、区别
html与xml相同点：
都是标记语言、注释都是：<!-- 内容、内容 -->
都可以通过dom编程方式来访问
都可以通过CSS来改变外观
html与xml的不同点：
xml比html语法要求更严格。
有开始标签必须有结束标签、大小写一致、属性用双引号等。
xml侧重于数据存储，html侧重于数据展示。趋势：数据存储与数据表现相分离(html中只有要显示的页面内容，样式都有CSS来控制,html页面中不再有<font>等标签，控制样式都用CSS)。
xhtml：可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML），更符合xml语法规范的html。xhtml的出现主要是为了向xml过度，通过xml+css也能实现很好的页面。【xhtml要求：全部小写、有开始结束标签、属性用双引号】
dhtml： Dynamic HTML的简称，就是动态的html。 HTML、样式表和JavaScript 的组合（现在都是dhtml）
接下来我们再来说下html常用标签：
h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
当搜索引擎搜索的时候，用h标签搜索的概率大于用css方法修饰标题的文章。
<br/>只是回车，<p>是分段。<p>前后会有比较大的空白，而<br/>则没有。
建议大家把开始结束写全<p> </p>
<center>川川是狗狗</center>居中显示.
<b>a</b>粗体，推荐<strong>。<i>b</i>斜体。<u>c</u>带下划线。<em>强调，斜体</em>
当搜索引擎搜索的时候，它会认为放在strong里面的内容更重要。
<sub>2</sub>下标，如：H<sub>2</sub>O
<sup>2</sup>上标，如：10<sup>2</sup>
<font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）
<hr/> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）
<pre> 预格式化 保持本色 （还记得牛逼的三个人么？呵呵。）
九、让分割线立起来
前面我们文章当中用过一些个水平线，但是很多时候我们用CSS来实现。
十、当当网中的事例
下面我们看下：html编码（特殊字符）
十一、转译符
十二、搜狗拼音输入法
© ©
® ®
² ²
¥ ¥
³ ³
Html编码查询：
http://www.htmlhelp.com/reference/charset/
十三、查字符集
请看下面一道题目：
十四、转译符2
接下来我们看下:超链接URL的相关内容。
蜘蛛爬虫就是根据超链接爬的，
URL：URL表示资源在网络中的地址，比如 http://127.0.0.1:80/html/pages/a.htm、ftp://192.168.88.128/b.zip。还有URI的概念，比URL大，有的类中使用URI这种说法，可以暂时看成和URL一样就行。
超级链接：<a href="http：//www.">XXX </a>。
URL:统一资源定位符
URI:统一资源标识符。
十五、target
在新的选项卡中打开，需要设置：
十六、在新选项卡中打开
a标签的一些常用属性：href、title、target、name（锚记时用）
十七、title
<a>中还可以嵌套图片，这样就是点击图片打开连接
十八、点击图像到链接
十九、去掉边框
现在要是链到内部自己的网站我该怎么写呢？
只要在同一个目录下，可以直接写文件名。
在a文件夹下的话就写a文件夹下的文件名，如果要是在它父目录下的话，就写..文件名。
相对URL：相对URL表示相对于当前文档的资源，“/”表示网站根目录，“../”表示父目录，“http://www.cnblogs.com/”表示父目录的父目录，“./”或者不写任何斜线表示相对于当前路径的目录。站内引用最好用相对URL，这样域名改变了、目录改变了都不受影响。
接下来我们再说下锚这个作用：
第一步写个锚：
第二步写链接到锚：
二十、锚的使用
二十一、锚的使用演示
接着我们说说：图片
在我们浏览网页的时候，会看到很多的图片：
二十二、图片存储的位置
二十三、图片当中的两个重要的属性
还可以设置图片的宽和高：
二十四、设置宽和高
那么，设不设宽和高呢？当我们打开一个页面的时候，图片比较的大，一开始是一个小点，后面突然变大了。这种情况就是没有设置高和宽。
当我们学习了JavaScript，操作图片的时候，如果不设置图片的高和宽。那么，只有当页面都下载完毕以后，才可以通过客户端写代码的方式来获取图片的高和宽。而如果一开始就设置了图片的高和宽，则图片还没有下载完毕，图片还没有下载完毕也可以获取图片的高和宽。
下面我们说下：缩略图
二十五、改变图片的大小
当我们改变图片的大小的时候，光该后缀名不行，必须在画图这样的软件里面去改。
二十六、制作缩略图
关于不同的图片有什么区别，请大家看下下面的链接：图片格式
以后我们写程序的时候，自动生成缩略图，自动加水印，都是真正的把图片改了。
px (Pixel)单位名称为像素，相对长度单位，像素（px）是相对于显示器屏幕分辨率而言的（随着屏幕分辨率而变化）,国内推荐； QQ截图也是使用PX作为长度宽度单位。
em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多；如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
接下来我们再看下列表和表格:
dl→definition list(定义列表)，见备注1。
一般可用于名词解释之类。
ul→unordered list(无序列表)，注意多个ul嵌套时的写法。见备注2
大家去一些个网站,找个有二级菜单的网站,用ul和li来实现的.通过CSS来控制。
二十七、具有二级菜单的网站
ol→ordered list(有序列表)，见备注3。
用嵌套ul或ol来模拟二级菜单。见备注4。
<ol>与<ul>都有一个type属性，用来设置序列的显示样式。type的取值可以是：A、a、1、i、I、disc、circle、square。(可用CSS控制ul、ol的type样式)
插入备注位置：
View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name="Generator" content="EditPlus"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 </head> 10 11 <body> 12 <!-- 备注1：--> 13 <!--dl用来定义一个普通列表：--> 14 <dl> 15 <dt>河北</dt> 16 <dd>石家庄</dd> 17 <dd>秦皇岛</dd> 18 <dt>山西</dt> 19 <dd>太原</dd> 20 <dd>大同</dd> 21 </dl> 22 23 24 <!--备注2--> 25 <ul> 26 <li>北京</li> 27 <li>上海</li> 28 <li>广州</li> 29 </ul> 30 31 32 <!--备注3--> 33 <ol> 34 <li>北京</li> 35 <li>上海</li> 36 <li>广州</li> 37 </ol> 38 39 40 <!--备注4--> 41 <ul> 42 <li>aaaaaa</li> 43 <li>bbbbbbb 44 <ol> 45 <li>ol test</li> 46 <li>ol test</li> 47 <li>ol test</li> 48 <li>ol test</li> 49 <li>ol test</li> 50 <li>ol test</li> 51 </ol> 52 </li> 53 <li>aaaaaa1</li> 54 <li>bbbbbbb1 55 <ol> 56 <li>ol test</li> 57 <li>ol test</li> 58 <li>ol test</li> 59 <li>ol test</li> 60 <li>ol test</li> 61 <li>ol test</li> 62 </ol> 63 </li> 64 </ul> 65 66 67 </body> 68 </html>
下面我们再说下表格，很久以前我们在网页上面布局都是使用的表格，但是现在使用的越来越少了。
二十八、tr与td
表格：<table></table>为表格，在内部通过<tr>创建行，<tr>内部通过<td> 创建单元格。可以将table的border属性设为0来隐藏表格线。演示常规表格。
填充、间距cellpadding内容和表格边线之间的距离 cellspacing单元格之间的间距。见备注1.
<tr>的属性：align，水平对齐，可选值left、right、center；valign，垂直对齐，可选值top、middle、bottom。
<td>也有align和valign。<tr align="right"><td>tom</td><td align="left">20</td><td>男</td></tr>：子标签默认继承父标签的属性，如果自己单独指定了属性，则会覆盖父标签的属性。
还可以使用rowspan(合并行)、colspan（和并列）进行单元格的合并。rowspan、colspan是td的属性。
一个完整的表格。table、caption、thead、tbody、tfoot、tr、th、td。见备注2. (查找vs2008msdn(目录-web开发-))
二十九、如何干掉EditPlus3备份文件
看下下面的练习：
三十、练习1,2
插入练习1,2代码位置：
View Code
1 <html> 2 <head> 3 <title>表格练习1，2</title> 4 </head> 5 <body> 6 <ol type="a"> 7 <li>爱</li> 8 <li>水煮鱼</li> 9 </ol> 10 11 <ul type="disc"> 12 <li>爱</li> 13 <li>水煮鱼</li> 14 </ul> 15 16 <table border="1" width="300"> 17 <tr align="center"> 18 <td><b>姓名</b></td> 19 <td><b>性别</b></td> 20 <td><b>工资</b></td> 21 </tr> 22 <tr> 23 <td>张三</td> 24 <td>男</td> 25 <td>9000</td> 26 </tr> 27 <tr> 28 <td>张三</td> 29 <td>男</td> 30 <td>9000</td> 31 </tr> 32 <tr> 33 <td>张三</td> 34 <td>男</td> 35 <td>9000</td> 36 </tr> 37 <tr> 38 <td>张三</td> 39 <td>男</td> 40 <td>9000</td> 41 </tr> 42 43 </table> 44 45 </body> 46 </html>
三十一、练习3
练习3插入代码位置：
View Code
1 <html> 2 <head> 3 <title>表格练习3,4</title> 4 </head> 5 <body> 6 <table border="1"> 7 <tr> 8 <td colspan="3" align="center"><strong>学生成绩表</strong></td> 9 </tr> 10 <tr> 11 <td>英语</td> 12 <td>数学</td> 13 <td>语文</td> 14 </tr> 15 <tr> 16 <td>100</td> 17 <td>100</td> 18 <td>100</td> 19 </tr> 20 </table> 21 22 <table border="1" width="400"> 23 <tr> 24 <td colspan="3" align="center"><b>学生基本情况</b></td> 25 </tr> 26 <tr align="center"> 27 <td><b>姓名</b></td> 28 <td><b>性别</b></td> 29 <td><b>专业</b></td> 30 </tr> 31 <tr> 32 <td>刘备</td> 33 <td>男</td> 34 <td rowspan="3">计算机</td> 35 </tr> 36 <tr> 37 <td>孙尚香</td> 38 <td>女</td> 39 </tr> 40 <tr> 41 <td>诸葛亮</td> 42 <td>男</td> 43 </tr> 44 </table> 45 46 47 </body> 48 </html>
三十二、表格当中的其它元素
三十三、控制显示哪儿部分
三十四、网页当中的具体的应用
三十五、tfoot标签
下面我们讲解下表单：
网站表单与填表。
<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、<textarea>、<select>等表单元素放到form中。
<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。<input type="file" />
下面我们写个小的表单
三十六、自己写个小的表单
三十七、只读
三十八、让按钮变灰
三十九、单选按钮
四十、下拉菜单当中的属性
那么，我们后面在JS中讲解在客户端写省市联动。
四十一、给下拉菜单分组
分组的大标题，只能看，不能选。
现在很多的网站都自己模拟做下拉菜单，原因就是select应用CSS的时候特别的不友好。但是，在后台系统并不要求美观的地方用它还是非常的方便的。
四十二、兴趣爱好
四十三、头像，协议功能
四十四、常用的提交功能
四十五、把常用的兴趣爱好圈起来
在选择性别的时候，点击男或女周围的地方也可以选中。
四十六、点击其它的位置也能选中
四十七、marquee
<!--
direction:left、right、up、down
behavior:scroll、slide、alternate
scrolldelay:滚动的速度。单位为毫秒数，默认为85。
-->
四十八、播放音乐，播放视频功能
具体能不能播放，以及播放器的效果如何，需要看浏览器安装的是什么插件。
四十九、练习1
练习1代码演示：
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <title>登录</title> 5 </head> 6 <body> 7 <form action="" method="get"> 8 <table border="1"> 9 <tr> 10 <td><label for="userName">用户名：</label></td> 11 <td><input type="text" id="userName"/></td> 12 </tr> 13 <tr> 14 <td>密码：</td> 15 <td><input type="password"/></td> 16 </tr> 17 <tr> 18 <td>验证码：</td> 19 <td><input type="text" size="4" maxlength="4"/><img src="code.jpg"/></td> 20 </tr> 21 <tr> 22 <td> </td> 23 <td><input type="checkbox" id="rp"/><label for="rp">记住密码</label></td> 24 </tr> 25 <tr> 26 <td> </td> 27 <td><input type="submit" value="登录"/><input type="reset"/></td> 28 </tr> 29 </table> 30 </form> 31 </body> 32 </html>
五十、练习2
练习2中的性别的name应该一样，职业的name应该一样。
怎么样点击按钮就跳到第二个页面呢？
Notepad++可以下载插件，使用起来很爽，大家有时间的时候可以研究一下子。
五十一、下载插件
补充一下刚才没讲的内容：
五十二、默认属性
五十三、登录的html代码
meta标签包括在head标签中。主要用来描述页面自身信息,元信息。
五十四、在哪儿能见到meta
在我们做网站或者说是写网页的时候还是非常有必要在自己的网页里面加上meta的，如果是做网络推广的朋友，简直是如获至宝。这样的话，就会给自己的网站得到非常好的用户浏览。
解决乱码问题，加上这句话
<meta http-equiv=”content-type” content=”text/html;charset=gb2312”/>
注意自己用的什么编码就写什么编码。
作者近期文章列表:
| C#中级进阶教程（完全免费，献给代码爱好者的最好礼物。注：本作者分享自己精心整理的C#中级进阶教程，无任何商业目的。希望与更多的代码爱好者交流心得，也请高手多多指点！！！） | |
| ASP.net项目 | 图书商城项目总论 |
| 三层及其它内容 | 递归 |
| 三层（一） | |
| 三层相关案例（及常见的错误） | |
| 三层实例（内涵Sql CRUD） | |
| 手写代码生成器 | |
| SQL数据库 ADO.net | 数据库的应用图解一 |
| 数据库的应用详解二 | |
| ADO.NET（内涵效率问题） | |
| ADO.NET实例教学一 | |
| ADO.NET（内含存储过程讲解） | |
| 面向过程，面向对象中高级 | 面向过程，面向对象的深入理解一 |
| 面向过程，面向对象的深入理解二 | |
| 面向对象的深入理解三 | |
| 无处不在的XML | |
| winform基础 | Winform基础 |
| winform中常用的控件 | |
| 面向过程 | 三种循环的比较 |
| C#中的方法（上） | |
| 我们常见的数组 | |
| 面向对象 | 思想的转变 |
| C#中超级好用的类 | |
| C#中析构函数和命名空间的妙用 | |
| C#中超级好用的字符串 | |
| C#中如何快速处理字符串 | |
| 值类型和引用类型及其它 | |
| ArrayList和HashTable妙用一 | |
| ArrayList和HashTable妙用二 | |
| 文件管理File类 | |
| 多态 | |
| C#中其它一些问题的小节 | |
| GDI+ | 这些年我收集的GDI+代码 |
| 这些年我收集的GDI+代码2 | |
| HTML概述以及CSS | 你不能忽视的HTML语言 |
| 你不能忽视的HTML语言2精编篇 | |
| 你不能忽视的HTML语言3 | |
| CSS基本相关内容--中秋特别奉献 | |
| CSS基本相关内容2 | |
| JavaScript基础 | JavaScript基础一 |
| javascript基础二JavaScript DOM编程 | |
| jQuery | jQuery(内涵: jquery选择器) |