网页设计语言基础.ppt

第2章 网页设计语言基础,网页设计者，必须具备HTML语言的基本知识。,学 习 目 标,本章涉及的程序代码比较多，但是HTML语言是网页设计人员必须掌握的基本知识，也是网页设计和制作的基础，所以希望大家能够熟练地掌握本章的知识点，至少要熟悉常用的HTML语言。,本 章 重 点,HTML语言的结构 HTML常用标签的用法和意义 学会使用HTML语言制作简单的网页,HTML概念,HTML:Hypertext Marked Language,即超文本标记语言,是一种用来制作超文本文档的简单标记语言. 用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台.,HTML文档结构, Title of page This is my first homepage. This text is bold ,例子解释,HTML文档中，第一个标签是。这个标签告诉浏览器这是HTML文档的开始。HTML文档的最后一个标签是，这个标签告诉浏览器这是HTML文档的终止。,例子解释,在和标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。头信息中包含和等标签对。在和标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。,例子解释,在和标签之间的文本是正文，会被显示在浏览器中。 在和标签之间的文本会以加粗字体显示。,HTML标签,HTML标签用来组成HTML元素。 HTML标签两端有两个包括字符：“”,这两个包括字符被称为角括号。 HTML标签通常成对出现，比如和。一对标签的前面一个是开始标签，第二个是结束标签,在开始和结束标签之间的文本是元素内容。 HTML标签是大小写无关的，跟表示的意思是一样的。,HTML元素,下面是一个HTML元素： This text is bold 此HTML元素以开始标签起始， 内容是：This text is bold，以结束标签中止。标签的目的是定义一个需要被显示成粗体的HTML元素。,下面也是一个HTML元素： This is my first homepage. This text is bold 此HTML标签以开始标签起始，终止于结束标签。标签的目的是定义一个HTML元素，使其包含HTML文档的主体。,标签属性,标签可以拥有属性。属性能够为页面上的HTML元素提供附加信息。 标签定义了HTML页面的主体元素。使用一个附加的bgcolor属性，你可以告诉浏览器：你页面的背景色是红色的，就像这样： ,HTML基本标签,HTML中最重要的标签是定义标题元素，段落和换行的标签。 标题元素 标题元素由标签到定义。定义了最大的标题元素，定义了最小的。 This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading HTML自动在一个标题元素前后各添加一个空行。,问题： 如果要在浏览器中输出含有的字符应该怎么做？,答： 可以考虑使用转移字符。 的转移字符表示为>,段落 段落是用标签定义的。 This is another paragraph HTML自动在一个段落前后各添加一个空行。,换行 当需要结束一行，并且不想开始新段落时，使用标签。标签不管放在什么位置，都能够强制换行。 This is a paragraph with line breaks 标签是一个空标签，它没有结束标记。,HTML中的注释 注释标签用来在HTML源文件中插入注释。注释会被浏览器忽略。你可以使用注释来解释你的代码，这可以在你以后编辑代码的时候帮助你。 注意：你需要在左括号“”后面跟一个感叹号，右括号不用。,练习 完成以下网页设计： 1、,3、,2、,其它HTML代码,如超级链接: 腾迅网 . 注意： 如果是链接到外部的网页的话，一定要加上协议。 比如http:/，否则在上面中输入 腾迅网 是打不开网站的。,无序号列表,无序号列表使用的一对标签是，每一个列表项前使用。其结构如下所示： 第一项 第二项 第三项 ,无序号列表,如果要改变无序号列表的标记为正方形的话，可以使用： 第一项 第二项 第三项 ,例： 无序列表 这是一个无序列表： 国际互联网提供的服务有： WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务 ,无序号列表,序号列表,序号列表和无序号列表的使用方法基本相同，它使用标签，每一个列表项前使用。每个项目都有前后顺序之分，多数用数字表示。其结构如下所示： 第一项 第二项 第三项 ,序号列表,如果要改变序号列表的样式，可以采用 的形式。 例如，以罗马字符来进行排序 第一项 第二项 第三项 ,序号列表,例： 有序列表 这是一个有序列表： 国际互联网提供的服务有： WWW服务 文件传输服务 电子邮件服务 远程登录服务 其它服务 ,表格,基本结构 . 定义表格 cellspacing 定义单元格的间距 border 定义表格的边框 . 定义标题 定义表行 定义表头 定义表元(表格的具体数据),以下是一个简单的例子： 姓名性别年龄 王林男25 如果将分别替换成： 和 会出现什么样的效果？,插入图形,超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。,基本格式 插入图象的标签是，其格式为： SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。,例： IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示： 例： ,查看源代码,1. DW中,通过视图中的,源代码或拆分,可