day01HTML基础入门

最新推荐文章于 2023-11-06 10:57:18 发布

「已注销」

最新推荐文章于 2023-11-06 10:57:18 发布

阅读量804

点赞数

本文链接：https://blog.csdn.net/yukuiadeyu2/article/details/103658141

版权

day01HTML基础入门

1、今日内容学习目标

1) 能够使用idea创建html文档(掌握)

2)能够使用h1~h6、hr、p、br 等与文本有关的标签

3)能够使用有序列表ul-li和无序列表ol-li显示列表内容

4)能够使用图片img标签把图片显示在页面中

5) 能够使用超链接a标签跳转到一个新页面(掌握)

6) 能够使用table、tr、td标签定义表格(掌握)

7) 能够制作黑马旅游网的首页(掌握)

2、今日学习标签总览

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lb49FN1h-1577025658883)(img/1.bmp)]

3、前端知识介绍

1、关于前端的一些要知道的事情：

前端课程的特点：知识点细，碎，多

学习前端方法：

不要死记硬背，要学会运用

案例驱动，通过案例学习

2、前端7天架构

我们学习java其实是在做JavaEE开发，主要是开发基于网页的后台应用程序，例如：京东、淘宝等购物网站。

在基础班，我们主要学习了JavaSE中的一些API，就是为了给我们在就业班学习JavaEE企业级应用开发打下坚实的基础！

而现在，我们还不能直接进入JavaEE的学习，在此之前，我们需要先学习一些有关网页开发的技术，这是进入JavaEE开发的必经之路！

下面，让我们先来了解一下JavaEE企业级开发的技术架构：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5diy4422-1577025658884)(img/2.bmp)]

说明：

HTML 网页的骨架，用来书写网页的。

Css 美化网页的。

javaScript 网页的灵魂，用来交互前端页面和后台服务器之间的数据的，没有js。那么html+css就是一个静态页面，不会和后台服务器进行

数据的交互。开发中也就没有什么意义了。

4、案例介绍

通过今天的学习要做出如下网页的：黑马旅游网的首页。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SGAmTD8s-1577025658884)(img/3.bmp)]

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。所以想完成上述案例，我们必须先学习html这门语言。

5、HTML的概述

5.1、什么是HTML

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ndUrJHtp-1577025658885)(img/4.bmp)]

HTML：超文本标记语言（HyperText Markup Language）

1)“超文本”就是指超过普通文本，页面内可以包含图片、链接、视频、音乐等非文字内容。并且超文本还可以设置大小，颜色，点击文本还可以进行页面跳转。说白了就是文本文件只能书写字符数据，不能包含图片、连接、视频、音乐等。而超文本是可以书写非字符的内容。超人普通人

2) “标记”：网页由各种各样的标记(标签)组成，就是使用标签的方法将需要的内容包括起来。例如：www.itcast.cn 标记是一个超链接。只是一些文本，由浏览器去解析这些标签符号。

3)“语言” 就是指人与计算机交互的方式。例如，之前学习的javase，sql语句，html语言。

总结：它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程。

补充：网页存放在服务器上，运行在浏览器上，运行之前先从服务器上下载到本地，在本地浏览器上解析。

5.2、什么是HTML5

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

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

目前支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari(苹果系统)，Opera等。不同的浏览器之间是有差异，同一个网页运行可能会不同。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ad8lAwpt-1577025658885)(img/5.bmp)]

5.2.1、HTML能干什么

HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。

网页内容包含：HTML代码、CSS代码、JavaScript代码等内容。

1)HTML代码：结构层（好比人的骨骼/身体）负责从语义的角度搭建页面结构

2)CSS代码：表现层（好比人的穿衣打扮）负责从审美的角度美化页面

3)JavaScript代码：行为层（好比一个人能歌善舞）负责从交互的角度提升用户体验。

网页根据内容是否改变分为：静态页面、动态页面

4)静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。

5)动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

5.2.2、HTML语言特点 (了解)

1、 HTML文件不需要编译，直接使用浏览器解析即可。

2、 HTML文件的扩展名是*.html 或 *.htm。

