前端入门【HTML5】

article/2025/10/1 13:54:07

学习目标

能够使用idea创建html文档
能够使用h1~h6,hr,p,br等与文本有关的标签
能够使用有序列表ul-li和无序列表ol-li显示列表内容
能够使用块级标签div与内联标签span
能够使用图片img标签把图片显示在页面中
能够使用超链接a标签实现页面跳转
能够使用table，tr，td标签定义表格

第一章 HTML概述

1、HTML概念

1.1 什么是HTML

​ HTML:Hyper Text Markup Language，超文本标记语言。是用来帮助我们编写网页的。

【超文本】 ：网页本身是一个文本文件 ，而超文本指的是这种文件中既可以包含文本信息 ，又可以包含图片 ，音频 ，视频 和链接 等非文字的信息。

【标记语言】 ：标记，也叫做标签。也就是说HTML这门语言是由标签组成的。

1.2 什么是HTML5

​ 2014年10月29日，万维网联盟泪流满面地宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布，这是一次重大的革新。

​ HTML5将会取代1999年制定的HTML 4.01、XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求，为桌面和移动平台 带来无缝衔接的丰富内容。

2、开发HTML

2.1 HTML文件

​ 使用浏览器打开一个网页，在网页上点击鼠标右键–>检查，浏览器下方会弹出一个控制台，在Element栏中即可展示当前网页的html代码。如下图所示：
在这里插入图片描述

​ 在这个页面上按Ctrl+S后可以将这个html文件保存下来，保存后的文件的后缀名为html。如果使用文本编辑工具打开这个文件，发现里边全都是标签，如果使用浏览器打开则能够显示出正常的网页。这说明html文件有以下特点：

  1. html文件后缀名是.html（也可以是.htm）；
  2. html文件由html标签组成；
  3. html文件是由浏览器来运行的；

2.2 HTML文件的基本结构

<!DOCTYPE html>
<html ><head><meta charset="UTF-8"><title>Title</title></head><body></body>
</html>

  1. <!DOCTYPE html> ：文档声明，告诉浏览器当前的html是那个版本的；

    1. HTML4.01 版本的文档声明：
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
    1. HTML5 版本的文档声明：
    <!DOCTYPE html>

  2. <html></html> ：html标签是html文件的根标签，html文件必须以<html> 开头并以</html>标签结尾 ；

  3. <head></head>： head标签是html文件的头部标签，head标签中的内容一般不会显示在浏览器的窗体中，其中会设置一些当前html文件的配置信息（给浏览器用的）。head标签中通常会有以下两个标签：

    1. <meta charset="UTF-8"> :meta标签设置了这个html文件的元信息；
    2. <title>Title</title> ：title标签设置了这个html文件的标题，会显示在浏览器的标题栏中；

  4. <body></body> ：body标签是html文件的主体标签，其中书写的内容会显示在浏览器的窗体中；

2.3 入门案例

【需求】编写html文件，在浏览器上显示出"Hello World!"

【实现步骤】

  1. 新建一个文本文件:hello.txt；
  2. 将这个文件的后缀名改为html；
  3. 使用文本编辑工具打开这个文件；
  4. 将HTML文件的基本结构书写进去；
  5. 在body中书写"Hello World!"；
  6. 使用浏览器打开这个文件；

【参考代码】

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>Hello World!
</body>
</html>

2.4 小结

  • HTML是一种超文本标记语言，是用来编写网页的；
  • HTML文件属于文本文件，后缀名为html 或htm ;
  • HTML文件由标签组成；
  • HTML文件的基本结构包括：文档声明，html，head，title，meta和body标签；
  • HTML文件是由浏览器来解释运行的；

3、使用IDEA创建HTML

 实际的开发过程中，我们不会使用记事本来编写html文件，因为效率太低。我们基础班用来编写Java代码的开发工具IDEA整合了强大的前端开发工具WebStorm。所以，我们可以直接使用IDEA来创建项目并编写HTML文件。只是，我们这里创建的不是Java Project而是Static Web项目。创建过程如下：
  1. 第一步：File—>New—>Project

在这里插入图片描述

  1. 第二步：选择Static Web项目

在这里插入图片描述

  1. 第三步：填写项目名和指定项目存储的路径

在这里插入图片描述

  1. 第四步：创建完成

在这里插入图片描述

Static Web项目创建完成之后，项目目录下面只有idea的配置文件。我们需要在项目的根目录下面创建三个directory：html，css，js

在这里插入图片描述

  1. 第五步：在html文件夹上面，点击鼠标右键：New -->HTML File即可创建HTML文件；

在这里插入图片描述

