Web-第一天 HTML【悟空教程】-CFANZ编程社区

Web-第一天 HTML【悟空教程】

Web-第一天 HTML【悟空教程】_html

HTML基础入门

今日内容介绍

使用html的排版标签编写“网站信息页面”
使用html的图片标签编写“图片显示页面”
使用html的列表标签编写“友情链接页面”
使用html的表格标签编写“首页”
使用html的框架标签表现“后台页面”

今日内容学习目标

能够使用<table><tr><td>进行简单页面布局
能够使用<a>完成多个页面之间切换
能够使用<img/>显示指定位置的图片
能够使用<frameset><frame>标签绘制上左右框架结构
能够看懂<p><h1><i>等标签修饰文字信息
能够看懂<ul><li>进行列表信息的展示

今日学习标签总览

一天的学习需要使用众多独立没有关联的标签，为了大家更好的吸收，现给出标签总览，以“重要程度”排序。例如：“表格标签”为今天最重要的标签。

Web-第一天 HTML【悟空教程】_java_02

第1章网站信息页面显示

1.1 案例需求:

通常在一个网站中都会有关于公司的介绍,那么我们就来完成这样的案例

Web-第一天 HTML【悟空教程】_java_03

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。

1.2 相关知识点

1.2.1 HTML的概述

1.2.1.1 什么是HTML

Web-第一天 HTML【悟空教程】_取值_04

HTML：超级文本标记语言（HyperText Markup Language）

“超文本”就是指页面内可以包含图片、链接等非文字内容。
“标记”就是使用标签的方法将需要的内容包括起来。例如：<a>www.javahelp.com.cn</a>

1.2.1.2 HTML能干什么

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

HTML代码：用于展示需要显示的数据。
CSS代码：使显示的数据更佳好看。
JavaScript代码：使整个页面显示的数据具有动画效果。

网页根据内容是否改变分为：静态页面、动态页面

静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

1.2.1.3 HTML语言特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是*.html 或 *.htm
HTML结构都是由标签组成

标签名预先定义好的，我们只需要了解其功能即可。
标签名不区分大小写
通常情况下标签由开始标签和结束标签组成。例如：<a></a>
如果没有结束标签，建议以/结尾。例如：<img />

HTML结构包括两部分：头head和体body

1.2.1.4 创建模板

1. 在任意位置（F盘根目录），创建“文本文档”，重命名“00.模板.html”

Web-第一天 HTML【悟空教程】_java_05

文件名自定义，扩展名为html。00.template1表示意思今天案例前的模板1页面。

2. 右键/打开方式/记事本，开发html文件，并编写如下内容

<html>

<head>

</head>

<body>

这里是正文

</body>

</html>

Web-第一天 HTML【悟空教程】_java_06

以上使用的标签组成了HTML页面的基本结构，现将所有标签进行陈述：

<html> 整个页面的根标签，理论上一个页面只需要一个，由头和体组成。

<head> 头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。

<title>子标签，用于显示浏览器标题。

<body> 体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

3. 使用浏览器打开

Web-第一天 HTML【悟空教程】_html_07

1.2.1.5 环境搭建

使用“记事本”开发效率低，现阶段比较流程的前端IDE（集成开发环境）是HBuilder，为了统一环境，要求所有同学的都安装HBuilder，参考“1.HBuilder安装.doc”

提供模板代码，使用“HBuilder”创建01.模板.html页面。

Web-第一天 HTML【悟空教程】_html_08

<!DOCTYPE html>

<html>

<head>

</head>

<body>

正文

</body>

</html>

在模板代码中，我们使用到了HTML注释

格式：<!—注释内容 -->
注释特点：

浏览器查看时，不显示。右键查看源码可以看到。
注释标签不能嵌套。
注释特殊用法，为不同的浏览器提供不同的解决方案（了解）

1.2.2 案例相关标签

本案例中需要使用的标签如下：

<h1></h1>
<hr />
<font>
<b></b>
<i></i>
<p></p>
<br />

下面我们开始一个一个的介绍，为了方便演示，创建一个“01.demo.html”文件

Web-第一天 HTML【悟空教程】_java_09

1.2.2.1 标题标签：<h1>

HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1> 定义最大的标题。<h6> 定义最小的标题

例如：

<h2>Java帮帮</h2>

Web-第一天 HTML【悟空教程】_取值_10

1.2.2.2 标题标签： <hr>

<hr /> 标签在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。

size属性：水平线的高度，单位像素

noshade属性：没有阴影，取值：noshade，表示显示纯色

例如：

<hr />

Web-第一天 HTML【悟空教程】_html_11

