第2章 HTML入门.pptx
《第2章 HTML入门.pptx》由会员分享,可在线阅读,更多相关《第2章 HTML入门.pptx(74页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、课程主讲人:第2章 HTML入门第2章 HTML入门网页设计与制作(HTML+CSS)(第2版)学习目标/Target掌握HTML文档基本格式,能够书写符合格式规范的HTML结构代码。掌握文本控制标签的用法,能够合理地使用文本控制标签定义网页元素。掌握图像标签,学会运用图像标签制作图文混排页面。章节概述/ SummaryHTML作为一门标签语言,主要用来描述网页中的文字和图像等元素。使用HTML标签描述网页中的内容是每一个网页制作人员的入门要求。然而什么是HTML标签?又该如何使用HTML标签描述网页中的文字和图像呢?本章将对HTML的入门知识进行详细讲解。目录/Contents2.12.22
2、.3HTML概述HTML文本控制标签HTML图像应用2.4阶段案例制作图文混排页面HTML概述2.1.1 HTML文档格式l 熟悉HTML文档的基本格式,能够说出HTML文档由哪些标签构成。l 了解HTML文档各标签,能够说出各标签的含义及其所处位置。学习目标传智教育: 传智播客教育科技有限公司是一家专门致力于高素质软件开发人才培养的高科技公司。此致敬礼 传智教育学员写信需要符合书信的格式要求【结论】学习HTML标签语言亦不例外,同样需要先掌握它的基本格式,遵从相应的格式规范。2.1.1 HTML文档格式例如:使用Dreamweaver生成的HTML文档无标题文档l 文档类型声明l 根标签l
3、头部标签l 主体标签2.1.1 HTML文档格式在HTML5版本中,文档格式有了一些的变化。HTML5还简化了标签,让定义字符编码的格式变得更加简单。注意:在HTML文档格式中,既可以大写,也可以小写,对整个文档格式并没有什么影响。2.1.1 HTML文档格式2.1.2 HTML标签熟悉HTML标签的分类,能够说出单标签和双标签的语法格式及用法。学习目标1.标签分类什么是HTML标签?2.1.2 HTML标签1.标签分类带有“”符号的元素被称为HTML标签例如:、都是HTML标签也称为HTML标 记或HTML元素 2.1.2 HTML标签1.标签分类双标签双标签也称体标签,是指由开始和结束两个
4、标签符组成的标签。单标签单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。内容 表示该标签的作用开始,一般称为“开始标签“2.1.2 HTML标签1.标签分类表示该标签的作用结束,一般称为“结束标签”为什么要有单标签?HTML标签的作用原理就是选择网页内容进行描述,也就是说需要描述哪些内容,就选择该内容,通过双标签定义内容的开始和结束。但单标签本身就可以描述一个功能,不需要定义内容的开始和结束。例如,水平线标签按照双标签的语法规则,它应该写成“”,但是水平线标签不需要选择网页内容,本身就代表一条水平线,此时如果写成双标签,代码就显得有些冗余。这就需要单标签来简化代码结构。多学一
5、招:2.1.2 HTML标签1.标签分类了解HTML标签的属性,能够说出为HTML添加属性的作用,并写出为HTML标签添加属性的基本语法格式。学习目标2.1.2 HTML标签2.标签的属性2.1.2 HTML标签文本标签的属性字体位置字号颜色语法格式 内容 2.标签的属性2.1.2 HTML标签以一段代码为例,分析标签的属性标题文本align为属性名center为属性值,表示标题文本居中对齐2.标签的属性2.1.2 HTML标签认识键值对“键值对”简单地说即为对“属性”设置“值”。在HTML开始标签中,可以通过“属性=属性值的方式为标签添加属性,其中“属性”和“属性值”是以“键值对”的形式出现
6、的。多学一招:例如:color=red; width:200px;键键值值2.标签的属性2.1.2 HTML标签3. 标签的关系熟悉HTML标签的嵌套关系,能够举例嵌套关系的标签。熟悉HTML标签的并列关系,能够举例并列关系的标签。学习目标2.1.2 HTML标签3. 标签的关系嵌套关系也称为包含关系,可以简单理解为一个双标签里面有包含了其他的标签。(1)嵌套关系并列关系也称为兄弟关系,就是两个标签处于同一级别,并且没有包含关系。(2)并列关系2.1.2 HTML标签4.头部结构标签熟悉HTML文档头部相关标签,能够举例头部相关标签有哪些,及其作用。学习目标2.1.2 HTML标签4.头部结构
7、标签21标签用于定义HTML页面的标题,即给网页取一个名字,必须位于标签之内。标签用于定义页面的元信息,可重复出现在标签中。2.1.2 HTML标签4.头部结构标签1标签用于定义HTML页面的标题,即给网页取一个名字,必须位于标签之内。一个HTML文档只能含有一对标签,之间的内容将显示在浏览器窗口的标题栏中。网页标题名称基本语法格式:2.1.2 HTML标签4.头部结构标签2标签用于定义页面的元信息,可重复出现在标签中。meta定义页面参数设置网页关键字设置网页描述设置网页作者设置字符集设置页面自动刷新与跳转HTML文本控制标签2.2 HTML文本控制标签在一个网页中文字往往占有较大的篇幅,为
8、了让文字能够在网页中排版整齐、结构清晰,HTML提供了一系列的文本控制标签。例如,标题标签、段落标签、字体标签等,本节将对这些HTML文本控制标签进行详细介绍。2.2.1 页面格式化标签1.标题标签l 了解标题标签,能够举例说明标题标签的作用。l 掌握标题标签的用法,能够为网页本文内容添加不同权重的标题。学习目标2.2.1 页面格式化标签1.标题标签为什么需要标题?2.2.1 页面格式化标签1.标题标签在写文章时,标题是文章内容的高度凝练和概括,能够让读者迅速了解文章内容的主题。同样,网页中的内容,我们也需要指定标题,以便让访问者快速知道网页模块的主题。2.2.1 页面格式化标签1.标题标签如
9、何设置网页标题?2.2.1 页面格式化标签1.标题标签网页中的标题是指被标题标签嵌套,并呈现出特殊样式的元素(文字或图片)。HTML提供了6个标题标签,即、和,来设置不同层级的标题。标题文本l left:设置标题文字左对齐(默认值)。l center:设置标题文字居中对齐。l right:设置标题文字右对齐。1.标题标签注意:1. 一个页面中只能使用一个标签,常常被用在网站的logo部分。2. 标题标签拥有明确的语义,初学者禁止仅仅使用标题标签设置文字加粗或更改文字的大小。3. HTML不赞成使用标题标签的align对齐属性,可使用CSS样式设置。2.2.1 页面格式化标签2.2.1 页面格式
10、化标签2.段落标签l 了解段落标签,能够举例说明段落标签的作用。l 掌握段落标签的用法,能够讲网页文本内容进行合理的段落。学习目标2.段落标签段落标签的作用?2.2.1 页面格式化标签2.段落标签在网页中,段落标签可以把文字有条理地显示出来。就如同我们平常写文章一样,整个网页也可以分为若干个段落。2.2.1 页面格式化标签2.段落标签在网页中使用标签来定义段落。默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。同样可以使用align属性设置段落文本的对齐方式。 段落文本2.2.1 页面格式化标签2.2.1 页面格式化标签3.水平线标签掌握水平线标签的用法,能够为网页添加水平线。学习目
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第2章 HTML入门 HTML 入门
限制150内