在这里插入图片描述

  1. 第六步：运行html文件：

    点击IDEA编辑区右上方的浏览器图标即可快速使用浏览器打开当前的html页面。

在这里插入图片描述

第二章 标签和标签属性

1、标签

html的标签是由尖括号+标签名+标签体组成的，如：<body> Hello World</body> ;

1.1 标签从哪来

​ 我们使用的html标签都是由W3C组织预先定义好的。

在这里插入图片描述

我们可以通过查询API来查找要使用的标签；

在这里插入图片描述

1.2 标签分类

按照标签书写时需要书写标签的个数，可以将标签分为：单标签和双标签；

标签类型示例说明
单标签<br/> 或<br >由1个标签组成
双标签<body> Hello World! </body>由开始标签和结束标签 组成

【注意】结束标签前面需要加/;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--标签来源：xml:可扩展的标签语言<book> <price>1</price> </book>html:的标签是由w3c组织预先定义标签分类：单标签： <br>  <br/>    功能单一双标签： 开始标签 + 标签体 + 结束标签      <body> aasdseew </body>注意事项：双标签的结束标签前需要加： /--><!-- 需求：在页面上分别书写单标签和双标签，并运行！-->asdsadsa <br>asdsaaadsa<a>asdsaewtsdfsdfdfd</a></body>
</html>

2、标签属性

​ HTML标签只是给我们提供了在页面上固定一块区域(或者body标签)或者是某个单一功能，而现实生活中我们需要在页面上展示出的效果往往是比较复杂的。这样，单纯地使用HTML的标签是不能够满足我们的需求的。这时候，我们就需要给标签添加一些属性来完成这些标签之外的功能。

【需求】将浏览器窗体区域的背景颜色设置成红色

需求分析：

  1. 浏览器窗体部分可以使用body标签来定义；
  2. 将窗体的背景颜色设置成红色可以在body标签上添加属性：bgcolor="red"来实现；

【参考代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body bgcolor="red"><!-- 标签属性：作用：给标签增加额外功能，修饰标签写法： 属性名 = "属性值"学习标签：1、明确标签的基本作用；2、明确标签的常用属性；--><!--【需求】将浏览器窗体的背景变成红色--></body>
</html>

2.1 标签属性的作用

​ 标签属性的作用定义了标签额外的功能。

2.2 标签属性的书写规则

​ 书写格式：属性名 = “属性值”;

标签类型书写示例说明
单标签<hr size = "3">直接在标签中添加属性="属性值"
双标签<body bgcolor="red"></body>在开始标签中添加属性="属性值"

【注意事项】：属性值必须添加双引号" " ；

3、HTML标签的学习方法

  1. 学习标签的基本作用；
  2. 学习这个标签的常用属性；

第三章 常用标签

1、新闻字体标签

​ 新闻字体标签主要指网页上的文字效果及排版标签，通过对新闻字体标签的学习，我们最终要做出如下效果：新闻字体案例 ;

【文字素材】：

公司简介
"中关村黑马程序员训练营"是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。

【相关标签】：