1.2.2.3 字体标签：<font>

<font> 用于设置字体尺寸、字体颜色等。

size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。

color属性：设置字体的颜色

颜色的取值：#xxxxxx 或 colorname

#xxxxxx 表示使用红绿蓝三原色设置颜色。

红绿蓝分别取值：00 -- FF，此处使用16进制。（FF就是十进制的255）

#000000 表示黑色，#FFFFFF白色

#FF0000红色，#00FF00绿色，#0000FF蓝色

红绿蓝2位取值相同可以省略成1位。例如：#112233 简化成#123

colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

例如：

<font color="blue">我是蓝色的</font>

Web-第一天 HTML【悟空教程】_html_12

1.2.2.4 格式化标签： <b> <i>

<b> 粗体

<i> 斜体

例如：

1.2.2.5 段落标签：<p> <br/>

<p> 定义段落。p 标签会自动在其前后创建一些空白。

<br /> 插入单个换行。

1.3 案例分析

1.3.1 知识点分析

需要的使用标签已经介绍完成，现在我们一次分析一下“公司介绍”基本信息不同的地方都使用了那些标签。

a) “公司简介”，需要使用标题标签完成 <hn> ，例如：<h3>

b) “悟空教程” 需要使用字体标签完成 <font>

c) “Java帮帮” 需要斜体<i> 和粗体<b> 组合完成

d) 这个文档被划分成4个区域，每一个区域之间有定义的间隔，需要使用段落标签<p>完成

e) 第2行或第3行是一个普通的换行，在html标签中，需要使用<br/>完成

Web-第一天 HTML【悟空教程】_取值_13

1.3.2 步骤分析

1. 创建03.案例：显示信息页面.html

2. 复制需要编写的内容

3. 使用标题标签<h1>修饰“公司简介”

4. 使用标题标签<hr>添加分隔线

5. 使用段落标签<p>和<br>划分区域

6. 使用字体标签<font> 修饰“悟空教程”

7. 使用格式化标签<b> <i> 修饰“Java帮帮”

Web-第一天 HTML【悟空教程】_html_14

1.4 代码实现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr/>

<p>

<font color="red">“悟空教程”</font>是由<b><i>Java帮帮</i></b>全国领先的IT新媒体，创办而来，目的是分享和整理更加易懂，更加全面的学习教程，把简单学习，快乐学习，高效学习的教育理念，发扬光大。<br/>

</p>

<p>

让每一位想要学习，想要凭借自己能力改变未来的人，都能轻松的获取学习资源，从而实现自己的人生价值

</p>

</body>

</html>

第2章网站图片页面显示案例

2.1 案例介绍

在上面的案例中，我们发现这个页面都是文字的内容，而我们看到的页面往往文字和图片是并存的，或者很多地方都是图片的效果，那么我们如何在页面中显示图片呢？那么我们来实现这样的案例：

Web-第一天 HTML【悟空教程】_取值_15

当然，大家现在还不知道怎么来完成这个案例，因为我们还没有学习HTML中的图片标签，那么我们现在就来学习一下吧。

2.2 相关知识点

2.2.1 案例相关标签

2.2.1.1 图片标签：<img>

<img> 在html页面中引用一张图片

src ：指定需要显示图片的URL（路径）。
alt ：图片无法显示时的替代文本。
width ：设置图像的宽度。
height ：定义图像的高度。

Web-第一天 HTML【悟空教程】_html_16

2.3 案例分析:

2.3.1 知识点分析

Web-第一天 HTML【悟空教程】_java_17

2.3.2 步骤分析

1.创建案例二:网站图片页面显示.html

2.使用图片标签<img>标签的src属性引入图片

2.4 代码实现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

第3章网站列表页面显示

3.1 案例介绍

在页面中显示文字和图片我们已经完成了，那么如果想在页面中显示一组友情链接信息，效果如下：

Web-第一天 HTML【悟空教程】_取值_18

点击这几个链接，可以跳转到相应的网站上.那么现在我们就来实现这样的效果

3.2 相关知识点

3.2.1 列表标签：<ol><ul>

<ol> 定义有序列表。

type 列表类型，取值：A、a 、I 、i 、1 等

<ul> 定义无序列表。
type 符号的类型，取值：disc 实心圆、square 方块、circle 空心圆
<li> 定义列表项。是<ul> 或 <ol> 的子标签

例如：

</ul>

</ol>

Web-第一天 HTML【悟空教程】_取值_19

3.2.2 超链接标签 <a>

<a> 标签是超链接，是在html页面提供一种可以访问其他位置的实现方式。

href：用于确定需要显示页面的路径（URL）
target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self 等

