环境配置
使用微软自带的VS code 和 简洁明了的Google浏览器
html结构
html，也就超文本标记语言
超文本，简而言之就是链接，用链接存放大量的文字
标记，就是这个链接在网页中存放的方式，例如这个是标题，那个是音频，那个又是图片而标记，就是提示这个内容，进而体现在网页上面
标签
标签写法
标签由尖括号和里面的内容组成，重点是里面所写的内容
标签分为双标签和单标签，双标签是前后各一个标签，中间写要表现的内容，比如
<strong>文件内容</strong>
这在浏览器上面就是将中间的“文件内容”加粗
单标签比双标签少，有换行，和横线等等一些
例如
<hr>
<br>基本骨架
html主要是head和body两部分，head是给计算机看的，body才是给用户端看的，也就呈现在浏览器上的部分
在VS code中，快捷键是英文"!"加上回车。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>网页标题</title>
</head>
<body>
这里是给用户看的界面，
</body>
</html>标签关系
标签只有两种关系，一个是包含，一个是并列
<html>
<head></head>
<body></body>
</html>如上，<html></html>对于head和body是包含关系，而 <head></head>和 <body></body>就是并列关系
注释
任何代码都需要注释的存在，来帮助减少交流沟通的难度，在VS code 中，注释的快捷键是ctrl加/
这个快捷键用来添加和取消注释
各种标签
标题
<h1>第一级标题</h1>
<h2>第二级标题</h2>
<h3>第三级标题</h3>
<h4>第四级标题</h4>
标题用h1到h6标签
<br>标签自带换行h1只存在一个，作为大标题，其他不做限制
段落标签
<h1>这是主标题</h1>
<p>这是段落标签1</p>
<p>这是段落标签2</p>
<p>中间会换行，段落之间存在空隙，并且独占一行</p>
换行和水平线标签
br标签用来进行换行
<br>浏览器不识别回车，在html中回车不会进行换行
<hr>hr加上水平线
文本格式化标签
<strong>strong加粗</strong>
<b>b标签也是加粗，不换行</b>
<em>em倾斜</em>
<i>i倾斜</i>
<ins>下划线</ins>
<u>u下划线</u>
<del>del删除线</del>
<s>s删除线</s>
图像标签
用./来查找当前同文件夹中的文件，选中图片
<!-- src是图片的位置和名字，必须要写的属性 -->
<img src="./vtuber同人图.jpg">
<img src="./惠惠.jpg">
图片还可以用一些属性词来修饰限制
<!-- alt提示加载不出来的文件内容，也就是若图片加载错误，显示alt中的文字 -->
<img src="./示例图片/vtuber同人图.jpg" alt="一个美少女" title="vtuber同人图" width="100">
<!-- title属性用来鼠标停留在图片上时显示的文字 -->
<img src="./示例图片/惠惠.jpg" title="惠惠" width="100">
查找路径也可以是多种的，不一定要在这个文件夹内
<!-- ./进入当前文件夹查找 -->
<!-- ../进入上一个文件夹查找 -->
<!-- /进入某个文件里面查找 -->
<img src="../示例图片/vtuber同人图.jpg" alt="">
路径也可以是从盘符开始，也可以是网络上的图片位置
<!-- 斜线反斜线都可，斜线更好 -->
<img src="C:/Users/34699/OneDrive/Desktop/示例图片/惠惠.jpg" alt="" width="100">
<img src="https://store.cdn.queniuqe.com/public/shared/images/header/logo_steam.svg?t=962016" alt="">
超链接
超链接也就是平常在文字中可以看到的可点击的文字
<!-- 用标签“a”，href后面写地址 -->
<!-- target="_blank"是打开新窗口 -->
<a href="https://www.baidu.com/" target="_blank">跳转到baidu</a>
<br><a href="./01-标签写法.html" target="_blank">跳转到标签写法</a>
<!-- 开发初期，不知道链接在哪里，用#标示空链接 -->
<br><a href="#">空链接</a>
音视频
<!-- controls是打开控制面板，loop是用来自动循环 -->
<audio src="./张语轩 - 天之大 (原版伴奏) [mqms2].mp3" controls loop></audio>
<video src="" controls ></video>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
