您的位置: 首页  >  文章  >  HTML详解

HTML详解

分类: 文章 • 2025-05-08 17:41:58

HTML详解

 

  1. JavaWeb课程体系介绍

HTML详解

在JavaWeb阶段，我们会带领学员经历五个阶段的学习，如上图所示。

  • 第一阶段（当前课程阶段）：前端开发阶段

开发要求：

1.可以读懂UI工程师编写的页面，在整个页面中根据自己的需求填写代码；

2.可以在指定位置进行简单内容的编写，核心目的在于显示数据；

3.掌握表单内容的编写；

4.掌握JS简单动画的使用

  • 第二阶段：数据库基础回顾和进阶

开发要求：

1.必须会使用SQL语句进行数据库表操作；

2.会使用JDBC连接数据库和数据库连接池技术。为之后的框架打基础

  • 第三阶段：服务端开发

开发要求：

1.会使用tomcat.可以将Web项目成功部署到Tomcat下，并通过浏览器可以访问；

2.可以进行服务器端程序开发，能够综合运用JavaWeb技术开发实际项目

  • 第四阶段：服务器开发高级进阶

开发要求：

1.掌握监听器和过滤器的用法,重点会使用过滤器完成实际功能;

2.了解Ajax运行原理,掌握jQuery中的Ajax操作;

  • 第五阶段：综合案例

开发要求：

1.掌握JavaWeb开发基本流程

2.linux操作系统的使用

3.掌握项目中的邮件发送、支付功能、缓存等技术的应用。

 

2.网站信息页面显示案例

      2.1需求分析

[案例一] 实现示例网站中 [公司简介] 页面的制作

HTML详解

 

2.1技术分析

2.2.1什么是 HTML？

HTML详解

超文本标记语言: Hyper Text Markup Language

超文本: 功能比普通的文本更加的强大.

标记语言: 使用一组标签对内容进行描述的语言,它不是编程语言.是一种解释性的语言。

      1. 为什么学习 HTML？

静态页面，通过浏览器显示出来的静态的页面。可以和后台程序组合成项目网站。

      1. HTML 的语法和规范
  2. Html 文件 都是以 .html 或者.htm 结尾.建议使用.html
  3. Html文件分为头部<head></head> 和主体<body></body>组成的.
  4. Html标签都是由开始标签和结束标签组成的（除自闭合标签）

例如:<br/>

  1. Html 标签忽略大小写，建议使用小写形式。
  2. Html源码中忽略空格和换行
    1. HTML 入门

<html><!--开始标签-->

<head><!--头部标签-->

<!--网页标题标签-->

<title>网页标题</title>

</head>

<body><!--网页内容标签-->

网页的主体内容

</body>

</html><!--结束标签-->

 

    1. HTML 排版标签
  2. 标题标签

从h1~h6 逐渐变小

特点：加粗并且加黑显示，独占一行，每行与其他行之间有间距

属性：align:取值 left(默认)/right/center

  1. 水平线标签<hr/>

属性：color:颜色

  size:粗细

  width:长度

  1. 段落标签<p></p>

特点：有段前段后间距，独占一行

  1. 换行：<br/>
  2. 字体标签<font></font>

必须结合属性使用

<font 属性=值>字体内容</font>

属性: color：字体的颜色,可以使用英文单词或者16进制

 size：字体大小 1  2  3  4  +1 +2 +3 -1 -2 -3 … point=1/72英寸

 face：设置字体 (黑体 ,楷体,华文隶书… )在系统中存在的字体

  1. 注释：<!--注释--> 快捷键ctrl+/
  2. 加粗<b></b>
  3. 倾斜<i></i>
      1. 步骤分析

第一步: 创建一个Html文件

第二步: 创建一个标题标题 显示极客营

第三步: 创建四个段落的标签,分别显示文字内容.

第四步: 对文字内容进行完善(加粗  变色等等)

 

补充:特殊符号 ( 空格 < > 等)

      1. 代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>网站信息显示</title>

</head>

<body>

<h2 align="center">品牌故事</h2>

<hr>

<h1>极客营</h1>

<p><font color="red">极客营</font>---是基于多年培训、实训基础之上累积而成的IT精英教育 连锁品牌。自成立以来，一直致力于精英化培训，施行高质量教学、 高品质服务、高薪就业这一“三高”标准，全面打造IT精英团队。 为推动“互联网+”、“大众创业、万众创新”这一国家级新兴战略培 育优质人才，孕育领军人物；经过多年发展，极客营人才实训连锁 基地已发展成为国内IT研发培训领导品牌。</p>

<p><b>企业定位</b>：极客营专业从事于IT类人才实训和人力资源解决方案。 我们的成功源自于不懈地帮助学员提高IT技术，增加社会核心竞争力 乃至提升生活品质；帮助合作伙伴解决人才培育培养问题， 定制化各类人才解决方案。</p>

