HTML基础知识

1、1/33HTML基础知识第一讲2/33HTML简介HTML：Hyper Text Markup Language1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52013-5-6目前网页中常用目前网页中常用*XHTML：可扩展超文本标记语言3/33HTML简介HTML：Hyper Text Markup LanguageHTML 指的是超文本标记语言 HTML 不是一种编程语言，而是一种标记语言

2、(markup language)标记语言是一套标记标签 (markup tag)HTML 使用标记标签来描述网页4/33HTML简介HTML 标签标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)HTML 标签是由尖括号尖括号包围的关键词，比如 HTML 标签通常是成对出现成对出现的，比如 和 标签对中的第一个标签是开始标签开始标签，第二个标签是结束结束标签标签开始和结束标签也被称为开放标签开放标签和闭合标签闭合标签5/33HTML简介HTML 文档文档 = 网页网页HTML 文档描述网页HTML 文档包含 HTML 标签和纯文本HTML 文档也被称为网页* Web 浏览

3、器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示HTML 标签，而是使用标签来解释页面的内容。6/33HTML基本结构HTML网页基本结构网页基本结构 我的第一个网页我的第一个网页 我的第一个网页我的第一个网页网页头部网页头部主体部分主体部分标签标记着标签标记着 HTML 文档的开始和结束文档的开始和结束7/33网页编辑工具记事本记事本UltraEdit演示示例演示示例1：在记事本和：在记事本和UltraEdit中操作中操作8/33网页基本信息3-1DOCTYPE声明声明无标题文档无标题文档Strict（严格类型）（严格类型）Transitional（过渡类型）（过渡类

4、型）Frameset（框架类型）（框架类型）9/33网页基本信息3-2标签标签家用电器排行榜家用电器排行榜元素可定义文档的标题元素可定义文档的标题10/33网页的基本标签6-1标题标签标题标签一级标题一级标题二级标题二级标题三级标题三级标题四级标题四级标题五级标题五级标题六级标题六级标题演示示例演示示例2：标题标签：标题标签11/33网页的基本标签6-2段落标签段落标签北京欢迎你北京欢迎你北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！有勇气就会有奇迹。有勇气就会有奇迹。演示示例演示示例3：段落标签：段落标签12/33网页的基本标签6-3换行标签换行标签北京欢迎你北京欢迎你 北京欢

5、迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。有勇气就会有奇迹。 北京欢迎你，为你开天辟地北京欢迎你，为你开天辟地 演示示例演示示例4：换行标签：换行标签13/33网页的基本标签6-4水平线标签水平线标签北京欢迎你北京欢迎你 北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。有勇气就会有奇迹。 北京欢迎你，为你开天辟地北京欢迎你，为你开天辟地 演示示例演示示例5：水平线标签：水平线标签14/33网页的基本标签6-5字体样式标签字体样式标签加粗：斜体：徐志摩人物简介徐志摩人物简介 1910年入杭州学堂年入杭州学堂 1918年赴美国克拉大学

6、学习银行学年赴美国克拉大学学习银行学 演示示例演示示例6：字体样式标签：字体样式标签15/33网页的基本标签6-6注释和特殊符号注释和特殊符号演示示例演示示例7和和8：注释和特殊符号：注释和特殊符号特殊符号特殊符号字符实体字符实体示例示例空格空格 百度百度 | 新浪新浪大于号大于号()>如果时间如果时间>晚上晚上6点，就坐车回家点，就坐车回家小于号小于号()<如果时间如果时间<早上早上7点，就走路去上学点，就走路去上学引号引号()"W3C规范中，规范中，HTML的属性值必须用成对的的属性值必须用成对的"引起来引起来版权符

7、号版权符号 ©© 2003-2013北大青鸟北大青鸟16/33图像标签常见的图像格式常见的图像格式JPGGIFPNGBMP17/33图像标签图像地址图像地址图像的替代文字图像的替代文字语法语法鼠标悬停提示文字鼠标悬停提示文字图像宽度图像宽度图像高度图像高度演示示例演示示例9：图像：图像示例示例18/33链接标签演示示例演示示例10：超链接的应用：超链接的应用链接文本或图像链接文本或图像链接路径链接路径链接在哪个窗口打开链接在哪个窗口打开语法语法百度百度常用值：常用值：_self、_blank文本超链接文本超链接图像超链接图像超链接示例示例19/33常用的超链接3-1页面间链接页面间链接从一个页面链接到另外一个页面锚链接锚链接功能性链接功能性链接演示示例演示示例11：页面间链接：页面间链接20/33常用的超链接3-2锚链接锚链接从A页面的甲位置跳转到本页中的乙位置从A页面的甲位置跳转到B页面中的乙位置创建步骤创建步骤创建跳转标记创建跳转链接演示示例演示示例12：锚链接：锚链接乙乙位置位置（显示在页面上的文本）甲甲位置位置（显示在页面上的文本）21/33常用的超链接3-3功能性链接功能性链接电子邮件QQMSN演示示例演示示例13：邮件链接：邮件链接联系我们联系我们示例示例22/33总结H