第02章html5布局及框架教学课件.pptx

第02章：html5布局与框架;本章内容：;本章目标;第1节【布局标签】;默认显示分类：Html标签具备的默认显示方式（table系列具备特殊方式）。 块级元素（ block ）展示方式 独立占有一行，宽度缺省值为100% 大小、内边距、外边距可以调整。 内联元素（ inline ）展示方式 不独立占有一行 大小、内边距、外边距不可以调整，取决于内容的大小。 内联块级元素（ inline-block ） 一个可以调整大小的内联元素 ;布局标签：目的是控制子元素所在位置，并不独立显示的html标签。 ;常用布??标签：在html4中用于布局的标签很少，在html5中扩展了部分布局标签增加了代码的可读性（不过由于兼容性，还不能广泛的使用在pc端网页开发中）。 p标签：是段落（paragraph）的缩写，包裹的内容为一个段落的文字或修饰文字的文字标签，默认自带内边距，块级元素。 代码示例： ;div标签：一般配合css对网页内大块区域进行布局。块级元素。 代码示例：divdiv的主要作用是布局/div ;span标签：一般用来包裹非特殊显示文本进行，内联元素。 代码示例： ;列表标签：是这一组样式相同，功能相同的元素的集合，列表不同于表格（多行多列）。 ;列表标签的分类 自定义列表 有序列表 无序列表 自定义列表：用来表示一组无序的、具备标题的列表数据。 ;有序列表：用来显示有顺序的列表数据信息，可显示顺序号。 ol标签：有序列表 li标签:有序列表项 type属性：规定列表的项目符号的类型，取值范围：A、a、1、i、Ι。 ;无序列表：用来显示无顺序的列表数据信息，可以设置列表符号。 ul标签：无序列表，块级元素 li标签:有序列表明细项，块级元素。 type属性：列表的明细符号类型，取值范围 circle(空心圆)、disc(实心圆)、square(正方形) ;第2节【文本标签】;文本标签：用来修饰小段用于阅读的文字的标签。 文本类标签一般只修饰小段的文字。 文本类标签只能阅读，不能点击。 文本类标签可以提升SEO。 ;内联类型文本标签 u标签：内容默认以下划线方式显示。 strong标签：内容默认以强调文字方式显示。 em标签：内容默认以一般强调文字显示。 ;h1—h6：标题文字标签，从h1到h6默认字体大小依次减少。 h标签在搜索引擎搜索时优先级别较高 当网络不好等原因导致css无法加载时，使用标题标签具备默认样式。 ;第3节【框架标签】; ;iframe标签：该标签可以在当前网页上引入其他网页资源（支持引入非同源网页）。 ;程序示例 ;第6节【超链接标签】;A标签：又称为超链接标签，通过a标签可以访问（链接）到其他网页。 基本语法 默认外观 ;href的取值可以为如下两种类型。 绝对路径：完整的网页访问路径，与当前网页位置无关。 域名：映射ip地址的字符，便于记忆。 端口：web服务器的端口，浏览器默认访问端口80. 站点：网络站点简称，网页资源的跟目录，在web服务器中可通过配置缺省此项。 ;href的取值可以为如下两种类型。 相对路径：需要访问的网页资源与当前网页资源路径的相对位置。。 .--代表目前所在的目录。 ..--代表上一层目录。 /--代表根目录。 ;锚点：超链接的一种，又叫命名锚记。在网页中的作用是快速定位器。 锚点的声明 ;使用id与name声明锚点的区别 在老版本浏览器中最初都是使用name作为锚点位置的声明方式。 网页中name属性的取值不唯一，因此造成锚点定位不准，所以后期浏览器都支持使用id作为锚点声明位置。 Html5规范中已经声明取消name的锚点声明方式，建议使用id。 跨网页的锚点访问 ;在网页中可以通过超链接访问非网页资源（了解） 访问的前提是当前系统安装了相关的处理程序 ;链接的打开方式：被访问的网页以哪种方式打开，使用target属性设置。 target属性的取值范围 _blank:在新窗口中打开链接文档 _self:默认，在当前浏览器窗口中打开被链接文档。 _parent:在父框架中打开被链接文档。 _top:在当前网页的最顶层框架中打开被链接文档。 framename：在指定的框架中打开被链接文档。 ;第7节【图片以及图像映射】;图片标签（img）：在网页上显示图片。 常用属性 程序示例 ;src与href的区别：不同标签使用src与href引用当前网页之外的资源，主要区别如下。 src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。 href 表示超文本引用（hypertext reference），在使用hre