<p><b>企业使命</b>：为提高学员技能而努力创新，提供最优秀、最具创新性的 IT教育产品，像对待生命一样致力于IT教学创新，让更多的人获得更新 、更好的IT教育。</p>

<p><b>价值观念</b>极客营及所有教职员工郑重承诺，以下四个核心价值观是我们 一切工作的基础：，成就学员——致力于学员的满意度与口碑，创业创新—— 追求教学质量和效率，专注于对学员和公司有影响的创新，精准求实—— 基于高质量教学与高薪就业，诚信正直——建立信任与高性能的伙伴关系， 秉承锐意创新与追求卓越的传统，极客营将是一个具有竞争力的IT教育先锋。</p>

<p><b>品牌精神</b>：合作、共赢、创新、成就。</p>

</body>

</html>

 

  1. 网站图片显示页面案例
    1. 需求分析

HTML详解

    1. 技术分析

1.<img/>标签

  属性：

1) src :访问的图片的路径

路径分为相对路径和绝对路径

  1. 相对路劲: 指定相对于当前文件的资源文件位置.

当前目录：直接写文件名称(文件名称包括后缀名称 .jpg .gif 等)

上一级目录：../文件名称（返回多级，加多个../）

下一级：目录名称/文件名称

  1. 绝对路径（用的较少）: 指定从盘符到资源文件的完整路径.

2) width：设置图片的宽度

3)height：设置图片的高度

一般情况下，设置图片的width和height，防止布局乱

)alt：当图片无法正常显示的时候给出的提示信息，它的显示效果与浏览器有关

5)title: 鼠标移到图片时，显示的提示信息

      1. 步骤分析

第一步：创建一个 html 文件

第二步：创建一个图片标签显示 logo 图片

第三步：创建一个图片标签显示 header 图片

      1. 代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>头部图片显示页面</title>

</head>

<body>

<!--logo图片-->

<img src="../img/logo.png" alt="logo图片" width="327" height="58" />

<!--header图片-->

<img src="../img/header.png" alt="header图片" width="299" height="51">

</body>

</html>

 

 

  1. 网站友情链接显示页面案例
    1. 需求分析

HTML详解

    1. 技术分析

【HTML的列表标签】

  1. 无序列表

<ul>

<li>****</li>

<li>百度</li>

</ul>

属性：

type:指定无序列表前项目符号

  1. 有序列表

<ol>

<li>淘宝</li>

<li>阿里巴巴</li>

</ol>

属性：

type:指定列表项前面的序号（1,a,A,i,I）

reversed:倒叙 html5里有的属性

start:起始值

 

  1. 超链接标签<a></a>

属性：href:超链接的地址

target:指定页面显示的位置

_self:默认取值，覆盖当前页面本身

_blank:打开新页面

frame的name取值

      1. 步骤分析
  • 创建一个无序列表
  • 使用超链接标签包含文本
      1. 代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>友情链接显示页面</title>

</head>

<body>

<!--列表项-->

<ul>

<li><a href="http://www.****.net">****</a></li>

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

<li><a href="#">淘宝</a></li>

<li><a href="#">阿里巴巴</a></li>

</ul>

</body>

</html>

 

  1. 网站首页显示案例
    1. 需求分析

网站首页显示页面

    1. 技术分析

单元格

 

 

 

 

 

 

 

 

 

1.HTML的表格标签

1) 表格标签（组合标签）：

<table>

<tr>

<td>单元格1</td>

<td>单元格2</td>

</tr>

   </table>

2) 表格的属性：

  table标签上

border ：表格边框

width ：表格宽度

height ：表格高度

align ：水平方向对齐方式 left/ center/ right

bgcolor ：背景色

cellspacing : 单元格与单元格之间的间距

cellpadding : 单元格与内容的填充

 

 

tr标签上的属性

bgcolor:背景色

align:本行文本对其方式 left/center/right

height:行高

td标签上属性与tr属性类似

valign:垂直对其方式，这是td所特有的属性。（top,center,bottom）

2.HTML的表格跨行跨列操作】

 

 

 

 

 

 

 

 

 

 

 

实现:

在td标签上使用下面的属性

跨列：colspan="值"

跨行：rowspan="值"

      1. 步骤分析

第一步：网站首页分为八行一列的表格

第二步：实现第一行头部：（一行三列表格）

HTML详解

第三步：实现第二行（用font，a实现）

HTML详解

第四步：实现第三行（静态图片）

第五步：实现第四行（嵌入一个三行七列的表格）
HTML详解

第六步：实现第五行（插入图片）

第七步：实现第六行：复制第四行内容

第八步：实现第七行（插入图片）

第九步：实现第八行（写文本标签）

      1. 代码实现

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>网站首页</title>

</head>

<body>

<!--第一步：8行1列表格-->

<table border="1" width="1300px" align="center">

<!--第一行-->

