第一章 HTML基础
本章目标
-
会使用HTML的基本结构创建网页【重点】
-
会使用文本相关标签排版文本信息【重点】
一、 HTML的基本概念
(一) 网页设计概述
网页是用HTML语言编写的一种文件，将这种文件放在Web服务器上可以让在互联网上的其他用户浏览。比如说访问百度网站，看到的就是百度网站所编写的网页。网页也是通过HTTP协议来传递给浏览者的。网站是网页的集合，多个网页可以共同组成一个网站。网站的第一个网页称为首页。
(二) HTML简介
HTML英文是HyperText Marked Language，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。用HTML编写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用作其信息表示语言。
[图片上传失败...(image-4f72cd-1550712957313)]
(三) 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-6425a2-1550712957310)]
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>
<HR WIDTH="70%">
<P>下面跟我进入HTML的领域</P>
<P>来领略这个奇妙而多彩的世界！！</P>
</BODY>
</HTML>
(五) HTML基本标记
学习HTML的标记要从最基本的标记开始，一个HTML文件所包含的基本标记主要包括文件类型标记（也称为HTML标记）、HTML头标记、页面标题以及HTML主体标记。
1. 文件类型标记 DOCTYPE声明
[图片上传失败...(image-3305b1-1550712957312)]
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-40bb1f-1550712957312)]
(六) HTML页面的元信息 META
META元素提供的信息对于浏览用户是不可见的，一般用于定义页面信息的名称、关键字、作者等。
在HTML文件中，有多个META元素。
1. 页面的关键字
用于说明网页包含的关键字等信息，提高被搜索引擎搜索到的概率。
语法
<meta name="keywords" content="关键字"/>
Content属性的值为用户设置的具体关键字。
2. 页面的对外说明
用于描述网页的主要内容、主题等，合理设置也可以提高被搜索引擎搜索到的概率。
<meta name="description" content="对页面的描述"/>
Content属性的值最多可以包括1024个字符，但因为搜索引擎一般只显示大约前175个字符，所以描述内容还是短小、简洁为好。
3. 网页的作者信息
用于设置网站作者的名称，在比较专业的网站页面上经常用到。其语法格式如下：
<meta name="author" content="作者名称"/>
Content属性的值为用户设置的作者名称
4. 网页的开发语言
用于设置页面的类别和语言字符集。其语法格式如下：
<meta http-equiv="content-type" content="text/html;charset=GB2312"/>
建议charset值采用UTF-8.
5. 网页的定时跳转
用于设置多长的时间网页自已刷新一次，或者经过一段时间自动跳转到其他页面
自动刷新
<meta http-equiv="refresh" content="5"/>
Content属性的值页面自动刷新的时间间隔为5s
跳转
<meta http-equiv="refresh" content="6;URL=www.baidu.com"/>
(七) 练习
1. 练习1
练习内容
使用记事本或者其他文本编辑工具，手动输入一个简单的网页，编写一个包含头、标题、主体三部分的网页的HTML代码。
参考代码
<html>
<head>
<title>这里标题</title>
</head>
<body>
文件主体，正文部分
</body>
</html>
二、 网页基本标签
任何一个网页基本上都是由一个个标签构成的，网页的基本标签包括标题标签、段落标签、换行标签、水平标签等，下面我们进行详细介绍。
(一) 标题标签
1. 描述
标题标签一般表示一段文字的标题或主题，并且支持多层次的内容结构。
2. 语法
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
3. 示例
[图片上传失败...(image-af73f9-1550712957312)]
4. 核心代码
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
(二) 段落标签
1. 描述
表示一段文字
2. 语法
<p>…</p>
3. 示例
[图片上传失败...(image-5b5226-1550712957312)]
4. 核心代码
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起！</p>
<p>有勇气就会有奇迹。</p>
(三) 换行标签
1. 描述
换行标签表示强制换行，该标签比较特殊，没有结束标签。
2. 语法
3. 示例
[图片上传失败...(image-34db58-1550712957312)]
4. 核心代码
<h1>北京欢迎你</h1>
<p>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
……
</p>
(四) 水平标签
1. 描述
网页上显示的就是一条水平线，没有结束标签。
2. 语法
<HR ALIGN="对齐方式" WIDTH="宽度" SIZE="高度" COLOR="颜色" NOSHADE>
3. 示例
[图片上传失败...(image-7ced6b-1550712957312)]
4. 核心代码
<h1>北京欢迎你</h1>
<p>
北京欢迎你，有梦想谁都了不起！<br />
有勇气就会有奇迹。<br />
北京欢迎你，为你开天辟地<br />
……
</p>
(五) 字体样式标签
1. 描述
加粗：<strong>…</strong>
斜体：<em>…</em>
2. 示例
[图片上传失败...(image-52c513-1550712957312)]
3. 核心代码
<strong>徐志摩人物简介</strong>
<p>
<em>1910</em>年入杭州学堂
<em>1918</em>年赴美国克拉大学学习银行学
……
</p>
(六) 注释
1. 注释
(七) 特殊符号
1. 描述
在HTML中常用的特殊符号及对应的字符实体如下表所示，这些实体符号都以”&”开头，以“;”结束。
|
特殊符号
|
字符实体
|
示例
|
|
空格
|
|
<a href="#">****百度</a> | <a href="#">****新浪</a>
|
|
大于号(>)
|
>
|
如果时间>****晚上6****点，就坐车回家
|
|
小于号(<)
|
<
|
如果时间<****早上7****点，就走路去上学
|
|
引号(")
|
"
|
W3C****规范中，HTML****的属性值必须用成对的"****引起来
|
|
版权符号@
|
©
|
© 2010-2019 宁波教育学院
|
2. 示例：特殊符号
利用学习的特殊符号制作宁波广播电视大学官方网站的版权部分
效果图
[图片上传失败...(image-316be6-1550712957311)]
核心代码
<body>
Copyright ©2014-2018 宁波广播电视大学 版本所有
浙ICP备05015663号-1
宁波广播电视大学信息中心制作维护 地址：宁波市文教路1号（315016）
</body>
(八) 练习
1. 练习一：制作《清平乐》
训练要点
-
标签的嵌套使用
-
网页中基本标签的使用
需求说明
- 标题用<h2>标签，文字用<p>标签，标题与正文之间的分隔线使用
标签，词结束后使用
标签换行
实现思路
诗词内容均放在一个<p>…</p>标签中，诗词中需要换行时使用
换行，使用标签的嵌套
效果图
[图片上传失败...(image-6b5e66-1550712957311)]
三、 作业
(一) 作业一：制作李清照简介
1. 需求说明
标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分.
2. 效果图
[图片上传失败...(image-4094fd-1550712957311)]
网友评论