描述 HTML 文档的结构.ppt

,HTML--描述HTML文档的结构,2,回顾1-1,表单有什么用？表单有哪些属性？文本框分为哪三种？各有什么特点？希望昵称文本框不超过10个字符，应使用哪个属性加以限制？单选按钮和复选框有什么区别？,3,回顾1-2,按钮分为哪三种？各有什么功能？根据您的理解，下拉菜单的选项和值有什么区别？常见的有哪些事件？哪些行为？,4,目标,描述HTML文档的结构使用基本的HTML标签在HTML文档中插入特殊字符在HTML文档中创建超级链接,5,HTML简介,,超文本,,提供链接到其他页面或同一页面的其他位置的文本,标记,可以用标签标记页面的不同部分以正确显示,语言,,HTML可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象,6,HTML文档示例,学习HTML欢迎来到HTML世界,HTML代码,,浏览器处理代码并进行显示,7,编辑器和浏览器,,学习HTML欢迎来到HTML世界,HTML代码,在编辑器中编写HTML代码,,浏览器显示HTML文档/页面,,8,编辑器2-2,需要在编辑器中键入源代码,示例：DreamWeaver,MacromediaDreamweaver是一种专业的HTML编辑器，用于设计、编码、开发网站、网页和强大的Web应用程序。,9,HTML文档结构,学习HTML欢迎来到HTML世界,,HTML网页,头部部分,,主体部分,,…标签标记HTML文档的开始和结束,这部分包括标题和其他说明信息。包括在…标签内,这部分包含文本、图像和链接。它包括在…标签内,10,学习HTML欢迎来到HTML世界,HTML标签2-2,,标签,标识BODY元素,属性,提供有关元素的附加信息,值,分配给属性的内容,11,META标签2-1,META标签是一个特殊的HTML标签，提供有关网页的信息，如作者姓名、公司名称和联系信息等许多搜索引擎都使用META标签信息例如，要将GrahamBrowne指定为作者，则使用以下META标签：,,,12,META标签2-2,http-equiv属性可用来代替META标签中的name属性,,表示有效期：格林尼治标准时间2005年9月12日，星期一14:25:27,,表示每隔2秒，自动刷新网页,演示：自动刷新的例子,13,HTML基本元素,标题段落换行符预先格式化字符格式化列表水平线字体图像特殊字符超级链接,14,标题,动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感,,H1到H6标签用于指定不同级别的标题,15,段落标签,诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示,,,…标签用于标记段落,16,换行符,只要在文本中放入标签，就会强制换行,诗词学习我是第一行我是第二行我是第一段我是第二段,,17,标签,诗词学习静夜思床前明月光疑是地上霜举头望明月低头思故乡<HTML,标签用于显示具有预先定义格式的文本（如HTML文档中所示）,18,学习HTML这很有趣足球是最令人喜爱的运动之一。信息技术是发展的关键。水的分子式是H2O。32等于9。,字符格式化标签,,,,,,此标签用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等,19,列表简介,列表用于按逻辑方式对数据分组,,玫瑰花,向日葵,兰花,苹果,桔子,水仙,芒果,水果苹果芒果桔子花卉水仙兰花向日葵玫瑰花,,20,列表类型：无序列表,…星期中的每一天星期日星期一星期二星期三星期四星期五星期六…,,无序列表也称为“项目列表”,21,…星期中的每一天星期日星期一星期二星期三星期四星期五星期六…,列表类型：有序列表,,在有序列表中，列表项以自动生成的顺序显示,22,使用水平线,动物世界老虎的夜间视觉老虎的夜视能力优于人类的夜视能力五倍以上,标签用于在页面上绘制水平线,23,使用字体和属性,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,,,可以按名称或十六进制值指定颜色,,可以为字体指定的大小范围为从1到7,,可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本,元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示,24,标签用于在HTML文档中插入图像。标签的两个常用属性是SRC和ALIGN。,SRC属性用于指定要插入的图像位置。,ALIGN属性用于指定图像相对于文本的对齐方式。,插入图像2-1,25,插入图像2-2,动物世界让我们看看这些可爱的动物底部对齐顶部对齐居中对齐,26,插入特殊字符2-1,某些字符在HTML中具有特殊意义，如小于号(空格；,27,插入特殊字符2-2,28,创建超级链接,了解鸟类会弹琴的狗狗单击此处查看,29,要链接到另一目录(C:\example)下的页面，可编写或,,,要链接到同一目录(C:\html)下的页面，可编写或,,C:\html目录,C:\example目录,绝对和相对路径名,,,,,,绝对路径名,,,相对路径名,,30,链接到同一文档的某个部分2-1,锚记标签用于使用户“跳”到文档的某个部分HTML的NAME属性用于创建锚标记为达到这种跳转效果，请在HREF参数中使用该标记,主题名称,主题名称,31,链接到同一文档的各个部分2-2,...狮子斑马印度豹狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马......,,,,演示:锚链接例子,32,链接到其他文档的特定位置,…让我们深入了解一些动物狮子斑马印度豹…,Animals.htm,…狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达250公斤。而雌狮则要轻得多，只有180公斤。…,Animaldetails.htm,,,33,电子邮件链接,用户可从网页发送电子邮件,海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至DavidFernandez,,,34,总结2-1,HTML标签一般配对使用，不区分大小写标签都具有属性。属性提供关于网页上HTML元素的附加信息META标签放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签标题级标签使用…,35,总结2-2,段落标签使用…无序列表使用标签,有序列表使用标签字体标签超链接标签超链接文本,