HTML篇互联网IT计算机专业资料

第一章01篇

今日教学任务

＞网站信息页血案例（字体标签、排版标签）

＞网站图片信息页面案例（图片标签）

＞网站友情链接页面案例（列表标签）

＞网站首页案例（表格标签）

＞网站注册页面案例（表单标签）

＞网站后台页面案例（框架）

教学导航

教学目了解什么是标记语言

标了解什主要特性、主要变更和发展趋势

了解结构标签

驾驭的主要标签（字体、图片、列表、链接和表单标签）

教学方案例驱动法

法

一、网站信息页面显示案例

1.需求分析

我们要在阅读器中实现一段文本信息的显示，效果如下:

公司简介

牛"&畲QimgW瓮日.FVHF■•曲EWtm移―i,孰m.jrM4W，1EM・“，亚3的»开亚京20・

rtSK.BW・B杼屿H取“B・己“，疗金祀田，苗1为63.a“■gfMwnElQ

w”，、wra.5.<*»<rni.new^tmuiMiBt^^mHA.asMrwftrwftwAMt.mtR在上rt/itraMn*：■幡・仔网一wtaswatA

•邓MI祀•・丁益傅?不任跖〜E㈠”.BW：.WLA.dwnmu最“u.0不・M膘・mir祁

x*w..AHftiirmAM.

