网页设计与开发—HTML、CSS、JavaScript实例教程第2章.ppt

1、第2章 HTML基础介绍,清华大学出版社,主要内容,了解HTML文档的基本结构,了解标记属性的使用方法和规则,2.1 HTML文档结构,一个完整的HTML文件包含头部和主体两个部分的内容，在头部内容里，可定义标题、样式等，文档的主体内容就是要显示的信息。,2.1.1 基本结构, 一个简单的HTML示例 欢迎光临我的主页 ,2.1.2 头部内容,是HTML文档的头部标记, 在浏览器窗口中，头部信息是不被显示在正文中的，在此标记中可以插入其它用以说明文件的标题和一些公共属性的标记。 如要指定HTML文档的网页标题（它将显示在浏览器窗口顶部标题栏），就要在头部内容中提供有关信息。用title元素来指

2、定网页标题，即在之间写上网页标题，如程序2-2。,2.1.2 头部内容, 我的第一个网站 ,2.1.2 头部内容,2.1.2 头部内容,在头部文件中使用标记用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。,2.1.2 头部内容, 我的第一个网页 ,2.1.3 主体内容,在标记和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等元素。 例如，程序2-4在body部分添加了几个关于文本和段落的标记。,2.1.3 主体内容, 我的第一

3、个页面 这里是文章的标题。 这里是文章的段落。 ,2.1.4 编写网页的开头,可以通过浏览器直接查看一个页面的HTML源代码，例如在IE浏览器菜单栏上选择“查看源文件”即可。 大多页面的开头，通常使用DOCTYPE标记来声明要使用什么风格的HTML或XHTML。DOCTYPE使浏览器知道应该如何处理文档，并且让验证器知道按照什么样的标准检查代码的语法。然后，用html标记标出实际代码的起始位置。,2.2 HTML基本语法,HTML用于描述功能的符号称为“标记”。、等都是标记。标记通常分为单标记和双标记两种类型。,2.2.1 标记语法,单标记 单标记仅单独使用就可以表达完整的意思。 基本语法：

4、语法说明： 最常用的单标记是,它表示换行。,2.2.1 标记语法,双标记 双标记由首标记和尾标记两部分构成，它必须成对使用。首标记告诉Web浏览器从此处开始执行该标记所表示的功能。尾标记告诉Web浏览器在这里结束该标记。 基本语法： 内容 语法说明： 其中“内容”部分就是要被这对标记施加作用的部分。 例如，“b“标记的作用是，告诉浏览器介于标记和之间的文本应以粗体显示。（这里的“b”是“粗体（bold）”的意思。 标记可以包含标记，即标记可以成对嵌套，但是不能交叉地嵌套。下面的代码就是错误的： 这是错误的交叉嵌套代码。,2.2.2 属性语法,HTML通过标记告诉浏览器如何展示网页，如告诉浏览器

5、显示一个换行。另外还可以为某些元素附加一些信息，这些附加信息被称为属性（attribute）。 例如，标记的作用是在网页中插入一条水平线,那么这条水平线的粗细、对齐方式等就是该标记的属性，如：,2.2.2 属性语法,基本语法： 语法说明： 属性应写在首标记内，并且和标记名之间有一个空格分隔。例如，上例中hr标记中，align为属性，center为属性值，属性值可以直接书写，也可以使用括起来。以下写法也是正确的：,2.3 注释,注释标签用于在 HTML 源码中插入注释。注释会被浏览器忽略。可以使用注释对程序代码进行解释，适当的注释对以后代码的阅读和维护产生很大的帮助。 基本语法： 语法说明： 左

6、括号后需要写一个惊叹号，右括号前就不需要了。,2.4编写HTML文件的注意事项,“”是任何标记的开始和结束。元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠“/”； 标记可以嵌套使用，但不能嵌套标记。任何回车符和空格在HTML代码中都不起作用。为了代码清晰，建议不同的标记都单独占一行； 标记中可以放置各种属性，属性值都用“”括起来； 编写代码，一般应该使用缩进风格，以便更好的理解页面的结构，便于阅读和维护。,2.4编写HTML文件的注意事项,为了使浏览器能正常浏览网页，在用记事本或别的HTML开发工具编写好HTML文档后，在保存HTML时，对HTML文件的命名要注意以下几点： 文件的扩展名为.htm或.html结束，建议统一使用html作为文件名的后缀； 文件名中只可由英文字母、数字或下划线组成； 文件名中不要包含特殊符号，比如空格、$等； 文件名区分大小写； 网站首页文件名一般是index.html或default.html。,2.5 小实例,编写一个HTML文件，在编写的时候要注意编写的注意事项，养成良好的编码习惯。, 页面的标题 这是我的第一个页面。这是粗体文本。 ,小结,本章主要介绍了HTML文件的基本结构和基本语法。HTML文件基本结构包含三大部分，