第一章 HTML 网页设计基础.pptVIP

第一章 HTML网页设计技术 网页设计与制作 联系方式 韦妙 电话QQ：1017557153 概述 1.1 网页制作技术基础 1.HTML基础 HTML语言（Hypertext Markup Language,中文通常称为超文本标记语言）是互联网上用于编写网页的主要语言。 用HTML编写的超文本文件称为HTML文件。 1.1 网页制作技术基础 理解HTML的概念 HTML页是一套指令，这些指令为浏览器如何显示附加的文本和图像提出建议 绝大多数HTML标签都是成对出现的。 HTML页分为两个主要的分段： head 和body HTML源文件（纯文本类型） 如何查看源文件？ 1.1 网页制作技术基础 2.CSS基础 CSS（Cascading Style Sheets,中文通常称为层叠样式表）用来定义如何显示HTML元素 CSS的出现主要是为了解决解决内容与表现分离的问题 CSS按照使用方法，分为内嵌式CSS和外部链接式CSS 1.1 网页制作技术基础 CSS的优点 1.内容和表现分离 2.风格统一，便于修改 3.提高页面浏览速度 1.1 网页制作技术基础 3.JavaScript基础 JavaScript是一种基于对象和事件驱动并具有安全性能的脚本编程语言。 使用JavaScript的目的是与HTML语言一起实现在一个Web页面中与Web客户进行交互的效果。 JavaScript不需要单独编译解释，只要浏览器支持JavaScript即可 1.2 HTML的基本语法 HTML的基本结构 一个完整的HTML文件可由标题、段落、列表、表格、单词等嵌入的各种对象组成。这些对象称之为元素。HTML是用标签来分隔并描述这些元素的。 HTML文件是由元素和标签组成的 1.2 HTML的基本语法 HTML基本代码结构 1.2 HTML的基本语法 注意： HTML标签被“”和“”两个符号所包围，这两个符号称为“尖括号” HTML标签成对出现，第一个为起始标签，第二个为结束标签，两个标签之间为元素内容。 HTML标签不区分大小写 1.2 HTML的基本语法 HTML标签属性 标签可以拥有属性，属性可以为页面中的HTML元素附加信息。 属性应该添加在HTML元素的起始标签中，属性的值应该被括号括起来，格式为 Name=“value” 1.2 HTML的基本语法 练习： 用记事本编写一个HTML网页页面，要求标题为“网页设计与制作”，页面内容为“这是一门有趣的课程”。 1.2 HTML的基本语法 1.3 HTML的头部 在head标签里的内容浏览器是不会显示的 head标签里可以包括link、meta、title、style、script等标签 1.3 HTML的头部 1.3.1 设置页面标题 title标签定义HTML文档的标题，标题并不出现在浏览器窗口中，而是显示在浏览器标题栏中 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 1.3 HTML的头部 综合练习 1.4 HTML的主体 1.4 HTML的主体 1.4 HTML的主体 1.4.1 设置页面颜色 1.4 HTML的主体 设置前景色 1.4 HTML的主体 1.4 HTML的主体 topmagin、bottommargin、leftmargin、rightmargin属性用于设置网页主体内容与网页四个方向的距离 1.5 HTML的基本标签 Html中最重要也是最基础的标签是那些定义标题、段落、转行的标签。如h1、p、br、hr等。这些标签用于定义页面文本的格式及段落。 1.5 HTML的基本标签 1.5 HTML的基本标签 1.5 HTML的基本标签 1.5 HTML的基本标签 1.5 HTML的基本标签 1.6 HTML的文字和格式 1.6 HTML的文字和格式 1.6 HTML的文字和格式 1.6 HTML的文字和格式 练习 给网页排版 1.格式正常（标题、空格、换行） 2.标题与正文用红色分割线隔开 3.每一段第一句话文字放大加粗 4.每一段文字颜色、字体不同 1.6 HTML的文字和格式 1.6 HTML的文字和格式 1.7 HTML的图像和多媒体元素 利用html可以在文档页面中插入一些图片、flash动画、音乐、视频等元素、使用的标签有： 1.7 HTML的图像和多媒体元素 1.7.1 在页面中使用图片 在html中可以使用img标签定义图像。img是个单独标签，它只包含属性而没有结