HTML(I).ppt

1、HTML（一）,本篇内容,HTML语言概述 HTML语言细节I,一、HTML语言概述,HTML简介 HTML历史 HTML文件结构 HTML标记、元素、属性,1.1 HTML简介,HTML（Hyper Text Markup Language） 超文本标记语言 超文本（文字+图片+音视频+链接等） 标记语言（HTML语言是一个个的标记，浏览器根据标记显示内容） 是为浏览器设计的语言 用于在Web上传递信息,1.2 HTML历史,HTML版本的演变 HTML1.0-2.0HTML 3 HTML 4HTML 4.01HTML 5 从HTML4始由W3C组织统一制定规范 W3C：世界万维网联盟（ W

2、orld Wide Web Consortium ） XHTML 1.0 符合XML标准的HTML,1.3 HTML文件结构,简单案例示例, 简单的html案例 你好，欢迎! 请单击Hello World！ ,HTML文件的结构, 页面标题 页面文档部分 ,HTML文档,文件头,文件体,文件体之间是浏览器 主体窗口显示的内容,HTML文档开始标记,HTML文档结束标记,文档头部开始标记,文档头部结束标记,标题标记,文档内容开始标记,文档内容结束标记,1.4 HTML标记、元素、属性,1.4.1 HTML标记、元素的概念,HTML文件的控制语句称为标记（也叫“标签”），标记在一对尖括号之间，格式

3、： 内容,你好，Hello World,h1开始标记，由标记名及环 绕标记名称的一对“”构成,h1结束标记：/,一对闭合的匹配标记,标记控制的“内容”,HTML元素：开始标记+内容+结束标记,有时，“HTML标记”和“HTML元素”可以互相指代 HTML由各种各样的标记构成，每一种标记代表不同的含义，浏览器解析标记并进行显示,你好，Hello World,浏览器将标记之间的内容显示成一级标题,示例,1.4.2 属性,HTML标记可以有（0-多个）属性，位于尖括号内 内容 属性为标记增加附加的功能，包括属性名和属性值 属性值包括在一对单引号或双引号之间,你好，Hello World,控制内容居中

4、显示,属性名：align，属性值：center,示例,1.4.3 标记（元素）与属性的说明,说明1空元素,没有内容的HTML元素称为空元素 空元素结束标记的两种写法,说明2嵌套,HTML标记可以嵌套，但要按顺序正确闭合, 你好，Hello World , 你好，Hello World , html嵌套 Hello World! ,嵌套树,html,head,body,title,font,h1,嵌套树,完全嵌套于 中，嵌套于 中，嵌套于 ,说明3规范写法,HTML标记和属性不严格区分大小写，但推荐全部采用小写，符合XHTML规范 属性值可以不加一对单引号或双引号，但推荐全部加上单或双引号，符合

5、XHTML规范 有的HTML开始标记可以不加结束标记，但推荐全部加上结束标记，符合XHTML规范 采用规范的写法，可以保证在绝大多数浏览器上正常的显示,写法举例,你好，Hello HTML,你好，Hello HTML,你好，Hello HTML,你好，Hello HTML,示例,推荐写法！,写法说明,以下写法都可以,你好，Hello HTML, 你好，Hello HTML ,说明4HTML注释标记, 注释内容不在浏览器显示 示例,HTML标记小结,浏览器的基本功能：就是根据HTML标记的含义，用特殊的效果显示和控制标记之间所引用的内容 HTML标记的组合就是HTML语言 学习HTML语言就是学

6、习各种HTML标记的用法,HTML语言学习方法,学习方法： 不要死记硬背 掌握常用HTML标记和属性的用法 更多陌生的HTML标记和属性，用到时查阅看懂 自主学习：查看优秀网页的源文件,二、HTML语言细节I常用标记学习,HTML页面结构标记 HTML页面修饰标记 超链接标记 多媒体标记 列表标记 表格标记,2.1 HTML页面结构标记,文件标记 在HTML文档最外层，表示HTML文件的开始与结束 文件头标记：对文件的综合信息进行说明，包含 标题标记：在浏览器窗口显示标题 基地址标记 标记 标记 标记,新浪首页,文件主体标记 标明文档的主体部分：浏览器主体窗口内显示的内容 主要属性： bgco

7、lor：设置页面背景颜色 颜色取值：预定义名字，或十六进数（P67 表4-1） 预定义名字：red,blue,green. 十六进制数字：#0000ff background：设置背景图案或图像文件的URL（相对或绝对路径）,示例,2.2 HTML页面修饰标记,页面修饰标记用于控制页面的段落，显示字符的大小、颜色、字体和属性等,标题文字标记 标题文字 HTML定义了六级标题，n的范围16 align属性控制标题文字的对齐方式，默认left 示例,2.2.1标题标记,文字样式标记 控制文字的字体、大小和颜色通过属性控制 格式：文字 face属性定义字体，若定义字体不存在，采用系统默认字体 siz

