案例一：网站信息页面的显示

最新推荐文章于 2023-06-21 09:33:16 发布

lk小强

最新推荐文章于 2023-06-21 09:33:16 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/weixin_40807247/article/details/86483569

版权

JAVAWEB 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

1.什么是HTML？(Hyper Text Markup Language:超文本标记语言)

超文本：功能比普通文本更加强大
标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言)

2.为什么要学习HTML？

3.语法和规范？

HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。
HTML文件分为头部分(<head></head>)和体部分(<body></body>)
HTML标签都是由开始标签和结束标签组成。(<hr />)
HTML标签不区分大小写，建议使用小写。

4.HTML相关标签学习

标题标签<hn />
水平线标签 <hr />
段落标签<p></p>
字体标签<font></font>
	属性：size:指定内容的大小
		  color：指定内容的颜色
		  face：指定内容的字体
加粗：<b></b>
斜体：<i></i>
下划线：<u></u>

5.步骤分析：

①创建一个html文件
②创建一个标题标签显示公司简介
③创建一条水平线标签
④创建四个段落标签

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

1.1.1 需求：
在网页中显示网站的信息的页面：效果如下：
在这里插入图片描述
1.1.2 分析:
1.1.2.1 技术分析：
【HTML的概述】
 什么是HTML
HTML:Hyper Text Markup Language — 超文本标记语言.

标记语言：指的是通过一组标签的形式描述事物的一门语言.
超文本：比普通的文本更强大.
 HTML的作用
HTML是用来制作页面(静态页面).
 HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML.
【HTML的使用】
 HTML的文件的创建
一个HTML文件,扩展名是.html或者.htm结尾
01.html
 HTML的结构标签
跟标签:
- -- html的头标签
- -- html的体标签

【HTML的字体标签】
 标签:HTML中的字体标签.

使用：<font>文字</font>
* <font>标签的属性:

* <标签 属性名=”属性值” 属性名=”属性值”></标签>
* 属性:
    * color属性:字体颜色
        * 英文单词设置:black,red,green,blue...
        * 使用16进制数设置:#FFFFFF , #FFF
    * size属性:字体的大小
    * face属性:字体

基本使用：
我是HTML!

我是HTML！

我是小红！

我是小绿！

我是小蓝！

【HTML的排版标签】

	标题标签：h标签<h1>...<h6>
		<!-- HTML的标题标签 -->
		<h1>一级标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>

 段落标签：p标签

		<p>
			一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
			一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
			一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
			一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
		</p>
		<p>
			一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
			一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容一段内容内容
		</p>

 字体加粗标签：b标签

<b>黑马训练营</b>

 字体斜体标签：i标签

<i>黑马训练营</i>

 字体下划线：u标签

<u>黑马训练营</u>

	居中标签：<center>标签
<center>内容</center>

1.1.2.2 步骤分析:

【步骤一】创建一个HTML的文档
【步骤二】设置标题
【步骤三】设置四个段落
【步骤四】使用字体标签将第一个段落中的某个部分的内容变为红色.
所用素材：
中关村黑马程序员训练营”是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。

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

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

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标题标签</title>
	</head>
	<body>
		<!--标题标签-->
		<h1>公司简介</h1><br />
		<h2>公司简介</h2><br />
		<h3>公司简介</h3><br />
		<h4>公司简介</h4><br />
		
		<!--加入一条水平线-->
		<hr />
		<h5>公司简介</h5><br />
		<h6>公司简介</h6><br />
		<h100>公司简介</h100>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>段落标签</title>
	</head>
	<body>
		<p>
			“中关村黑马程序员训练营”是由传智播客联合中关村软件园、CSDN，并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。 
			目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。			
		</p>
		<p>
			黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确保学员质量，并降低企业的用人风险。
		</p>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体标签</title>
	</head>
	<body>
		<font color="#0000FF"size="1">黑马32期JAVAEE就业班</font><br />
		<font color="#0000FF"size="3">黑马32期JAVAEE就业班</font><br />
		<font color="#0000FF"size="4">黑马32期JAVAEE就业班</font><br />
		<font color="#0000FF"size="7">黑马32期JAVAEE就业班</font><br />
		<font color="#0000FF"size="100"face="楷体">黑马32期JAVAEE就业班</font>
		
	</body>
</html>

在这里插入图片描述

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

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

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

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

在这里插入图片描述

注意：
ctrl+shift+F：调整格式（注意这个快捷键和搜狗输入法的快捷键冲突了，建议关闭搜狗输入法的相应的快捷键）

lk小强

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
案例一：网站信息页面的显示

1.什么是HTML？(Hyper Text Markup Language:超文本标记语言)超文本：功能比普通文本更加强大标记语言：使用一组标签对内容进行描述的一门语言(它不是编程语言)2.为什么要学习HTML？3.语法和规范？HTML文件都是以.html或者.htm结尾的。建议使用.html结尾。HTML文件分为头部分(&amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp
复制链接

扫一扫