《网页编缉软件HTML》-课件设计（公开）.pptVIP

HTML（一） 本篇内容 HTML语言概述 HTML语言细节I 一、HTML语言概述 HTML简介 HTML历史 HTML文件结构 HTML标记、元素、属性 1.1 HTML简介 HTML（Hyper Text Markup Language） 超文本标记语言 超文本（文字+图片+音视频+链接等） 标记语言（浏览器根据标记显示内容） 是为浏览器设计的语言 用于在Web上传递信息 1.2 HTML历史 HTML版本的演变 HTML1.0-2.0——HTML 3 ——HTML 4——HTML 4.01 从HTML4始由W3C组织统一制定规范 W3C：世界万维网联盟（ World Wide Web Consortium ） XHTML 1.0 符合XML标准的HTML 1.3 HTML文件结构 简单案例示例 HTML文件的结构 1.4 HTML标记、元素、属性 1.4.1 HTML标记、元素的概念 HTML文件的控制语句成为标记（也叫“标签”），标记在一对尖括号之间，格式： 标记名称内容/标记名称 有时，“HTML标记”和“HTML元素”可以互相指代 HTML由各种各样的标记构成，每一种标记代表不同的含义，浏览器解析标记并进行显示 1.4.2 属性 HTML标记可以有（0-多个）属性，位于尖括号内 标记名称 属性名1=“属性值” 属性名2=“属性值”内容/标记名称 属性为标记增加附加的功能，包括属性名和属性值 属性值包括在一对单引号或双引号之间 1.4.3 标记（元素）与属性的说明 说明1——空元素 没有内容的HTML元素称为空元素 空元素结束标记的两种写法 说明2——嵌套 HTML标记可以嵌套，但要按顺序正确闭合 嵌套树 嵌套树 说明3——规范写法 HTML标记和属性不严格区分大小写，但推荐全部采用小写，符合XHTML规范 属性值可以不加一对单引号或双引号，但推荐全部加上单或双引号，符合XHTML规范 有的HTML开始标记可以不加结束标记，但推荐全部加上结束标记，符合XHTML规范 采用规范的写法，可以保证在绝大多数浏览器上正常的显示 写法举例 写法说明 以下写法都可以 说明4——HTML注释标记 !-- 注释内容 -- 注释内容不在浏览器显示 示例 HTML标记小结 浏览器的基本功能就是根据HTML标记的含义，用特殊的效果显示和控制标记之间所引用的内容 HTML标记的组合就是HTML语言 学习HTML语言就是学习各种HTML标记的用法 HTML语言学习方法 学习方法： 不要死记硬背 掌握常用HTML标记和属性的用法 更多陌生的HTML标记和属性，用到时查阅看懂 自主学习：查看优秀网页的源文件 二、HTML语言细节I——常用标记学习 HTML页面结构标记 HTML页面修饰标记 超链接标记 多媒体标记 列表标记 表格标记 2.1 HTML页面结构标记 文件标记html/html 在HTML文档最外层，表示HTML文件的开始与结束 文件头标记head/head：对文件的综合信息进行说明，包含 标题标记title/title：在浏览器窗口显示标题 基地址标记base href=“URL”/ link标记 style标记 meta 标记 文件主体标记body/body 标明文档的主体部分 主要属性： bgcolor：设置页面背景颜色 颜色取值：预定义名字，或十六进数（P67 表4-1） 预定义名字：red,blue,green…. 十六进制数字：#0000ff background：设置背景图案或图像文件的URL（相对或绝对路径） 2.2 HTML页面修饰标记 页面修饰标记用于控制页面的段落，显示字符的大小、颜色、字体和属性等 2.2.1标题标记hn 标题文字标记 hn align=“left|center|right” 标题文字 /hn HTML定义了六级标题，n的范围1~6 align属性控制标题文字的对齐方式，默认left 示例 2.2.2 文字样式标记font 文字样式标记 控制文字的字体、大小和颜色——通过属性控制 格式：font face=“ ” size=“ ” color=“ ”文字/font face属性定义字体，若定义字体不存在，采用系统默认字体 size定义大小：1 2 3 4 5 6 7 实际对应8 10 12 14 18 24 36（pixels） color定义颜色，颜色值可以用预定义名字，也可以用十六进制数字（P67 表4-1） 示例 颜色的十六进制表示： 2.2.3 特殊文字样式标记 特定文字样式标记 2.2.4 段落等标记 段落标记p p 段落内容 /p 段落前后自动加空行分隔 分层标记 div div 层内容/div 作用：划分区域 块元素和内联元素 具备自