前端开发基础知识（1）
什么是前端开发？
在前端开发中，HTML（超文本标记语言）负责结构和内容，定义网页的基本元素如文本、图片和链接。CSS（层叠样式表）则用于美化和布局，控制颜色、字体、间距和整体视觉效果。
HTML语法规范
标签
单标签 例如<br />
双标签 例如<html></html>
创建文件
文件名+.html
一个页面的基本框架
<html>
<head>
<title>这是一个页面</title>
</head>
<body>
早睡早起身体好
</body>
</html>在vscode里面可以直接输入英文的 ! 再按回车，就可以创建一个网页的基本框架
标题标签
标题标签有六个级别，都是h+数字的形式，h1标题最大，h6最小
文本加上标签标题会自动加粗
<!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>
<h1>标题标签</h1>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由小到大依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
</body>
</html>段落标签
<p></p>实现文本分段
文本格式化标签
加粗效果
<strong>文本</strong>
<b>文本</b>
倾斜效果
<em>文本</em>
<i>文本</i>
删除线效果
<del>文本</del>
<s>文本</s>
下划线效果
<ins>文本</ins>
<u>文本</u>
div和span标签
都可以看成一个盒子，做的内容可以往里面放
div标签独占一行，可以看作一个大盒子
span标签只占一部分，可以看作一个小盒子
图形标签
img是image的缩写
<img>标签用于嵌入图像
img标签的属性
src :规定图像的路径（必要）
alt :当图像无法正常显示时，替代图片出现（必要）
title : 当鼠标悬停在图片上时，有文本效果的出现
width :改变图片宽度
height :改变图像高度
改图片大小时，宽度和高度参数修改二选一，否则会造成图片变形
border :增加图片边框
实例
<img src="双人成行.png" alt="和好兄弟一起玩游戏" title="游戏截图" width="500" border="15">注意
图片可以有多个属性，但是必须在标签名后面
属性与属性之间没有先后顺序，属性之间用空格隔开
属性采取键值对的格式，属性="属性值"
相对路径和绝对路径
相对路径
在当前所处的文件，去到想要找的文件的路径（可以理解为一个起点到终点，期间的选择就像岔路口）
情况一：
本文件和目标文件位于同一目录时，可以直接用
<img src="双人成行.png" alt="">情况二：
目标文件位于下一级目录，下下一级目录等等时，使用时不断输入下一级目录直到找到目标文件
<img src="图片/广东地图.jpg" alt="">情况三：
想要的文件位于上一级目录，上上一级目录等等时，使用时不断返回上一级目录，直到目标文件处于情况一或者情况二，用其方法解决
返回上一级：../
<img src="../游戏截图/冬天的星露谷.png" alt="">
绝对路径
情况一：
直接查找本机文件
<img src="D:\前端开发\游戏截图\冬天的星露谷.png" alt="">情况二：
通过网络链接直接查找图片
<img src="网络链接" alt="">注意
斜杠不一样
超链接
超链接标签
<a href=""></a>
属性
target：用途是告诉浏览器希望将所链接的资源显示在哪里。默认情况下，浏览器使用的是显示当前文档的窗口、标签页或框架
属性值
_blank ：在新窗口打开链接网页。
_self ：点击链接打开的新页面取代当前页面（默认）。
<a href="链接">文本或者图片 target=""</a>外部链接
直接点可以直接跳转到别的网页
<a href="网页链接" >文本</a>
<a href="https://www.zsc.edu.cn/">外部链接</a>内部链接
在自己的网站中，网页之间相互跳转
<a href="自己定义的html文件名">文本</a>
<a href="这是我自己网站的另一个页面.html">内部链接</a>空链接
使文本看起来像是放置了链接，实际上无法跳转，用于还不确定放什么链接的时候
<a href="#">文本</a>
<a href="#">空链接</a>下载链接
实现点击链接即可下载
<a href="文件或者压缩包">文本</a>
<a href="双人成行.zip">下载链接</a>网页元素链接
在网页中的各种网页元素，如文本、图像、表格、音频、视频等添加超链接
<a href="链接">插入网页元素</a>
以下为图片作为超链接
<a href="https://www.zsc.edu.cn/"><img src="双人成行.png" alt=""></a>锚点链接
可以在一个页面内直接跳转到目标内容
先给要跳转的位置标签设置id属性<h2 id="名字">文本</h2>
之后在想要实现点击跳转的位置处补充上<a href="#id">点击的位置</a><br>
<a href="#jn">技能</a><br>
<h2 id="jn">技能</h2>
<p>
游戏中有五种不同的生活技能，分别是耕种、采矿、采集、捕鱼和战斗，每种技能都有十个等级，技能每升一级都会解锁不同的道具。
玩家可以通过使用不同的工具进行不同的日常工作，便可积累该领域的技能经验值，进而提升对应的技能等级。更高的技能等级允许玩家解锁该领域内的合成配方，或是选择加成巨大的专业技能来进一步强化人物特长。需要注意的是，通过技能升级解锁的配方需要在该日结束完毕，进行完自动存档后才能获得。
</p>注释标签
<!-- 文本 -->
快捷方式
ctrl+/
表格
表格标签
<table></table>：定义表格
属性
border：设置表格边框宽度
align：指定表格相对于周围标签的对齐方式
属性值
left：左对齐表格
right：右对齐表格
center：居中对齐
cellpadding：设定单元边沿与单元内容之间的间距
cellspacing ：设定单元格之间的间距
width：设定表格的宽度
height：设定表格的高度
<tr></tr>：定义行
<td></td>：单元格标签
<th></th>：表头标签，有加粗，居中效果，使用时替换掉<td></td>标签
表格的基本框架
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>表格的结构标签
<thead></thead>表示表格头部区域 一整行
<tbody>表示表格主体标签</tbody>
合并单元格
合并思路
跨行合并还是跨列合并
找到目标单元格，写上合并方式（跨行找最左，跨列找最上）
删除多余单元格
跨列标签
colspan：在目标单元格添加上跨行标签，合并几个就写数字几
<td colspan="数字"></td>
记得删除多余的单元格
<td colspan="2"></td>跨行标签
rowspan：在目标单元格添加上跨行标签，合并几个就写数字几
<td rowspan="数字"></td>
记得删除多余的单元格
<td rowspan="2"></td>