2020.12.28HTML 网站信息、图片、友情链接

最新推荐文章于 2022-10-02 14:46:20 发布

LETTINGFLY

最新推荐文章于 2022-10-02 14:46:20 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_40310710/article/details/111870245

版权

HTML概述：
Hyper Text Markup Language超文本标记语言
超文本：比普通文本功能更加强大，可以添加各种格式
标记语言:：通过一组标签，来对内容进行描述

注释：
标题：

段落：

修改字体： “BJUT” 颜色、字号、字体
加粗，带语义
传智播客 斜体 b加粗 i斜体
strong: 加粗, 带语义标签
em: 斜体, 带语义

./代表的是当前路径
…/ 代表的上一级路径
…/…/ 上上一级路径

1.网站信息页面

1.1需求分析:

我们公司的需要一个对外宣传的网站介绍,介绍公司的主要业务,公司的发展历史,公司的口号等等信息

1.2技术分析:

HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

<h1>静夜诗</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋两双,</p>
<p>举头望明月,</p>
<p>低头思故乡.</p>

为什么要学习HTML:

生活所迫,今天的课程,群英妹子不让回家.

HTML的主要作用:

设计网页的基础,HTML5

HTML语法规范

<!--
	1. 上面是一个文档声明 
	2. 根标签 html
	3. html文件主要包含两部分. 头部分和体部分
		头部分 : 主要是用来放置一些页面信息
		体部分 : 主要来放置我们的HTML页面内容
	4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
	5. 标签不区分大小写, 官方建议使用小写
-->

1.3步骤分析:

公司简介需要标题
水平分割线
四个段落
第一个段落字体需要红色

1.4代码实现:

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

1.5 扩展内容

b : 加粗

i : 斜体

strong: 加粗, 带语义标签

em:  斜体, 带语义

2.网站图片信息

2.1需求分析:

在我们的网站中通常需要显示LOGO图片,显示效果如下

2.2技术分析

img 标签:

常用的属性;

width : 宽度

height: 高度

src : 指定文件路径

alt: 图片加载失败时的提示内容

2.3步骤分析

2.4代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			常用属性:
				src : 指定图片路径
				width : 指定图片宽度
				height : 图片高度
				alt : 文件加载失败时的提示信息
		-->
		<img src="../img/美女22.jpg" width="500px" alt="这张图片可能加载问题" />
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--在网页中显示图片-->
		<img src="../img/logo2.png" width="30%"/>
		<img src="../image/header.jpg" width="30%" />
	</body>
</html>

2.5 扩展-文件路径

相对路径

		./		代表的是当前路径
		../ 	代表的上一级路径
		../../	上上一级路径

3.网站友情链接页面

3.1需求分析

在我们的网站中,通常会显示友商公司的网站链接

百度
新浪微博
黑马程序员

3.2技术分析

列表标签:

无序列表: ul

type: 小圆圈,小圆点, 小方块

有序列表: ol

type: 1,a ,A,I,

start : 指定是起始索引

3.3步骤分析

3.4代码实现

1、
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--无序列表
			ul
				li 列表项
			type属性 . 小圆圈, 小方块, 默认小黑点
		-->
		<ul type="square">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ul>
		
		<hr />
		
		<!--
			有序列表
			常用属性:
				type : 指定序号的类型
				start : 从几开始,必须得写数字
		-->
		<ol type="a" start="2">
			<li>百度</li>
			<li>新浪微博</li>
			<li>黑马程序员</li>
		</ol>
		
		
	</body>
</html>
2、

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		1.使用无序列表
			百合网
			世纪家园
			珍爱网
			非诚勿扰
	-->
	<body>
		<ul>
			<li><a href="http://www.baihe.com" target="_blank">百合网</a></li>
			<li><a href="http://www.jiayuan.com">世纪家园</a></li>
			<li>珍爱网</li>
			<li>非诚勿扰</li>
		</ul>
	</body>
</html>

3.5 扩展内容

点击链接,跳转去指定网站

a 超链接标签

常用的属性:

href: 指定要跳转去的链接地址

如果是网络地址需要加上http协议 ,

如果访问的是本网站的html文件,可以直接写文件路径

target : 以什么方式打开

_self: 默认打开方式,在当前窗口打开

_blank: 新起一个标签页打开页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<!--
		1.使用无序列表
			百合网
			世纪家园
			珍爱网
			非诚勿扰
	-->
	<body>
		<ul>
			<li style="display: inline;"><a href="http://www.baihe.com" target="_blank">百合网</a></li>
			<li style="display: inline;"><a href="http://www.jiayuan.com">世纪家园</a></li>
			<li style="display: inline;">珍爱网</li>
			<li style="display: inline;">非诚勿扰</li>
		</ul>
	</body>
</html>

上午内容回顾:

网站信息案例
- 字体标签 font
  - color: 颜色
  - size: 大小 1~7
  - face: 改变字体
- p 段落标签
- h标题标签 : 1~6
- br 换行
- hr 水平线
- b 加粗
- i 斜体
- strong : 加粗包含语义
- em : 斜体包含语义
网站图片案例
- img标签
  - src : 指定图片的路径
  - width: 宽度
  - height: 高度
  - alt : 图片加载错误时的提示信息
- 相对路径:
  - ./ 代表的是当前路径
  - …/ 代表的上一级路径
  - …/…/ 代表的上上一级路径
友情链接:
- ul: 无序列表
  - type :
- ol: 有序列表
  - type : 样式
  - start : 起始索引
- li : 列表项
- a 超链接标签
  - href : 要访问的链接地址
  - target : 打开方式
网站首页
- table标签
  - border: 指定边框
  - width : 宽度
  - height : 高度
  - bgcolor : 背景颜色
  - align : 对齐方式
- tr标签
- td标签
  - colspan: 跨列操作
  - rowspan: 跨行操作
- 表格单元格的合并
- 表格的嵌套

LETTINGFLY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020.12.28HTML 网站信息、图片、友情链接

HTML概述：Hyper Text Markup Language超文本标记语言超文本：比普通文本功能更加强大，可以添加各种格式标记语言:：通过一组标签，来对内容进行描述注释：标题：段落：修改字体：“BJUT” 颜色、字号、字体加粗，带语义传智播客斜体 b加粗 i斜体strong: 加粗, 带语义标签em: 斜体, 带语义./代表的是当前路径…/ 代表的上一级路径…/…/ 上上一级路径1.网站信息页面1.1需求分析:我
复制链接

扫一扫