HTML要点札记
引子：网页技术与标准
1).静态网页技术:（相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页）
文档呈现语言:HTML/XHTML/XML/XForms/DHTML
样式格式描述语言:CSS/XSL
客户端脚本语言:JavaScript/JScript/VBScript/ECMAScript
2).动态网页技术:ASP.NET/JSP/PHP/CGI/FastCGI/ColdFusion
3).客户端交互技术:ActiveX/AJAX/Silverlight/ActionScript/Java Applet/JavaFX/Flex/AIR
附：静态页面、动态页面与动态HTML。静态页面和动态页面区别重要标志：程序是否在服务器端运行。
静态页面：
以.htm、.html、.shtml等为后缀
每个网页都是一个文件，有一个固定的URL。
网页代码都在页面文件中，不用执行asp、php、jsp、.net等程序生成客户端代码。
不能自主管理发布更新的页面，更新需要通过ftp把文件下载来修改。
动态页面：
以aspx、asp、jsp、php、perl、cgi等形式为后缀
不是独立存在于服务器上的网页文件，而是当用户请求时服务器才返回一个完整的网页；动态网页URL中有一个标志性的符号——“?”，后面。
通过执行asp、php、jsp、.net等程序生成客户端代码
可以通过网站后台管理进行更新，发布。
动态HTML：
DHTML是Dynamic HTML的简称，就是动态html，是相对传统的静态的html而言的一种制作网页的概念。
它是HTML、CSS和客户端脚本的一种集成，即一个页面中包括html+css+javascript（或其它客户端脚本），其中css和客户端脚本是直接在页面上写而不是链接上相关文件。
1.HTML定义
HTML(Hyper Text Markup Language):超文本标记语言。HTML文档就是网页，由浏览器解析、显示(浏览器解析是不严格的);
2.HTML结构和特点
(1)HTML结构
标签：有始有终，小写规范。
内容：body分工，内容其中。
注释：跨行注释，不要嵌套。
属性：键值双引，空格分列。
<html>
<head>
</head>
<body bgColor="red" text="yellow">
<!--
全都注释
-->
</body>
</html>
(2)HTML与XML比较
相同点：都是标记语言，注释相同，可以通过DOM控制，可以通过CSS控制
不同点：xml语法更加严格规范，xml主要存储数据，html注重展示数据。
附：XHTML (eXtensible HypertTextMarkup Language) 符合xml语法规范的html
DHTML (Dynamic HTML) 动态HTML(html+css+javascript+...)
3.HTML标签
3.1 文本标签
(1)标题标签
用"h+数字"表现描述
<h1>标题测试</h1><h2>标题测试</h2>
在两个标签中间显示的数据就是标题
标题会自动的换行
数字是有一定范围的(1~6)
(2)物理字体标签
加粗 <b>这是粗体</b> --boldface
斜体 <i>意大利斜体</i>
打字机字体 <tt>打字机字体</tt>
下划线 <u>下划线效果</u>
上下标 <sup></sup><sub></sub> 3<sup>2</sup>+4<sup>2</sup>=5<sup>2</sup> f<sub>n</sub>
删除线 <s>增发密令</s>
(3)逻辑字体标签--关键字的定位，利于js操作，利于SEO (搜索引擎抓取)
<em>(强调文本-斜体)</em>
<strong>(强调文本-粗体)</strong>
<code>(计算机代码文本)</code>
<cite> 定义引用 </cite>
<small> 小号文本</small>
<big> 大号文本</big>
<kbd>(键盘文本)</kbd>
<samp></samp>
<var></var>
<dfn></dfn>
(4)客户端字体
<font size="7" color="red" face="华文彩云">客户端</font> font常用三个
3.2 格式标签
段落 <p align="center"></p> 前后换行 在HTML4.01不推荐使用 --paragraph align="left"/align="right"
换行 <br/> 单标签，实现功能 (成对标签 有一定的范围)
居中 <center></center> 了解 基本不用了
分割线 <hr size="5" color="pink" width="600" align="left" noshade="noshade"/> --noshade
预格式化<pre></pre> 保留原始原样的格式
<pre>
锄禾日当午，
汗 滴 禾 下 土。
谁知盘中餐，
粒 粒 皆 辛 苦。
</pre>
空格
-> 如果空格两边均有内容(文本)，那么多个空格与换行视为一个空格
-> 如果两边只要要有一边没有内容，就忽略空格
-> 如果需要显示空格使用，" "表示一个空格
尖括号
"<" < less then
">" > greater then
3.3 图片标签
语法<img src="图片地址" alt="图片不存在" title="这是一张图片" border="2px solid red"/>
属性：width 宽度 Height 高度 只设置其中一个则等比例缩放，若果设置了两个，则拉伸缩放；
alt 必需的属性，它规定在图像无法显示时的替代文本；
title 鼠标放上去显示
border 边框
3.4 超链接-a标签
URI：Universal Resource Identifier 通用资源标识符 URL是URI的一种形式
URL：Uniform Resource Locator 统一资源定位符
URL由三部分组成：协议类型，主机名和路径及文件名。本机或局域网的协议类型为file
<a href="url">连接显示的内容</a>
简单示例：<a href="http://www.baidu.com">百度一下</a>
说明：
(1)target属性
<a href="http://www.tudou.com" target="_blank">土豆</a>
(2)name属性
<a name="md">这是一个锚定</a>
<a href="#md">跳到锚定</a>
(3)a标签中可以有图片
<a href="http://www.baidu.com"><img src=".\baidu.gif" /></a>
<a href=".\girl.jpg" target="_blank"><img src=".\small\girl.jpg" /></a>
<a href="mailto:kinglong1984@126.com?subject=mailTitle&body=mailbody" >发送邮件</a>
3.5 HTML结构标签
3.5.1 body标签的属性
bgcolor 背景颜色
text属性 文本颜色 ---内容中<font color="#ffffff">fjaljfklad</font> 的范围则使用该标签元素的颜色
link 点之前的颜色
alink 点的时候颜色
vlink 点过之后颜色
<body text="#ffffff" bgcolor="red" background=".\source\bg.jpg" ></body> ---bgcolor="red"被覆盖掉了
4.HTML控件标签
4.1 HTML列表 List
4.1.1 无序列表(unorder list)
项--list item
<ul Type="square">
<li>每一项</li>
<li>每一项</li>
<li>每一项</li>
</ul>
-> 使用type设置其引导的标记
cricle 小圆圈
disk 小黑点(默认)
square 小方框
4.1.2 有序列表(order list)
<ol type="a">
<li>每一项</li>
<li>每一项</li>
<li>每一项</li>
</ol>
-> 使用type设置其引导的标记
"1" 数字
"a" 字母
"i" 罗马
4.1.3 自定义列表(defined list) --美术馆评论列表中用了
<dl>
<dt>编程<dt>
<dd>C#编程<dd>
<dd>JAVA编程<dd>
</dl>
4.2 HTML表格Table标签
以前及内网中用到 --- 现在多使用div+ul
<table bordercolor="red" border="1" width="600" height="300">
<tr>
<td align="right" valign="bottom">第一行第一列</td>
<td align="left" valign="bottom">第一行第二列</td>
</tr>
<tr>
<td align="right" valign="top">第二行第一列</td>
<td align="left" valign="top">第二行第二列</td>
</tr>
</table>
<table border="1" bordercolor="red">
<tr>
<td rowspan="2">1234567890</td>
<td>1234567890</td>
</tr>
<tr>
<td>1234567890</td>
</tr>
<tr>
<td colspan="2">1234567890</td>
</tr>
<tr>
<td>1234567890</td>
<td>1234567890</td>
</tr>
</table>
4.3 表单标签
<form>
<input type="text" />
<input type="submit" />
</form>
4.3.1 表单元素--非单值
单选按钮 radio
<input id = "m" type = "radio" name = "sex" checked = "checked"/><label for = "m">男<label>
<input id ="fm" type = "radio" name = "sex" /><label for = "fm" >女</label><br/><br/>
复选按钮 checkbox
<label>爱好：</label>  
<input id = "c1" type = "checkbox" name = "ds" value = "1"/><label for = "c1">登山</label>
<input id = "c2" type = "checkbox" name = "yy" value = "2"/><label for = "c2">游泳</label>
<input id = "c3" type = "checkbox" name = "dq" value = "3"/><label for = "c3">打球</label>
<input id = "c4" type = "checkbox" name = "dq" value = "4"/><label for = "c4">打豆豆</label>
将文字放在label标签中，绑定一个控件的id号，点击label标签中的内容与点击控件效果一样
<input type="checkbox" id="ck" /><label for="ck">我是文本</label>
4.3.2 表单元素--select
设置size属性
-> size默认为1，就是ComboBox，只将选中的项显示出来，其他项在下拉列表中
-> 设置size为n，表示显示n行的ListBox 一次性显示n项，大于n项时可通过滚动条来查看。
-> 默认情况是单选，在select中添加multiple属性即可多选(ctl)
<select id = "s1" name = "domain">
<option value = "1">@126.com</option>
<option value = "2" selected = "selected">@qq.com</option>
<option value = "3">@163.com</option>
</select>
5. 帧标签
<frameset>
</frameset>
-> 一个html中直接写上frameset，不需要提供<html>、<body>等标签
-> 在frameset中可以添加frame标签，默认就是一个页面，用src写地址
-> 在frameset标签中有两个常见的属性
-> rows 行分大小 rows="30%,40%,*"
-> cols 列分大小
-> frame标签中有个属性表示noresize="noresize"，使得页面不能调整大小
-> 并非所有浏览器都兼容frameset，那么如果有不兼容的时候，可以提供
<noframes><body></body></noframes>
在不兼容的情况下，显示body中的内容
示例：
<html>
<frameset rows =30%,*>
<frame src="top.html">
<frameset cols =30%,*>
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset>
</html>
