html(1)

最新推荐文章于 2024-07-03 16:33:21 发布

思故乡

最新推荐文章于 2024-07-03 16:33:21 发布

阅读量573

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_44654375/article/details/87387448

版权

-html

今日内容

使用html的排版标签编写“网站信息页面”
使用html的图片标签编写“图片显示页面”
使用html的列表标签编写“友情链接页面”
使用html的表格标签编写“首页”
使用html的表单相关标签

学习目标

了解HTML语言的作用
能够使用h1~h6、hr、p、br 等与文本有关的标签
能够使用有序列表ul-li和无序列表ol-li显示列表内容
能够使用图片img标签把图片显示在页面中
能够使用超链接a标签跳转到一个新页面
能够使用table、tr、td标签定义表格
能够制作网站首页
能够使用表单form标签创建表单容器
能够使用表单中常用的input标签创建输入项
能够使用表单select标签定义下拉选择输入项
能够使用表单textarea标签定义文本域

今日学习标签总览

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

在这里插入图片描述

第一章 HTML 简述

1.1 什么是HTML

在这里插入图片描述

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

“超文本”就是指页面内可以包含图片、链接等非文字内容。
“标记”就是使用标签的方法将需要的内容包括起来。例如：<a>www.itcast.cn</a>

1.2 HTML能干什么

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

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

HTML代码：用于展示需要显示的数据。
CSS代码：使显示的数据更佳好看。
JavaScript代码：使整个页面显示的数据具有动画效果。

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

静态页面：编写之后在浏览器不再改变的网页。HTML就是用于编写静态网页的。
动态页面：会根据不同的情况展示不同的内容。例如：登录成功后右上角显示用户名。

1.3 HTML语音特点

HTML文件不需要编译，直接使用浏览器阅读即可
HTML文件的扩展名是*.html 或 *.htm
HTML结构都是由标签组成
- 标签名预先定义好的，我们只需要了解其功能即可。
- 标签名不区分大小写
- 通常情况下标签由开始标签和结束标签组成。例如：
- 如果没有结束标签，建议以/结尾。例如：
HTML结构包括两部分：头head和体body

1.4 HTML入门代码

创建“文本文档”，重命名“xxx.html”。文件名自定义，扩展名为html。
右键/打开方式/记事本，开发html文件，并编写如下内容

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

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

<html> 整个页面的根标签，理论上一个页面只需要一个，由头和体组成。
<head>头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示。
<body>体标签，是整个网页的主体，我们编写的html代码基本都在此标签体内。

使用浏览器打开

在这里插入图片描述

1.5 环境搭建HBuilder

使用“记事本”开发效率低，现阶段比较流程的前端IDE（集成开发环境）是HBuilder，为了统一环境，要求所有同学的都安装HBuilder，参考“1.HBuilder安装.doc”。

提供模板代码，使用“HBuilder”创建01.模板.html页面。

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" /> <!-- 设置html页面的编码，今天最后讲解-->
		<title>标题</title>
	</head>
	<body>
		正文
	</body>
</html>

在模板代码中，我们使用到了HTML注释

格式：
注释特点：
- 浏览器查看时，不显示。右键查看源码可以看到。
- 注释标签不能嵌套。
- 注释特殊用法，为不同的浏览器提供不同的解决方案（了解）

第二章基本标签

下面我们开始一个一个的介绍，为了方便演示，创建一个“01.demo.html”文件

2.1 标题标签：`<hr />`

<hr /> 标签在 HTML 页面中创建一条水平分隔线，用于定义内容中的主题变化。

size属性：水平线的高度，单位像素
noshade属性：没有阴影，取值：noshade，表示显示纯色

<!--水平线-->
<hr />
<hr  size="5"/>
<hr noshade="noshade" />

在这里插入图片描述

2.2 字体标签：``

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

size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。
color属性：设置字体的颜色
- 颜色的取值：#xxxxxx 或 colorname
- #xxxxxx 表示使用红绿蓝三原色设置颜色。
  - 红绿蓝分别取值：00 – FF，此处使用16进制。（FF就是十进制的255）
  - #000000 表示黑色，#FFFFFF白色
  - #FF0000红色，#00FF00绿色，#0000FF蓝色
  - 红绿蓝2位取值相同可以省略成1位。例如：#112233 简化成#123
- colorname 使用英文单词确定颜色。red 红色，blue 蓝色，green绿色

<!--字体-->
<font size="7">我个大</font>
<font color="#FF0000">我很红</font>
<font color="blue">我是蓝色的</font>

在这里插入图片描述

2.3 格式化标签： ` `

粗体

斜体

<!-- 格式化-->
<b>粗体</b>
<i>斜体</i>

2.4 段落标签：` `

定义段落。p 标签会自动在其前后创建一些空白。

 插入单个换行。

<!-- 段落标签 -->
<p>
传智播客是高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展，而企业招不到优秀人才的困扰。<br/> 
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地，并被评为中关村软件园重点扶持人才企业。
</p>

2.5 案例网站信息显示

案例介绍

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

在这里插入图片描述

当然，大家现在还不知道怎么来完成这个案例，因为这个案例中需要使用很多HTML中的标签。

案例相关标签

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

<h1></h1>
<hr />

案例分析

知识点分析

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

“公司介绍”，需要使用标题标签完成 <hn> ，例如：<h3>
“中关村黑马程序员训练营” 需要使用字体标签完成 
“传智播客” 需要斜体 和粗体 组合完成
这个文档被划分成4个区域，每一个区域之间有定义的间隔，需要使用段落标签完成
第2行或第3行是一个普通的换行，在html标签中，需要使用 完成

在这里插入图片描述

步骤分析

创建03.案例：显示信息页面.html
复制需要编写的内容
使用标题标签
修饰“公司简介”
使用标题标签

添加分隔线
使用段落标签
和
划分区域
使用字体标签修饰“中关村黑马程序员训练营”
使用格式化标签 修饰“传智播客”

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1>公司简介</h1>
		<hr/>
		<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.6 图片标签：`<img>`

<img>在html页面中引用一张图片

src ：指定需要显示图片的URL（路径）。
alt ：图片无法显示时的替代文本。
width ：设置图像的宽度。
height ：定义图像的高度。

<!--显示图片“registImg.jpg”-->
<img src="img/registImg.jpg"  alt="剁手不够解恨" width="200px" height="200px" title="鼠标移上显示"/>
<img src="img/registImg2.jpg" alt="剁手不够解恨" width="200px" height="200px"

最低0.47元/天解锁文章

思故乡

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html(1)

-html今日内容使用html的排版标签编写“网站信息页面” 使用html的图片标签编写“图片显示页面” 使用html的列表标签编写“友情链接页面” 使用html的表格标签编写“首页” 使用html的表单相关标签学习目标了解HTML语言的作用能够使用h1~h6、hr、p、br 等与文本有关的标签能够使用有序列表ul-li和无序列表ol-li显示列表内容...
复制链接

扫一扫