北京大学《计算概论》：html v

1、第六讲第六讲HTML语言简介语言简介北京大学北京大学 信息科学技术学信息科学技术学院院2012年年10月月本幻灯片根据本幻灯片根据http的内容改编形成的内容改编形成在学习过程中，如遇到问题请到此网站 找到相关页面 详细浏览什么是什么是 HTML HTML 是一种用来设计网页的语言是一种用来设计网页的语言. HTML: Hyper Text Markup Language HTML 是一种标记语言是一种标记语言（markup language） 用用HTML语言撰写的文档称为语言撰写的文档称为HTML文档文档/网页网页 HTML语言规定了一组语言规定了一组标签标签（markup tag）对网）

2、对网页的内容进行组织页的内容进行组织一个简单的一个简单的HTML文档文档 我的第一个网页 这是一个一级标题 这是一个段落. 文档正文文档头文档主体声明内容的编码方式声明该文档的名称声明一个一级标题一级标题元素声明一个段落段落元素声明该文档是 HTML文档声明该文档是 大陆中文文档en 英文zh-hk 香港中文zh-tw 台湾中文使用使用“记事本记事本”软件软件 编辑编辑htmlhtml文档文档HTML文档的编辑与运行文档的编辑与运行将文档存储为一个将文档存储为一个 以以htmlhtml为扩展名为扩展名的文件的文件HTML文档的编辑与运行文档的编辑与运行HTML文档的编辑与运行文档的编辑与运行H

3、TMLHTML文档的编辑与运行文档的编辑与运行用浏览器打开用浏览器打开 HTML文档文档 HTMLHTML文档的编辑与运行文档的编辑与运行ChromeChrome浏览器浏览器 下载方式下载方式在在http:/搜索关键词搜索关键词 chrome选择一个最新的选择一个最新的 正式版正式版 下载下载 我的第一个网页 这是一个一级标题 这是一个段落. 一个简单的一个简单的HTML文档文档文档正文文档头文档主体声明内容的编码方式声明该文档的名称声明一个一级标题一级标题元素声明一个段落段落元素声明该文档是 HTML文档声明该文档是 大陆中文文档？HTML 标签标签（1） 上页上页HTML文档中出现的标签名

4、文档中出现的标签名 html, head, meta, title, body, h1, p 一个标签一个标签/HTML 标签标签（2）大部分标签都是大部分标签都是 成对出现成对出现 的的 这是一个段落这是一个段落 不能不能包含斜杠包含斜杠必须必须含有斜杠含有斜杠HTML 标签标签（3）少部分标签是少部分标签是 单独出现单独出现 的的 例如：例如：属性名属性取值属性HTML 标签标签（4）在成对出现的标签中，在成对出现的标签中，开始标签开始标签 也也可以可以包含属性包含属性，但，但结束标签结束标签 不能包含属不能包含属性性例如：例如： 属性属性名属性取值HTML 元素元素（1）对于对于成对出现

5、成对出现的标签，的标签，开始标签开始标签结束标签结束标签两者包围的内容两者包围的内容形成一个形成一个 HTML元素元素例一：例一：例二：例二： 这是一个段落这是一个段落 这是这是一个一级标题一个一级标题 这是这是一个段落一个段落. HTML 元素元素（2）对于对于单独出现单独出现的标签，的标签，标签本身标签本身 即形成一个即形成一个 HTML元素元素 例如：例如： 我的第一个网页 这是一个一级标题 这是一个段落. HTML文档文档 结构性质结构性质HTML 的不同版本的不同版本版本版本发布年份发布年份HTML1991HTML+1993HTML 2.01995HTML 3.21997HTML 4

6、.011999XHTML 1.02000HTML 52012XHTML 52013访问访问/html5/观看观看HTML5的演示应用的演示应用不同版本不同版本 HTML 中中 声明声明 的的 差异差异 HTML5 HTML XHTML html 标签标签 HTML文档正文的最外文档正文的最外层标签层标签 必须成对出现必须成对出现 形成一个形成一个html元素元素 所有其它所有其它HTML元素都元素都包含在包含在html元素元素中中 一个一个HTML包含且仅包包含且仅包含一个含一个html元素元素 我的第一个网页 这是一个一级标题 这是一个段落. head 标签标签 文档头文档头 标签标签 必须

