2019-02-21 - 简书

第一章 HTML基础

本章目标

  1. 会使用HTML的基本结构创建网页【重点】

  2. 会使用文本相关标签排版文本信息【重点】

一、 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>

注:

  1. 一个HTML文件,必须是<HTML>…</HTML>标签标记着 HTML 文档的开始和结束

  2. 网页头部以<head>开始,以</head>结束

  3. 网页主体部分以<body>开始,以</body>结束

(四) 一个简单的HTML实例

1. 网页编辑工具

赢百万彩票注册HTML文件对其编写工具的要求并不高,可以在Dreamweaver中实现,也可以在最简单的文本编辑工具中实现。常用的编辑工具有

  1. 记事本

  2. UltraEdit

  3. Dreamweaver

  4. Webstorm

  5. Sublime

2. 实例效果

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

本章目标

  1. 赢百万彩票注册会使用HTML的基本结构创建网页【重点】

  2. 会使用文本相关标签排版文本信息【重点】

一、 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>

注:

  1. 一个HTML文件,必须是<HTML>…</HTML>标签标记着 HTML 文档的开始和结束

  2. 网页头部以<head>开始,以</head>结束

  3. 网页主体部分以<body>开始,以</body>结束

(四) 一个简单的HTML实例

1. 网页编辑工具

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

  1. 记事本

  2. UltraEdit

  3. Dreamweaver

  4. Webstorm

  5. 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>

<HR WIDTH="70%">

<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. 页面的关键字

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

语法

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

4. 核心代码

赢百万彩票注册<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

<h6>六级标题</h6>

(二) 段落标签

1. 描述

表示一段文字

2. 语法

<p>…</p>

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. 语法

<HR ALIGN="对齐方式" WIDTH="宽度" SIZE="高度" COLOR="颜色" NOSHADE>

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****的属性值必须用成对的"****引起来

|
|

版权符号@

|

©

|

© 2010-2019 宁波教育学院

|

2. 示例:特殊符号

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

效果图

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

核心代码

<body>

Copyright ©2014-2018  宁波广播电视大学  版本所有

浙ICP备05015663号-1  

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

</body>

(八) 练习

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

训练要点

  1. 标签的嵌套使用

  2. 网页中基本标签的使用

需求说明

  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>

<HR WIDTH="70%">

<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. 页面的关键字

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

语法

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

4. 核心代码

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

<h4>四级标题</h4>

<h5>五级标题</h5>

赢百万彩票注册<h6>六级标题</h6>

(二) 段落标签

1. 描述

表示一段文字

2. 语法

<p>…</p>

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. 语法

<HR ALIGN="对齐方式" WIDTH="宽度" SIZE="高度" COLOR="颜色" NOSHADE>

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****的属性值必须用成对的"****引起来

|
|

版权符号@

|

©

|

© 2010-2019 宁波教育学院

|

2. 示例:特殊符号

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

效果图

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

核心代码

<body>

Copyright ©2014-2018  宁波广播电视大学  版本所有

浙ICP备05015663号-1  

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

</body>

(八) 练习

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

训练要点

  1. 标签的嵌套使用

  2. 网页中基本标签的使用

需求说明

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

实现思路

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

效果图

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

三、 作业

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

1. 需求说明

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

2. 效果图

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

推荐阅读更多精彩内容