HTML的初步认识
前言
想必大家一听到HTML就联想到了这不就是一个做网页的东西吗
其实不然,在下面我会跟大家一一解释
一、HTML是什么?
HTML:被称为超文本语言,是一种标记语言。它包括一系列标签,而这些标签可以说明文字,图形,动画,声音,表格,链接等。
二、HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> //meta元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
//在这里跟大家解释下UTF-8其实就是编译器类似于中英转换,大家也知道乱码吧。
<title>Title</title> //title的内容通常在浏览器的标题栏中显示.
</head>
<body>
//这里面放我们想写的内容
</body>
</html>
三、标签
1.h1–h6标签
代码如下(示例):
<body>
<h1>大家好我是小手冰凉</h1>
<h2>大家好我是小手冰凉</h2>
<h3>大家好我是小手冰凉</h3>
<h4>大家好我是小手冰凉</h4>
<h5>大家好我是小手冰凉</h5>
<h6>大家好我是小手冰凉</h6>
</body>
以下是运行结果
2.P标签
代码如下(示例):
<body>
<p>大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉大家好我是小手冰凉</p>
</body>
该处使用的是p标签 p标签是独立成行的
以下是运行结果
3.br标签
代码如下(示例):
<body>
<p>大家好我是小手冰凉,带<br>大家认识下br标签的作用</p>
</body>
以下是运行结果
该处使用的是br标签 br标签是用来搬运元素的,只祈祷换行的效果
4.a标签
代码如下(示例):
<body>
<a href="">大家好我是小手冰凉</a>
</body>
以下是运行结果
该处使用的是a标签超链接,用于从一个页面链接到另一个页面。
5.img标签
代码如下(示例):
<body>
<img src="" alt="">
</body>
关于img标签中的src属性以及alt属性
src(图片路径:相对路径,绝对路径) alt(图片加载不出来的时候的提示语)
那么这里大家就迷惑了什么是相对路径和绝对路径呢
相对路径:就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
绝对路径:是从盘符开始的路径
6.div标签
代码如下(示例):
<body>
<div>大家好我是小手冰凉</div>
<div>大家好我是小手冰凉</div>
<div>大家好我是小手冰凉</div>
<div>大家好我是小手冰凉</div>
<div>大家好我是小手冰凉</div>
</body>
以下是运行结果
该处使用的是div标签,div标签块级标签,独立成行,关于div标签我们就先如步的认识它吧
7.span标签
代码如下(示例):
<body>
<span>大家好我是小手冰凉</span>
<span>大家好我是小手冰凉</span>
<span>大家好我是小手冰凉</span>
<span>大家好我是小手冰凉</span>
<span>大家好我是小手冰凉</span>
</body>
以下是运行结果
该处使用的是span标签,span标签行内标签,不独立成行,关于span标签我们也先如步的认识它吧
总结
我们先初步了解了HTML中的一部分的标签,每个标签在HTML页面中都担当着不同的工作,代码也许是枯燥的,但是学习是快乐的。