标签名常用属性使用方法说明
halign：水平对齐方式<h1 align="center">公司简介</h1>水平居中的一级标题。标题标签取值：h1~h6
hrsize：粗细，color：颜色,noshade:取消阴影<hr size="2" color="orange" noshade="noshade"/>在页面上创建一条size="2"橘黄色的水平线
fontcolor：颜色，size：大小，face：字体<font color="red" size="7" face="宋体">传智播客</font>修饰文字的颜色，字号和字体
b无<b>传智播客</b>将文字加粗
i无<i>黑马程序员</i>文字倾斜
p无<p>传智播客，黑马程序员</p>将文字划分段落
br无传智播客<br />黑马程序员手动换行
【练习一】h标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--h标签：作用：修饰文章的标题分类：h1 -- h6属性：align:center:居中left:左对齐right：右对齐-->公司简介<h1 align="center">公司简介</h1><h2 align="left">公司简介</h2><h3 align="right">公司简介</h3><h4>公司简介</h4><h5>公司简介</h5><h6>公司简介</h6></body>
</html>
【练习二】hr标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--hr标签：作用：在页面上创建一条水平线常用属性：noshade: noshade="noshade" 取消水平线的阴影size:  1-n                  设置水平线的粗细color:                      设置水平线的颜色颜色取值：1、颜色名取值： color="red";2、十六进制值： color="#7FFFD4";--><!-- 【需求】1.在页面上创建一条水平线；2.在页面上创建一条水平实线；3.在页面上创建一条红色的水平实线；4.在页面上创建一条粗细为6的水平实线；--><hr><hr noshade="noshade"><hr noshade="noshade" size="1"><hr noshade="noshade" size="100" color="red"><hr noshade="noshade" size="100" color="Aquamarine "><hr noshade="noshade" size="100" color="#7FFFD4"><hr noshade="noshade" size="100" color="#509DA5"></body>
</html>
【练习三】font标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--font标签：作用：设置文字的颜色，字号，字体属性：color：设置文字的颜色size：1-7face：字体   从系统中获取字体样式注意事项：1、font标签的字号：1~72、font标签的字体样式是从系统中获取的--><!-- 【需求】1.将文字"传智播客"的字体设置如下效果：1.字号为5;2.颜色为红色;3.字体为宋体;--><font color="yellow">传智播客</font> <br><font color="yellow" size="1">传智播客</font> <br><font color="red" size="7" face="宋体">传智播客</font> <br><font color="red" size="100" face="小篆">传智播客</font> <br></body>
</html>
【练习四】b标签和i标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--b标签：blod    粗体作用：将文字加粗i标签：italic  斜体作用：将文字倾斜注意事项：标签可以嵌套，但是要正确嵌套--><!-- 【需求】1.给"传智播客"文字加粗；2.给"黑马程序员"文字倾斜；3.给"上海市浦东新区"加粗和倾斜；-->传智播客 <br><b>传智播客</b> <br><i>黑马程序员</i> <br><b><i>上海市浦东新区</i></b> <br><i><b>上海市浦东新区</b></i> <br></body>
</html>
【练习五】p标签和br标签
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--p标签：作用：设置文章的段落	br标签：作用：手动换行			区别：p标签上下两行中间有空行br：只手动换行--><!-- 【需求】1.给下列文字添加p标签修饰；传智播客传智播客传智播客传智播客2.给下列文字添加br标签修饰；黑马程序员黑马程序员黑马程序员黑马程序员3.运行后观察效果：--><p>传智播客</p><p>传智播客</p><p>传智播客</p><p>传智播客</p>黑马程序员<br>黑马程序员<br>黑马程序员<br>黑马程序员<br></body>
</html>
【案例】新闻字体综合案例
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h2 align="center">公司简介</h2><hr size="2" color="orange"><p><font color="red">“中关村黑马程序员训练营”</font> 是由 <b><i>传智播客</i></b> 联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。<br>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p><p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。</p><p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p><p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p></body>
</html>

2、特殊字符

​ 特殊字符指的是由于浏览器对标签的解析而导致一些字符不能够在页面上正常显示，这是后就需要使用到这类的特殊字符来展示这些字符。

常用的特殊字符有以下几个：

特殊字符含义示例
&nbsp空格" "
&lt小于号<
&gt大于号>
&copy版权符©

【练习】特殊字符

需求：在页面上展示如下效果

在这里插入图片描述

要求：

   	1. "文"和"字"之间要有4个空格；2. 在页面上显示font的标签的使用方法：`<font color="red">传智播客</font>`；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--【需求】1."文"和"字"之间要有4个空格；2.在页面上显示font标签的使用方法，如：<font color="red">传智播客</font>--><!--常用特殊字符：空格： &nbsp;<   : &lt;    less than>   : &gt;    greater than版权符：&copy;  版权-->文&nbsp;&nbsp;&nbsp;&nbsp;字 <br>在页面上显示font标签的使用方法，如：&lt;font color="red"&gt; <font color="red">传智播客</font>   &lt;/font&gt; <br>2017 &copy; sh.itcast.cn</body>
</html>

3、图片标签

​ 图片标签是img标签，作用是在网页上引入一张图片。

3.1 语法：

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

3.2 常用属性

我们可以通过img标签的以下属性来对引入的图片进行修饰；

属性使用示例说明
src<img src="../../mm.jpg"/>设置图片的路径
alt<img alt="这是一个球" />图片无法显示时的替代文本
width<img width="200px" />设置图片的宽度
height<img height="200px"/>设置图片的高度
title<img title="美女"/>设置鼠标停留在图片上显示的文字

【注意】：width和height在设置其中任意一个的时候，另一个属性会自动根据图片原来的宽高比例，自动变化；

【练习】图片标签练习

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!-- 图片标签：img作用：在页面上引入一张图片属性：src：设置图片的路径width:宽度  px,%heigth：高度alt：在图片无法显示时出现的替代文字title：设置图片的标题，鼠标停留在图片上的时候显示--><img src="../img/mm2.jpg" width="50%"  alt="这是一个球" title="美女" /></body>
</html>

4、列表超链接

4.1 列表

列表标签的作用是在页面上显示一列数据。在html中列表分为：无序列表 和有序列表 。

列表标签是一个组合标签，具体组成如下：

