2019-02-21

第一章 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简介

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

(三) 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基本标记

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">

说明：

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)]

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,905评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,140评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,791评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,483评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,476评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,516评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,905评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,560评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,778评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,557评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,635评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,338评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,925评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,898评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,142评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,818评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,347评论 2赞 342

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. 页面的对外说明

二、网页基本标签

三、作业

二、网页基本标签

三、作业