3、 HTML结构都是由标签组成。

4、标签名预先定义好的，我们只需要了解其功能即可。

1) 标签名不区分大小写，通常都是小写。

2) 通常情况下标签由开始标签和结束标签组成。叫做双标签。例如：www.baidu.com 超链接

3) 如果没有结束标签，建议以/结尾。叫做单标签。例如：

补充：img a 称为标签名

5、 HTML结构包括两部分：头head和体body。

5.2.3、 HTML标签的属性 (了解)

语法格式：

<标签名 属性名1="属性值" 属性名2="属性值" ...></标签名>

特点：

1、 HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。

2、标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

3、标签可以拥有多个属性。

4、一般属性由属性名和属性值成对组成的。

示例：

<a href="http://www.itcast.cn">上海传智播客</a>  <!-- 定义一个上海传智播客的超链接 -->

补充：上海传智播客叫做a标签的文本值。

<img src="images/baby.jpg" width="80" height="50"/>   <!-- 定义一张图片，并设置图片的宽度和高度-->

5.3、开发HTML

5.3.1、使用记事本创建html

1、在任意位置，创建“文本文档”，重命名“1.html”。注意文件后缀名是.html或者叫做.htm都可以。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZf5OBmi-1577025658886)(img/6.bmp)]

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

<html>
		<head>
				<title>这是标题</title>
		</head>
		<body>
				这是正文
		</body>
</html>

说明：

1) 上述内容除了汉字，其他的字符都是固定不变的。

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

整个页面的根标签，一个页面只需要一个，由头和体组成。

头标签，用于引入脚本、导入样式等。一般情况下头标签的内容在浏览器端都不显示。

子标签，用于显示浏览器标题。

体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

3、使用浏览器打开

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n96Ucu5w-1577025658886)(img/7.bmp)]

关于上面在浏览器中显示的内容，我们在浏览器中查看也没有什么特殊的效果，接下来修改下代码，在这里只是先了解，后面我们会详细讲解。

<html>
	<head>
		<title>这是标题</title>
	</head>
	<body>
		<font size="5" color="red">这是正文</font>
	</body>
</html>

浏览器显示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NsPZAebI-1577025658887)(img/8.bmp)]

5.3.2、以下是HTML的基本结构

<!-- 基本结构 -->
<html>根标签
	<!-- 网页头部 -->
	<head>
		<!-- 标题 -->
		<title>这是标题</title>
	</head>
		<!-- 网页主体 -->
	<body>
        <font size="5" color="red">这是正文</font>
	</body>
</html>

标签名	作用
html	网页的根元素，只能有一个根元素
head	网页的头部，可以指定网页的标题
body	网页的主体部分，我们的内容就写在主体中。
	注释嵌套：HTML的注释不能嵌套

格式：

注释特点：

浏览器查看时，不显示。右键查看源码可以看到。

5.3.3、使用IntelliJ IDEA创建html(掌握)

使用“记事本”开发效率低，现阶段使用idea做为开发工具，开发步骤如下：

在IDEA中创建静态Web工程

1.创建静态Web工程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SAv1yEOY-1577025658887)(img/9.bmp)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVUTs0li-1577025658888)(img/10.bmp)]

2.指定工程名和保存位置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f90Zrv3E-1577025658888)(img/11.bmp)]

3.创建HTML文件，选择html5的版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n3LfULPX-1577025658889)(img/12.bmp)]

4.创建HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <!--指定当前页面的字符集-->
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>hello，上海黑马程序员</h1>
</body>
</html>

说明：在html中添加注释的快捷键是：ctrl+/

5.点右上角一排浏览器按钮运行，idea会使用内置的服务器在指定的浏览器上运行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p8kMJr3L-1577025658890)(img/13.bmp)]

6.在浏览器上运行的结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m9GPMMIL-1577025658890)(img/14.bmp)]

5.3.4、项目结构

一个网页项目建议按如下目录创建结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqnDVkny-1577025658890)(img/15.bmp)]

6、网站信息页面显示

