第1章 HTML基础 主讲人：刘泰然 经济管理学院
内 容 概 览 HTML简介 HTML文档结构及语法规则 创建HTML文件 网页的摘要信息 HTML页面中的块和行 注释和特殊符号
HyperText Markup Language 1.1 HTML简介 HTML HyperText Markup Language 超文本标记语言 作用 制作网页的基础语言 构成网页文档的主要语言
HTML的发展历史 W3C：World Wide Web Consortium WHATWG： Web Hypertext Application Technology Working Group
1.2 HTML文档结构及语法规则 1.2.1 标签及其属性 HTML语法主要由标签、属性和元素组成，其语法结构为： 1．标签 1.2.1 标签及其属性 HTML语法主要由标签、属性和元素组成，其语法结构为： <标签 属性1="属性值1" 属性2="属性值2" …>元素的内容</标签> 1．标签 HTML文档由标签和被标签的内容组成。 2．标签的属性 标签仅仅规定这是什么信息，这些信息可以是文本，也可以是图像，但是要想显示或控制这些信息，就需要在标签后面加上相关的属性。
标签及其属性实例 1.例如，一级标题标签<h1>表示为： <h1>欢迎！</h1> 2.例如，一级标题标签<h1>有属性align，align表示文字对齐方式，表示为： <h1 align=“left”>欢迎！</h1>
1.2 HTML文档结构及语法规则 1.2.2 HTML语法规则 1．标签和属性的规范 并不是所有标签都有属性，如换行标签就没有。 根据需要可以使用该标签的所有属性，也可以只有其中的几个属性。在使用时，属性之间没有顺序。 属性和标签一样，都必须用小写字母表示。 属性值都要用双引号括起来。
1.2 HTML文档结构及语法规则 2．元素的嵌套 元素必须被正确地嵌套，最有可能发生错误的是在与<table>标签结合的情况。<table>的子元素只能为<thead>、<tbody>、<tfoot>和<tr>，而<thead>、<tbody>和<tfoot>的直接子元素只能为<tr>，而<tr>的直接子元素只能为<td>和<th>才可以放其他标签。此外，类似的标签还有<dl>、<ul>、<select>等。
1.2 HTML文档结构及语法规则 3．不推荐使用的标签 在HTML中，某些标签不推荐使用，例如，<b>、<strong>、<i>、<em>、<dfn>、<code>、<samp>、<kbd>、<var>、<cite>等标签。因为这些标签有些是可以用CSS去统一控制的，还有一些是不常使用的。 4．代码的缩进 编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性，不要使用制表符或制表符加空格的混合方式缩进。
1.2 HTML文档结构及语法规则 1.2.3 HTML文档结构 文档编码
1.3 创建HTML文件 ① 打开记事本。 ② 创建新文件，并按HTML语言规则编辑。 ③ 保存网页。以.html或.htm为后缀命名文件，如create.html。 ④ 在“我的电脑”相应的存盘文件夹中双击create.html文件启动浏览器，即可看到网页的显示结果。
1.4 网页的摘要信息 网页的摘要信息一般放在HTML文档的头部（head）区域， 主要通过以下两个标签进行描述。 1.4 网页的摘要信息 网页的摘要信息一般放在HTML文档的头部（head）区域， 主要通过以下两个标签进行描述。 1.4.1 <title>标签 网页的标题能给浏览者带来方便。其次，如果浏览者喜 欢该网页，将它加入书签中或保存到磁盘上，标题就作为该 页面的标志或文件名。另外，使用搜索引擎时显示的结果也 是页面的标题。可见，标题是相当重要的。标题<title>标 签的格式为： <title> 标题名 </title>
1.4 网页的摘要信息 1.4.2 <meta>标签 <meta>标签的name属性的语法格式为： 1.4 网页的摘要信息 1.4.2 <meta>标签 <meta>标签的name属性的语法格式为： ＜meta name="参数" content="参数值"＞。 name属性主要用于描述网页摘要信息，与之对应的属性值为content，content中的内容主要是便于搜索引擎查找信息和分类信息用的。 name属性主要有以下两个参数：keywords和description。 1．keywords（关键字） keywords用来告诉搜索引擎网页使用的关键字。2．description（网站内容描述） description用来告诉搜索引擎网站主要的内容。
1.4 网页的摘要信息 1.4.3 案例——制作网络书城页面摘要信息 【演练1-1】制作网络鞋城页面摘要信息。 1.4 网页的摘要信息 1.4.3 案例——制作网络书城页面摘要信息 【演练1-1】制作网络鞋城页面摘要信息。 【说明】用户可以登录百度搜索引擎http://www.baidu.com/search/url_submit.html收录网页，以便浏览者访问到自己的网站。
1.5 HTML页面中的块和行 从页面布局和显示外观的角度看，一个页面的布局就类似一篇文章的排版，需要分为多个区块，较大的区块又可再细分为小区块。块内为多行逐一排列的文字、图片、超链接等内容，这些区块一般称为块级元素；而区块内的文字、图片或超链接等一般称为行级元素。 页面的这种布局结构，其本质上是由各种HTML标签组织完成的。因此，将HTML标签分为块级标签和行级标签（也可以称为块级元素和行级元素）。
1.5 HTML页面中的块和行 行级元素 块级元素 主体（body）中常见的各类标签，如图所示.
1.6 注释和特殊符号 1.6.1 注释 HTML文档提供注释功能，但是浏览器会忽略注释文字而不显示。一般使用注释标签的目的是为文档中不同部分加上说明，方便日后阅读和修改。注释标签的格式为： <!-- 注释内容 --> 1.6.2 特殊符号 由于大于号“>”和小于号“<”等已作为HTML的语法符号，因此，如果要在页面中显示这些特殊符号，就必须使用相应的HTML代码表示，这些特殊符号对应的HTML代码被称为字符实体。这些字符实体都以“&”开头，以“;”结束。