- 1、本文档共90页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
课件PPT完整版课件全套课件整套课件全书课件全册课件完整版PPT全套PPT整套PPT全书PPT教学课件教学PPT课件汇总PPT汇总完整版电子教案全册电子教案全书电子教案教学教程幻灯片
第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 常见标
您可能关注的文档
- 教学课件第3章 编码及调制技术.ppt
- 教学课件第3章 变压器与电动机 - -1.pptx
- 教学课件第3章 处理网页图片.pptx
- 教学课件第3章 大数据存储与计算.pptx
- 教学课件第3章 工程项目招投标及合同管理 改.pptx
- 教学课件第3章 可编程逻辑器件.ppt
- 教学课件第3章 快速成型材料及设备.pptx
- 教学课件第3章 输入输出流.pptx
- 教学课件第3章 无线电技术基础.ppt
- 教学课件第3章数据分析的基础.pptx
- 英语人教PEP版八年级(上册)Unit4+writing+写作.pptx
- 人美版美术四年级(上册)8 笔的世界 课件 (1).pptx
- 人美版美术七年级(上册)龙的制作.pptx
- 英语人教PEP版六年级(上册)Unit 2 第一课时.pptx
- 数学苏教版三年级(上册)3.3 长方形和正方形周长的计算 苏教版(共12张PPT).pptx
- 音乐人教版八年级(上册)青春舞曲 课件2.pptx
- 音乐人教版四年级(上册) 第一单元 音乐知识 附点四分音符|人教版.pptx
- 英语人教PEP版四年级(上册)Unit 6 Part B let's learn 1.pptx
- 道德与法治人教版二年级(上册)课件-3.11大家排好队部编版(共18张PPT).pptx
- 人美版美术七年级(上册)《黄山天下奇》课件1.pptx
文档评论(0)