第1章 HTML基础 主讲人：刘泰然 经济管理学院.

Presentation on theme: "第1章 HTML基础 主讲人：刘泰然 经济管理学院."— Presentation transcript:

1 第1章 HTML基础 主讲人：刘泰然 经济管理学院

2 内 容 概 览 HTML简介 HTML文档结构及语法规则 创建HTML文件 网页的摘要信息 HTML页面中的块和行 注释和特殊符号

3 HyperText Markup Language
1.1 HTML简介 HTML HyperText Markup Language 超文本标记语言 作用 制作网页的基础语言 构成网页文档的主要语言

4 HTML的发展历史 W3C：World Wide Web Consortium
WHATWG： Web Hypertext Application Technology Working Group

5 1.2 HTML文档结构及语法规则 1.2.1 标签及其属性 HTML语法主要由标签、属性和元素组成，其语法结构为： 1．标签
标签及其属性 HTML语法主要由标签、属性和元素组成，其语法结构为： <标签 属性1="属性值1" 属性2="属性值2" …>元素的内容</标签> 1．标签 HTML文档由标签和被标签的内容组成。 2．标签的属性 标签仅仅规定这是什么信息，这些信息可以是文本，也可以是图像，但是要想显示或控制这些信息，就需要在标签后面加上相关的属性。

6 标签及其属性实例 1.例如，一级标题标签<h1>表示为： <h1>欢迎！</h1>
2.例如，一级标题标签<h1>有属性align，align表示文字对齐方式，表示为： <h1 align=“left”>欢迎！</h1>

7 1.2 HTML文档结构及语法规则 1.2.2 HTML语法规则 1．标签和属性的规范 并不是所有标签都有属性，如换行标签就没有。
根据需要可以使用该标签的所有属性，也可以只有其中的几个属性。在使用时，属性之间没有顺序。 属性和标签一样，都必须用小写字母表示。 属性值都要用双引号括起来。

8 1.2 HTML文档结构及语法规则 2．元素的嵌套 元素必须被正确地嵌套，最有可能发生错误的是在与<table>标签结合的情况。<table>的子元素只能为<thead>、<tbody>、<tfoot>和<tr>，而<thead>、<tbody>和<tfoot>的直接子元素只能为<tr>，而<tr>的直接子元素只能为<td>和<th>才可以放其他标签。此外，类似的标签还有<dl>、<ul>、<select>等。

9 1.2 HTML文档结构及语法规则 3．不推荐使用的标签
在HTML中，某些标签不推荐使用，例如，<b>、<strong>、<i>、<em>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>等标签。因为这些标签有些是可以用CSS去统一控制的，还有一些是不常使用的。 4．代码的缩进 编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性，不要使用制表符或制表符加空格的混合方式缩进。

10 1.2 HTML文档结构及语法规则 HTML文档结构 文档编码

11 1.3 创建HTML文件 ① 打开记事本。 ② 创建新文件，并按HTML语言规则编辑。
③ 保存网页。以.html或.htm为后缀命名文件，如create.html。 ④ 在“我的电脑”相应的存盘文件夹中双击create.html文件启动浏览器，即可看到网页的显示结果。

12 1.4 网页的摘要信息 网页的摘要信息一般放在HTML文档的头部（head）区域， 主要通过以下两个标签进行描述。
1.4 网页的摘要信息 网页的摘要信息一般放在HTML文档的头部（head）区域， 主要通过以下两个标签进行描述。 <title>标签 网页的标题能给浏览者带来方便。其次，如果浏览者喜 欢该网页，将它加入书签中或保存到磁盘上，标题就作为该 页面的标志或文件名。另外，使用搜索引擎时显示的结果也 是页面的标题。可见，标题是相当重要的。标题<title>标 签的格式为： <title> 标题名 </title>

13 1.4 网页的摘要信息 1.4.2 <meta>标签 <meta>标签的name属性的语法格式为：
1.4 网页的摘要信息 <meta>标签 <meta>标签的name属性的语法格式为： ＜meta name="参数" content="参数值"＞。 name属性主要用于描述网页摘要信息，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。 name属性主要有以下两个参数：keywords和description。 1．keywords（关键字） keywords用来告诉搜索引擎网页使用的关键字。2．description（网站内容描述） description用来告诉搜索引擎网站主要的内容。

14 1.4 网页的摘要信息 1.4.3 案例——制作网络书城页面摘要信息 【演练1-1】制作网络鞋城页面摘要信息。
1.4 网页的摘要信息 案例——制作网络书城页面摘要信息 【演练1-1】制作网络鞋城页面摘要信息。 【说明】用户可以登录百度搜索引擎

15 1.5 HTML页面中的块和行 从页面布局和显示外观的角度看，一个页面的布局就类似一篇文章的排版，需要分为多个区块，较大的区块又可再细分为小区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称为块级元素；而区块内的文字、图片或超链接等一般称为行级元素。 页面的这种布局结构，其本质上是由各种HTML标签组织完成的。因此，将HTML标签分为块级标签和行级标签（也可以称为块级元素和行级元素）。

16 1.5 HTML页面中的块和行 行级元素 块级元素 主体（body）中常见的各类标签，如图所示.

17 1.6 注释和特殊符号 注释 HTML文档提供注释功能，但是浏览器会忽略注释文字而不显示。一般使用注释标签的目的是为文档中不同部分加上说明，方便日后阅读和修改。注释标签的格式为： <!-- 注释内容 --> 特殊符号 由于大于号“>”和小于号“<”等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。这些字符实体都以“&”开头，以“;”结束。