[第二章HTML语言基础.ppt

第二章 HTML语言基础 主讲教师：苏博 本章内容 1、HTML语言介绍 2、HTML文档结构 3、HTML基本标记 4、块状布局标记 5、文本、列表、超链接标记 6、图像标记 7、表单标记 重点：理解什么是网页的结构与内容 1、HTML语言介绍 HTML是英文HyperText Markup Language的缩写。中文的意思是超文本标记语言。它是一种纯文本格式语言，通过嵌入代码或标记来表明文本格式的国际标准。用它编写的文件扩展名是.html或者.htm，可供浏览器解释浏览的文件格式。 HTML语言的版本是4.0 现在升级到XHTML1.0版本，语言更加严格。 当我们按照标准的XHTML语言编写网页的时候，就可以让不同厂商的浏览器或者客户终端向用户展示相同的页面信息。 良好的XHTML编写习惯 1、属性名称必须小写 div id=“content” 2、属性值必须使用双引号 3、不允许使用属性简写 HTML4.0版本允许input checked这种写法，但是在XHTML中，必须写完整： input checked=“checked” 4、使用id代替name XHTML规范指出，使用id作为统一的名称标记，不再推荐使用HTML的name属性。 5、必须使用结束标记 如果是包容标记，开始标记后必须出现结束标记。 div/div p/p 如果是空标记，则必须使用正斜线作为结束。 img/,br/ 2、 HTML文档结构 HTML文档可以分为两部分 书写Web文档应该遵循的格式： 1、HTML文档必须以HTML标记开始，以/HTML标记结束 2、文件头必须包含在Head标记和/Head标记之间。 3、在文件头中应使用一个文档标题 （Title文档标题/Title） 4、文件体部分包含在Body和/Body中 5、文档采用!-- 注释 --的格式加入注释 3、 HTML基本标记 按照格式可把标记分为 Html常用的基本标记有： !DOCTYPE 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 写在文档 最前面 html/html 定义HTML文档 meta/meta 定义文档相关信息。比如针对有哪些信誉好的足球投注网站引 擎和更新频度的描述和关键词 head/head 定义HTML文档头部信息 title/title 定义HTML文档标题 body/body 定义HTML文档内容 br/ 换行 hr/ 定义水平线 !-- … -- 定义注释 4、块状布局标记 1、div/div div标记是布局标记的首选，可以把div看做一个盒子，一个网页中的某块区域。默认状态下，每个div独占一行。 一个长方形的网页，是个最大的盒子，被划分成三个水平的盒子，头部，主题内容，尾部。 每个盒子又被水平或者垂直划分成更小的盒子，依次类推，层层的盒子嵌套起来，架构出了网页的结构。就好像建房子，把框架先搭建起来。 然后，再在每个盒子里面放上网页所需要的内容。 Div的语法结构 div id=“名称” 内容 /div 嵌套结构： div id=“名称1” div id=“名称2” …… /div div id=“名称3”内容3/div /div 5、文本、列表、超链接标记 文本标记 网页的第一内容就是文本，是最能传递信息的元素。 常用的文本标记有： h1标题1/h1 h2标题2/h2 …… h6标题6/h6 p段落/p 段落标记。文本自动换行。 普通文本 列表 列表是网页结构的重要元素，除了应用在列表型内容中之外，还主要用作导航设计。 常用的列表有无序列