web前端开发核心基础：Html结构分析,head,body,不同标签的作用

本文链接：https://blog.csdn.net/m0_55284524/article/details/148694295

前端技术协同关系

协作流程：HTML构建页面框架—>css美化样式（选择器+属性）—>JavaScript实现交互（类似于python的脚本语言）
扩展基础：在上面三项基础上学习Vue\React、构建工具WePack和浏览器工作原理

Html结构分析：超文本标记语言

html是制作网页的标记语言
在这里插入图片描述
这里会有属性：
例如，html标签里面的key就是lang，对应的en就是value，类似于一个键值对结构，只不过键和值之间是用赋值运算符=连接起来的。

head标签是给浏览器进行识别的
body中标签是给用户进行查看识别的

html中的注释格式是

例如：

<!DOCTYPE html> <!-- html5标签的文档申明 -->
<html lang="en"> <!-- html标签的根标签，language是为了申明语言，en-英语-->
<head> <!-- 头部标签:提供关于网页的信息 -->
    <meta charset="UTF-8"> <!-- 申明字符集编码格式:如果保存的文件编码与字符编码不一致就会乱码 -->
    <title>让我们开始吧!</title> <!-- 浏览器头部的名称标题 -->
</head>
<body>  <!-- 体标签:申明网页内容的主体标签,提供网页中的具体内容 -->
    <h1>
        我是第一标题标签  <!-- 第一级标题标签 -->
    </h1>
    <a HREF="https://www.baidu.com">百度欢迎您</a> <!-- 这是超链接标签，实现页面跳转功能 -->
</body>
</html>

执行后的结果展示
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/cd7b00a913d04bd3be56770d2f0c2c8f.png

整体结构拆解如下在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试h标签</title>
</head>
<body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</body>
</html>

执行结果
在这里插入图片描述

段落标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试段落</title>
</head>
<body>
    <p>我是段落的第一段</p>
    <p>我是段落的第二段</p>
    <p>我是段落的第三段，
    即使段落  中有空格   ，
    也不会在页面显示         出来，
    这是段落        的属性</p>
</body>
</html>

在这里插入图片描述
###换行标签 br标签（break）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试换行</title>
</head>
<body>
    <p>这是一个段落<br/>注意规范写法，使用br进行换行</p>
</body>
</html>

执行测试结果如下
在这里插入图片描述

空格标识&nbsp

nbsp 是 Non-Breaking SPace的缩写，即“不被折断的空格”，当两个单词使用连接时，这两个单词就不会被分隔为2行
代码案例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试空格</title>
</head>
<body>
    <p>段落内部文字忽略连续的&nbsp;&nbsp;&nbsp;&nbsp;空格</p>
</body>
</html>

在这里插入图片描述

预格式

可以按照原先代码编写时候预先设置的格式处理好
例如下面这段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试预格式</title>
</head>
<body>
    <pre>
    这是预留格式的文本，它保留了    空格

    和换行
    </pre>

    <pre>
        sum = 0
        for i in range(1,10,1):
            sum += i
        print(f'{sum = }')
    </pre>
</body>
</html>

执行结果
在这里插入图片描述

行内组合

p标签和span标签结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试行内组合</title>
    <style type="text/css">
        span {
            color: darkgreen;
            font-size: larger;
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <p>2025年 <span>中国AI大模型市场</span>规模预计将突破495亿元...</p>
</body>
</html>

执行结果
在这里插入图片描述

水平线–hr标签分割线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平线</title>
</head>
<body>
    <p>段落1</p>
    <hr/>
    <p>段落2</p>
</body>
</html>

执行结果
在这里插入图片描述