6.1、案例需求

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ygZbHUOf-1577025658891)(img/16.bmp)]

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。所以想完成上述案例，我们必须先学习html这门语言中的标签。

6.2、相关知识点

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

<h1></h1> 标题标签
<hr />水平线标签
<font>字体标签
<b></b>加粗标签
<i></i>斜体标签
<p></p>段落标签 
<br />换行标签

下面我们开始一个一个的介绍，为了方便演示，在day01_html项目下新建一个案例1标签演示的目录，并在该目录下创建一个“demo01.html”文件。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tL0LGvq3-1577025658892)(img/17.bmp)]

6.2.1、标题标签

HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
其中：<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn>	n的取值1-6

示例：

在body标签体中书写如下标签：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GWp8DJkn-1577025658892)(img/18.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-viSlJDpY-1577025658892)(img/19.bmp)]

6.2.2、水平线标签：

标签在 HTML 页面中创建一条水平分隔线。

size属性：水平线的高度，单位像素：px

noshade属性：没有阴影，取值：noshade，表示显示纯色

<hr size="5" noshade="noshade" />

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSSmq2sU-1577025658893)(img/20.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uvKBWlIy-1577025658893)(img/21.bmp)]

6.2.3、字体标签：

<font size="2" color="red" face="微软雅黑">字体的内容</font>

用于设置字体尺寸、字体颜色等。

标签具有如下属性：

size 属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。

说明：如果字体设置超过7，都是按照7进行显示。

color属性：设置字体的颜色。

颜色的取值：#xxxxxx 或 colorname

1、#xxxxxx 表示使用红绿蓝三原色设置颜色

红绿蓝分别取值：00 – FF，此处使用16进制。

#000000 表示黑色，#FFFFFF白色

#FF0000红色，#00FF00绿色，#0000FF蓝色

红绿蓝2位取值相同可以省略成1位。例如：# FF0000 简化成#F00

2、colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

face 属性：设置文字的字体。

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-INW0UAwF-1577025658894)(img/22.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FBM5JGQv-1577025658894)(img/23.bmp)]

说明：在html5中对于font标签不建议使用，但是仍然保留了html4的这个标签，在我们还没有学习css样式之前，这个标签还是经常使用的，现在各大浏览器对其还是支持的，所以我们还可以继续使用。

6.2.4、格式化标签：

粗体

斜体

<b>要加粗的字体</b>
<i>要倾斜的字体</i>

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hcEQzGdk-1577025658895)(img/24.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EtmsqWlA-1577025658895)(img/25.bmp)]

6.2.5、段落标签：

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标记就是

。

插入单个换行。

<p>段落内容</p><!-- 每个段落之间有留白 -->
<br /> <!-- 换行标签，只是换行，不会有留白 -->

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-090xw0QG-1577025658896)(img/26.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEcLyc49-1577025658896)(img/27.bmp)]

6.3、案例分析

6.3.1、知识点分析

需要的使用标签已经介绍完成，现在我们一次分析一下“公司简介”基本信息不同的地方都使用了哪些标签。

1、 “公司简介”，需要使用标题标签完成，例如：

。

2、 “中关村黑马程序员训练营” 需要使用字体标签完成。

3、 “传智播客” 需要斜体和粗体 组合完成。

4、这个文档被划分成4个区域，每一个区域之间有定义的间隔，需要使用段落标签

完成。

5、第2行或第3行是一个普通的换行，在html标签中，需要使用
完成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IzTdWfmY-1577025658897)(img/28.bmp)]

6.3.2、步骤分析

1、创建test01.html页面用来显示页面信息

2、将课前资料文件，黑马程序员介绍信息.txt 中内容，复制到idea软件中

3、使用标题标签

修饰“公司简介”

4、使用标题标签

添加分隔线

5、使用段落标签

和
划分区域

6、使用字体标签修饰“中关村黑马程序员训练营”

7、使用格式化标签 修饰“传智播客”

6.4、代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>公司简介</h1>
		<hr />
		<p><font color="red">“中关村黑马程序员训练营”</font>是由<i><b>传智播客</b></i>联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 <br />目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。</p>

		<p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。</p>

		<p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新，不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p>

		<p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。</p>
	</body>
