Web-第一天 HTML【悟空教程】
今日内容介绍
今日内容学习目标
今日学习标签总览
一天的学习需要使用众多独立没有关联的标签,为了大家更好的吸收,现给出标签总览,以“重要程度”排序。例如:“表格标签”为今天最重要的标签。
通常在一个网站中都会有关于公司的介绍,那么我们就来完成这样的案例
当然,大家现在还不知道怎么来完成这个案例,因为这个案例中需要使用很多HTML中的标签。
HTML:超级文本标记语言(HyperText Markup Language)
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时,可以通过“右键/查看网页源代码”看到具体的html代码。
网页内容包含:HTML代码、CSS代码、JavaScript代码等内容。
网页根据内容是否改变分为:静态页面、动态页面
1. 在任意位置(F盘根目录),创建“文本文档”,重命名“00.模板.html”
文件名自定义,扩展名为html。00.template1表示意思今天案例前的模板1页面。
2. 右键/打开方式/记事本,开发html文件,并编写如下内容
<html>
<head>
<title>这是标题</title>
</head>
<body>
这里是正文
</body>
</html>
以上使用的标签组成了HTML页面的基本结构,现将所有标签进行陈述:
3. 使用浏览器打开
使用“记事本”开发效率低,现阶段比较流程的前端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注释
本案例中需要使用的标签如下:
下面我们开始一个一个的介绍,为了方便演示,创建一个“01.demo.html”文件
HTML提供<hn>系列标签,用于修饰标题,包含:<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1> 定义最大的标题。<h6> 定义最小的标题
例如:
<!--标题标签-->
<h1>悟空教程</h1>
<h2>Java帮帮</h2>
<hr /> 标签在 HTML 页面中创建一条水平分隔线,用于定义内容中的主题变化。
size属性:水平线的高度,单位像素
noshade属性:没有阴影,取值:noshade,表示显示纯色
例如:
<!--水平线-->
<hr />
<hr size="5"/>
<hr noshade="noshade" />
<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>
<b> 粗体
<i> 斜体
例如:
<!-- 格式化-->
<b>粗体</b>
<i>斜体</i>
<p> 定义段落。p 标签会自动在其前后创建一些空白。
<br /> 插入单个换行。
需要的使用标签已经介绍完成,现在我们一次分析一下“公司介绍”基本信息不同的地方都使用了那些标签。
a) “公司简介”,需要使用标题标签完成 <hn> ,例如:<h3>
b) “悟空教程” 需要使用字体标签完成 <font>
c) “Java帮帮” 需要斜体<i> 和 粗体<b> 组合完成
d) 这个文档被划分成4个区域,每一个区域之间有定义的间隔,需要使用段落标签<p>完成
e) 第2行或 第3行是一个普通的换行,在html标签中,需要使用<br/>完成
1. 创建03.案例:显示信息页面.html
2. 复制需要编写的内容
3. 使用标题标签<h1>修饰“公司简介”
4. 使用标题标签<hr>添加分隔线
5. 使用段落标签<p>和<br>划分区域
6. 使用字体标签<font> 修饰“悟空教程”
7. 使用格式化标签<b> <i> 修饰“Java帮帮”
<!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>
在上面的案例中,我们发现这个页面都是文字的内容,而我们看到的页面往往文字和图片是并存的,或者很多地方都是图片的效果,那么我们如何在页面中显示图片呢?那么我们来实现这样的案例:
当然,大家现在还不知道怎么来完成这个案例,因为我们还没有学习HTML中的图片标签,那么我们现在就来学习一下吧。
<img> 在html页面中引用一张图片
<!--显示图片“registImg.jpg”-->
<img src="img/registImg.jpg" alt="剁手不够解恨"width="200px" height="200px" title="鼠标移上显示"/>
<img src="img/registImg2.jpg" alt="剁手不够解恨"width="200px" height="200px" title="鼠标移上显示"/>
1.创建案例二:网站图片页面显示.html
2.使用图片标签<img>标签的src属性引入图片
<!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>
在页面中显示文字和图片我们已经完成了,那么如果想在页面中显示一组友情链接信息,效果如下:
点击这几个链接,可以跳转到相应的网站上.那么现在我们就来实现这样的效果
例如:
<!--列表标签-->
<ul type="circle"> <!--以“空心圆”显示无序列表-->
<li>无序</li>
<li>无序</li>
<li>无序</li>
</ul>
<ol type="I"> <!--以大写阿拉伯数字显示序号-->
<li>有序</li>
<li>有序</li>
<li>有序</li>
</ol>
<a> 标签是超链接,是在html页面提供一种可以访问其他位置的实现方式。
例如:
<!--超链接-->
<a href="http://www.javahelp.com.cn" target="_self">
访问“Java帮帮”官网,以默认方式打开
</a><br />
<a href="http://www.baidu.com" target="_blank">
访问“百度”官网,以新窗口方式打开
</a><br />
<!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>
在之后的开发中,div+css布局非常常见,但对于更熟悉服务器端开发的Java程序员来说,没有相应的知识底蕴。我们更侧重功能的完成,页面的美观展示就交予UI工程师。所以在之后的学习和开发中,我们使用表格<table>布局更多。
为了让大家熟练的应用表格布局,本案例我们将使用表格完成比较复杂的首页编写。
在整个首页页面中,第二行的右边使用到表单,此处暂时省略,下一个案例我们单独讲解。
本案例使用的标签,如下:
<table>
<tr>
<td>
惯例,我们将创建“案例三:网站首页.html”页面进行演示。
HTML表格由<table>标签以及一个或多个<tr>、<th>或<td>标签组成。
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>
根据对首页页面的分析,我们将采用表格嵌套的方式绘制。首页绘制一个7*1的表格用于作为外围的整体结构,然后给每一行分别添加表格绘制自己的模块,有1*3表格,有2*7表格。对于第三行轮播条暂时不编写,需要使用js。(第4天和第5天讲解)
绘制整体布局,使用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>
填充数据,将数字替换真实案例的数据
<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>
平时我们看到的电商网站,其实只是其前台页面,提供给普通用户进行查询商品,购买商品等操作的。实际上,还有后台页面,提供给管理员使用的,用于添加商品,发货等操作。
一般情况,后台页面都采用的框架方式进行呈现。效果如下图:
<frameset> 标签,是多个窗口页面整合在一起的一个集合(框架集)。每一个页面(框架)都是单独文档,需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局,使用cols确定列数,使用rows确定行数。多个<frameset>可以嵌套使用。
<frame>标签,用于设置<frameset>框架集中的一个页面(框架)。
<!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>