_blank 在新窗口中打开href确定的页面。
_self 默认。使用href确定的页面替换当前页面。

例如：

访问“Java帮帮”官网，以默认方式打开

</a><br />

访问“百度”官网，以新窗口方式打开

</a><br />

Web-第一天 HTML【悟空教程】_取值_20

3.3 案例分析

3.3.1 知识点分析

Web-第一天 HTML【悟空教程】_取值_21

3.4 案例实现

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li><a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">Java帮帮</a></li>

</ul>

</body>

</html>

第4章网站首页显示

4.1 案例介绍

在之后的开发中，div+css布局非常常见，但对于更熟悉服务器端开发的Java程序员来说，没有相应的知识底蕴。我们更侧重功能的完成，页面的美观展示就交予UI工程师。所以在之后的学习和开发中，我们使用表格<table>布局更多。

为了让大家熟练的应用表格布局，本案例我们将使用表格完成比较复杂的首页编写。

4.2 相关知识点

4.2.1 案例相关标签

在整个首页页面中，第二行的右边使用到表单，此处暂时省略，下一个案例我们单独讲解。

本案例使用的标签，如下：

<table>

<tr>

<td>

惯例，我们将创建“案例三:网站首页.html”页面进行演示。

4.2.1.1 表格标签<table><tr><td>

HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。

<table> 是父标签，相当于整个表格的容器。

border 表格边框的宽度。
width 表格的宽度。
cellpadding 单元边沿与其内容之间的空白。
cellspacing 单元格之间的空白。
bgcolor 表格的背景颜色。

<tr>标签用于定义行
<td>标签用于定义表格的单元格（一个列）
colspan 单元格可横跨的列数。
rowspan 单元格可横跨的行数。
align 单元格内容的水平对齐方式, 取值：left 左、right 右、center 居中。
nowrap 单元格中的内容是否折行。
<th>标签用于定义表头。单元格内的内容默认居中、加粗。

a) 实例1：编写3*3表格，使用<td>修饰表头

Web-第一天 HTML【悟空教程】_java_22

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

b) 实例2：编写3*3表格，将第一行全部合并

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

c) 实例3：编写3*3表格,将第一列全部合并

Web-第一天 HTML【悟空教程】_取值_24

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

4.3 案例分析

4.3.1 知识点分析

根据对首页页面的分析，我们将采用表格嵌套的方式绘制。首页绘制一个7*1的表格用于作为外围的整体结构，然后给每一行分别添加表格绘制自己的模块，有1*3表格，有2*7表格。对于第三行轮播条暂时不编写，需要使用js。（第4天和第5天讲解）

Web-第一天 HTML【悟空教程】_取值_25

4.4 案例实现

4.4.1 整体布局

绘制整体布局，使用border标记边框，定位之后再删除。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Web-第一天 HTML【悟空教程】_取值_26

4.4.2 完整案例，填充数据

填充数据，将数字替换真实案例的数据

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<td>

</td>

<td>

<font color="#fff">此处应该是表单，稍后完善</font>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<tr>

</tr>

<tr>

<td>

<p>

</p>

<p>

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

第5章网站后台页面显示

5.1 案例介绍

平时我们看到的电商网站，其实只是其前台页面，提供给普通用户进行查询商品，购买商品等操作的。实际上，还有后台页面，提供给管理员使用的，用于添加商品，发货等操作。

一般情况，后台页面都采用的框架方式进行呈现。效果如下图：

Web-第一天 HTML【悟空教程】_html_27

5.2 相关知识点

5.2.1 案例相关标签

5.2.1.1 框架标签：<frameset>

<frameset> 标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。

<frameset>和<body>两个不能共存。
rows属性和cols属性取值：值1,值2,值3,….. 一个值表示一行（列），多值使用逗号分隔，值可以是 10px、10% 等，最后一个值如果不想计算可以使用*匹配剩余量。

5.2.1.2 框架子标签：<frame>

<frame>标签，用于设置<frameset>框架集中的一个页面（框架）。

src属性：确定页面的路径
noresize属性：框架分隔先不能移动
target属性：确定需要显示的页面在何处显示

5.3 案例分析

Web-第一天 HTML【悟空教程】_java_28

5.4 案例实现

<!DOCTYPE html>

<html>

<head>

</head>

</frameset>

</html>

Web-第一天 HTML【悟空教程】_html_29

第6章总结

Web-第一天 HTML【悟空教程】_取值_30

Web-第一天 HTML【悟空教程】_java_31

Web-第一天 HTML【悟空教程】_取值_32 Web-第一天 HTML【悟空教程】_java_33