无序列表：ul>li;

有序列表：ol>li;

标签名使用示例常用属性说明
无序列表<ul> <li>百度</li> </ul>type：cicle，disc，square不需排序
有序列表<ol><li>百度</li></li>type:1,a,A,i,I需要排序，序号由type属性决定
【练习一】无序列表
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--无序列表：ul>li作用：在页面上创建一列不需排序的数据属性：type：type="circle"type="disc"type="square"--><ul><li>百度</li><li>淘宝</li><li>传智播客</li></ul><ul type="circle"><li>百度</li><li>淘宝</li><li>传智播客</li></ul><ul type="disc"><li>百度</li><li>淘宝</li><li>传智播客</li></ul><ul type="square"><li>百度</li><li>淘宝</li><li>传智播客</li></ul></body>
</html>
【练习二】有序列表
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--有序列表：ol>li作用：在页面上创建一个需要排序的列表属性：type：改变序号的而表现形式--><ol><li>淘宝</li><li>百度</li><li>传智播客</li></ol><ol type="1"><li>淘宝</li><li>百度</li><li>传智播客</li></ol><ol type="a"><li>淘宝</li><li>百度</li><li>传智播客</li></ol><ol type="A"><li>淘宝</li><li>百度</li><li>传智播客</li></ol><ol type="i"><li>淘宝</li><li>百度</li><li>传智播客</li></ol><ol type="I"><li>淘宝</li><li>百度</li><li>传智播客</li></ol></body>
</html>

4.2 超链接【重点】

​ 超链接标签的作用是，使被修饰的文字能够点击，点击后能够跳转到设置的外部网络资源；

4.2.1 基本语法
<a href="http://www.baidu.com">百度</a>
4.2.2 常用属性

通过a标签的href可以设置要跳转的地址，通过设置target属性能够设置跳转的方式。

属性取值使用示例说明
hrefhref=“地址”<a href="http://www.baidu.com">百度</a>设置跳转的地址
targettarget="_self"或 target="_blank"<a href="http://www.baidu.com" target="_self">百度</a>target="_self"：在当前页面打开链接资源；target="_blank"：在一个新开的页面打开链接资源

【注意】当href属性取值为：javascript:; ，javascript:void(0) 或者# 时，这个链接被阻止。超链接就变成了空链接。

【练习】a标签练习
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--a标签：-----超链接作用：链接到外部的网路资源属性：href:设置跳转的路径target:_self:在当前页面打开链接资源  默认打开方式_blank:新开一个页面打开链接资源--><a href="http://www.itcast.cn" target="_self">传智播客_self</a><br /><a href="http://www.itcast.cn" target="_blank">传智播客_blank</a><br /><!--a标签：----空链接--><a href="javascript:;">空链接</a><br /><a href="javascript:void(0);">空链接</a><br /><a href="#">空链接</a><br /></body>
</html>

【案例】列表超链接案例

【需求】使用列表和超链接标签实现如下可点击的列表

在这里插入图片描述

需求分析：

   	1. 在页面上创建一个无序列表，序号设置为方块；2. 每个列表项的文字使用a标签包裹，设置成超链接；

【参考代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--【需求】在页面上创建一个无序列表，要求列表项的文字有超链接效果--><ul type="square"><li><a href="http://www.baidu.com" target="_blank">百度</a></li><li><a href="">传智播客</a></li><li><a href="">淘宝</a></li></ul></body>
</html>

5、表格标签【重点】

5.1 作用

​ 在html中表格标签的作用有两个：

  1. 格式化展示数据；
  2. 网页布局（目前用得比较少）；

5.2 组成

​ 表格标签是一个组合标签，由以下标签组成：

标签名作用常用属性说明
table表格容器border：边框；width：宽度；height：高度；cellspacing：单元格间距；cellpadding：单元格与内容之间的距离；bgcolor：表格背景色
tr行align：left,center,right 设置当前行的水平对齐方式tr中必须嵌套td或者th
td列（单元格）align：设置单元格内容的水平对齐方式；colspan：跨列；rowspan：跨行；
th列标题同td一样
caption表格的标题标签必须紧随 table 标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

【注意】

  1. tr中必须嵌套td或者th；
  2. 只有td或者th中才能书写要显示的内容；

【练习一】制作普通表格

需求：在页面展示一个3行4列表格，内容包括：
1）编号、姓名、性别、年龄
2）设置边框1px
3）单元格边沿与其内容之间的空白（cellpadding）为5px
4）单元格之间的空白（cellspacing）为5px
5）背景颜色（bgcolor）为黄色
6）宽度400px，高度300px。