<tr>

<td height="58">

<!--嵌入一行三列的表格-->

<table border="1" width="100%" height="100%">

<tr>

<td width="40%">

<img src="../img/logo.png">

</td>

<td width="40%">

<img src="../img/header.png">

</td>

<td>

<a href="#"><font color="blue">  登录  </font></a>

<a href="#"><font color="blue">  注册  </font></a>

<a href="#"><font color="blue">  购物车  </font></a>

</td>

</tr>

</table>

</td>

</tr>

<!--第二行-->

<tr height="50">

<td bgcolor="black">

<a href="#"><font color="grey" size="4">  首页  </font></a>

<a href="#"><font color="white" size="3">  手机数码  </font></a>

<a href="#"><font color="grey" size="3">  电脑办公  </font></a>

<a href="#"><font color="grey" size="3">  电脑办公  </font></a>

<a href="#"><font color="grey" size="3">  电脑办公  </font></a>

 

 

</td>

</tr>

<!--第三行-->

<tr>

<td>

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

</td>

</tr>

<!--第四行-->

<tr>

<td height="525px">

<!--嵌入3行七列表格-->

<table border="1" width="100%" height="100%">

<tr height="50">

<td colspan="7">

<font size="6">  最新商品     </font>

<img src="../img/title2.jpg">

</td>

 

</tr>

<tr align="center">

<td rowspan="2" width="220px">

<a href="#"><img src="../img/big01.jpg"></a>

</td>

<td colspan="3" width="540" height="236">

<a href="#"><img src="../img/middle01.jpg"></a>

</td>

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

<tr align="center">

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

</table>

</td>

</tr>

<!--第五行-->

<tr>

<td>

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

</td>

</tr>

<!--第六行-->

<tr>

<td height="525px">

<!--嵌入3行七列表格-->

<table border="1" width="100%" height="100%">

<tr height="50">

<td colspan="7">

<font size="6">  热门商品     </font>

<img src="../img/title2.jpg">

</td>

 

</tr>

<tr align="center">

<td rowspan="2" width="220px">

<a href="#"><img src="../img/big01.jpg"></a>

</td>

<td colspan="3" width="540" height="236">

<a href="#"><img src="../img/middle01.jpg"></a>

</td>

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

<tr align="center">

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">电炒锅</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

</table>

</td>

</tr>

<!--第七行-->

<tr>

<td>

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

</td>

</tr>

<!--第八行-->

<tr align="center">

<td>

<p>

<a href="#"><font size="2" color="blue">关于我们</font></a>

<a href="#"><font size="2" color="blue">联系我们</font></a>

<a href="#"><font size="2" color="blue">招贤纳士</font></a>

<a href="#"><font size="2" color="blue">法律声明</font></a>

<a href="#"><font size="2" color="blue">友情链接</font></a>

<a href="#"><font size="2" color="blue">支付方式</font></a>

<a href="#"><font size="2" color="blue">配送方式</font></a>

<a href="#"><font size="2" color="blue">服务声明</font></a>

<a href="#"><font size="2" color="blue">广告声明</font></a>

</p>

<p>

<font size="2">Copyright © 2009-2017 极客商城 版权所有 </font>

</p>

</td>

</tr>

</table>

</body>

</html>

 
  1. 网站后台管理页面案例
    1. 需求分析

HTML详解

    1. 技术分析

1.框架集标签<frameset></frameset>

作用：将页面进行区域的划分

属性：cols="20%,*"  垂直分割成多列，取值可以是百分比，可以是数值，其中一个可以是*。

  rows=""      水平分割成多行，取值可以是百分比，可以是数值，其中一个可以是*。

 

注意事项：应用该标签时，页面中不能包含body标签
  frameset可以进行嵌套使用，完成较复杂的页面分割

2.frame标签

作用：在每个区域中使用frame标签显示页面

属性：src指定该区域显示的页面地址

      name:为区域起名，配合a标签上的target使用。

      1. 步骤分析

第一步：创建页面"后台管理系统页面.html"

第二步：使用frameset标签将页面进行划分成top，left，rigth三部分，为right部分frame添加name属性

第三步：分别创建top.html，left.html，right.html等页面

第四步：在left.html中创建列表和超链接文本，添加target属性。

      1. 代码实现

后台管理系统显示页面.html代码

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>后台管理</title>

</head>

<frameset rows="20%,*">

<frame src="top.html" />

<!--第二行嵌入一个框架集-->

<frameset cols="25%,*">

<frame src="left.html" />

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

</frameset>

</frameset>

</html>

 

left.html页面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<ul>

<li><a href="member.html" target="right">会员管理</a></li>

<li><a href="product.html" target="right">商品管理</a></li>

<li><a href="brand.html" target="right">品牌管理</a></li>

<li><a href="type.html" target="right">分类管理</a></li>

</ul>

</body>

</html>

相关推荐