长按指纹，识别二维码，一键关注Java，大数据

Web-第一天 HTML【悟空教程】_html_34 Web-第一天 HTML【悟空教程】_java_33

长按指纹，识别二维码，一键关注Python

Web-第一天 HTML【悟空教程】_html_36 Web-第一天 HTML【悟空教程】_java_33

长按指纹，识别二维码，一键关注产品经理

Web-第一天 HTML【悟空教程】

HTML基础入门

第1章 网站信息页面显示

​1.1 ​案例需求:​​

​1.2 ​相关知识点​​

​1.2.1 ​HTML的概述​​

​1.2.1.1 ​什么是HTML​​

​1.2.1.2 ​HTML能干什么​​

​1.2.1.3 ​HTML语言特点​​

​1.2.1.4 ​创建模板​​

​1.2.1.5 ​环境搭建​​

​1.2.2 ​案例相关标签​​

​1.2.2.1 ​标题标签 ：<h1>​​

​1.2.2.2 ​标题标签： <hr>​​

​1.2.2.3 ​字体标签 ：<font>​​

​1.2.2.4 ​格式化标签： <b> <i>​​

​1.2.2.5 ​段落标签：<p> <br/>​​

​1.3 ​案例分析​​

​1.3.1 ​知识点分析​​

​1.3.2 ​步骤分析​​

​1.4 ​代码实现​​

第2章 网站图片页面显示案例

​2.1 ​案例介绍​​

​2.2 ​相关知识点​​

​2.2.1 ​案例相关标签​​

​2.2.1.1 ​图片标签：<img>​​

​2.3 ​案例分析:​​

​2.3.1 ​知识点分析​​

​2.3.2 ​步骤分析​​

​2.4 ​代码实现​​

第3章 网站列表页面显示

​3.1 ​案例介绍​​

​3.2 ​相关知识点​​

​3.2.1 ​列表标签：<ol><ul>​​

​3.2.2 ​超链接标签 <a>​​

​3.3 ​案例分析​​

​3.3.1 ​知识点分析​​

​3.4 ​案例实现​​

第4章 网站首页显示

​4.1 ​案例介绍​​

​4.2 ​相关知识点​​

​4.2.1 ​案例相关标签​​

​4.2.1.1 ​表格标签<table><tr><td>​​

​4.3 ​案例分析​​

​4.3.1 ​知识点分析​​

​4.4 ​案例实现​​

​4.4.1 ​整体布局​​

​4.4.2 ​完整案例，填充数据​​

第5章 网站后台页面显示

​5.1 ​案例介绍​​

​5.2 ​相关知识点​​

​5.2.1 ​案例相关标签​​

​5.2.1.1 ​框架标签：<frameset>​​

​5.2.1.2 ​框架子标签：<frame>​​

​5.3 ​案例分析​​

​5.4 ​案例实现​​

第6章 总结

第1章网站信息页面显示

1.1 案例需求:

1.2 相关知识点

1.2.1 HTML的概述

1.2.1.1 什么是HTML

1.2.1.2 HTML能干什么

1.2.1.3 HTML语言特点

1.2.1.4 创建模板

1.2.1.5 环境搭建

1.2.2 案例相关标签

1.2.2.1 标题标签：<h1>

1.2.2.2 标题标签： <hr>

1.2.2.3 字体标签：<font>

1.2.2.4 格式化标签： <b> <i>

1.2.2.5 段落标签：<p> <br/>

1.3 案例分析

1.3.1 知识点分析

1.3.2 步骤分析

1.4 代码实现

第2章网站图片页面显示案例

2.1 案例介绍

2.2 相关知识点

2.2.1 案例相关标签

2.2.1.1 图片标签：<img>

2.3 案例分析:

2.3.1 知识点分析

2.3.2 步骤分析

2.4 代码实现

第3章网站列表页面显示

3.1 案例介绍

3.2 相关知识点

3.2.1 列表标签：<ol><ul>

3.2.2 超链接标签 <a>

3.3 案例分析

3.3.1 知识点分析

3.4 案例实现

第4章网站首页显示

4.1 案例介绍

4.2 相关知识点

4.2.1 案例相关标签

4.2.1.1 表格标签<table><tr><td>

4.3 案例分析

4.3.1 知识点分析

4.4 案例实现

4.4.1 整体布局

4.4.2 完整案例，填充数据

第5章网站后台页面显示

5.1 案例介绍

5.2 相关知识点

5.2.1 案例相关标签

5.2.1.1 框架标签：<frameset>

5.2.1.2 框架子标签：<frame>

5.3 案例分析

5.4 案例实现

第6章总结