【参考代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--【案例】制作一个普通表格需求：在页面展示一个3行4列表格，内容包括：1）编号、姓名、性别、年龄2）设置边框1px3）单元格边沿与其内容之间的空白（cellpadding）为5px4）单元格之间的空白（cellspacing）为5px5）背景颜色（bgcolor）为黄色6）宽度400px，高度300px。--><table width="400px" height="300px" border="1px" cellpadding="5px" cellspacing="5px" bgcolor="yellow"><tr><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table></body>
</html>

【练习二】制作跨行表格

需求：

需求1: 实现跨行，制作电话本
设置一个表格4行2列：
1）边框为：1
2）单元格之间的距离（cellspacing）为：0
3）单元格与内容之间的距离为：10
4）表格宽度为：300
5）合并姓名为张三的单元格

如下图所示：
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--【案例】制作跨行表格需求1: 实现跨行，制作电话本设置一个表格4行2列：1）边框为：12）单元格之间的距离（cellspacing）为：03）单元格与内容之间的距离为：10 4）表格宽度为：3005）合并姓名为张三的单元格--><table border="1px" cellspacing="0" cellpadding="10" width="300px"><tr><th>姓名</th><th>手机号</th></tr><tr><td rowspan="2">张三</td><td>13333333333</td></tr><tr><td>13333333334</td></tr><tr><td>李四</td><td>13333333335</td></tr></table></body>
</html>

【练习三】制作跨列表格

【需求】

需求2: 实现跨列，制作电话本
设置一个表格3行3列：
1）边框为：1
2）单元格之间的距离（cellspacing）为：0
3）单元格与内容之间的距离为：10
4）表格宽度为：400
5）合并内容为手机号的单元格

如下图所示：

在这里插入图片描述

【参考代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--需求2: 实现跨列，制作电话本设置一个表格3行3列：6）边框为：17）表格之间的距离（cellspacing）为：08）表格与内容之间的距离为：10 9）表格宽度为：30010）合并内容为手机号的单元格--><table cellspacing="0" border="1px" cellpadding="10px" width="400px"><tr><td>姓名</td><td colspan="2" align="center">手机号</td></tr><tr><td>张三</td><td>13333333333</td><td>13333333334</td></tr><tr><td>李四</td><td>14444444444</td><td>14444444445</td></tr></table></body>
</html>

【小结】制作跨行跨列表格的思路

1.制作一个完整的数据表格；
2.填充数据；
3.把相同的数据表格合并；
4.把被合并的部分删除掉；

第四章 黑马旅游网首页案例

1、案例效果

在这里插入图片描述

2、页面布局

整个页面可以划分成一个9行1列的表格，然后再在每一行的td中嵌套table完成局部的布局。注意：需要把布局table的width设置成100%。

在这里插入图片描述

【思路】

第一步：整体布局  9行1列表格
第二步：具体布局头部：第1行：头部图片第2行：头部工具条第3行：头部导航条第4行：头部轮播图主体：第5行：黑马精选第6行：国内游第7行：境外游底部：第8行：底部图片第9行：底部版权信息

【参考代码】

注意：给table设置边框知识方便观察布局，所有的表格嵌套必须在td中书写。

<table><!--头部：--><tr><td><!--第1行：头部图片--></td></tr><tr><td><!--第2行：头部工具条 ：1行3列表格--></td></tr><tr><td><!--第3行：头部导航条--></td></tr><tr><td><!--第4行：头部轮播图--></td></tr><!--主体：--><tr><td><!--第5行：黑马精选 2行4列--></td></tr><tr><td><!--第6行：国内游 3行4列--></td></tr><tr><td><!--第7行：境外游 3行4列--></td></tr><!--底部：--><tr><td><!--第8行：底部图片--></td></tr><tr><td><!--第9行：底部版权信息--></td></tr></table>

3、填充内容

3.1 头部

1 、头部广告

​ 头部广告：在td中嵌入一个img标签，宽度设置成100%

在这里插入图片描述

【代码示例】

<tr><td><!--第一行：头部广告   1张图片--><img src="../img/top_banner.jpg"/></td>
</tr>
2、 头部搜索栏

​ 头部搜索栏是一个1行3列的表格

在这里插入图片描述

【代码示例】

<tr><td><!--第二行：头部搜索框  1行3列表格--><table width="100%"><tr><td><img src="../img/logo.jpg"/></td><td><img src="../img/search.png" width="500px"/></td><td><img src="../img/hotel_tel.png"/></td></tr></table></td>
</tr>
3、头部导航条

头部导航条可以看成是一个1行10列的表格，每个单元格中都是一个超链接

在这里插入图片描述

【代码示例】

