2021-03-02——html是什么？

最新推荐文章于 2024-07-22 17:27:18 发布

伟1314520

最新推荐文章于 2024-07-22 17:27:18 发布

阅读量506

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_53371536/article/details/114291747

版权

1.html是什么？

HTML超文本标记语言,是一种用来描述网页的一种标记语言。

2.html的作用？

制作网页，将来可以充当软件的界面。

3.html的编辑工具

3.1记事本

3.2新建记事本文件

3.3写入html代码

<html>

         <head>

                  <title>网页标题</title>

         </head>

         <body>

                  这是我使用记事本创建的第一个网页

         </body>

</html>

3.4修改记事本文件的名称【以“.html”结尾】

缺点：没有提示功能，所有的代码内容都需要手动输入，效率极低。

3.2 专业的IDE[集成开发环境]

1.Notepad++：http://www.html.cn/tool/edit/2.html

2.Sublime Text：http://www.html.cn/tool/edit/6.html

3.WebStorm: https://www.html.cn/tool/edit/8.html

4.HBuilderX: https://www.dcloud.io/hbuilderx.html

我们使用HBuilderX进行学习

HBuilderX的使用

下载: https://www.dcloud.io/hbuilderx.html

安装HBuilderX--直接将下载好的压缩包，在指定位置解压缩就可以安装成功。
创建html测试运行

文件--》新建--》html文件

编辑创建好的html文件

运行--》运行到浏览器--》Chrome/IE....

6.浏览器

无论我是使用记事本还是HBuilderX，创建出来的网页都是要在浏览器中运行查看结果。

浏览器就是网页的运行环境。

常见的浏览器

HTML 网页的基本结构

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title></title>

         </head>

         <body>

         </body>

</html>

了解html的标记含义

HTML标记--由尖括号包围的关键词
HTML标记--通常是成对出现的,有开始标记和结束标记
开始标记没有"/",结束标记有"/"
除过成对出现标记，也有少数几个独立出现的标记交独立标记
HTML标记--不是我们自己定义的，而是html语法规范预先定义好的一组元素

我们学习html的主要部分也就是这些预先定义好的标记元素。

Html的基本结构

Html通过3个主要的标记将整个html文件分割成2个主要部分。
html标记--表示正个html文件，所有需要的元素都要放在这个元素之中才有效。
head标记--表示html文件的头。head标记中定义声明的元素都是给浏览器执行html提供附加信息
head标记中除过标题以外，其他的元素都是对用户不可见。
body标记--表示html文件的身体。body标记中定义声明的元素都将为用户呈现其对应的效果。

html文件中的默认标记

1.!DOCTYPE html--html声明,指定html语法规范的版本,有助于浏览器中正确显示网页.

doctype 声明是不区分大小写的.以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

上面的html声明都是html5语法规范的版本

html4规范版本的语法声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

2.html标记--表示正个html文件，所有需要的元素都要放在这个元素之中才有效。

3.head标记--表示html文件的头。head标记中定义声明的元素都是给浏览器执行html提供附加信息

4.meta标记--给浏览器提供网页的字符编码，网页描述，关键词，文件的最后修改时间，作者，和其他附加信息。

5.charset="utf-8"--html标记的属性,给html标记提供附加信息，

html标记的属性有2部分组成：属性名称[charset]=属性值["utf-8"]

html标记的属性只能出现在开始标记中，可以有多个，中间用空格分隔

例如:<手机品牌="华为" 内存="8G">

上面的例子中，手机是一个标记的话，那么品牌和内存将是这个标记的属性

6.title标记--设置网页标题

7.body标记--表示html文件的身体。body标记中定义声明的元素都将为用户呈现其对应的效果。

HTML 段落与文字

html的段落标记--段落的内容

特点:1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。

2.段落与段落之间会有空行

通常的情况下p标记，后有一个设置水平对齐方式的属性align，它的取值left/center/right

例如:

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>HTML段落标记</title>

         </head>

         <body>

                  <h1>HTML段落标记--p</h1>

                  <h1>1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示</h1>

                  <h1>2.段落与段落之间会有空行</h1>

                  <p align="left">平凡的世界</p>

                  <p>１９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。</p>

                  <h1>通常的情况下p标记，后有一个设置水平对齐方式的属性align，它的取值left/center/right</h1>

         </body>

</html>

html中网页内容的标题标记

1.html网页的标题是通过title标记设置。

2.h1~h6一组标记--网页内容的标题标记

特点:1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。

2.h1~h6 显示出来的效果是字体依次变小。H1最大，h6最小。

3.不同的浏览器显示效果有所差异。

