北京大学《计算概论》课件：htmlv

1、第六讲HTML语言简介,北京大学 信息科学技术学院 2012年10月,本幻灯片根据,在学习过程中，如遇到问题 请到此网站 找到相关页面 详细浏览,什么是 HTML,HTML 是一种用来设计网页的语言. HTML: Hyper Text Markup Language HTML 是一种标记语言（markup language） 用HTML语言撰写的文档称为HTML文档/网页 HTML语言规定了一组标签（markup tag）对网页的内容进行组织,一个简单的HTML文档, 我的第一个网页 这是一个一级标题 这是一个段落. ,文档正文,文档头,文档主体,声明内容的编码方式,声明该文档的名称,声明一个

2、一级标题元素,声明一个段落元素,把这段文字存为一个以html为扩展名的文件 在浏览器中打开此文件，就能看到展示效果,声明该文档是 HTML文档,声明该文档是 大陆中文文档,en 英文 zh-hk 香港中文 zh-tw 台湾中文,使用“记事本”软件 编辑html文档,HTML文档的编辑与运行,第一步,将文档存储为一个 以html为扩展名的文件,HTML文档的编辑与运行,第二步,在 文件 菜单中 点击 另存为,HTML文档的编辑与运行,文件扩展名：html,编码：UTF-8,HTML文档的编辑与运行,用浏览器打开 HTML文档,第三步,HTML文档的编辑与运行,建议使用 Chrome浏览器,Chr

3、ome浏览器 下载方式,在 搜索关键词 chrome 选择一个最新的 正式版 下载, 我的第一个网页 这是一个一级标题 这是一个段落. ,一个简单的HTML文档,文档正文,文档头,文档主体,声明内容的编码方式,声明该文档的名称,声明一个一级标题元素,声明一个段落元素,声明该文档是 HTML文档,声明该文档是 大陆中文文档,为什么有这么多的尖括号？,HTML 标签,HTML 标签（1）,上页HTML文档中出现的标签名 html, head, meta, title, body, h1, p,一个标签,标签名,只能使用HTML语言已经定义的标签名,/,这个成分可选（视情况而定）,HTML 标签（2

4、）,大部分标签都是 成对出现 的, 这是一个段落 ,开始标签,结束标签,不能包含斜杠,必须含有斜杠,HTML 标签（3）,少部分标签是 单独出现 的,例如：,属性名,属性取值,属性,这个斜杠 可以没有,HTML 标签（4）,在成对出现的标签中， 开始标签 也可以包含属性，但结束标签 不能包含属性,例如：, ,属性,属性名,属性取值,HTML 元素,HTML 元素（1）,对于成对出现的标签， 开始标签结束标签两者包围的内容 形成一个 HTML元素,例一：,例二：, 这是一个段落 , 这是一个一级标题 这是一个段落. ,元素之间可以形成 嵌套关系,HTML 元素（2）,对于单独出现的标签， 标签本

5、身 即形成一个 HTML元素,例如：, 我的第一个网页 这是一个一级标题 这是一个段落. ,HTML文档 结构性质,一个HTML文档 是通过对HTML元素的嵌套或顺序排列 而形成的,HTML 的不同版本,本课件 针对,访问 观看HTML5的演示应用,不同版本 HTML 中 声明 的 差异,HTML5 HTML 4.01 XHTML 1.0 ,HTML 通用基本标签,适用于所有HTML版本,html 标签,HTML文档正文的最外层标签 必须成对出现 形成一个html元素 所有其它HTML元素都包含在html元素中 一个HTML包含且仅包含一个html元素, 我的第一个网页 这是一个一级标题 这是

6、一个段落. ,head 标签,文档头 标签 必须成对出现 形成head元素 只能直接嵌套在html元素中 head元素中可以声明一组文档的元信息 文档编码 文档名称 , 我的第一个网页 这是一个一级标题 这是一个段落. ,body 标签,文档主体 标签 必须成对出现 形成body元素 只能直接嵌套在html元素中 body元素中包含了所有的用户内容 除了html元素和元信息元素外，其它HTML元素都必须包含在该元素中, 段落标签示例 这是一个段落。 这是另一个段落. ,p 标签,段落（paragraph）标签 必须成对出现 用于表现一段文字, 大话西游是一部香港无厘头搞笑片，成就了大话的经典传