<tr><td><!--第三行：头部导航    1行10列表格--><table width="100%" bgcolor="#FFC900" height="40px"><tr><td><a href="#">首页</a></td><td>门票</td><td>酒店</td><td>香港车票</td><td>出境游</td><td>国内游</td><td>港澳游</td><td>抱团定制</td><td>全球自由行</td><td>收藏排行榜</td></tr></table></td></tr>
4、 轮播图

​ 轮播图有一系列图片组成，周期性地切换。这里由于所学知识有限，使用一张图片代替；

在这里插入图片描述

【代码示例】

<tr><td><!--第四行 ：轮播图	   一张图片--><img src="../img/banner_3.jpg" width="100%"/></td>
</tr>

3.2 主体

1、黑马精选

在这里插入图片描述

<tr><td><!--第5行：黑马精选:2行4列--><table width="100%"><tr><td colspan="4"><img src="../img/icon_5.jpg" alt="">黑马精选<hr color="orange"></td></tr><tr><td><img src="../img/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p>¥899</p></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p>¥899</p></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p>¥899</p></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p>¥899</p></td></tr></table></td></tr>
2、国内游

在这里插入图片描述

<tr><td><!--国内游：3行4列第一行：--><table width="100%"><tr><td colspan="4"><img src="../img/icon_6.jpg" alt=""> 国内游<hr color="#FFC900"></td></tr><tr><td rowspan="2"><img width="398" height="550" src="../img/guonei_1.jpg" alt=""></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td></tr><tr><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td></tr></table></td></tr>
3、境外游

在这里插入图片描述

<tr><td><!--第7行：境外游  3行4列--><table width="100%"><tr><td colspan="4"><img src="../img/icon_7.jpg" alt="">境外游<hr color="orange"></td></tr><tr><td rowspan="2"><img src="../img/jiangwai_1.jpg"  alt=""></td><td><img src="../img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p><font color="red">¥699</font></p></td><td><img src="../img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p><font color="red">¥699</font></p></td><td><img src="../img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p><font color="red">¥699</font></p></td></tr><tr><td><img src="../img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p><font color="red">¥699</font></p></td><td><img src="../img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p><font color="red">¥699</font></p></td><td><img src="../img/jiangxuan_3.jpg" alt=""><p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p><p><font color="red">¥699</font></p></td></tr></table></td></tr>

3.3 底部

1、 底部图片

在这里插入图片描述

【代码实现】

<tr><td><!--第六行：底部图片  一张图片--><img src="../img/footer_service.png" width="100%"/></td></tr>
2、 底部版权声明

输入文字，背景色#ffc900，内容居中，高度40px。文字大小2，颜色用灰色

在这里插入图片描述

【代码示例】

<tr bgcolor="#ffc900" align="center" height="40px"><td><!--第七行：底部版权信息    一行文字--><font size="2" color="gray">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font></td>
</tr>

【完整代码】

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>a{text-decoration: none;}</style></head><body><!--【案例】商城首页需求：使用table表格布局，完成商城首页的布局和显示第一步：整体布局  9行1列表格第二步：具体布局头部：第1行：头部图片第2行：头部工具条第3行：头部导航条第4行：头部轮播图主体：第5行：黑马精选第6行：国内游第7行：境外游底部：第8行：底部图片第9行：底部版权信息--><table border="0" cellspacing="0" cellpadding="0" width="100%"><!--头部：4行--><tr><td><!--头部图片--><img width="100%" src="../img/top_banner.jpg" alt=""></td></tr><tr><td><!--1行3列表格--><table width="100%"><tr align="center"><td><img  src="../img/logo.jpg" alt=""></td><td><img  width="483px" height="52px" src="../img/search.png" alt=""></td><td><img  src="../img/hotel_tel.png" alt=""></td></tr></table></td></tr><tr><td><!--1行10列：导航条--><table width="100%" bgcolor="#FFC900"><tr><td height="50px">首页</td><td>门票</td><td>酒店</td><td>香港车票</td><td>香港车票</td><td>香港车票</td><td>香港车票</td><td>香港车票</td><td>香港车票</td><td>香港车票</td></tr></table></td></tr><tr><td><!--完整的图片--><img src="../img/banner_3.jpg" width="100%" alt=""></td></tr><!--主体：旅游产品  3行--><tr><td><!--黑马精选：2行4列--><table width="100%"><tr><!--跨4列--><td colspan="4"><img src="../img/icon_5.jpg" alt=""> 黑马精选<hr color="#FFC900"></td></tr><tr><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td></tr></table></td></tr><tr><td><!--国内游：3行4列第一行：--><table width="100%"><tr><td colspan="4"><img src="../img/icon_6.jpg" alt=""> 国内游<hr color="#FFC900"></td></tr><tr><td rowspan="2"><img width="398" height="550" src="../img/guonei_1.jpg" alt=""></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td></tr><tr><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td><td><img src="../img/jiangxuan_1.jpg" alt=""><p><font size="1">上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</font></p><font color="red">¥899</font></td></tr></table></td></tr><tr><td><!--作业--></td></tr><!--底部：2行  --><tr><td><img width="100%" src="../img/footer_service.png" alt=""></td></tr><tr><td bgcolor="#FFC900" align="center" height="46"><font color="gray" size="2">江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882</font></td></tr></table></body>
</html>

