《02第2讲HTML语言(已改完).ppt》由会员分享，可在线阅读，更多相关《02第2讲HTML语言(已改完).ppt（45页珍藏版）》请在三一文库上搜索。
1、复习,HTML英文全称？中文名称？ JSP英文全称？ JSP与JavaScript一样吗？ JSP与ASP差异在哪里？,第2讲 HTML语言,2.1 什么是HTML 2.2 HTML语法 2.3 HTML文件结构 2.4 几个小实验,2.1 什么是HTML,HTML是用来制作网页的标记语言. HTML是Hypertext Markup Language的英文缩写,即超文本标记语言. HTML语言是一种标记语言,不需要编译,直接由浏览器执行. HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀. HTML是大小写不敏感的,HTML与htm
2、l是一样的. HTML是由W3C的维护的.,HTML第一个例子, 欢迎来到球迷之家 这是我的第一个网页,在这里 尽情享受足球吧! ,例2.1,例2.1续 可以尝试编辑 在网页中添加文字 定义段落 在一个段落中换行 为网页加上水平分割线 ,例2.1（续） 可以尝试编辑 定义文字的颜色（方法1） 定义文字的颜色（方法2） p color:red; ,Stype 标签：HTML文档的样式设置,定义和用法 标签用于为 HTML 文档定义样式信息。 在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。 type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css
3、“。 style 元素位于 head 部分中。, h1 color:red p color:blue Header 1 A paragraph. ,例2.1（续） 可以尝试编辑 定义网页的背景颜色（方法1） 定义网页的背景颜色（方法2） body background-color:blue; ,例2.1（续） 可以尝试编辑 尝试链接到海事大学和Google 链接到海事大学主页 链接到Google主页 点击图片就可以链接到你想去的地方 链接到 链接到,2.2 HTML语法,HTML语法非常简单,组成HTML语法的元素只有 HTML标签 HTML属性,2.2.1 HTML标签,HTML标签是HTM
4、L语言中最基本的单位,HTML标签是HTML语言最重要的组成部分. 通常要用两个角括号括起来，例如：. 都是闭合的（闭合是指要有一个斜杠来标示结束），但不一定是成对出现的 和一对标签, 是开始标签,是结束标签, 是单独的（注意要在最后加上/,以标示其是独立的） 标签是大小写无关的,跟表示的意思是一样的,HTML标签语法,常用HTML标签 html标签 - 定义HTML文档. body标签 - 定义HTML文档的内容. p标签 - 定义段落. h1-h6标签 - 定义标题. , , , html注释- 定义注释内容. ,2.2.2 HTML属性,HTML属性一般都出现在HTML标签中,HTML属
5、性是HTML标签的一部分. 标签可以有属性，它包含了额外的信息，属性的值一定要在双引号中 标签可以拥有多个属性 属性由属性名和值成对出现,HTML属性语法,2.2.3 HTML元素,HTML元素是构建网页的一种单位,是由HTML标签、HTML属性和相关的文本组成的,HTML元素是网页中的一种基本单位.,2.2.4 HTML文档,HTML文档就是HTML页面,也就是网页,是由HTML元素组成的 互联网的所有内容都是由一个个HTML文档体现的,2.3 HTML文件结构,文档head信息 头信息head可以容纳文档的HTML相关信息，比如标题title，页面的语言与文字类型，CSS样式，JavaSc
6、ript代码，简短描述，关键词等内容，是用户无法直接看到的,文档body信息 内容信息body包括用户可以看到的全部内容，比如段落，链接，表格等 编写代码时一定要有层次感 主要的HTML元素多数在body元素中，还有一少部分在head元素中,2.4 几个小实验,例2.2 HTML分段显示 在文本编辑器里编辑的代码无论怎样给文字换行，在浏览器里显示的都是一行 文本编辑器中的代码虽然换行了，但是实际页面并没有换行，这是因为浏览器并不认识记事本里的空格与回车 p标签是paragraph的缩写，是“段落”的意思，由与组成的元素可以显示成一个段落,预格式化标签 pre 是 Preformatted te
7、xt（预格式化文本） 的缩写。使用此标签可以把代码中的空格和换行直接显示到页面上。但是 和 的方式记述。, PRE标签测试文档 1992 January On 15th, the first line mode browser was available by anonymous FTP. 1992 January On 15th, the first line mode browser was available by anonymous FTP. ,例如：,结果显示如下,例2.3 强调与斜体 强调 斜体 em是emphasis的缩写, PRE标签测试文档 1992 January On 1
8、5th, the first line mode browser was available by anonymous FTP. ,例2.4 HTML空格 如何在网页中插入HTML空格？ 通常在网页中插入一个空格的时候可以使用普通的空格。 但是如果有多个空格在网页中将显示为一个 可以使用表示一个空格。,2.5 HTML链接,a 标签 - 代表HTML链接 a标签是成对出现的,以开始, 结束 a,是anchor(锚)的第一个字母 属性 href - 代表一个链接源(就是链接到什么地方) target - 用来指出哪个窗口或框架应该被此链接打开 ,2.5.1 指定位置的链接,所谓指定位置的链接，就
9、是直接链接到文档中一个定义好的位置。例如： 在HTML文档的顶部给一个标签加一个id属性,如顶部 再在HTML文档的底部加一个链接回到顶部，只要点击这个标签就可以直接转到具有id=“top“的标签的位置(也就是顶部).,例2.6 指定位置的链接 页面上部 链接到页面下部 链接到页面上部 页面下部,2.5.2 邮件链接,使用邮件链接可以直接打开默认的邮件客户端系统 例2.7 给我写邮件 ,2.5.3 图像链接,可以为一个图像指定链接.HTML图像通常使用img标签 例2.8 ,2.6 图像,img 标签 - 代表HTML图像 img标签是单独出现的, 属性: Common - 一般属性 alt
10、- 代表图像的替代文字 src - 代表一个图像源(就是图像的位置) height - 代表一个图像的高度 width - 代表一个图像的宽度 img,是image(图像)的缩写,2.7 列表,常用的列表分为3种 无序列表(使用标签) 有序列表(使用标签) 自定义列表(使用标签). HTML列表可以逐行显示信息,是HTML非常重要的组成部分.,ul 标签 - 代表HTML无序列表 ul标签是成对出现的,以开始,结束 每一列使用标签定义,每一列使用一个点作为开头 属性: Common - 一般属性 ul是unordered lists的缩写 li是list item的缩写,例2.9 ul标签 B
11、eckham Henry Messi ,ol 标签 - 代表HTML有序列表 ol标签是成对出现的,以开始,结束 每一列使用标签(与无序列表相同)定义,每列使用数字或字母开头. 属性: Common - 一般属性 ol是ordered lists的缩写,例2.10 ol标签 Beckham Henry Messi ,dl 标签 - 代表HTML自定义列表 dl标签是成对出现的,以开始,结束 自定义列表的开始使用标签,列表中每个元素的标题使用(definition term)定义,后面跟随(definition description)用于描述列表中元素的内容. dl是definition lists的英文缩写,例2.11 dl标签 Beckham He is a super star! Henry King Henry Arsenal, Bacelona Messi Figo Zidan They are all super stars! ,例2.12 嵌套列表 项目1 项目2 项目2.1 项目1.1介绍 项目2.2 项目2.2介绍 项目3 ,作业 熟悉讲过的HTML标签和属性，练习使用HTML标签进行网页设计,