例如:

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>网页内容的标题标记</title>

         </head>

         <body>

                  <h1>html网页的标题是通过title标记设置</h1>

                  <h1>h1~h6一组标记--网页内容的标题标记</h1>

                  <h2>1.自成一行，会占满整行，在它的后面出现的内容将会在下一行显示。</h2>

                  <h2>2.h1~h6 显示出来的效果是字体依次变小。h1最大，h6最小。</h2>

                  <h2>3.不同的浏览器显示效果有所差异。</h2>

                  平凡的世界

                  <h1>平凡的世界</h1>

                  <h2>平凡的世界</h2>

                  <h3>平凡的世界</h3>

                  <h4>平凡的世界</h4>

                  <h5>平凡的世界</h5>

                  <h6>平凡的世界</h6>

         </body>

</html>

3.html中的回车换行标记

1.在html中键盘的回车键不能是内容回车换行。

2.回车换行--br[独立标记]

例如:

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>html中的回车换行标记</title>

         </head>

         <body>

                  <h1>html中的回车换行标记</h1>

                  <h1>1.在html中键盘的回车键不能使内容回车换行</h1>

                  江雪

                  千山鸟飞绝，

                  万径人踪灭。

                  孤舟蓑笠翁，

                  独钓寒江雪。

                  <h1>2.回车换行--br[独立标记]</h1>

                  江雪<br>

                  千山鸟飞绝，<br>

                  万径人踪灭。<br>

                  孤舟蓑笠翁，<br>

                  独钓寒江雪。<br>

         </body>

</html>

4.html中的分隔线标记

1.网页中的一条分隔线--<hr>

2.常用的属性

color属性--分隔线颜色【颜色单词/颜色码】

size属性---分隔线粗细【1~7】

width属性---分隔线长短【数字px】

align---水平对齐属性[left-左对齐 center-居中对齐 right-右对齐]

例如:

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>html中的分隔线标记</title>

         </head>

         <body>

                  <h1 align="center">平凡的世界——路遥</h1>

                  <hr align="right" color="red" width="200px" size="7">

                  <h4 align="right">1986年首版</h4>

                  <hr>

                  <p>

                          １９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星

                          半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，

                          雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。

                          黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远

                          远地没有到来。

                  </p>

                  <p>

                          在这样雨雪交加的日子里，如果没有什么紧要事，人们宁愿一整天足

                          不出户。因此，县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴

                          的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化，石板街上

                          到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上，有时

                          会偶尔走过来一个乡下人，破毡帽护着脑门，胳膊上挽一筐子土豆或

                          萝卜，有气无力地呼唤着买主。唉，城市在这样的日子里完全丧失了

                          生气，变得没有一点可爱之处了。

         </body>

</html>

5.html中设置字体的标记

1.font--html中设置字体的标记

2.常用属性

color属性---设置字体颜色【颜色单词/颜色码】

size属性----设置字体大小最大值7

face属性---设置字体风格【C:\Windows\Fonts】

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>html中设置字体的标记</title>

         </head>

         <body>

                  <p align="center">

                          <font size="7px" face="方正粗黑宋简体">平凡的世界——路遥</font>

                  </p>

                  <hr>

                  <p><font size="3px" color="blue">1986年首版</font></p>

                  <hr>

                  <font size="4px" color="#00CD00" face="方正粗黑宋简体">

                          １９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星

                          半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，

                          雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。

                          黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远

                          远地没有到来。

                  </font>

         </body>

</html>

html中的居中标记

1.center--html中的居中标记

2.水平居中显示的html标记\文字\图片

例如:

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>html中的居中标记</title>

         </head>

         <body>

                  <center>

                          <font size="7px" face="方正粗黑宋简体">平凡的世界——路遥</font><br>

                          <font size="3px" color="blue">1986年首版</font><br>

                          <font size="5px"  face="方正粗黑宋简体">

                          １９７５年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星

                          半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，

                          雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。

                          黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远

                          远地没有到来。

                          </font>

                  </center>

         </body>

</html>

7.一组文本格式化标记

标签	描述
<b>	定义粗体文本
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字
<del>	定义删除字

<!DOCTYPE html>

<html>

         <head>

                  <meta charset="utf-8">

                  <title>一组文本格式化标记</title>

         </head>

         <body>

                  <h1>一组文本格式化标记</h1>

                  普通大小样式的文本<br>

                  <b>粗体样式的文本</b><br>

                  <em>着重样式的文本</em><br>

                  <i>斜体样式的文本</i><br>

                  <small>小号样式的文本</small><br>

                  <strong>加强语气样式的文本</strong><br>

                  <ins>插入样式的文本</ins><br>

                  <del>删除样式的文本</del><br>

                  X<sup>2</sup>-2X+1=0<br>

                  X<sub>1</sub>=1;X<sub>2</sub>=-1

         </body>

</html>

8.字符实体---就是在网页中输出的特殊符号

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

<!DOCTYPE html>

<html>

<head>

</head>

<body>