HTML学习笔记--基础认知和常用标签

最新推荐文章于 2024-06-12 22:18:06 发布

大B哥头头头

最新推荐文章于 2024-06-12 22:18:06 发布

阅读量190

点赞数

文章标签：学习 html

本文链接：https://blog.csdn.net/m0_53152337/article/details/124902071

版权

一、HTML认知

通俗：HTML——>身体，CSS——>衣服，JS——>动作。

二、HTML骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

<html>....</html>开始...结束

<head>....</head>网页头

<title>....</title>网页标题

<body>....</body>网页主题内容，将标签往这里放

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    主题内容
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>1级</h1>
    <h2>2级</h2>
    <h3>3级</h3>
    <h4>4级</h4>
    <h5>5级</h5>
    <h6>6级</h6>

</body>
</html>

三、注释和标签结构

快捷键：Ctrl + /（VScode）

双标签：

单标签：

<br>、<hr>等

四、标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>1级</h1>
    <h2>2级</h2>
    <h3>3级</h3>
    <h4>4级</h4>
    <h5>5级</h5>
    <h6>6级</h6>

</body>
</html>

Ctrl + d 可以连续选择代码中的内容，方便复制粘贴后更改复制后的内容

五、段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <p>内容</p>
    <p>内容2</p>

</body>
</html>

VScode中，查看——>自动换行，代码可以自动换行

六、换行和水平分割线标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行、分割线标签</title>
</head>
<body>
    <hr>
    <p>内容<br>内容2</p>


</body>
</html>