2019-02-21

作者: c592a8530dfe | 来源:发表于2019-02-21 09:19 被阅读0次

第一章 HTML基础

本章目标

会使用HTML的基本结构创建网页【重点】
会使用文本相关标签排版文本信息【重点】

一、 HTML的基本概念

(一) 网页设计概述

网页是用HTML语言编写的一种文件，将这种文件放在Web服务器上可以让在互联网上的其他用户浏览。比如说访问百度网站，看到的就是百度网站所编写的网页。网页也是通过HTTP协议来传递给浏览者的。网站是网页的集合，多个网页可以共同组成一个网站。网站的第一个网页称为首页。

(二) HTML简介

HTML英文是HyperText Marked Language，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用作其信息表示语言。

[图片上传失败...(image-11bc28-1550711950247)]

(三) HTML的基本结构

HTML文件包括文件头和文件体两部分。在文件头里，主要是对这个HTML文件进行一些必要的定义，在文件体中的内容才是真正要显示的各种文件信息。一般情况下，HTML文件的结构如下所示

<HTML>

<HEAD>

头部信息

</HEAD>

<BODY>

文件主体，正文部分

</BODY>

</HTML>

注：

一个HTML文件，必须是<HTML>…</HTML>标签标记着 HTML 文档的开始和结束
网页头部以<head>开始，以</head>结束
网页主体部分以<body>开始，以</body>结束

(四) 一个简单的HTML实例

1. 网页编辑工具

HTML文件对其编写工具的要求并不高，可以在Dreamweaver中实现，也可以在最简单的文本编辑工具中实现。常用的编辑工具有

记事本
UltraEdit
Dreamweaver
Webstorm
Sublime

2. 实例效果

