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

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

HTML基础入门

今日内容介绍

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

今日内容学习目标

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

今日学习标签总览

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

第1章 网站信息页面显示

1.1 案例需求:

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

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

1.2 相关知识点

1.2.1 HTML的概述

1.2.1.1 什么是HTML

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”

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

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

<html>

<head>

<title>这是标题</title>

</head>

<body>

这里是正文

</body>

</html>

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

  • <html> 整个页面的根标签,理论上一个页面只需要一个,由头和体组成。
    • <head> 头标签,用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
      • <title>子标签,用于显示浏览器标题。
    • <body> 体标签,是整个网页的主体,我们编写的html代码基本都在此标签体内。

3. 使用浏览器打开

1.2.1.5 环境搭建

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" /> <!-- 设置html页面的编码,今天最后讲解-->

<title>标题</title>

</head>

<body>

正文

</body>

</html>

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

  • 格式:<!—注释内容 -->
  • 注释特点:
    • 浏览器查看时,不显示。右键查看源码可以看到。
    • 注释标签不能嵌套。
    • 注释特殊用法,为不同的浏览器提供不同的解决方案 (了解)

1.2.2 案例相关标签

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

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

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

1.2.2.1 标题标签 :<h1>

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

例如:

<!--标题标签-->

<h1>悟空教程</h1>

<h2>Java帮帮</h2>

1.2.2.2 标题标签: <hr>

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

size属性:水平线的高度,单位像素

noshade属性:没有阴影,取值:noshade,表示显示纯色

例如:

<!--水平线-->

<hr />

<hr size="5"/>

<hr noshade="noshade" />

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 size="7">我个大</font>

<font color="#FF0000">我很红</font>

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

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

<b> 粗体

<i> 斜体

例如:

<!-- 格式化-->

<b>粗体</b>

<i>斜体</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/>完成

1.3.2 步骤分析

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

2. 复制需要编写的内容

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

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

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

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

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

1.4 代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<h1>公司简介</h1>

<hr/>

<p>

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

</p>

<p>

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

</p>

</body>

</html>

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

2.1 案例介绍

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

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

2.2 相关知识点

2.2.1 案例相关标签

2.2.1.1 图片标签:<img>

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

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

<!--显示图片“registImg.jpg”-->

<img src="img/registImg.jpg" alt="剁手不够解恨"width="200px" height="200px" title="鼠标移上显示"/>

<img src="img/registImg2.jpg" alt="剁手不够解恨"width="200px" height="200px" title="鼠标移上显示"/>

2.3 案例分析:

2.3.1 知识点分析

2.3.2 步骤分析

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

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

2.4 代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<img src="img/logo.png" height="50" width="200"/>

<img src="img/heard.png" height="50" width="250"/>

</body>

</html>

第3章 网站列表页面显示

3.1 案例介绍

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

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

3.2 相关知识点

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

  • <ol> 定义有序列表。
    • type 列表类型,取值:A、a 、I 、i 、1 等
  • <ul> 定义无序列表。
    • type 符号的类型,取值:disc 实心圆、square 方块 、circle 空心圆
  • <li> 定义列表项。 是<ul> 或 <ol> 的子标签

例如:

<!--列表标签-->

<ul type="circle"> <!--以“空心圆”显示无序列表-->

<li>无序</li>

<li>无序</li>

<li>无序</li>

</ul>

<ol type="I"> <!--以大写阿拉伯数字显示序号-->

<li>有序</li>

<li>有序</li>

<li>有序</li>

</ol>

3.2.2 超链接标签 <a>

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

  • href:用于确定需要显示页面的路径(URL)
  • target:确定以何种方式打开href所设置的页面。常用取值:_blank、_self 等
    • _blank 在新窗口中打开href确定的页面。
    • _self 默认。使用href确定的页面替换当前页面。

例如:

<!--超链接-->

<a href="http://www.javahelp.com.cn" target="_self">

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

</a><br />

