【精选】第02章 HTML基础.ppt

第2章 HTML基础 * * Ch2 HTML基础 2.1 HTML入门 2.2 字体和排版 2.3 列表和图像显示 2.4 超链接和页内框架 2.5 表格 2.6 音频和视频 2.7 语义化标记 * * 2.1 HTML入门 HTML是Web标准中的结构化标准，这一节我们将学习HTML 5.0（简称HTML5）的基本知识，并简单介绍XHTML和HTML的区别和联系，为进一步学习HTML5打下基础。 基本概念 HTML和XHTML HTML5的基本结构 HTML5新增标记和不再支持的标记 * * 2.1 HTML入门 基本概念 1．元素和标记 一个HTML元素（element）一般由开始标记（start tag）和结束标记（end tag）以及开始标记和结束标记之间的内容（content）来描述，开始标记和结束标记一律都用尖括号“”和“”括起来。 例如： div努力学习/div HTML5规定这些元素必须用简化形式来表示。 例如：br元素在HTML5中用br /来表示。 * * 2.1 HTML入门 基本概念 2．标记的特性（attribute）和属性（property） 在HTML文档中，attribute用来描述某个标记所拥有的特性，property用来描述CSS所拥有的属性以及供C#语言、JavaScript或者jQuery访问的属性。 例：input id=Checkbox1 type=checkbox checked=checked / * * 2.1 HTML入门 基本概念 2．标记的特性（attribute）和属性（property） 标记名 特性名=值 特性名=属性名：值；属性名：值;…… 特性名 事件描述 （1）某个特性可能包含值，也可能不包含值。 （2）特性的值用等号后的字符串来描述。字符串可以用双引号，也可以用单引号。 （3）多个特性之间用空格分隔，特性没有先后顺序之分，先声明哪个都可以。 （4）如果某个特性的值描述的是多个CSS属性，则等号后的每个属性名和属性值之间用冒号分隔，各个属性之间用分号分隔。 * * 2.1 HTML入门 HTML和XHTML XHTML和HTML5之间既有相似之处，又有不同之处。这里我们仅仅从表现形式上介绍两者之间的相同点和不同点。 1．标记的嵌套使用 2．大小写的使用 3．引号的使用 4．结束标记 5．样式的使用 6．id和name * * 2.1 HTML入门 HTML5的基本结构 基本格式为： !DOCTYPE html html head HTML文档的头部信息 /head body HTML文档的主体部分 /body /html * * 2.1 HTML入门 HTML5的基本结构 1．head标记 2．body标记 3．空格 4．注释 * * 2.1 HTML入门 HTML5新增标记和不再支持的标记 HTML5新增标记 表2-1 HTML5不再支持的标记 表2-2 * * 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） * * 2.3 列表和图像显示 有序列表（ol、li） ol style=list-style-type: upper-roman li style=list-style-type: upper-alpha好好学习/li li天天向上/li /ol 这段代码在浏览器上显示如下： A. 好好学习 II. 天天向上 * * 2.3 列表和图像显示 无序列表（ul、li） 例见教材 * * 2.3 列表和图像显示 自定义列表（dl、dt、dd） dl dt小猫/dt dd年龄：2岁/dd dd爱好:睡觉/dd dt小狗/dt dd年龄：3岁/dd dd爱好:逗小猫/dd /dl * * 2.3 列表和图像显示 图像显示标记（img） 常用特性有： src：指明网页中所引用图像的位置，它和a标记的【href】特性相似，可以为相对路径，也可以是绝对路径。 alt：用简单的文字说明所引用的图像，当图像不能显示或鼠标停在图片上时显示alt属性值。 img alt=smile src=smile.png / img alt=smile src=smile.png style= height:80px; width:80px / * * 2.