第1章 WEB01-HTML篇-视频教程-第一部分

Java帮帮

发布于 2022-11-25 16:38:35

4460

发布于 2022-11-25 16:38:35

文章被收录于专栏：Java帮帮-微信公众号-技术文章全总结Java帮帮-微信公众号-技术文章全总结

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

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
HTML文件是由头和体组成
HTML这组标签是不区分大小写
HTML的标记通常是由开始标签和结束标签组成：内容

【HTML的字体标签】

标签

文字

size:控制字体大小.最小1 最大7
color：控制字体颜色. 使用英文设置，使用16进制数设置
face：控制字体.

【HTML的排版标签】

<hn>标题标签

<h1>b标题</h1>

段落标签

一段文字

 换行标签

代表换行

<hr/>水平线标签

<hr/>水平线标签

字体加粗

文字

斜体标签

斜体

1.1.2.2 步骤分析

步骤一：创建一个html文件
步骤二：创建标题标签
步骤三：标题下面会有一个水平线
步骤四：创建段落标签创建四个段落
步骤五：将某些文字设置为红色

1.1.3 代码实现

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

1.2 网站的图片页面显示

1.2.1 需求分析：

在网页中显示带有图片的页面效果如下：

1.2.2 分析：

1.2.2.1 技术分析：

【HTML的图片标记】

<img />

src：图片的路径
width：图片宽度
height：图片的高度
alt：图片提示

图片路径：

分成相对路径和绝对路径
相对路径:
- ../ :代表上一级路径
- ./ :代表当前路径

1.2.2.2 步骤分析：

创建一个img标签引入logo图片
创建一个img标签引入header图片

1.2.3 代码实现

<html>
	<head>
		<meta charset="utf-8">
		<title>网站图片页面</title>
	</head>
	<body>
		<img src="../img/logo2.png"/><img src="../img/header.png" />
	</body>
</html>

1.3 网站的列表显示页面

1.3.1 需求分析：

在页面中列表显示友情链接：

1.3.2 分析：

1.3.2.1 技术分析

【HTML的列表标签】

无序列表

	<ul>
		<li>内容1</li>
                <li>内容2</li>
	</ul>

有序列表

	<ol>
		<li>内容1</li>
                <li>内容2</li>
	</ol>

1.3.2.2 步骤实现

创建一个无序列表显示友情链接

1.3.3 代码实现

		<ul>
			<li>百度</li>
			<li>传智播客</li>
			<li>百合网</li>
			<li>世纪佳缘</li>
		</ul>

1.3.4 总结：

【超链接标签】

href：超链接跳转的路径
target：打开方式
- _blank：打开一个新窗口
- _self：在自身页面打开

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-08-31，如有侵权请联系 cloudcommunity@tencent.com 删除

html

本文分享自 Java帮帮微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

html

登录后参与评论

0 条评论

热度

第1章 WEB01-HTML篇-视频教程-第一部分

第1章 WEB01-HTML篇-视频教程-第一部分

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

1.1.1 需求分析：

1.1.2 分析：

1.1.2.1 技术分析

1.1.2.2 步骤分析

1.1.3 代码实现

1.2 网站的图片页面显示

1.2.1 需求分析：

1.2.2 分析：

1.2.2.1 技术分析：

1.2.2.2 步骤分析：

1.2.3 代码实现

1.3 网站的列表显示页面

1.3.1 需求分析：

1.3.2 分析：

1.3.2.1 技术分析

1.3.2.2 步骤实现

1.3.3 代码实现

1.3.4 总结：

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