第五章 小结

在这里插入图片描述


http://chatgpt.dhexx.cn/article/uUgijXfQ.shtml

相关文章

HTML5--入门介绍

HTML5--入门介绍

网站的建站流程 页面图例 http://weixin.qq.com/r/p0yguLDEUu0trfTb9xm1 (二维码自动识别) 网页的结构 WEB标准 WEB标准是网页制作的标准&#xff0c;它不是一个标准&#xff0c;它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布&#xff0c;也有部…
阅读更多...
HTML5入门

HTML5入门

文章目录 新增元素与属性新增元素optimum &#xff0c;high&#xff0c;low值&#xff1a;总结&#xff1a;value和optimum在同一区间&#xff1a;显示绿色&#xff1b;value和optimum相差一区间&#xff1a;显示黄色&#xff1b;value和optimum相差两区间&#xff1a;显示红色…
阅读更多...
html5基础入门知识（干货）

html5基础入门知识（干货）

一.什么是html 用来描述网页的语言、超文本标记语言、不是编程&#xff0c;而是一种标记语言、使用标记标签来描述网页等等... 我们只需记住html就是用标记标签来描述网页&#xff0c;&#xff08;网页是前端哦&#xff0c;平时你们听过的c、c、java之类的你们是看不着的&#…
阅读更多...
HTML5基础之代码入门

HTML5基础之代码入门

之前一直在修改现成的项目&#xff0c;学习的内容也是现学现用&#xff0c;没有很系统的学习&#xff0c;这次决定发一些时间&#xff0c;系统的学习&#xff0c;以便充实自己的前端知识&#xff0c;也想提升自己的前端技术。 今天总结的是HTML5基础的第一部分代码入门&#xf…
阅读更多...
h5(html5)入门

h5(html5)入门

h5(html5)基础入门 学习目标 目标&#x1f396;️&#xff1a; 学习PC端网站布局&#xff0c;最终网站&#xff1a;品优购静态网站精通网页布局&#xff0c;也是我们前端人员必备的技能&#xff0c;为后面学习 Javascript 打下坚实基础 资源网站&#x1f310;&#xff1a; …
阅读更多...
HTML5（入门）

HTML5（入门）

目录 一、HTML5概念和基本的结构 二、基本标签学习 三、图像标签 四、连接标签 五、列表标签 ​ 六、表格标签 table 七、媒体标签 ​ 八、网页结构 ​ 九、内联框架 iframe 十、表单标签 form ​ 十一、初级验证: 一、HTML5概念和基本的结构 1.概念&#xff1…
阅读更多...
Javascript知识【jQuery：数组遍历和事件】

Javascript知识【jQuery：数组遍历和事件】

&#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &#x…
阅读更多...
jq数组赋值 java,jquery 遍历数组赋值的问题？

jq数组赋值 java,jquery 遍历数组赋值的问题？