</html>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mLbl2LlS-1577025658897)(img/29.bmp)]

7、特殊字符标签

我们把特殊字符称为实体字符，所有的实体字符以 & 开头，以 ; 结尾。

符号	名称	HTML页面展示
	空格符	  &nbsp;
<	小于号	  &lt;  less than
>	大于号	  &gt;  greate than
©	版权符	  &copy;
¥	元(yen) &yen;

示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxPPuzo5-1577025658924)(img/30.bmp)]

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRAPdQrg-1577025658925)(img/31.bmp)]

8、网站图片页面显示案例

8.1、案例介绍

在上面的案例中，我们发现这个页面都是文字的内容，而我们看到的页面往往文字和图片是并存的，

或者很多地方都是图片的效果，那么我们如何在页面中显示图片呢？

1）需求：制作家用电器排行榜

2) 案例效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G0pAkPdw-1577025658925)(img/32.bmp)]

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

8.2、案例相关标签

图片标签：在html页面中引用一张图片。

格式：

<img src="图片的路径地址" />

注意：

1）src：表示图片的路径，一般使用当前服务器，也可以使用其它服务器。不能使用本地地址。c:/aaa.jpg

img标签对应的属性：

属性名称	含义	作用
src	图片的路径地址	表示图片的路径，一般使用当前服务器，也可以使用其它服务器。不能使用本地地址。c:/aaa.jpg
width	宽度	如果只设置其中一项，那么图片会等比例缩放
height	高度
title	提示文本	鼠标悬停在图片上方会出现的文字信息
alt	替换文本	图片加载失败的时候才会出现的文字信息
border	边框	只能定义边框的粗细

示例：

1)在案例2标签演示文件夹下新创键一个文件夹叫做：img。然后将图片复制到img文件夹下。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-81rdmASc-1577025658926)(img/33.bmp)]

演示代码如下：

在案例2标签演示文件夹下新创键一个html页面：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Kl4mTqD-1577025658926)(img/34.bmp)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片演示</title>
</head>
<body>
    <!--图片标签-->
    <img src="img/mm.jpg" width="400" height="300" title="我是一个大美女" border="1">
    <img src="img/美女.jpg" width="400" height="300" title="我是一个大美女" alt="这里曾经有一个大美女">
</body>
</html>

8.3、案例分析

8.3.1、知识点分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5fznkKxV-1577025658927)(img/35.bmp)]

8.3.2、分析步骤

1、创建案例二: 网站图片页面显示的html页面，即test02.html。

2、使用图片标签标签的src属性引入图片

8.3.3、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>家用电器排行榜</title>
</head>
<body>
    <h2>家用电器排行榜</h2>
    <!--图片标签-->
    <img src="img/tv01.jpg">TCL太差了
    <hr/>
    <img src="img/tv02.jpg">创维还不错
    <hr/>
    <img src="img/tv03.jpg">小米还不错
    <hr/>
    <img src="img/tv04.jpg">创维还不错
    <hr/>
    <img src="img/tv05.jpg">创维还不错
    <hr/>
    <!--访问其他服务器的图片-->
    <img src="http://www.itcast.cn/files/image/201802/20180207094540257.jpg">
</body>
</html>

8.3.4、实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eRaIYNyn-1577025658927)(img/36.bmp)]

9、网站列表页展示

9.1、案例介绍

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qob6toy2-1577025658928)(img/37.bmp)]

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

9.2、相关知识点

9.2.1、列表标签：

9.2.1.1、无序列表

<ul type="disc">
	<li>内容一</li>
	<li>内容二</li>
</ul>

说明：对于无序列表标签ul单独使用没有任何意义，我们一般都会结合ul的子标签li一起使用。

ul无序列表的属性：

名称	含义
type=“circle”	空心圆
type=“disc”	默认值，实心黑色圆
type=“square”	实心黑色正方形
注意：type属性写在ul身上是所有li改变，写在li身上是单个子标签li改变。