7、奇。 电影“大话西游”之月光宝盒和仙履奇缘这两部影片按最初的设想是 ,p 标签, 大话西游是一部香港无厘头搞笑片，成就了大话的经典传奇。 电影“大话西游”之月光宝盒和仙履奇缘这两部影片按最初的设想是 ,文字格式设置标签, 这是粗体字 这是斜体字 这是被删除的文字 这是下标文字 这是上标文字 ,这些标签 可以相互嵌套,标题 标签,用于表现一段标题文字 HTML定义了6个级别的标题标签： h1, h2, h3, h4, h5, h6 标题标签必须成对出现 用标题标签表现一个文档的结构 题目：一级标签 章：二级标签 节：三级标签 子节：四级标签 , 这是一级标题 这是二级标题 这是三级标题 这是四级

8、标题 这是五级标题 这是六级标题 ,标题 标签, 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 ,标题标签段落标签 组织文档, 小鸡的一生 小鸡 用于食用而饲养的小鸡（“适于烤焙的嫩鸡”）从运输的货运箱中被丢入到大饲养棚的地板上 饲养小鸡的棚 由于成千上万的小鸡被关入饲养棚中，随着动物们的生长饲养棚也就越发拥挤了起来。为了取食喝水，小鸡们经常争相踩到其他伙伴的头顶上，或是踩在死去的同伴的身体上。 ,题目,第一节标题,第二节标题,第一节正文,第二节正文,列 标签,有序 列,无序 列,定义 列, 下面是 茶 咖啡 牛奶 , 下面是 茶 咖啡 牛奶 , 茶 一种

9、用树叶泡制的饮料 咖啡 一种黑色的饮料 牛奶 一种白色的饮料 ,ordered list,list item,unordered list,definition list,definition term,definition description,a 标签,用于建立 超链接, ,语法格式,超链接指向的网页的网址,超链接的名字, 下面是一个超连接： 北京大学 ,列标签 和 a标签 的 组合, 北京地区高校的分类: 北京大学 清华大学及其它高校 清华大学 北京航空航天大学 北京理工大学 . ,有序列元素,条目元素,无序列元素,条目元素,超链接元素,a 标签,我自己编写了2个html文档 能在它们

10、之间建立超链接吗？,08 A页面.html,08 B页面.html, 我是页面A 下面是我的兄弟，请点击它 页面B , 这里是页面B 请向我的兄弟问好 去往页面A，请 点击这里 ,填写要链接的文件的名称,但要 确保 这2个文档在同一目录下,iframe: 一个神奇的标签,把一个网页 嵌入/显示在 另一个网页中,语法格式,网页网址，或 同目录下一个网页的文件名,正整数：被嵌网页占用的宽度（单位: 像素）；或 百分数：被嵌入网页占所在网页宽度的百分比,这两个属性是可选的,ifame 的另外两个可选属性,例如：50%,iframe: 一个神奇的标签, 我把北大主页嵌入进来了 ,iframe: 一个神

11、奇的标签, 我把刚才的页面A嵌入进来了 ,iframe: 一个神奇的标签, 用iframe实现多页面导航 北京大学 南京大学 页面A ,声明了一个iframe元素,给iframe元素 起一个名字,给超链接元素增加一个 target属性，其值是iframe元素的名字 含义：超链接被点击后，页面需要被显示在相应名字的iframe中,img 标签,用于 插入图片,语法格式,图片的网址，或 同目录下一个图片的文件名,这个斜杠 可以没有,这个标签 单独出现,img 的另外三个可选属性,如果没有设置 宽/高度，以图片自身的宽/高度显示,img 标签：显示一个在线的图片, 下面是百度的logo ,img 标

12、签：显示一个本地的图片, 下面是北大的logo ,元芳，什么情况？,当前目录的子目录img中 文件名为pku logo.png”的图片,img 标签,img的更多使用技巧，请参看： ,table 标签,用于 建立表格,下面是一个表格 第1行，第1条数据 第1行，第2条数据 第2行，第1条数据 第2行，第2条数据 ,表格元素,行元素,行元素,设置表格边框的粗细,table row: 表格行,table data: 表格数据,table 标签：给表格增加 列表头,下面是一个表格 第1行，第1条数据 第1行，第2条数据 第2行，第1条数据 第2行，第2条数据 , 第1列表头 第2列表头 ,table header,table 标签：给表格增加 行表头,下面是一个表格 第1行，第1条数据 第1行，第2条数据 第2行，第1条数据 第2行，第2条数据 ,第1行表头,第2行表头,table 标签：合并同一行中的相邻单元格, 第1列表头 第2列表头 第1行，第1条数据 第1行，第2条数据 第2行，第1条数据 第2行，第2条数据 ,删除这个单元格,增加一个属性,colspan=2,colu