慕容708150 /** * 好好看下jQuery文档吧 * see https://api.jquery.com/each/#each-function */var tdVals trs.parents(tr).children(td);var inputVals $(.con-detail input[typetext]);$(tdVals).each(function(index, td){ // td是DOM, index是索引 if(!(index < 1…
阅读更多...
linux jq 遍历数组,jquery怎么遍历数组？

linux jq 遍历数组,jquery怎么遍历数组？

jquery怎么遍历数组&#xff1f;下面本篇文章就来给大家介绍一下使用jquery遍历数组的几种方法。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 1、for循环&#xff1a;var arr new Array(13.5,3,4,5,6); for(var i0;i arr[i] arr[…
阅读更多...
jQuery遍历数组

jQuery遍历数组

jQuery遍历数组 数组遍历&#xff1a; 在JS中&#xff0c;我们使用普通for循环即可遍历数组。 在jQuery中&#xff0c;我们可以使数组的遍历变得更为简单&#xff08;使用for遍历&#xff0c;取出的元素为js对象而非jQuery对象&#xff09; 属性名 属性说明 JQ数组.each(fn…
阅读更多...
window系统 任务计划程序

window系统 任务计划程序

如何让系统定时启动某个任务&#xff0c;执行某个脚本&#xff0c;window系统的任务计划程序功能就可以实现&#xff0c;操作步骤如下&#xff1a; 1.打开程序“任务计划程序”&#xff0c;在window系统搜索程序中搜索该程序即可&#xff0c;或者在控制面板中寻找。程序页面截…
阅读更多...
windows设置定时任务（win10任务计划程序）

windows设置定时任务（win10任务计划程序）

熟悉Linux的朋友应该都知道有自带的crontab定时器，其实在windows中也有定时器这一说。可以设置定时启动某个程序，运行某个软件。老系叫触发器，win10系统以后叫【任务计划程序】，这里博主以每天9点定时启动notepad++软件为例给大家细细道来。 1.搜索框搜索【任务计划程序】…
阅读更多...
Windows 任务计划程序操作之起始于

Windows 任务计划程序操作之起始于

起始于这个操作在windows 计划任务的设置里是个可选项&#xff0c;所以我们在操作的时候一般都忽略了他&#xff0c;但就因为咱们的忽略就会导致错误的发生。 比如我的定时任务程序中需要用到一个文件&#xff0c;在读的时候就会报未能找到文件“C:\Windows\system32\xxx,又或者…
阅读更多...
windows中的定时任务--任务计划程序

windows中的定时任务--任务计划程序

一定要理解进程的概念 开机自启有多种方式来实现 注册表开启启动项. 计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run 菜单里面快捷方式 写入服务 加入任务计划程序
阅读更多...
操作员或系统管理员拒绝了请求(0x800710E0) win10系统任务计划程序执行失败

操作员或系统管理员拒绝了请求(0x800710E0) win10系统任务计划程序执行失败

问题说明: 在win10设置定时任务为每天执行一次&#xff0c;第一天是正常的&#xff0c;后面几次都执行失败&#xff0c;提示“操作员或系统管理员拒绝了请求(0x800710E0) ” 解决办法&#xff1a; 进入控制面板-系统和安全-管理工具-本地安全策略&#xff0c;在安全选项中找…
阅读更多...
C# 定时任务之windows任务计划程序

C# 定时任务之windows任务计划程序

我们有时候需要在特定的时间、或者间隔某段时间后执行一个程序来处理问题&#xff1b;如果间隔时间较长&#xff0c;比如一天一次、一周一次&#xff0c;或者需要在某年某月某日某时执行&#xff0c;那么我们用计时器去实现的话&#xff0c;就很不合理了&#xff0c;资源消耗不…
阅读更多...
C# 创建任务到Windows任务计划程序

C# 创建任务到Windows任务计划程序

相信有看过我上一篇《C# 定时任务之windows任务计划程序》并且有需求的朋友已经打开过任务计划程序去尝试了&#xff0c;同时是否有了另一个疑问。里面已经存在的任务是怎么来的呢&#xff1f;能否通过我们自己的程序去创建呢&#xff1f;答案当然是可以的&#xff01;本篇我们…
阅读更多...
windows任务计划程序运行python脚本失败的原因

windows任务计划程序运行python脚本失败的原因

前言 用windows任务计划程序定时执行py脚本&#xff0c;为什么会执行失败&#xff1f;运行结果显示(0x1)? 直接闪退&#xff1f; 在IDE运行程序&#xff0c;正常运行 在文件管理器目录下运行程序&#xff0c;也没有问题。 但是为什么在任务计划程序执行就不行呢&#xff1f…
阅读更多...
计算机管理任务计划程序损坏,处理设置任务计划程序win10中出错不可用的方法...

计算机管理任务计划程序损坏,处理设置任务计划程序win10中出错不可用的方法...

win10系统是很多的小伙伴都很多的小伙伴都安装了的&#xff0c;那我们在电脑中有小伙伴遇到自带的有任务计划程序的功能的&#xff0c;那有小伙伴遇到任务计划程序不可用的错误提示的问题&#xff0c;遇到这个问题应该怎么办呢&#xff0c;如果你也是遇到设置任务计划的话&…
阅读更多...
使用Windows[任务计划程序]设置定时任务

使用Windows[任务计划程序]设置定时任务

文章目录 使用Windows[任务计划程序]设置定时任务[任务计划程序]打开位置Windows 11Windows 10 创建定期启动程序任务创建基本任务给任务命名&#xff0c;并添加任务描述根据需求设置触发器&#xff0c;下图选择每天都执行设置触发器的执行时间&#xff0c;下图设置每天20点执行…
阅读更多...
推荐文章

Copyright @ 2022~2023