<p»rB=*iwimiwfisn^niM<wp.i?4tiiw*a3«»m.R霰绅awr不，。人仙・财，・一夏”力求，缉,9WA/iuir(nmQ从•开发工等，vr«

y£it”・riMf”.yg.

-1U».4tt桓户幽■播通户”♦&色・,«1Ht.科・寅动作，人才・0¥tf・

2.技术分析

【的概述】

2.1什么是？

：超文本标记语言，它不是编程语言，它干脆被阅读器说明执行。

超文本：比一般文本功能更加强大。

标记语言：运用一组标签对内容进行描述的一门语言。

2.2为什么要学习？

正常状况，我们会运用别人已经写好的静态页面，假如你没有相关学问

的了解，那么你不能进行下一步的开发了，所以我们须要学习相关技术。

2.3在哪些地方会运用？

但凡涉及到页面设计的内容，都可以运用技术。

2.4怎么运用？

的语法和规范:

•文件都是以或者结尾。建议大家运用结尾。

•文件都是由头部分和体部分组成（头部分<）<>体部分<>◊）

•的标签都是成对出现的。（<b>内容<></»

・标签忽视大小写的建议大家运用小写。

>字体标签

◊◊:代表的是字体标签。

属性：，字体的大小。从1到7逐步变大，超过7的根据7来进行显示

，代表是颜色，可以运用单词表示，还可以运用十六进制.

，代表的是字体，选取的字体必需是本机已存在的。

>排版标签

标题标签：</>

加粗加黑显示的。

水平线标签：</>

加粗标签：<b><>

换行标签：</>

段落标签：<p><>

3.步骤分析

第一步：创建一个文件

其次步：创建一个标签

第三步：创建一个水平线

第四步：创建四个段落

第五步：对段落里面的文件进行一些样式的变更。

4.代码实现

<>

<>

<〃8">

◊网站信息页面显示<〉

<>

<>

<111>公司简介<1>

</>

<p><”>"中关村黑马程序员训练营"◊是由<b>传智播客◊联

合中关村软件园、，并托付传智播客进行教学实施的软件开发高端培训

机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而

企业招不到优秀人才的困扰。</>目前，”中关村黑马程序员训练

营”已成长为行业“学员质量好、课程内容深、企业满足”的移动开发

高端训练基地，并被评为中关村软件园重点扶持人才企业。<>

<p>黑马程序员的学员多为高校毕业后，有志向、有幻想，想从

事行业，而没有环境和机遇变更自己命运的年轻人。黑马程序员的学员

筛选制度，远比现在90舟以上的企业聘请流程更为严格。任何一名学员

想胜利入学“黑马程序员”，必需经验长达2个月的面试流程，这些流

程中不仅包括严格的技术测试、自学实力测试，还包括性格测试、压力

测试、品德测试等等测试。亳不夸张地说，黑马程序员训练营全部学员

都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低

企业的用人风险。◊

中关村黑马程序员训练营不仅着重培育学员的基础理论学

问，更注意培育项目实施管理实力，并亲密关注技术革新，不断引入先

进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开

发工作，更能给企业带来新的技术体系和理念。◊

<P》始终以来，黑马程序员以技术视角关注产业发展，以深度共

享推动产业技术成长，致力于弘扬技术创新，提倡共享、开放和协

作，努力打造高质量的人才服务平台。<>

<>

<>

二、网站图片显示页面

1.需求分析

假如一个网站全部运用文字进行描述，会显得比较，我们希望希望添加

一些图片让整个网页显示得更加丰富。效果如下：

黑马程序员正品刎砒©*»货州欧

©www.ithG

2.技术分析

图片标签：</>

属性：

•：指定图片的位置（路径）

相对路径：

：代表的是当前书目

：代表的是上一级书目，

肯定路劲：

E:\\\\0423就业班\01\资料\01\课堂演示图片汇总,

•：指定图片的宽度。

•：指定图片的高度。

：当这个图片无法正常显示的时候给出的提示信息。（不同的阅读器显

示的效果不一样）

显示效果：

x将4解恨

火狐显示效果：

剁手不解恨

3.步骤分析

第一步：创建一个文件

其次步：运用标签引入的图片

第三步：运用标签引入广告图片。

4.代码实现

<>

<>

<"8”>

◊网站图片显示页面<〉

<>

<>

<"2"/>

<""/>

<>

<>

三、网站列表页面显示

1.需求分析

我们希望在网站首页的底部（友情链接），实现一个显示其他公司的信息。

2.技术分析

>列表标签

列表标签分为：有序列表和无序列表。

无序列表：

<>

<>列表项一<>

◊列表项二<>

◊列表项三。

<>

属性：

:实心小圆点

:实心小方块

:空心小圆圈

有序列表：

<>

◊列表项一◊

◊列表项二<>

◊列表项三<>

<>

<>

<T"5"批注[ThinkPadl]:从几起先（必需是有序列表，而

且是数字）

◊阿里巴巴<>批注[ThinkPadZ]:降序显示（5432）

◊京东＜＞

◊百度＜＞

◊传智播客＜＞

4.代码实现

＞超链接标签

＜a＞内容◊代表的是超链接

属性：

:点击超链接内容跳转到的一个位置。

：在阅读器哪个位置显示

在当前选项卡标签进行显示

在新的选项卡标签进行显示

<"8">

◊友情链接。

<>

<>

<>

<><a阿里巴巴◊◊

<Xa〃案例一：网站信息页面显示/网站信息页面显示"

京东

◊<a"案例一：网站信息页面显示/网站信息页面显示“

百度◊<>

<><a"案例一：网站信息页面显示/网站信息页面显示“〃〃>

传智播客<><>

<>

<>

<>

四、网站首页显示案例

1.需求分析

我们希望在阅读器中显示一个商城首页的页面，显示的效果如下:

2.技术分析

>表格标签

<>批注［ThinkPads］:代表整个表格

<>

<><>批注［ThinkPad的:代表的是单元格（列）

<>批注［ThinkPads］:代表的是行

<>

属性：

:表格的边框

:设置表格的宽度（单位可以是像素，还可以是百分比）

：设置表格的高度（单位可以是像素，还可以是百分比）

：设置单元格和单元格的间距

：设置单元格月里面内容的间距

:设置表格显示的位置（、、）

:这是表格的背景颜色。

跨行、跨列的操作

需求:

属性介绍：

:跨行（在同一列才能跨行）

:跨列（在同一行才能跨列）

<>

<"8">

◊表格的跨行跨列。

<>

<>

<"1""0""0〃〃500〃〃300"

<>

<"2"”》11。

0130

0140

<>

<>

0210

<〃2""2">

<〃1”"10C旷"100旷》

<>

OHO

0120

0130

<>

<>

0210

0220

0230

<>

<>

0310

0320

0330

<>

<>

<>

0240

<>

<>

0310

<"2">34<>

<>

<>

0410

0420

0430

<>

<>

<>

<>

3.步骤分析

第一步：创建一个八行一列的表格

其次步：实现第一行（嵌套一个一行三列的表格），然后分别对嵌套表格单

元格进行实现

第三步：实现二行（运用字体标签来实现，带有超链接效果）

苜灾XURg电跖办公电3＞公电电?公

第四步：在第三行放置一张轮播图片一（静态的）

第五步：在第四行中嵌登一个三行七列的表格（分别实现）

第六步：在第五行放置一张图片（广告）

第七步：在第六行复制第四行的内容

第八步：在第七行放置一张图片

«UMM-»UW2W"XBMM\JZaWMM

第九步：在第八行添加一些文字信息和超链接

父于3MW：»W±"E量-®CMKKflMK1WFBWB

C«WNe2006-201A■趣.

4.代码实现

<>

<>

<"8”>

◊网站首页显示页面<〉

<>

<>

<〃0”"1300""""0""0">

<1部分）

<>

<>

〈嵌套一个一行三列的表格）

<"100%""0"〃0"〃0〃>

<"50">

<“33.3%”〉

<"2〃"47”/》

<>

<“33.3g》

<"""47"/>

<>

<”33.34

；<a〃#〃>登录<>;

<a"#"》注册◊;

<a"#”>购物车<>

<>

<>

<>

<>

<>

<2.导航栏部分）

<〃50〃>

;<a〃#"><""5">首页<〉<>;

<a"#〃><""〃3">手机数码<>◊;

<a〃#"><""〃3">电脑办公<><>;

<a""3"〉鞋靴箱包<〉<〉;

<a"#〃X"〃〃3">孕婴保健◊◊

<>

<>

<3.轮播图）

<>

<>

<"1""10C%"/>

<>

<>

<4.热门商品》

<>

<>

〈嵌套了一个三行七列的表格）

<〃0〃"10C%"〃0"〃0〃>

<"50"》

<7>

;<"5">热门商品<>;

「2〃/>

<>

<>

<>

<"2""600""190”>

<"or〃ioo%”"ioo%"/>

<>

<"3""555""250">

<a-1"TOO%"T00%”>

<>

<"185""250"

<a'#"><"03"TOO%""50%"/X>

<p><"”>电炖锅<><>

<p><，，，z>¥299<><>

<>

<"185""250"

<a"#"><"03”"100%""50%"X>

<p><电炖锅◊<>

<p><"〃>¥299<><>

<>

<"185""250"

<a"#"〉<"03"TOO%"

<p><"”>电炖锅<><>

<p><"”>¥299<〉<>

<>

<>

<>

<"185""250〃"〃>

<a"#"><"03”"100%"/><>

<p><">电炖锅<><>

<p><”>¥299<〉<>

<>

<"185""250"”"》

<a'#"><"03”"100%"/><>

<p><电炖锅◊<〉

<p><”>¥299<><>

<>

<"185""250"

<a'#"><"03""100%"/><>

<p><电炖锅◊<>

<p><”>¥299<X>

<>

<"185""250"

<a'#"><"03"TOO%"/><>

<p><”>电炖锅◊<>

<p><"”>¥299<〉<>

<>

<"185""250"

<aW)<"03""100犷/><>

