前端技术协同关系
- 协作流程：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>
执行后的结果展示
整体结构拆解如下
标签
大部分的标签都是成对出现的，但是也有部分标签是独立标签，例如img标签和meta标签。
h标签
<!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 是 Non-Breaking SPace的缩写，即“不被折断的空格”，当两个单词使用 连接时，这两个单词就不会被分隔为2行
代码案例如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试空格</title>
</head>
<body><p>段落内部文字忽略连续的 空格</p>
</body>
</html>
预格式
可以按照原先代码编写时候预先设置的格式处理好
例如下面这段代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试预格式</title>
</head>
<body><pre>这是预留格式的文本，它保留了 空格和换行</pre><pre>sum = 0for i in range(1,10,1):sum += iprint(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>
执行结果
——如何调用Huggingface的模型并实现实时返回生成结果)