8、e定义大小：1 2 3 4 5 6 7 实际对应8 10 12 14 18 24 36（pixels） color定义颜色，颜色值可以用预定义名字，也可以用十六进制数字（P67 表4-1） 示例,2.2.2 文字样式标记,颜色的十六进制表示：,#0000ff,R,G,B,示例,2.2.3 特殊文字样式标记,特定文字样式标记,示例,段落标记 段落内容 段落前后自动加空行分隔 分层标记 层内容 作用：划分区域 块元素和内联元素 具备自动换行功能的HTML标记（元素）称为块元素 不具备自动换行功能的HTML标记（元素)称为内联元素,示例,示例,2.2.4 段落等标记,示例,换行标记 () 是空元素

9、换行：浏览器遇到 标记会另起一行 浏览器不把文档中的“回车换行符”当成换行 水平线标记 () 浏览器遇到，在页面上画出一条水平线 属性见表4-4 预格式化标记 预格式化标记使HTML文档中的空格、Tab符、回车换行符起作用,示例,示例,2.2.5 HTML特殊字符,HTML中的TAB键、回车换行、空格，无论有多少，一律只当成一个空格，表示空格采用特殊字符,示例,2.2.6 HTML写法说明, 简单的html案例 你好，欢迎! 请单击Hello World！ ,HTML文档代码中的空格、制表符 和回车换行符的主要作用： 文档清晰、方便阅读,浏览器遇到具备自动换行功能的 块元素以及才显示换行,2.

10、3 超链接标记,标记创建跳转到另一页面的超链接 文字 href属性指定链接的目标页面 标记之间的内容（即“文字”）在浏览器中显示为带下划线的链接标签，点击后跳转到href属性指定的url页面，转向的页面默认在当前窗口打开,示例,标记创建跳转到另一页面的超链接 文字 target属性: 指定target = “_blank”，表明在新窗口打开转向的页面 文字,示例,href所指向url的路径问题： 绝对路径 相对路径：相对当前url地址（通俗理解：相对当前目录）,查看 ,查看 ,相对路径说明,myApp,1.html,1.html页面中的转向,2.html,转向当前目录下的2.html,相对路径

11、说明,myApp,1.html,1.html页面中的转向,2.html,a,示例,相对路径说明,.（两个点）代表上一级目录,myApp,1.html,2.html页面中 转向1.html url如何写,2.html,a,转向1.html,示例,基地址用法,文件头标记之间可以包含基地址标记 用来指定本页面中所有超链接的基路径，也叫基准路径 页面超链接中的url在解析时，会自动加到基准路径之后, , ,1.html,示例,基地址的用法,可以考虑：所有页面加上基地址标记，设置基准路径为当前Web应用根路径 如http:/localhost:8080/myApp/ 页面中超链接地址的写法将自动加在设置

12、的基准路径 “http:/localhost:8080/myApp/ ”之后 如此设置后，可以方便页面中超链接的写法 只需记住相对当前应用根目录的路径即可,myApp,1.html,2.html页面中 转向1.html url如何写,2.html,a,转向1.html,页面加上 ,示例,地址的写法 相对路径 基地址,！,掌握,超链接标记的其它用法,链接邮箱 链接文件 链接页面内锚点,2.4 页面多媒体标记,图像标记 格式： （） src属性指定图像文件的URL（绝对路径或相对路径） （可选）alt属性：提示文字 （可选）width, height属性：制定图像宽度和高度 标记可以作为元素的内容

13、 ,示例2,示例,页面多媒体标记,页面嵌入多媒体（音乐、视频等）标记 格式： 跑马灯标记 移动内容,示例,示例,示例,2.5 列表标记,无序列表标记 列表项标记 需要与一起使用, 第一项 第二项 ,示例,有序列表标记 列表项标记 需要与一起使用, 第一项 第二项 ,示例,2.6 表格标记,HTML中使用标记建立表格，使用格式： 表示一个表格 标记内嵌套多对 ，每一对表示一行 每一对内嵌套多对，每一对表示一个单元格 是一对特殊的，可以用以定义表头元素，居中显示为黑体 与、(或)需要一起工作,！,重要,数据库,示例,示例th,border属性：表格外框的宽度（单位px），默认为0（没外框） ali

14、gn属性：表格相对页面的对齐方式（left, center, right) width属性：表格宽度 绝对像素值，比如：500px; 占上一层元素宽度百分比，比如：90% height属性：表格高度 绝对像素值 占上一层元素高度百分比,示例,标记常用属性,cellpadding属性： 单元格边框与单元格内容的距离（单位px） cellspacing属性： 单元格之间的间距（单位px） bgcolor属性:表格背景色,示例,标记常用属性,单元格内容,单元格内容,标记常用属性,align属性： 控制行内文字水平对齐（left, center, right） valign属性： 控制行内文字垂直对齐(top, middle, bottom) bgcolor属性： 控制行背景颜色,示例,()标记常用属性,align属性： 控制单元格文字水平对齐（left, center, right） valign属性： 控制单元格文字垂直对齐(top, middle, bottom) width属性：指定单元格宽度 绝对像素值 占表格宽度百分比,示例,()标记常用属性,colspan： 使单元格扩展成多列 rowspan： 使单元格扩展成多行,示例,实验,一行写6个,该行写5个,示