<p><电炖锅◊<>

<p><>¥29900

<>

<"185"〃250"“"》

<a"MX"03”"100%"/><>

<pX”>电炖锅<><>

<p><”>¥299<><>

<>

<>

<>

<>

<>

<5.广告图片》

<>

<>

<"""100*"/>

<>

<>

<6.热门商品）

<>

<>

〈嵌套了一个二行七列的表格）

<〃0〃“10C旷"0〃"0〃>

<"50”）

；<"5">热门商品<>;

<"2"/>

<>

<>

<>

<"2""600""190”>

<"01""100旷"100%"/>

<>

<"3""555""250”>

<a-01"〃100%”

<>

<"185""250"〃”>

<a"#"><"03”"100%""50%"/X>

<p)<""》电炖锅◊<>

<p><**>¥29900

<>

<"185""250"〃”>

<a"#"><"03"TOO%”"50V7X〉

<p><"〉电炖锅<X>

<p><"”>¥299<X>

<>

<"185""250"〃”>

<a"#"><"03"TOO%""50%"/X>

<p><"”〉电炖锅。<>

<p><”>¥299<X>

<>

<>

<>

<"185""250"

<a"#"><"03""100%"/><>

<p><电炖锅◊<>

<p><**>¥29900

<>

<"185""250"〃”>

<a"#"><"03”"100%"/><>

<p)<""》电炖锅◊<>

<p><**>¥29900

<>

<"185""250"〃”>

<a"#"><"03"TOO%"/><>

<p><"〉电炖锅<X>

<p><"”>¥299<X>

<>

<〃185""250"〃”>

<a"#"X"03"〃100%”/><>

<p><电炖锅◊<>

<pX”">¥299<><>

<>

<〃185"〃250"〃〃>

<a"#"X"03""100%，//><>

<p><电炖锅◊<〉

<p><”>¥299<X>

<>

<"185""250"

<a'#〃><"03"〃100旷/><>

<p><电炖锅◊<>

<pX”">¥299<X>

<>

<7.广告图片》

<>

<>

<〃“〃100旷/>

<>

<>

<8.友情链接和版权信息>

<>

<a〃#〃>关干我们<>

<a联系我们<>

<a"#">招贤纳士<>

<a"#"》法律声明。

<a"#〃>友情链接。

<a"#〃>支付方式<>

<a"#〃>配送方式<>

<a"#">服务声明<>

<a广告声明<>

<P>的2005-2016传智商城版权全部◊

<>

<>

<>

<>

五、网站注册显示页面案例

1.需求分析

用户假如想要在网站进行购物，那么必需成为这个网站的会员，在成为

会员之前，得先注册。我们就要实现一个注册的功能。效果：

2.技术分析

＞表单标签

须要提交到服务器端的表单须要运用◊◊括起来。

属性：

:指定表单的名称

：整个表单提交的位置。

:提交的方式()

/〃〃〃〃、批注［ThinkPads］:指定表单的类型。

<#>

批注［ThinkPad7］:隐藏域

<"〃〃/>批注［ThinkPddS］：文本输入性

批注［ThinkPads］:用于后台获得该字段的值。

用户名：＜"""""100〃"4"”请输入用户名"〉＜/＞