<a href="http://www.baidu.com" target="_blank">

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

</a><br />

3.3 案例分析

3.3.1 知识点分析

3.4 案例实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<ul type="square">

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

<li><a href="http://www.baidu.com" target="_self">百度</a></li>

<li><a href="http://www.163.com" target="_blank">网易</a></li>

<li>百合</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>修饰表头

<!--3*3表格,设置宽度和边线,并显示1像素的边线-->

<table border="1" width="400px" cellpadding="0" cellspacing="0">

<tr>

<th>1标题</th>

<th>2标题</th>

<th>3标题</th>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

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

<!--3*3表格,将第一行全部合并-->

<table border="1" width="400px" cellpadding="0" cellspacing="0">

<tr>

<td colspan="3" bgcolor="#ddd">a</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

</tr>

<tr>

<td>7</td>

<td>8</td>

<td>9</td>

</tr>

</table>

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

<!--3*3表格,将第一列全部合并-->

<table border="1" width="400px" cellpadding="0" cellspacing="0">

<tr>

<td rowspan="3" bgcolor="#ddd">1</td>

<td>2</td>

<td>3</td>

</tr>

<tr>

<td>5</td>

<td>6</td>

</tr>

<tr>

<td>8</td>

<td>9</td>

</tr>

</table>

4.3 案例分析

4.3.1 知识点分析

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

4.4 案例实现

4.4.1 整体布局

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

<table border="1" style="width:100%;">

<tr>

<td>1</td><!--1行3列的表格-->

</tr>

<tr>

<td>2</td><!--1行2列的表格-->

</tr>

<tr>

<td>3</td><!--轮播条,暂时不写-->

</tr>

<tr>

<td>4</td><!--热门商品1-->

</tr>

<tr>

<td>5</td><!--广告-->

</tr>

<tr>

<td>6</td><!--热门商品2-->

</tr>

<tr>

<td>7</td><!--2行1列的表格-->

</tr>

</table>

4.4.2 完整案例,填充数据

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

<table width="100%;">

<tr>

<td>

<!--1行3列的表格-->

<table width="100%;">

<tr>

<td><img src="img/logo2.png" /> </td>

<td><img src="img/header.jpg" /> </td>

<td>

<a href="">登录</a>

<a href="">注册</a>

<a href="">购物车</a>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<!--1行2列的表格-->

<table width="100%;" bgcolor="#000">

<tr height="60">

<td>

<a href=""><font color="#9d9d9d">首页</font> </a>

<a href=""><font color="#fff">手机数码</font> </a>

<a href=""><font color="#9d9d9d">电脑办公</font> </a>

<a href=""><font color="#9d9d9d">衣服</font> </a>

<a href=""><font color="#9d9d9d">海外淘</font> </a>

<a href=""><font color="#9d9d9d">奢侈品</font> </a>

</td>

<td>

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

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<!--轮播条,暂时不写,使用一张图片填充-->

<img src="img/1.jpg" width="100%" />

</td>

</tr>

<tr>

<td>

<!--热门商品1,2行7列表格-->

<table width="100%;">

<tr height="60%">

<td rowspan="2"><img src="img/products/big01.jpg" /></td>

<td colspan="2"><img src="img/products/middle01.jpg" /></td>

<td><img src="img/products/small01.jpg" /></td>

<td><img src="img/products/small02.jpg" /></td>

<td><img src="img/products/small03.jpg" /></td>

</tr>

<tr>

<td><img src="img/products/small04.jpg" /></td>

<td><img src="img/products/small05.jpg" /></td>

<td><img src="img/products/small06.jpg" /></td>

<td><img src="img/products/small07.jpg" /></td>

<td><img src="img/products/small08.jpg" /></td>

<td><img src="img/products/small09.jpg" /></td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<img src="img/products/ad.jpg" />

</td><!--广告-->

</tr>

<tr>

<td>

<!--热门商品2,2行7列表格-->

