HTML5教案第2讲 HTML基础_第1页
HTML5教案第2讲 HTML基础_第2页
HTML5教案第2讲 HTML基础_第3页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

web前端开发HTML基础（教案）教学内容及教学过程说明步骤一问题引入很多网页都是以HTML为基础编写的，使用HTML编写的文档称为HTML文档。如图所示，为腾讯网的主页问题1：谈谈页面都由什么元素构成？回答1：。问题2：各种元素怎么编写？回答2：。步骤二讲授2.1认识HTML2.1.1认识HTMLHTML是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档。HTML通过标签符号来标记要显示的网页中的各个部分，浏览器根据不同的标签来解释和显示其标签的内容，这样才能使访问者浏览到漂亮的网页。2.2编写简单的HTMLHTML网页文档可以用多种工具编写，下面以记事本为例说明HTML文档的编写网页的定义与分类（1）打开记事本，输入如下HTML代码。这就是一个简单的HTML网页文件，也是组成网页文档的基本结构。（2）保存为扩展名为*.html或*.htm的网页文档。（3）用浏览器打开保存的HTML文档，这就是“我的第一个网页作品”的显示效果2.1.1文档组成元素<html><!--HTML文档开始标签--><head><!--网页头部开始标签-->……<!--网页头部的内容--></head><!--网页头部结束标签--><body><!--网页文档主体开始标签-->……<!--网页主体内容--></body><!--网页主体内容结束标签--></html><!--HTML文档结束标签-->HTML定义了3个元素，用于描述网页页面的整体结构。页面结构元素不影响页面的显示效果，而是帮助HTML工具对HTML文件进行解析和过滤的。主要的三个基本元素包括html元素、head元素和body元素。2.2认识常见的HTML元素2.2.1HTML的基本元素HTML基本的结构元素包括3个，分别是html元素、head元素和body元素，这3个元素是每个网页文档中必不可少的组成部分，但是，它们在每个网页文档中只能出现一次。（1）html元素。html元素由一对<html>……</html>标签组成，标明这是一个HTML文档，其作用是告知浏览器网页的格式为HTML格式，用来界定html文档的起始位置，从标签<html>开始，到标签</html>结束。（2）head元素head元素包含的是HTML文档的头部信息，从标签<head>开始，到标签</head>结束，主要包含页面的一些基本描述语句。一般头部的信息不会直接显示在网页正文中，它为浏览器提供一些信息，如标题、文档使用的脚本、样式定义等。常用的头部标签（3）body元素。body元素包含的是HTML文档的网页内容的主体，从<body>开始，到</body>结束，包括页面所有内容，如文本、图片、动画、视频、表格、链接、表单等。2.2.2格式元素（1）换行元素。使用<br/>标签强制进行换行、分段，放在一行的末尾，可以使后面的文字、图片、表格等显示在下一行，不会在行与行之间留下空行。这是一个自关闭元素。（2）段落元素。使用<p>…</p>标签定义段落，使网页正文文字段落排列更加整齐、美观。例如：<palign="center">欲穷千里目，更上一层楼。</p>（3）水平线元素。水平线元素。使用<hr>标签，可以在页面中插入一条水平标尺线，使不同功能的文字隔开，便于查找阅读。例如：<hrwidth="100%"size="1px"color="#0000FF"noshade>2.2.3字体元素（1）标题类元素。标题标签<hn></hn>用来指定标题文字的大小。n取值范围为1~6。（2）字体元素。为了增强页面层次，在网页中需要对文字大小、字体、颜色进行修饰。例如：<fontsize="5"face="宋体"color="red">被设置的文字</font>。2.2.4超级链接元素HTML网页文档中重要的元素之一就是超级链接，它是一个网站的灵魂。通过<a>标签的href属性可完成网页中超级链接的定义。超级链接主要分为内部链接、外部链接、邮件链接和锚点链接，具体含义如下。（1）内部链接。这种链接的目标是本站点中的其他文档。利用内部链接，可以在本站点内的页面之间相互跳转。（2）外部链接。这种链接的目标是互联网中的某个页面，是本站点之外的某个页面。利用外部链接可以跳转到其他网站上。（3）邮件链接。这种链接可以启动电子邮件程序，进行邮件的书写，并将其发送到指定的邮箱中。（4）锚点链接。这种链接的目标是文档中的命名锚点。利用锚点链接可以跳转到当前文档或其他文档的某一指定位置，适合内容较多的长页面的信息定位。2.2.5列表元素（1）ul列表。无序列表：所包含的列表项将以粗点格式显示，且没有特定的顺序，经常与<li>标签一起制作导航，默认为纵向排列。（2）ol列表。有序列表：所包含的列表将以顺序数字方式显示，列表项自动从1开始对有序条目进行编号。（3）dl列表。自定义列表：一个项目列表及其注释的组合。自定义列表从<dl>标签开始，每个自定义列表项以<dt>标签开始，每个注释以<dd>标签开始。2.2.6表格元素表格是HTML文件中常用的页面元素，表格不但能够有序排列数据，而且能对页面进行合理的布局。表格元素的基本结构由<table>标签（表格）、<tr>标签（表格行）、<th>标签（标题单元格）、<td>标签（单元格）组成。2.2.7图片元素HTML文件中，可以嵌入图片、声音、视频、Flash动画等多媒体内容，丰富网页的表现力。插入图片的元素标签只有一个，就是<img/>标签。2.2.8DIV元素DIV(division，划分)是常见的区块元素，区块元素是从一个新行开始显示的，其后面的元素也需要另起一行进行显示，例如段落、标题、列表、表格、DIV和body元素都属于区块元素。DIV元素是使用最广泛的元素之一，在DIV+CSS的Web标准网页设计中可以取代表格布局网页。在HTML网页中，DIV为网页中的大块内容提供了结构和背景。<div></div>标签是为HTML文档内大块内容提供结构的容器，在div中可以包含各种网页元素，如文字、图片、动画、表格、视频、表单等。2.3综合案例HTML的常见元素制作简单的避暑山庄简介网页步骤三课堂小结1．网页文档结构2．HTML基本元素重点会使用基本元素设计网页步骤四作业问题引入第1题（2）课后作业1.单元实践操作网页

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论