批注［ThinkPadie］:输入框的宽度。

密码：<〃"/></>批注［ThinkPadll］:输入内容的长度

批注［ThinkPad"］:密码框

面试题:

和的区分

1.提交方式会将表单里面数据显示在地址栏，不够平安，长度有限制

2.提交方式不会将表单里面数据显示在地址栏，比较平安，长度没有限制。

3.步骤分析

第一步：创建一个五行一列的表格

其次步：复制之前的内容（第一行、其次行、第四行、第五行）

第三步：第三行嵌套一个十行两列的表格（表单）

会员注册USERREGISTER

用户名zhangsan

密码请输入密码

确认密码请输入确认密宵

EmailEmail

姓名请输入姓名

的J嫌先©女

出生日期

蛤证码I〕HH

硼

4.代码实现

<3.注册表单》

<"600”>

<7'〃>

<"4""0""0""800""500*""〃”>

<>

<"2">

<〃6">会员注册<>

<>

<>

<>

◊用户名。

<>

/〃〃〃〃"LA"/、

\bO//

<>

<>

<>

C密码。

<>

<〃""""07>

◊怅不<>

<>

<>

<>

uu，，”>

<>

◊及科c

<>

<>

<>

〈/""””>

<>

<><>

<>

<>

<>

</“og〃““““>

<>

◊剂堂气瓢<>

<>

<>

<>

<>

(〃〃〃用〃/〉男

<"…"女"/》女

<>

<>

<>

<>诞生日期。

<>

(""""

〃50”/>

<>

<>

<>

◊验证码。

<>

"〃"""cl"/、