<table width="100%;">

<tr height="60%">

<td rowspan="2"><img src="img/products/big01.jpg" /></td>

<td colspan="2"><img src="img/products/middle01.jpg" /></td>

<td><img src="img/products/small01.jpg" /></td>

<td><img src="img/products/small02.jpg" /></td>

<td><img src="img/products/small03.jpg" /></td>

</tr>

<tr>

<td><img src="img/products/small04.jpg" /></td>

<td><img src="img/products/small05.jpg" /></td>

<td><img src="img/products/small06.jpg" /></td>

<td><img src="img/products/small07.jpg" /></td>

<td><img src="img/products/small08.jpg" /></td>

<td><img src="img/products/small09.jpg" /></td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<!--2行1列的表格-->

<table width="100%;">

<tr>

<td><img src="img/footer.jpg" /> </td>

</tr>

<tr>

<td>

<p>

<a href="http://www.javahelp.com.cn">关于我们 </a>

<a href="">联系我们 </a>

<a href="">招贤纳士 </a>

<a href="">法律声明 </a>

<a href="http://www.baidu.com">友情链接 </a>

<a href="">支付方式 </a>

<a href="">配送方式 </a>

<a href="">服务声明 </a>

<a href="">广告声明</a>

</p>

<p>

Copyright © 2005-2016 Java帮帮商城 版权所有

</p>

</td>

</tr>

</table>

</td>

</tr>

</table>

第5章 网站后台页面显示

5.1 案例介绍

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

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

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 案例分析

5.4 案例实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<frameset rows="15%,*">

<frame src="top.html" name="top"/>

<frameset cols="15%,*">

<frame src="left.html" name="left"/>

<frame src="right.html" name="right"/>

</frameset>

</frameset>

</html>

第6章 总结

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2018-06-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端架构与工程

利用max-height适应多尺寸屏幕的下拉动画

移动设备的特点之一便是屏幕尺寸多种多样,所以我们在制作针对移动设备的动画时必须不同尺寸屏幕的兼容性。比如我们要制作以下动画:红框2为详细内容,默认收起;红框1处...

19680
来自专栏极乐技术社区

一斤代码深入理解系列(二):微信小程序样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机...

19770
来自专栏葡萄城控件技术团队

ActiveReports 区域报表中的事件介绍

1、仅触发一次的事件 以下是在报表的处理过程中仅触发一次的所有事件这些事件在报表的处理周期中仅在最开始和结束前触发一次。 ReportStart 该事件在Dat...

24070
来自专栏Danny的专栏

Axure实现Tab选项卡切换功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

25120
来自专栏攻城狮的动态

iOS视图编程指南(View Programming Guide for iOS)(译)

29940
来自专栏Google Dart

AngularDart Material Design 复选框 顶

用户可以点击该复选框以选中或取消选中它。 通常使用复选框允许用户从一组中选择多个选项。如果您有一个ON/OFF选项,请避免使用单个复选框并使用material-...

12440
来自专栏一“技”之长

标签之美一——HTML基础元素 原

HTML是一种标记语言,因此,标签便是HTML的核心,一些基础标签的用法总结如下:

13020
来自专栏vue学习

19、分类详情页之基本页面结构

具体关于路由的跳转就不多讲了,具体可以参考前面第5章vue-router之什么是编程式路由

12320
来自专栏大前端开发

微信小程序的样式机制

之前,我已经介绍过在小程序开发中使用WXML来做界面布局,但是WXML只是一个界面的骨架。要让我们的小程序变得精致漂亮高大上起来,就需要一种为其添加样式的机制。...

12730
来自专栏Windows Community

Windows 8.1 应用再出发 - 视图状态的更新

本篇我们来了解一下Windows 8.1 给应用的视图状态带来了哪些变化,以及我们怎么利用这些变化作出更好的界面视图。 首先我们来简单回顾一下Windows 8...

28960

扫码关注云+社区

领取腾讯云代金券