7、成对出现必须成对出现 形成形成head元素元素 只能直接嵌套在只能直接嵌套在html元素中元素中 head元素中可以声明元素中可以声明一组文档的一组文档的元信息元信息 文档编码文档编码 文档名称文档名称 我的第一个网页 这是一个一级标题 这是一个段落. body 标签标签 文档主体文档主体 标签标签 必须成对出现必须成对出现 形成形成body元素元素 只能直接嵌套在只能直接嵌套在html元素中元素中 body元素中包含了所元素中包含了所有的用户内容有的用户内容 除了除了html元素和元信元素和元信息元素外，其它息元素外，其它HTML元素都必须包含在该元素都必须包含在该元素中元素中 段落标签示例

8、 这是一个段落。 这是另一个段落. p 标签标签 段落段落（paragraph）标签）标签 必须成对出现必须成对出现 用于表现一段文字用于表现一段文字 大话西游是一部香港无厘头搞笑片，成就了大话的经典传奇。 电影“大话西游”之月光宝盒和仙履奇缘这两部影片按最初的设想是p 标签标签 大话西游是一部香港无厘头搞笑片，成就了大话的经典传奇。 电影“大话西游”之月光宝盒和仙履奇缘这两部影片按最初的设想是文字格式设置标签文字格式设置标签 这是粗体字 这是斜体字 这是被删除的文字 这是下标文字 这是上标文字 标题标题 标签标签 用于表现一段标题文字用于表现一段标题文字 HTML定义了定义了6个级别的标个级

9、别的标题标签：题标签： h1, h2, h3, h4, h5, h6 标题标签必须成对出现标题标签必须成对出现 用标题标签表现一个文用标题标签表现一个文档的结构档的结构 题目：一级标签题目：一级标签 章：二级标签章：二级标签 节：三级标签节：三级标签 子节：四级标签子节：四级标签 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 标题标题 标签标签 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 标题标签段落标签标题标签段落标签 组织文档组织文档 小鸡的一生 小鸡 用于食用而饲养的小鸡（用于食用而饲养的小鸡（“适于适于烤焙的

10、嫩鸡烤焙的嫩鸡”）从运输的货运箱中被丢）从运输的货运箱中被丢入到大饲养入到大饲养棚的地板上棚的地板上 饲养小鸡的棚 由于成千上万的小鸡被关入饲养棚中，随着动物们的生长饲养棚也就越发拥挤了起来。为了取食喝水，小鸡们经常争相踩到其他伙伴的头顶上，或是踩在死去的同伴的身体上。 题目第一节标题第二节标题第一节正文第二节正文列列 标签标签有序 列无序 列定义 列 下面是 茶 咖啡 牛奶 下面是 茶 咖啡 牛奶 茶 一种用树叶泡制的饮料 咖啡 一种黑色的饮料 牛奶 一种白色的饮料a 标签标签 超链接指向的网页的网址超链接的名字 下面是一个超连接： 北京大学北京大学列标签列标签 和和 a标签标签 的的 组合

11、组合 北京地区高校的分类: 北京大学 清华大学及其它高校 清华大学 北京航空航天大学 北京理工大学 . 有有序序列列元元素素条条目目元元素素无无序序列列元元素素条目元素条目元素超链接元素超链接元素a a 标签标签 我自己编写了我自己编写了2个个html文档文档能在它们之间建立超链接吗？能在它们之间建立超链接吗？08 A页面.html08 B页面.html 我是页面A 下面是我的兄弟，请点击它 页面B这里是页面B请向我的兄弟问好去往页面A，请 点击这里填写要链接的填写要链接的文件的名称文件的名称iframe: 一个神奇的标签一个神奇的标签属性名属性名取值取值/ /含义含义“0”: 没有边框没有边

12、框 ”1“: 有边框有边框一串字符一串字符: : 给给iframeiframe起一个名字起一个名字例如：50%iframe: 一个神奇的标签一个神奇的标签iframeiframe: : 一个神奇的标签一个神奇的标签iframeiframe: : 一个神奇的标签一个神奇的标签img 标签标签 属性名属性名取值取值/ /含义含义一串字符: 当图片加载失败时，在网页上显示的文字当图片加载失败时，在网页上显示的文字正整数: 图片占用的显示区域的宽度（单位：像素）正整数: 图片占用的显示区域的高度（单位：像素）img 标签：显示一个在线的图片标签：显示一个在线的图片img 标签：标签：显示一个本地的图片显示一个本地的图片当前目录的当前目录的子目录子目录img中中 文件名为文件名为”的图片的图片 img 标签标签img的的更多使用技巧，请参看：更多使