一篇文章教你使用html+css开发商业网站
（一）初探网页结构 :
HTML（Hypertext markup language）即超文本标签语言，是用于描述网页文档的一种标记语言。一个 HTML页面由各种标签组成.
HTML的特点：
HTML 文档的结构:
1.1.1 HTML 的基本结构:
完整的 HTML 文件至少包括标签、标签、标签和<body>标签，且这些标签式成对出现 的，起始标签为<标签名>、结束标签为</标签名>，可以在标签起始于结束之间添加内容。一个完整的标签组成一个标签元素 HTML 的基本结构分为两部，分别是头部（head）和主体（body）。</pre> <blockquote> <p>（1）<html>:标签 HTML 内容的开始和结束，页面中的所有内容都必须包含在<html>和</html>之间。</p> <p>（2）<head>:标记 HTML 文件的头部，包含不再正文中显示的关键字、标题和脚本等。</p> <p>（3）<title>:标记 HTML 文件的标题，打开 HTML 页面时，标题会显示在 IE9 浏览器的选项卡上。</p> <p>（4）<body>:标记 HTML 文件的正文部分，所有显示在网页中的内容均包含在该标签内</p> </blockquote> <p>注意：</p> <pre>HTML 标签成对出现的，<head>和</head>就是一对 HTML 标签。标签中可以嵌套另外的标签，所以<head>标签中可以嵌套<title>标签，标签名称建议使用小写字母。</pre> <h6><strong>1.1.2 使用记事本开发 HTML 页面</strong> :</h6> <pre><code class="language-html"><html> <head> <title>Tzl-html 课程 我制作的第一个页面。It is so cool!
保存编写的内容后，关闭“记事本”，将该文本的名称和后缀修改为 first.html。 （3）使用 IE 浏览器打开 first.html 文件
1.1.3 使用 Adobe Dreamweaver CS6 开发网站 :
（1）声明位于文档中最前面的位置，在标签之前，此标签可告知浏览器文档使用哪种 HTML 或 xhtml 规范。 （2）标签，该标签用于描述页面的具体摘要信息，包括文档内容类型，字符编码信息，搜索关键字，网站提供的功能与服务的描述信息等。
注意：
标签描述的内容并不显示，其目的是方便浏览器或利用搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。
工具的使用
使用 DW 开发网页
Adobe Dreamweaver CS6 是网页三剑客之一
1.1.4 设置页面背景或背景图片 :
使用 Web 浏览器网页时，其背景为白色，如果想为背景添加好看的颜色或图片，则可以使用
标签的 bgcolor 属性设置背景颜色，使用 background 属性设置网页的背景图片语法：
„„
示例1：
背景颜色设置
背景为黄色的页面。It’s so cool!
示例2：
背景图像设置
21 世纪是互联网的时代，IT 行业到处是欣欣向荣的景象！
文本相关的标签:
1.2.1标题标签 :
HTML 提供了六级标题，其中为最大级别、
为最小级别。用户只需要定义从
至
中的一种，浏览器即会按级别显示标题内容。
示例：
不同等级的标题
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
示例 1.4 在浏览上。
1.2.2字体标签 :
是字体标签，用于控制网页上的文体的显示外观。字体大小、字体类型和颜色等属性均可通过标签的属性来指定
示例：
文本内容
属性 说明 size 用于设置字体的大小，取值范围为 1 至 7，默认为 3 face 用于设置字体类型，如“黑体”、“隶书”等 color 用于设置字体的颜色。可用颜色的名称，如 red 代表红色，green代表绿色。还可以 使用十六进制代表颜色值，如#FF0000 表示红#00FF00 表示绿色
字体形状标签及其作用
标签名称 说明 设置为倾斜字体 用于加下划线 设置字体为下标 设置字体为上标 定义加重语气的字体 设置字体为粗体
1.2.3段落标签 :
我们使用
标签可以将文本内容组合为段落。段落标签中的内容会单独占一行显示，并与其他标签的内容形成一定的段落间距，还可以使用
的属性控制其内容显示的对齐方式等.
语法：
段落内容
align 表示段落的对齐方式，其取值可以为 left、right 和 center，它们分别表示段落内容居左、居右和居中。
1.2.4 换行标签 :
我们可以看到段落内容与其他内容之间是换行显示的，如果想将段落中的文本内容换行处添加 标签实现换行显示，该标签内并不需要添加内容，可以直接关闭。
注意：
在 HTML 代码中,通过回车键将代码换行后不会使页面中的显示内容换行，浏览器显示页面内容的换行是通过标签
来实现的。
1.2.5 水平线标签 :
水平线标签用
表示，其作用是在页面中绘制水平线分隔线，该标签可以直接关闭。
语法：
其中，size 属性用于指定水平线的高度，以像素为单位；color 属性用于设置水平线的颜色；width 属性用于改变水平线的宽度，可以像素为单位，也可以使用窗口的百分比。
示例：水平金字塔
标签绘制金字塔形状
水平线金字塔
1.2.6 HTML 文档注释和特殊字符 :
1. HTML 文档注释 在 HTML 网页中，可以使用“<！--注释内容-->”加入页面注释，注释中的内容将被浏览器忽略。
语法：
<！--注释内容-->
注意：
HTML 注释与标签的用法相同，不能交叉使用，“”相匹配。
HTML 实体与特殊符号
HTML实体 显示结果 描述 < < 小于号 > > 大于号 & & &符号 ® ® 己注册 © © 版权 ™ TM 商标 空格 空格符 " “ 引号
图片相关的标签:
1.3.1 图像标签的使用 :
常见的图片格式有 JPEG、GIF 和 PNG 等格式。JPEG 文件的后缀名为.jpg 或 jpeg。GIF 图片文件的后缀名为.gif，它是最多支持 256 种色彩的图像
语法：
在
标签中，src 属性用于设置图像文件所在的位置，width 和 height 属性用于指定图像的宽度和高 度。alt 属性用于表示两种提示文字：第一种是，如果图像没有被下载，则会在图像位置上出现的提示文字；第二种是，如果图像下载完毕，将鼠标放在该图像上，在鼠标旁边出现的提示文字。img 标签的使用见示
示例：
Apple 型号: iPhone 5
手机价格区间: 4000 元以上
网络类型: GSM/WCDMA/LTE
1.3.2 图像标签的属性 :
标签的 src 属性用于设置图片的位置，如果 src 的路径设置错误，则会导致
标签引用的图片不能显示。为了避免这些错误，必须正确地引用文件路径及名称。HTML 路径有两种类型：相对路径和绝对路径
两种路径方式：
（1）相对路径：相对于页面的路径。 ①如果网页和所引用的图片在同一个目录中，则直接输入引用文件名即可②如果所要引用的图片位于网页的上一级目录中，则使用“../”符号，该符号表示当前目录的上级目录，依次类推“../../”表示当前目录的上上级目录
③如果所要引用的图片在页面的下一级目录中，则直接写目录和文件名即可
（2）绝对路径：文件所在位置的完整路径。 图片的绝对路径指的是图片所在位置的完全路径，它分为本地绝对路径和网络绝对路径。本地绝对路径是包括盘符和目录的完全路径。 那么，project.jpg 的绝对路径是“D:\project\images\product.jpg”。网络绝对路径即资源的网站，如 http://www.baidu.com/images/product.jpg
图像与文本的对齐：
标签的 align 属性可用于调整图片相对于周围文本的对齐方式. align 属性的取值可为 top、bottom、middle、left 或 right，如
。当 align 取值为 top 时，图片周边的文字与图片顶端对齐；当 align 取值为 bottom 时，图片周边的文字与图片底端对齐；当 align 取值为 middle 时，图片周边的文字与图片中间对齐
示例：
联想电脑型号:Lenovo U310-ITH
爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
联想电脑型号:Lenovo U310-ITH
爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
联想电脑型号:Lenovo U310-ITH
爆款全网最低，极致轻薄，多彩时尚，送无线鼠标。
1.3.3 图像与文字的滚动 :
使用
语法：
注意：
scrolldelay 表示滚动延时时间，默认值为 90ms。direction 表示滚动的方向，默认为从右向左。可以取 up、down、left、和 right 这 4 个值，
示例：
您好，欢迎来到淘宝网！
超链接相关的标签:
1.4 超链接标签 :
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是同一个网页中的不同位置，还可以是一个 Email 地址等。
1.4.1 页面间链接 :
语法：
链接文字或图像
示例：
注意：
超链接标签的属性 href 的取值为其链接页面的路径，可以使用链接页面的相对地址或绝对地址。 其地址可以是本地的，也可以是网络中的 URL 路径 http://www.baidu.com/index.html 就是一个网络 URL，而 C:\project\index.html 则是一个本地网页路径
示例：
奇艺高清
土豆网
搜狐视频
乐视网
迅雷看看1.4.2 锚点链接 :
创建锚点链接的步骤：
（1）在页面中创建锚点，使用标签的 name 属性创建锚点。 内容 （2）在页面中创建锚点链接，语法如： 内容 。在超链接 href 属性值中的“#”中，通知浏览器该链接将链接到页面内的某个锚记点
1.4.3 电子邮电链接 :
可以通过在超链接标签中插入 mailto:邮箱地址来实现在网页中发送电子邮件的功能
示例：
站长信箱(二)排列网页内容 :
列表标签:
2.1.1 无序列表 :
语法：
- 列表项内容
- 列表项内容
- 列表项内容
注意：
无序列表标签的 type 属性决定了列表项开始的符号，它可以取 disc（默认值，表示实心圆）、circle(空心圆环)和 square（正方形）这 3 个值
2.1.2 有序列表 :
语法：
- 列表项
- 列表项
注意：
有序列表项中的 type 属性决定有序列表的序号类型，它可以取 1、a、A、i 和 I 这五个值他们分别表示数字序列、小写罗马数字序列以及大写罗马数字序列
2.1.3定义列表 :
语法：
经验：
在实际应用中，定义列表还被扩展应用到图文混合的场合，将产品图片作为定义标题
表格标签:
2.2.1 表格的基本结构:
表格至少由
| 标签这三种标签组成，否则，就不能成为完整的表格。 语法：
相关标签： 标签名称 使用说明 | ||||||||||||||||||||||||||||||||||||||||