第一章 HTML语言简介
1.1 什么是HTML
- HTML(the Hypertext Markup Language，超文本标记语言)是用于描述网页内容结构的语言。
- HTML的作用：
- 发布包含标题、文本、表格、列表、图片的在线文档。
- 通过单击超链接进行网页间的跳转。
- 设计表单将用户输入的内容提交给服务器进行处理。
- 可以嵌入声音、视频等多媒体内容。
1.2 什么是HTTP
- HTTP(Hypertext Transfer Protocol，超文本传输协议)是互联网上应用最为广泛的一 种网络协议，它规范了通过网络请求与接收 HTML 页面的方法。
- HTTP 将一次用户浏览网页的过程定义为一次客户端与服务器端的交互。
1.3 什么是浏览器
- 浏览器(browser)属于万维网的客户端程序，用于向服务器发送 HTTP 请求，接收服 务器的 HTTP 响应，解析 HTML 网页内容并呈现给用户。
- 主流浏览器：
- 微软公司的Internet Explorer IE浏览器采用微软研发的Trident内核，只能运行在Windown操作系统中。
- Mozilla Firefox 采用Gecko内核，能够运行在 Windows、Linux 等多种主流操作系统中。
- Google 公司的 Chrome Chrome采用了苹果公司的Webkit内核，此内核也广泛用于移动设备的浏览器中。
- 苹果公司的 Safari
- Opera 挪威欧普拉软件公司推出的浏览器，采用自行研制的Presto内核，Opera浏览器支持多种操作系统，还有针对手机的移动版本等，可以说是面向平台最广泛的浏览器。
1.4 HTML文档类型
- DTD(Document Type Definition，文档类型定义)1，是用来定义XML文档结构的(HTML可以看成是XML的一种应用，其DTD作为标准而固定下来了)，对XML文档中元素和属性的使用规则及相互关系作出了定义。
- HTML4.01指定了3个DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
严格的 DTD，遵循这种 DTD，表明页面中不会使用废弃的元素和属性，也不会使 用框架。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
松散的 DTD，遵循这种 DTD，表明页面中可能会使用废弃的元素和属性，但不会使用 框架。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
框架 DTD，遵循这种 DTD，表明页面中可能会使用废弃的元素和属性，以及框架
1.5 HTML文档结构
- 学习 HTML 语言的重点就是掌握 HTML 元素及其属性的作用。
- HTML 标记(markup)和标签并不是同义的，HTML 标记包括开始标签 (tag)、结束标签、空元素标签、实体引用、字符引用、注释、文档类型声明等。
基本结构
123456<html><head></head><body></body></html><title>元素：指定页面的标题，标题会出现在浏览器的标题栏中，如果通过浏 览器收藏本页面，页面标题也会作为收藏夹中页面的名称。12345678<html><head><title>页面标题</title> </head><body><!-- 这是一段注释 -->这是在 HTML 中显示的文本。 注意:浏览器遇到连续的空格或换行时只会在页面上显示一个空格</body></html>两种字符引用
- 共性：在和号(&) 之后写上字符的助记符。
- 字符引用：需要在和号(&)之后加上一个井号(#)，之后是所需字符的十进制代码或 十六进制代码(ISO10646 字符集中字符的编码)。
- 实体引用：在和号(&) 之后写上字符的助记符。
- 实例代码1234567<html><head><title>页面标题</title> </head><body> HTML 中标题元素为<title> 所有的转义字符都以&符号作为开始</body></html>
指定字符编码格式：
<meta http-equiv="Content- Type" content="text/html; charset=utf-8">- GB2312和GBK均为简体中文的编码
- BIG5为繁体中文编码
- ISO-8859-1 为英文编码
- UTF-8 编码为比较通用的字符集，可以容纳世界上大多数的语言文字，使用UTF-8作为网页的编码格式可以让网页具有较高的通用性
1.6 基本元素
1.6.1 页面信息元素<meta>
- 页面信息元素可提供有关页面的元信息(Meta-Information)，比如针对搜索引擎提供 的页面描述和关键词、指定页面编码等。该元素应该出现在元素内部。
常用属性：
http-equiv：设置本页面有关的信息，需要与content属性配合使用。
123456<!--指定页面文本编码格式--><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!--页面显示5s后跳转到google--><meta http-equiv="Refresh" content="5; Url=http://www.google.com"><!--缓存页面内容到某个时间，超时后需要重新获取--><meta http-equiv="Expires" content="Wed, 23 Feb 2011 18:00:00 GMT">name：描述网页内容，供搜索引擎收录，需要与 content 属性配合使用。
123456<!--设置关键词--><meta name="Keywords" content="关键词 1,关键词 2,关键词 3,关键词 4,..."><!--设置网页简述--><meta name="Description" content="网页简述"><!--设置网页作者等--><meta name="Author" content="张三">
1.6.2 段落元素
- 段落元素用来表示一段文本，会自动换行。
- align属性：设置文字对齐方式，‘left/center/right’1234<p>普通段落</p><p align="left">左对齐段落</p><p align="center">居中段落</p><p align="right">靠右对齐段落</p>
1.6.3 换行元素<br>
- 换行元素用于同一段落内文字的换行显示，该元素没有属性，也不包含内容。12345<p><br>元素可用于段落中文字的换行<br/>因为浏览器对 HTML 中的换行符并不敏感， 所以这段话在浏览器中会连续显示</p><p>段落间的留白比<br>元素更明显</p>
1.6.4 标题元素<1><6>
- 用于将文字变为标题显示123456<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
1.6.5 文字修饰元素
- <b><i><u>元素用于修饰文字，作用分别为使文字变粗体、变斜体、加下画线。1234<p><b>元素使文字变为<b>粗体</b></p><p><i>元素使文字变为<i>斜体</i></p><p><u>元素为文字添加<u>下画线</u></p><p><b>这些<u>元素<i>可以</i>组合</u>使用</b></p>
1.6.6 文字修饰元素
修饰文字的颜色、大小和字体。
1234<p> <font>元素可以修饰文字的<font color="gray">颜色</font>,<font size="5">大小</font>和<font face="黑体">字体</font></p><p>也可以<font color="#B0B0B0" size="6" face="黑体">组合</font>使用</p>常用属性：
- color：设置文字的颜色，颜色可以使用英文单词或十六进制的数字指定。
- size:设置文字的大小，可选值为 1~7。
- face:设置文字的字体。
1.6.7 原样显示元素
- 原样显示元素用于原样显示文本，包括其中的换行符与连续的空格。12345<pre>用于原样显示文本，包括换行符</pre><pre>以及连续 的空格</pre>
1.6.8 分割线元素
用于显示分割线，可以通过属性设置分割线的外观。
12<p><hr>元素用于显示分割线</p><hr color="red" noshade="noshade" width="400px" align="right" size="1"/>常用属性：
- color:设置分割线的颜色。
- noshade:设置是否显示阴影，无此属性则显示阴影。
- width:设置线的宽度，可以使用百分比或像素作为单位。
- align:分隔线的对齐方式，可选值有“left”、“center”、“right”，默认为居中对齐。
- size:线的粗细，单位为像素。
1.6.9 其他元素
详细请看W3C元素对照表
第二章 超链接、图片及常用元素
2.1 超链接元素
2.1.1 超链接的基本用法
- 超链接元素
<a>，通过元素的href属性指定跳转的地址。
2.1.2 相对路径与绝对路径
- 相对路径：以当前文件所在的位置为参考点而建立的路径。
- 绝对路径：以硬盘根目录或站点根目录为参考点而建立的路径。
- 一般而言，在引用其他文件时建议使用相对路径，当站点的目录或域名更改时就不用修改链接地址。
2.1.3 target属性
- 指定目标页面的打开窗口，默认情况下载本浏览器窗口打开（如浏览器支持标签浏览，也能在新的标签页中打开目标页面），可通过target属性实现在新窗口中打开页面等效果。
| target | 属性含义 |
|---|---|
| _blank | 在新浏览器窗口（或新的标签页）中打开目标页面 |
| _self | 默认行为，在原浏览器窗口中打开目标页面 |
| _parent | 在父亲窗口中打开目标页面 |
| _top | 在顶级窗口中打开目标页面 |
| 其他值 | 以为在名为该值得窗口中打开目标页面。如无同名窗口，则新建一个窗口，并以target值命名此窗口，然后打开目标页面；如有同名窗口，则直接在此窗口中打开目标页面。 |
2.1.4 锚链接
- 用于跳转到页面的指定部分，对篇幅较长的网页尤其有用。
- FAQ（Frequently Asked Questions，“经常问道的问题”或“常见的问题解答”）
- 锚链接需要通过
<a name="xx"/>的形式为锚命名，并通过<a href="#xx">的形式跳转到对应的锚 - 注意：如果锚链接的地址写错了，浏览器一般不会跳转到错误页面，而是不做反应。
- 可以通过将href属性谢伟“页面地址/锚链接名”的方式直接跳转到某一个页面中指定的锚链接部分。
2.1.5 链接到电子邮件和网站
- 超链接地址可以是一个电子邮件地址浏览器会启动邮件程序编辑邮件并将内容发送到该地址。
- 示例：
<a href="mailto:445304116@qq.com">发送邮件</a> - 如客户端没安装电子邮件收发程序则无法发送邮件；如有多个电子邮件收发程序，可在浏览器的设置中指定使用。
2.2 图片元素
- 通过简单的标记就可以在HTML页面中引用图片，制作图文并茂的页面。
- 图片可以和超链接配合使用。
2.2.1 图片格式
- BMP格式： Win系统下的标准位图格式，未压缩，生成图像文件较大。
- GIF格式： 可变长压缩的，支持2~256种色彩的图像，并支持背景透明和动画。只支持256种色彩，故不适合保存图片。
- JPEG格式： 有损压缩格式，压缩比较高，支持24bit色彩，适合保存照片。
- PNG格式： 能投提供长度比GIF格式小30%的无损压缩图片，支持背景透明，支持Alpha通道调整图像的透明度。
2.2.2 基本用法
- 图片元素：
<inmg>，通过src属性指定图片地址就可以将图片显示在页面上。 <img>元素只能引用此图片，未将图片本身的内容复制到HTML文件中。
2.2.3 常用属性
- width/height：设置宽度/高度。
- 只设定一个值，浏览器会根据横纵比自动调整
- 宽高未设定，则原图显示
- 支持使用像素或百分比作为单位
- border：图片边框的宽度，默认0.
- alt：当图片无法加载时，用于替换图片内容的文字。
- align：图片与文字的的UI器方式、可选值及效果。
- top：上对齐
- moddle：居中对齐
- bottom：下对齐
- right：右对齐
- left：左对齐
2.2.4 图片与超链接
- 超链接会自动为图片添加边框，可通过设置border属性去掉边框。
2.2.5 图片热点
- 单击不同的热点可以跳转到不同的页面，通过这一技术可以让用户只管地进行操作（不过这一块需要在Dreamweaver中操作）
2.3 其他常用元素
2.3.1 内嵌元素
<span>元素，常用来修饰行内的文字、图像等内容，不影响元素的显示，需要配合样式表使用。
2.3.2 块级元素
<div>元素，可包含其他元素（如：段落、超链接、图像等），将多个元素组织在一起，通过样式表可以修饰这些元素外观。
2.3.3 上标与下标
<sup>：上标<sub>：下标
2.3.4 滚动字幕
<marquee>元素，用来滚动显示文字或图片，通过设置属性可以控制滚动方向和速度。- 常用属性：
- width/height：设置字幕的宽度和高度
- direction：设置字幕滚动方向（left/right/up/down）
- scrollamount：设置字幕的滚动速度，值越大滚动越快
- bgcolor：设置字幕背景色