[[图片上传失败...(image-5f2553-1550711950244)]第一章 HTML基础

本章目标

会使用HTML的基本结构创建网页【重点】
会使用文本相关标签排版文本信息【重点】

一、 HTML的基本概念

(一) 网页设计概述

网页是用HTML语言编写的一种文件，将这种文件放在Web服务器上可以让在互联网上的其他用户浏览。比如说访问百度网站，看到的就是百度网站所编写的网页。网页也是通过HTTP协议来传递给浏览者的。网站是网页的集合，多个网页可以共同组成一个网站。网站的第一个网页称为首页。

(二) HTML简介

HTML英文是HyperText Marked Language，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用作其信息表示语言。

[图片上传失败...(image-98ff8f-1550711956533)]

(三) HTML的基本结构

HTML文件包括文件头和文件体两部分。在文件头里，主要是对这个HTML文件进行一些必要的定义，在文件体中的内容才是真正要显示的各种文件信息。一般情况下，HTML文件的结构如下所示

<HTML>

<HEAD>

头部信息

</HEAD>

<BODY>

文件主体，正文部分

</BODY>

</HTML>

注：

一个HTML文件，必须是<HTML>…</HTML>标签标记着 HTML 文档的开始和结束
网页头部以<head>开始，以</head>结束
网页主体部分以<body>开始，以</body>结束

(四) 一个简单的HTML实例

1. 网页编辑工具

HTML文件对其编写工具的要求并不高，可以在Dreamweaver中实现，也可以在最简单的文本编辑工具中实现。常用的编辑工具有

记事本
UltraEdit
Dreamweaver
Webstorm
Sublime

2. 实例效果

[图片上传失败...(image-492a3d-1550711956531)]

3. 参考代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

<TITLE>一个简单的HTML实例</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="center">第一个HTML文件</H2>

<P>下面跟我进入HTML的领域</P>

<P>来领略这个奇妙而多彩的世界！！</P>

</BODY>

</HTML>

(五) HTML基本标记

学习HTML的标记要从最基本的标记开始，一个HTML文件所包含的基本标记主要包括文件类型标记（也称为HTML标记）、HTML头标记、页面标题以及HTML主体标记。

1. 文件类型标记 DOCTYPE声明

[图片上传失败...(image-d7dc52-1550711956533)]

l Strict(严格类型)：这种声明完全符合W3C标准，但要求比较严格。对应的声明为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

l Transitional(过渡类型)：也称松散（loose）声明。相比strict而言，要求相对宽松一些。对应的声明为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

l Frameset(框架类型)：strict声明中不允许使用框架，当前页面中需要使用框架时，则使用该声明。框架页奖在后续章节讲解，对应的声明为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

说明：

Strict语法较为严格，对代码的编写要求较高；Frameset在一些浏览器中不支持，因此在使用时受到浏览器的限制，所以并不常用；因此使用最多的是Transitional.

2. <title>标签

打开网页后，将在浏览器窗口的标题栏显示网页标题。

<TITLE>一个简单的HTML实例</TITLE>

[图片上传失败...(image-3ded69-1550711956533)]

(六) HTML页面的元信息 META

META元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称、关键字、作者等。

在HTML文件中，有多个META元素。

1. 页面的关键字

用于说明网页包含的关键字等信息，提高被搜索引擎搜索到的概率。

语法

Content属性的值为用户设置的具体关键字。

2. 页面的对外说明

用于描述网页的主要内容、主题等，合理设置也可以提高被搜索引擎搜索到的概率。

Content属性的值最多可以包括1024个字符，但因为搜索引擎一般只显示大约前175个字符，所以描述内容还是短小、简洁为好。

3. 网页的作者信息

用于设置网站作者的名称，在比较专业的网站页面上经常用到。其语法格式如下：

Content属性的值为用户设置的作者名称

4. 网页的开发语言

用于设置页面的类别和语言字符集。其语法格式如下：

建议charset值采用UTF-8.

5. 网页的定时跳转

用于设置多长的时间网页自已刷新一次，或者经过一段时间自动跳转到其他页面

自动刷新

Content属性的值页面自动刷新的时间间隔为5s

跳转

(七) 练习

1. 练习1

练习内容

使用记事本或者其他文本编辑工具，手动输入一个简单的网页，编写一个包含头、标题、主体三部分的网页的HTML代码。

参考代码

<html>

<head>

</head>

<body>

文件主体，正文部分

</body>

</html>

二、网页基本标签

任何一个网页基本上都是由一个个标签构成的，网页的基本标签包括标题标签、段落标签、换行标签、水平标签等，下面我们进行详细介绍。

(一) 标题标签

1. 描述

标题标签一般表示一段文字的标题或主题，并且支持多层次的内容结构。

2. 语法

3. 示例

[图片上传失败...(image-a56b1b-1550711956533)]

4. 核心代码

(二) 段落标签

1. 描述

表示一段文字

2. 语法

3. 示例

[图片上传失败...(image-4fe2ed-1550711956533)]

4. 核心代码

<h1>北京欢迎你</h1>

<p>北京欢迎你，有梦想谁都了不起！</p>

<p>有勇气就会有奇迹。</p>

(三) 换行标签

1. 描述

换行标签表示强制换行，该标签比较特殊，没有结束标签。

2. 语法

3. 示例

[图片上传失败...(image-80c904-1550711956533)]

4. 核心代码

<h1>北京欢迎你</h1>

<p>

北京欢迎你，有梦想谁都了不起！<br />

有勇气就会有奇迹。<br />

北京欢迎你，为你开天辟地<br />

……

</p>

(四) 水平标签

1. 描述

网页上显示的就是一条水平线，没有结束标签。

2. 语法

3. 示例

[图片上传失败...(image-5fe880-1550711956533)]

4. 核心代码

<h1>北京欢迎你</h1>

<p>

北京欢迎你，有梦想谁都了不起！<br />

有勇气就会有奇迹。<br />

北京欢迎你，为你开天辟地<br />

……

</p>

(五) 字体样式标签

1. 描述

加粗：<strong>…</strong>

斜体：<em>…</em>

2. 示例

[图片上传失败...(image-fff21e-1550711956533)]

3. 核心代码

<strong>徐志摩人物简介</strong>

<p>

<em>1910</em>年入杭州学堂

<em>1918</em>年赴美国克拉大学学习银行学

……

</p>

(六) 注释

1. 注释

(七) 特殊符号

1. 描述

在HTML中常用的特殊符号及对应的字符实体如下表所示，这些实体符号都以”&”开头，以“;”结束。

|

特殊符号

|

字符实体

|

示例

|
|

空格

|

<a href="#">****百度</a> | <a href="#">****新浪</a>

|
|

大于号(>)

|

>

|

如果时间>****晚上6****点，就坐车回家

|
|

小于号(<)

|

<

|

如果时间<****早上7****点，就走路去上学

|
|

引号(")

|

"

|

W3C****规范中，HTML****的属性值必须用成对的"****引起来

|
|

版权符号@

|

©

|

2. 示例：特殊符号

利用学习的特殊符号制作宁波广播电视大学官方网站的版权部分

效果图

[图片上传失败...(image-5680bb-1550711956533)]

核心代码

<body>

浙ICP备05015663号-1

宁波广播电视大学信息中心制作维护地址：宁波市文教路1号（315016）

</body>

(八) 练习

1. 练习一：制作《清平乐》

训练要点

标签的嵌套使用
网页中基本标签的使用

需求说明

标题用<h2>标签，文字用<p>标签，标题与正文之间的分隔线使用
标签，词结束后使用
标签换行

实现思路

诗词内容均放在一个<p>…</p>标签中，诗词中需要换行时使用
换行，使用标签的嵌套

效果图

[图片上传失败...(image-43448b-1550711956533)]

三、作业

(一) 作业一：制作李清照简介

1. 需求说明

标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分.

2. 效果图

[图片上传失败...(image-7fa12a-1550711956533)]
](第一节/教学演示案例/示例1-myfirstpage.html)

3. 参考代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

<TITLE>一个简单的HTML实例</TITLE>

</HEAD>

<BODY>

<H2 ALIGN="center">第一个HTML文件</H2>

<P>下面跟我进入HTML的领域</P>

<P>来领略这个奇妙而多彩的世界！！</P>

</BODY>

</HTML>

(五) HTML基本标记

学习HTML的标记要从最基本的标记开始，一个HTML文件所包含的基本标记主要包括文件类型标记（也称为HTML标记）、HTML头标记、页面标题以及HTML主体标记。

1. 文件类型标记 DOCTYPE声明

[图片上传失败...(image-780c8-1550711950246)]

l Strict(严格类型)：这种声明完全符合W3C标准，但要求比较严格。对应的声明为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

l Transitional(过渡类型)：也称松散（loose）声明。相比strict而言，要求相对宽松一些。对应的声明为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

l Frameset(框架类型)：strict声明中不允许使用框架，当前页面中需要使用框架时，则使用该声明。框架页奖在后续章节讲解，对应的声明为：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

说明：

Strict语法较为严格，对代码的编写要求较高；Frameset在一些浏览器中不支持，因此在使用时受到浏览器的限制，所以并不常用；因此使用最多的是Transitional.

2. <title>标签

打开网页后，将在浏览器窗口的标题栏显示网页标题。

<TITLE>一个简单的HTML实例</TITLE>

[图片上传失败...(image-e172fd-1550711950246)]

(六) HTML页面的元信息 META

META元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称、关键字、作者等。

在HTML文件中，有多个META元素。

1. 页面的关键字

用于说明网页包含的关键字等信息，提高被搜索引擎搜索到的概率。

语法

Content属性的值为用户设置的具体关键字。

2. 页面的对外说明

用于描述网页的主要内容、主题等，合理设置也可以提高被搜索引擎搜索到的概率。

Content属性的值最多可以包括1024个字符，但因为搜索引擎一般只显示大约前175个字符，所以描述内容还是短小、简洁为好。

3. 网页的作者信息

用于设置网站作者的名称，在比较专业的网站页面上经常用到。其语法格式如下：

Content属性的值为用户设置的作者名称

4. 网页的开发语言

用于设置页面的类别和语言字符集。其语法格式如下：

建议charset值采用UTF-8.

5. 网页的定时跳转

用于设置多长的时间网页自已刷新一次，或者经过一段时间自动跳转到其他页面

自动刷新

Content属性的值页面自动刷新的时间间隔为5s

跳转

(七) 练习

1. 练习1

练习内容

使用记事本或者其他文本编辑工具，手动输入一个简单的网页，编写一个包含头、标题、主体三部分的网页的HTML代码。

参考代码

<html>

<head>

</head>

<body>

文件主体，正文部分

</body>

</html>

二、网页基本标签

任何一个网页基本上都是由一个个标签构成的，网页的基本标签包括标题标签、段落标签、换行标签、水平标签等，下面我们进行详细介绍。

(一) 标题标签

1. 描述

标题标签一般表示一段文字的标题或主题，并且支持多层次的内容结构。

2. 语法

3. 示例

[图片上传失败...(image-b27438-1550711950245)]

4. 核心代码

(二) 段落标签

1. 描述

表示一段文字

2. 语法

3. 示例

[图片上传失败...(image-807f2f-1550711950245)]

4. 核心代码

<h1>北京欢迎你</h1>

<p>北京欢迎你，有梦想谁都了不起！</p>

<p>有勇气就会有奇迹。</p>

(三) 换行标签

1. 描述

换行标签表示强制换行，该标签比较特殊，没有结束标签。

2. 语法

3. 示例

[图片上传失败...(image-a5a613-1550711950245)]

4. 核心代码

<h1>北京欢迎你</h1>

<p>

北京欢迎你，有梦想谁都了不起！<br />

有勇气就会有奇迹。<br />

北京欢迎你，为你开天辟地<br />

……

</p>

(四) 水平标签

1. 描述

网页上显示的就是一条水平线，没有结束标签。

2. 语法

3. 示例

[图片上传失败...(image-bd2c89-1550711950245)]

4. 核心代码

<h1>北京欢迎你</h1>

<p>

北京欢迎你，有梦想谁都了不起！<br />

有勇气就会有奇迹。<br />

北京欢迎你，为你开天辟地<br />

……

</p>

(五) 字体样式标签

1. 描述

加粗：<strong>…</strong>

斜体：<em>…</em>

2. 示例

[图片上传失败...(image-ae8db6-1550711950245)]

3. 核心代码

<strong>徐志摩人物简介</strong>

<p>

<em>1910</em>年入杭州学堂

<em>1918</em>年赴美国克拉大学学习银行学

……

</p>

(六) 注释

1. 注释

(七) 特殊符号

1. 描述

在HTML中常用的特殊符号及对应的字符实体如下表所示，这些实体符号都以”&”开头，以“;”结束。

|

特殊符号

|

字符实体

|

示例

|
|

空格

|

<a href="#">****百度</a> | <a href="#">****新浪</a>

|
|

大于号(>)

|

>

|

如果时间>****晚上6****点，就坐车回家

|
|

小于号(<)

|

<

|

如果时间<****早上7****点，就走路去上学

|
|

引号(")

|

"

|

W3C****规范中，HTML****的属性值必须用成对的"****引起来

|
|

版权符号@

|

©

|

2. 示例：特殊符号

利用学习的特殊符号制作宁波广播电视大学官方网站的版权部分

效果图

[图片上传失败...(image-7adb24-1550711950245)]

核心代码

<body>

浙ICP备05015663号-1

宁波广播电视大学信息中心制作维护地址：宁波市文教路1号（315016）

</body>

(八) 练习

1. 练习一：制作《清平乐》

训练要点

标签的嵌套使用
网页中基本标签的使用

需求说明

标题用<h2>标签，文字用<p>标签，标题与正文之间的分隔线使用
标签，词结束后使用
标签换行

实现思路

诗词内容均放在一个<p>…</p>标签中，诗词中需要换行时使用
换行，使用标签的嵌套

效果图

[图片上传失败...(image-c1e32d-1550711950245)]

三、作业

(一) 作业一：制作李清照简介

1. 需求说明

标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分.

2. 效果图

[图片上传失败...(image-6e16d0-1550711950245)]

网友评论

本文标题：2019-02-21

本文链接：https://www.haomeiwen.com/subject/snblyqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

2019-02-21

一、 HTML的基本概念

(一) 网页设计概述

(二) HTML简介

(三) HTML的基本结构

(四) 一个简单的HTML实例

1. 网页编辑工具

2. 实例效果

一、 HTML的基本概念

(一) 网页设计概述

(二) HTML简介

(三) HTML的基本结构

(四) 一个简单的HTML实例

1. 网页编辑工具

2. 实例效果

3. 参考代码

(五) HTML基本标记

1. 文件类型标记 DOCTYPE声明

2. <title>标签

(六) HTML页面的元信息 META

1. 页面的关键字

2. 页面的对外说明

3. 网页的作者信息

4. 网页的开发语言

5. 网页的定时跳转

自动刷新

跳转

(七) 练习

1. 练习1

练习内容

参考代码

二、 网页基本标签

(一) 标题标签

1. 描述

2. 语法

3. 示例

4. 核心代码

(二) 段落标签

1. 描述

2. 语法

3. 示例

4. 核心代码

(三) 换行标签

1. 描述

2. 语法

3. 示例

4. 核心代码

(四) 水平标签

1. 描述

2. 语法

3. 示例

4. 核心代码

(五) 字体样式标签

1. 描述

2. 示例

3. 核心代码

(六) 注释

1. 注释

(七) 特殊符号

1. 描述

2. 示例：特殊符号

效果图

核心代码

(八) 练习

1. 练习一：制作《清平乐》

训练要点

需求说明

实现思路

效果图

三、 作业

(一) 作业一：制作李清照简介

1. 需求说明

2. 效果图

3. 参考代码

(五) HTML基本标记

1. 文件类型标记 DOCTYPE声明

2. <title>标签

(六) HTML页面的元信息 META

1. 页面的关键字

2. 页面的对外说明

二、网页基本标签

三、作业

二、网页基本标签

三、作业