《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第02章 HTML基础》由会员分享，可在线阅读，更多相关《HTML5与ASP.NET程序设计教程 第2版 教学课件 ppt 作者 马骏 第02章 HTML基础（24页珍藏版）》请在金锄头文库上搜索。
1、第2章 HTML基础,2019年5月24日星期五,2,Ch2 HTML基础,2.1 HTML入门 2.2 字体和排版 2.3 列表和图像显示 2.4 超链接和页内框架 2.5 表格 2.6 音频和视频 2.7 语义化标记,2019年5月24日星期五,3,2.1 HTML入门,HTML是Web标准中的结构化标准，这一节我们将学习HTML 5.0（简称HTML5）的基本知识，并简单介绍XHTML和HTML的区别和联系，为进一步学习HTML5打下基础。 基本概念 HTML和XHTML HTML5的基本结构 HTML5新增标记和不再支持的标记,2019年5月24日星期五,4,2.1 HTML入门,基本
2、概念 1元素和标记 一个HTML元素（element）一般由开始标记（start tag）和结束标记（end tag）以及开始标记和结束标记之间的内容（content）来描述，开始标记和结束标记一律都用尖括号“”括起来。 例如： 努力学习 HTML5规定这些元素必须用简化形式来表示。 例如：br元素在HTML5中用来表示。,2019年5月24日星期五,5,2.1 HTML入门,基本概念 2标记的特性（attribute）和属性（property） 在HTML文档中，attribute用来描述某个标记所拥有的特性，property用来描述CSS所拥有的属性以及供C#语言、JavaScript或者
3、jQuery访问的属性。 例：,2019年5月24日星期五,6,2.1 HTML入门,基本概念 2标记的特性（attribute）和属性（property） （1）某个特性可能包含值，也可能不包含值。 （2）特性的值用等号后的字符串来描述。字符串可以用双引号，也可以用单引号。 （3）多个特性之间用空格分隔，特性没有先后顺序之分，先声明哪个都可以。 （4）如果某个特性的值描述的是多个CSS属性，则等号后的每个属性名和属性值之间用冒号分隔，各个属性之间用分号分隔。,2019年5月24日星期五,7,2.1 HTML入门,HTML和XHTML XHTML和HTML5之间既有相似之处，又有不同之处。这里
4、我们仅仅从表现形式上介绍两者之间的相同点和不同点。 1标记的嵌套使用 2大小写的使用 3引号的使用 4结束标记 5样式的使用 6id和name,2019年5月24日星期五,8,2.1 HTML入门,HTML5的基本结构 基本格式为： HTML文档的头部信息 HTML文档的主体部分 ,2019年5月24日星期五,9,2.1 HTML入门,HTML5的基本结构 1head标记 2body标记 3空格 4注释,2019年5月24日星期五,10,2.1 HTML入门,HTML5新增标记和不再支持的标记 HTML5新增标记 表2-1 HTML5不再支持的标记 表2-2,2019年5月24日星期五,11,
5、2.2 字体和排版,h1到h6标记 【例2-1】 p标记和br标记 hr标记 pre标记 span和div标记 【例2-2】 粗体斜体和上下标控制标记（b、i、sup、sub） 【例2-3】 短语标记（strong、em、code、cite、blockquote）,2019年5月24日星期五,12,2.3 列表和图像显示,有序列表（ol、li） 好好学习 天天向上 这段代码在浏览器上显示如下： A. 好好学习 II. 天天向上,2019年5月24日星期五,13,2.3 列表和图像显示,无序列表（ul、li） 例见教材,2019年5月24日星期五,14,2.3 列表和图像显示,自定义列表（dl、
6、dt、dd） 小猫 年龄：2岁 爱好:睡觉 小狗 年龄：3岁 爱好:逗小猫 ,2019年5月24日星期五,15,2.3 列表和图像显示,图像显示标记（img） 常用特性有： src：指明网页中所引用图像的位置，它和a标记的【href】特性相似，可以为相对路径，也可以是绝对路径。 alt：用简单的文字说明所引用的图像，当图像不能显示或鼠标停在图片上时显示alt属性值。 ,2019年5月24日星期五,16,2.3 列表和图像显示,图像显示标记（img） 使用img标记应该注意以下问题： （1）尽量使用PNG、JPEG、JPEG-XR格式的图像文件。避免使用GIF、TIFF、BMP、WebP等格式的
7、文件。 （2）尽量将所用的图片合成到一个文件中，然后一次性下载，分块读取。 （3）所用的图片大小应该和显示的一致，避免将原始的大图片缩小显示。,2019年5月24日星期五,17,2.4 超链接和页内框架,绝对URL和相对URL URL（统一资源定位符）用于定位Web上的文件信息。 绝对URL就是指完整的资源地址，具体形式为： 协议名称:/计算机域名/路径和文件名 例如： http:/ 相对URL时，一般使用单点“.”和双点“”表示当前目录和父目录。例如，/images/smile.jpg表示与当前目录同级的images目录下的smile.jpg文件。 注：在设计网页的时候，为了保证站点中各资源
8、的相对位置不变，一般使用相对URL。,2019年5月24日星期五,18,2.4 超链接和页内框架,超链接标记（a） 常用特性如下： 1id特性 2href特性 3target特性 4title特性,2019年5月24日星期五,19,2.4 超链接和页内框架,5.超链接的基本用法 （1）链接到同一网站的另一个页面 信息描述 （2）链接到另一个网站 W3C学院 （3）链接到某一个图像文件 感恩的心 （4）链接到浏览器不支持的文件 下载,2019年5月24日星期五,20,2.4 超链接和页内框架,页内框架标记（iframe） iframe标记的常用特性如表2-4所示。 利用a标记和iframe标记实
9、现导航 【例2-4】利用超链接实现菜单导航。 利用a标记和iframe标记链接到锚点 【例2-5】页内框架和链接到锚点的示例。,2019年5月24日星期五,21,2.5 表格,表格标记（table） 在HTML文档中，一个表格是由开始，到结束。表格的行由tr标记定义，与之间用和填充。表2-5列出了表格相关的标记。 规则表格：表示表格的一行，每一个作为该行的一列，与该行构成一个单元格。 非规则表格：非规则表格用colspan特性和rowspan特性来指定跨越的列数或行数。 【例2-6】非规则表格示例。,2019年5月24日星期五,22,2.6 音频和视频,音频播放标记（audio）：表2-6列出了audio标记的常用特性。 视频播放标记（video）：表2-7列出了video标记的常用特性。 【例2-7】演示audio和video标记的基本用法,2019年5月24日星期五,23,2.7 语义化标记,语义化标记的用途是增加HTML代码的可读性，包括section、nav、article、aside、hgroup、header、footer、figure、figcaption以及mark标记等。 1导航标记（nav） 2文章标记（article、header、section） 3页脚标记（footer）,2019年5月24日星期五,24,本章作业,习题 3、4、5,
