新手向：HTML基础

最新推荐文章于 2024-06-13 17:45:51 发布

ma_no_lo

最新推荐文章于 2024-06-13 17:45:51 发布

阅读量363

点赞数 6

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

本文链接：https://blog.csdn.net/ma_no_lo/article/details/138254856

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一，概念

HTML（HyperText Markup Language）是一种标记语言，用于创建和设计网页内容的结构和样式。它是网页开发的基础，允许开发者通过一系列标签（tags）和属性（attributes）来构建网页的骨架，并赋予网页内容意义和结构。

超文本：链接
标记：标签结构

标签结构

标签要成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
标签分类：双标签和单标签标签，带尖括号的文本

如果代码环境在vscode中，我们可以通过!快速创建HTML骨架。

HTML骨架

<html>
<head>
<title>网页标题</title>
 </head>
<body>
网页主体
</body>
</html>

● html：整个网页
● head：网页头部，用来存放给浏览器看的信息，例如 CSS
● title：网页标题
● body：网页主体，用来存放给用户看的信息，例如图片、文字

标签的关系

兄弟关系：标签处在同一级上

父子关系：标签为包含关系（嵌套关系）

注释

我们可以通过快捷键ctrl+/来快速注释，注意，HTML和CSS和JS的注释略有不同，注意甄别。

二，标签类别

1.标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

h1-h6大小逐级递减，标题标签顾名思义，一般用来写标签，当然，HTML5新增的header标签用来写标题也很不错。

2.段落标签

<p>段落</p>

用来显示文本信息，独占一行，行间具有间隙。

3.换行和水平线

<br>
<hr>
<hr>
<hr>
<hr>

效果如图。

4.文本格式化标签

5.图像标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="">
</body>

</html>

src:图片路径，可以选择本地也可以链接网络url

alt:图片损坏后的替代

title:提示文本，就是光标移动到屏幕时的文字提醒。

width/height:调节图片大小，同时调的话可能会改变图片比例

6.超链接标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href=""></a>
</body>

</html>

href:填写超链接，可以是其他html文件路径，也可以是某个标签的id，点击链接跳转到目标位置。

没想好填哪个地址可以用#代替

target:默认是该网页跳转，即覆盖目前网页，target="_blank"是开启一个新窗口。

7.音频标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio src=""></audio>
</body>

</html>

8.视频标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video src=""></video>>
</body>

</html>