第1章 HTML
1.1 概述
1、什么是HTML
HTML：（Hype Text Markup Language）超文本标记语言，是最基本的网页语言。他不是编程语言，而是一种描述性的标记语言。
2、标签
⑴、HTML是通过标签来定义的语言，代码由标签组成，不区分大小写。
⑵、由<html>开始，</html>结束，分头部分（head）和体部分（body），头部分用于给页面增加一些辅助或属性信息，最先加载。体部分是真正存放页面数据的地方。
⑶、多数标签是有开始标签和结束标签的，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
⑷、要想对被标签修饰的内容进行更丰富的操作，就用到了标签的属性，通过对属性值得改变，增加了更多的效果选择。属性和属性值用“=”连接，属性值可加双引号、单引号或不加引号。
⑸、格式:<标签名 属性名= ’属性值’>数据内容</标签名>
<标签名 属性名= ’属性值’>
3、操作思想
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在不断的改变容器的属性值。
1.2字体标签
1字体标签：<font>
<font size=”5” color=”red”>文字</font>
color属性可用颜色单词，也可用“#FFFFFF”：井号加十六进制数据表示，红绿蓝(RGB)
<span>标签可以控制行内某些字的标签
2、标题标签：<h1>文字</h1> 共有6级标题
3、水平线标签：<hrcolor=”red” size=”5”/> size属性指定水平线粗细
4、特殊符号：
| 大于号＞ | 小于号＜ | 与符号& | 双引号” | 空格 | 注册符® | 版权符© | TM符™ |
| > | < | & | " | | ® | © | ™ |
1.3、列表标签
1、列表和项目符号标签：
| 定义列表<dl> </dl> | 数字标签<ol> </ol> | 符号标签<ul> </ul> | |
| <dl>定义列表DefinedList <dt>定义项目 <dd>具体项目</dd> <dd>具体项目</dd> </dt> </dl> 自动缩进效果 | 具体项目内容用<li></li>封装 自动缩进 | ||
| 默认数字样式 可用type修改：a A I i 1 Start属性指定起始号码 | 默认样式空心圆circle disc实心圆 square黑方块 可用CSS自定义符号 | ||
2、注释标签：<!—注释内容-->
1.4、图像标签
1、图像标签：<imgsrc=”../dir/file” alt=”说明文字” height width border/>
⑴src属性中可用两个点（../）代表上层目录
⑵alt属性中的说明文字在鼠标悬停和图片加载失败时显示
2、图像地图：用<img>封装好图像后，切换到DW设计视图，在属性中选择热点区域形状并在图像上拖动出一块热点区域，用热点区域链接某个资源。在页面中点击热点区域就会跳转到相应资源。
1.5、表格标签
1、表格标签：<table><tr><td></td></tr></table>
2、<tableborder=”边框粗细”
bordercolor=“边框的颜色”
cellpadding=”单元格中数据与单元格边框间距”
cellspacing=”单元格与单元格间距 0两线并为一线”
bordercolorligth=””
bordercolordark=””
注意：cellspacing=0两线并成一线但显示出来粗，用CSS中border-collapse两线重叠看起来就是一条线
width=“固定像素值或相对页面百分比”>
3、<table>标签内<caption></caption>给表格加标题，是表格的一部分
| <td colspan=2>行占两列 | |
|
|
|
<tr>
<thcolspan="2"><td colspan=2>行占两列</th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
| <td rowspan=2>列占两行 第一行第一个单元格 | 第一行第二个 |
| 第二行只有一个 |
<tr>
<th rowspan="2"><td rowspan=2>列占两行 第一行第一个单元格</th>
<th>第一行第二个</th>
</tr>
<tr>
<th>第二行只有一个</th>
</tr>
4、tbody标签
table标签中默认都有一个tbody标签 thead、tbody、tfoot
浏览页面时，浏览器解析由table标签封装的页面数据时，读到</table>表格结束标记才会显示数据，若封装页面数据的表格很大，没读到结束标记就不显示任何数据，用户体验不佳，所以将表格分为多个部分，读一个</tbody>就显示一部分。用tbody将表格分体
5、布局思想
⑴、分析页面结构图，从大向小排，从左向右排
⑵、选择适合标签来规划我们的内容
⑶、再通过css来控制这些内容样式
6、技巧
⑴、立体表格效果，其实就是将表格的亮边框颜色与暗边框颜色，进行对比
⑵、细线表格效果公式：将表格自身的border=0，给表格设置背景颜色---细线颜色，然后给表格设置单元格之间距离----细线粗细。
1.6、超链接
1、超链接标签：<ahref=”http://www.xxx.cn” >文字</a>
⑴、点击一个超链接做了什么？首先启动相应的协议解析引擎，访问本机hosts文件，查找对应主机IP，未找到再请求网络DNS服务器获取对应IP，用IP访问指定主机。
⑵、href属性，可以指定协议，mailto:abc@qq.com?subject=”邮件主题”&cc=”抄送地址”
mailto thunder…… 不指定协议默认启动文件协议解析
href=www.baidu.com 默认使用file协议打开的是一个本地文件，并不是主机地址
2、链接分类：
⑴、站内链接
⑵、站外链接
⑶、邮箱链接
⑷、超链接实现页面内跳转：定位标记（锚）
①、<a name=”top”>顶部位置</a>
用a标签的name属性为当前位置指定一个名字，不使用href属性
…很多页面内容…
在适当位置用a标签链接到指定名字的位置 用#标示当前页面
<a href=”#top”>回到顶部位置</a>
②、target属性指定页面打开方式，默认在当前页面内打开，_blank新窗口打开
③、title属性：当鼠标悬停在文字上时显示的文字内容
⑸、空链接
⑹、脚本链接
3、其他技巧
链接重要的使用原则：必须有回路，有去有回，如每个网站都有首页。还要有相关链接。
1.7、表单标签：用于与服务端交互（重中之重）
1、form标签
⑴、form 的属性：<form action=”表单提交目的地” method=”表单提交方式”></form>。使用表单的组件不一定要定义form标签，只有需要将数据进行服务端的提交时，才会用到form标签。
⑵、form标签内的组件：input接收用户输入数据 select下拉列表 textarea文本区域
2、<input>：输入标签，接收用户信息。其中type属性指定输入标签的类型
⑴、text：文本框
⑵、password密码框
⑶、radio单选框：要被选中，必须给单选框定义一个属性name，当有多个单选框时，属于同一组的
选择框name属性要一致，不然单选框不能实现单选。
⑷、checkbox复选框：分组 同单选框 单选框不 加属性时还不让你选
⑸、file：提供一个文件浏览按钮，多用于上传文件
⑹、hidden：隐藏组件，不需用户看到但服务端要用到，可通过JavaScript将其值在用户端运算后再提交至服务端使用
⑺、button按钮 通过onclick方法添加事件监听
⑻、reset：重置按钮，将组件中的被操作效果还原到初始状态。
⑼、submit：提交按钮，将组件中添加的数据提交到指定的目的地。
⑽、image和submit一样，但可通过src性指定一个图片充当按钮 美化效果
注意：input标签内要指定name属性，服务端才能获取到对应的value
3、<select>选择列表，默认单选下拉式 设定multiple属性使选项全部列出，无下拉效果
⑴、size属性：指定显示多少项，显示不完出现滚动条
⑵、通过<option></option>标签封装列表项
⑶、<textarea cols=”” rows=””>文本区域：可指定行数和列数
⑷、<fieleset>区域设置：可给form加外框 外框上的文字可用legend标签指定
<fieldset>
<legend>注册区域</legend>
</fieldset>
4、form中的method指定提交方式，有7中，常用get和post
⑴、用Java自定义服务端与form交互 查看数据提交不同之处
⑵、get提交：信息显示在地址栏中，敏感信息泄露，不安全；
地址栏存储信息量有限，不利于大数据量提交；
将信息封装在消息头前边；
提交至服务端的中文乱码需要再次编码后再解码
⑶、Post提交：地址栏上不显示提交的信息，避免信息泄露，安全；
提交数据量无限制，方便大数据提交；
将信息封装在消息头后边（空行后）的数据体中；
中文乱码可通过设定字符集方法简单搞定
⑷、关于中文乱码问题：
Tomcat服务端默认使用的iso8859编码，两种提交方式提交中文时，服务端会显示乱码。
①、对于get提交方式：可以通过先用iso8859编码，再GBK解码的方式解决
②、对于post提交方式：可以通过使用，request.setCharacterEncoding(“GBK”)
⑸、暴力提交、暴力注册
①、<a href=”http://注册地址?name=value&id=value......”>暴力开始</a>
②、超链接默认就是get方式提交
③、客户端首先进行数据有效性校验，服务端对客户端提交的数据必须再次校验
1.8、其他标签
1、label标签：用于给各元素定义快捷键
for属性指定快捷键起作用的表单元素，其值必须与该表单元素的id值相同
accessKey指定快捷键，要与Alt合用
例：<label for=”user”accessKey=”u”>username</label>
<input type=”text” id=”user” />
label使用技巧：
将label标签加到tr标签上，for属性指向该tr里的文本框，在这行的任意位置点击鼠标，文本框都将获得焦点。
2、头标签
⑴、<head>内的一些标签：<title></title> <base /><meta /><link />
⑵、title：页面标题，显示在浏览器标题栏上的文字
⑶、base：href指定页面中所有超链接的目录，可本地，也可网络，结尾一定要用斜杠/表示目录，只作用于相对路径文件。 target指定打开方式
⑷、meta：
<meta name=”keywords” content=”电影，视频，关键字……” />
<meta http-equiv=”refresh” content=”3, url=http://www.xxx.com” />
http-equiv：模拟HTTP协议响应消息头，3秒后刷新，打开指定网页
⑸、link：给HTML关联一些文件，如CSS，JS等
<link rel=”stylesheet” href=”1.css” media=”print/screen”>
rel指定关联文件与HTML的关系 media指定文件作用的设备，多个设备斜杠分隔
3、<pre></pre>此标签内封装的文本数据格式将保持原样，包括空格和缩进等格式。常用于页面中显示带有缩进层次的代码。
4<p></p>段落标签，两个段落之间带有空行
5<b>加粗<strong>加粗 <i>斜体<u>下划线 <sub>下标<sup>上标
6<marquee direction=”left/right/down/up” behavior=”scroll/alternate/slide”>
此标签内可以让内容动起来，scroll滚动穿过/alternate来回弹/slide一下摔死
7、框架集frameset标签：将浏览器页面分成多个独立的部分，分别显示不同的页面
⑴、放在head和body之间 frameset分割页面 frame指定小页面内容
<frameset rows=”30%, *” frameborder=”yes”border=”1” framespacing=”0”>
<frame src=”1.html” noresize=”noresize”/>
<frame src=”2.html” noresize=”noresize”/>
</frameset>
⑵、frameset中用rows和cols属性指定分割页面大小区域，可用百分比也可用像素值
⑶、frame中的noresize属性使框架页面大小不可随意改动
⑷、frame中添加的超链接默认都是在当前框架页面内打开的，要让其在当前窗口中的其他框架页面中打开，需要将框架页面添加一个name属性，让超链接的target属性值等于这个框架页面的name属性即可
8、iframe画中画标签：直接在当前页面中挖出一个区域，显示指定页面内容
<iframe src=”1.html” width=30 height=50>画中画标签说明文字，这些文字在浏览器不支持iframe标签时显示</iframe>
画中画标签具有一定的危险性，可能被用于隐藏执行一些恶意的代码
如：<iframesrc=”1.js” height=0 width=0>
1.9 XHTML与XML
XHTML是可扩展的（Extensible）超文本标记语言，可理解为HTML向XML的过渡。
XML是可扩展标记语言，是对数据信息的描述，而HTML是对数据显示的描述。XML规定更为严格，如标签不结束即错误。XML规范可被更多应用程序解释，将成为一种通用的数据交换语言，各个服务器、框架都将XML作为配置文件。
Dreamweaver创建HTML文件自动生成的头部信息中，又一个规范约束文件（.dtd），描述一些标签信息，由此文件来约束标签的自动闭合，删除这些头部信息后，DW中输入标签将不会自动闭合。前边的网址并不代表此文件要从网络获取，只表示名称空间，可自定义。
DTD(Document Type Definition) 是一套关于标记符的语法规则，。它是XML1.0版规格的一部分，是XML文件的验证机制，属于XML文件组成的一部分。DTD 是一种保证XML文档格式正确的有效方法，可通过比较XML文档和DTD文件来看文档是否符合规范，元素和标签使用是否正确。XML文件提供应用程序一个数据交换的格式，DTD正是让XML文件能成为数据交换标准，因为不同的公司只需定义好标准DTD,各公司都能依DTD建立XML文件，并且进行验证，如此就可以轻易的建立标准和交换数据，这样满足了网络共享和数据交互。DTD文件是一个ASCII文本文件，后缀名为:dtd。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
