教学课件第3章 静态网页开发基础.pptx

第3章 静态网页开发基础 【知识目标】 掌握HTML常用标签的使用。 掌握JavaScript的语法。 掌握CSS的语法。 【能力目标】 能阅读使用HTML、CSS和JavaScript编写的静态网页源代码。 能灵活运用HTML的常用标签编写静态网页源代码。 能灵活使用JavaScript编写功能脚本。 能灵活使用CSS设计静态网页样式。 第3章 静态网页开发基础 3.1 HTML基础 3.2 JavaScript基础 3.3 CSS基础 3.1.1 概述 3.1.2 常见标签元素 3.1.3 网页布局 3.1.4 表单 3.1 HTML基础 HTML是一种标记语言，使用HTML标签来描述网页。 HTML标签是由尖括号包围的关键词，不会显示在浏览器中，只在后台起到解释作用，包括： 成对标签（大部分），如：p和/p，标签对中的第一个标签是开始标签（或开放标签），第二个标签是结束标签（或闭合标签）。 单个标签（少部分），如：换行符br /。 HTML文档就是网页，它包含HTML标签和内容。 3.1.1 概述 【例3-1-1】：第一个静态网页源文件 html head title我的第一个网页/title!-- 网页标题 -- /head body h1My First Heading/h1!-- 一级标题信息 -- pMy first paragraph./p!-- 段落信息 -- /body /html html ：网页全局框架，定义整个HTML文档，成对出现。 3.1.2 常见标签元素1、html元素 html body This is my body! !-- 网页内容 -- /body /html body ：网页的主体，成对出现。 注意：该标签对需要位于html与/html中。 3.1.2 常见标签元素2、body元素 html body This is my body! !-- 网页内容 -- /body /html head ：网页的头部，是所有头部元素的容器，成对出现。 在html文档中，head与body平级，二者都是html的下级。 可添加到 head 的标签：title、base、link、meta、script 以及 style。 3.1.2 常见标签元素3、head元素 title ：网页的标题，成对出现。 功能： 定义浏览器工具栏中的标题； 提供页面被添加到收藏夹时显示的标题； 显示在搜索引擎结果中的页面标题。 3.1.2 常见标签元素4、title元素 【例3-1-3】：一个包含标题的网页 html head titleTitle of the document/title!-- 网页标题 -- /head body This is my body! !-- 网页内容 -- /body /html p ：引入段落，成对出现。 3.1.2 常见标签元素5、p元素 html headtitle段落示例/title/head body This is my body! pMy first paragraph./p!-- 段落信息 -- /body /html h1 - h6：定义了标题1到标题6的文字大小和样式，成对出现。 3.1.2 常见标签元素6、h1 - h6元素 html headtitle1~6级标题示例/title/head body h1一级标题/h1!-- 网页一级标题 -- h2二级标题/h2!-- 网页二级标题 -- h3三级标题/h3!-- 网页三级标题 -- h4四级标题/h4!-- 网页四级标题 -- h5五级标题/h5!-- 网页五级标题 -- h6六级标题/h6!-- 网页六级标题 -- /body /html a：引入超级链接，成对出现。 a href=跳转网页URL链接显示文本/a 3.1.2 常见标签元素7、a元素 html headtitle超链接示例/title/head body a href=百度搜索/a /body /html img：引入图像，单个出现。 img src=图片存放地址 width=宽度值 height=高度值/ 3.1.2 常见标签元素8、img元素 html headtitle图片示例/title/head body !-- 一张图片，宽100px，高150px -- img src=flower.jpg width=100 height=150/ /body /html 注意： img标签中src属性值通常使用相对地址，以便项目在不同Web服务器上进行部署。 img标签中width和height属性值为整数，单位是像素，若不设置则默认图片以源图片文件实际大小显示。 3.1.2 常见标