【前端基础篇】Day 1
总结：
1. Web标准的构成
2. 基本标签
目录
1. Web标准的构成
2. 基本标签
2.1快捷键
2.2.1标题标签
2.2.2段落和换行标签
2.2.3文本格式化标签
2.2.4div和span标签
2.3.1 图像标签和路径
2.3.2路径
2.3.3超链接标签
2.4注释标签
2.5特殊字符
1. Web标准的构成
2. 基本标签
2.1快捷键
<!DOCTYPE html>
<!-- 文档类型声明标签，非HTML标签，位于文档最前面，
作用是告诉浏览器用哪种HTML版本来显示网页，
此处表示：当前页面采取的是HTML5版本来显示网页 -->
<html lang="zh-CN">
<!-- 用来定义当前文档的显示语言，
en定义语言为英语（英文网页），zh-CN定义语言为中文（中文网页），
定义为en的文档可以显示中文，定义为zh-CN的文档也可以显示英文，
此属性对浏览器和搜索引擎有作用（翻译） -->
<head>
<meta charset="UTF-8">
<!-- 字符集（Character set），以便计算机能识别和存储各种文字，
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码，
UTF-8被称为万国码，基本包含了全世界所有国家需要用到的字符，避免乱码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我利用vscode创建的第一个页面</title>
</head>
<body>
<script>
/* 快速复制一行：shift + alt + 下箭头（上箭头）
选定多个相同的单词：ctrl + d
向上/下移动光标：ctrl + alt + 上/下箭头
全部替换相同单词：ctrl + H
多行注释：shift + alt + A或ctrl + /
选择某个区块：shift + alt 然后拖动鼠标
放大/缩小页面：ctrl + +/-
快速定位到某行：ctrl + G
*/
</script>
<p>今天天气很好</p>
</body>
</html>
2.2.1标题标签
<body>
<h1>标题标签</h1>
<h1>标题一共六级选</h1>
<h2>文字加粗一行显</h2>
<h3>由小到大依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
------pink老师
</body>
2.2.2段落和换行标签
<body>
<p>在全球化背景下,大国关系格局<br />的构建成为国际政治中的重要议题。作为世界第二大经济体和联合国安理会常任理事国，中国在构建大国关系格局中发挥着举足轻重的作用。本文旨在探讨中国构建大国关系格局的路径与策略。</p>
<p>中国构建大国关系格局的首要原则是坚持和平共处五项原则，即互相尊重主权和领土完整、互不侵犯、互不干涉内政、平等互利、和平共处。这些原则不仅是中国外交政策的基础，也是处理大国关系的基本准则。中国主张通过对话和协商解决国际争端，反对任何形式的霸权主义和强权政治，致力于维护国际秩序的稳定性和连续性。
</p>
</body>
2.2.3文本格式化标签
<body>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
</body> 
2.2.4div和span标签
<body>
<div>日化区</div>
<div>食品区</div>
<span>薯片</span>
<span>辣条</span>
<span>面包</span>
</body>
2.3.1 图像标签和路径
<body>
<h4>图像标签</h4>
<img src="图像标签1.jpg" />
<h4>alt替换文本</h4>
<img src="图像标签2.jpg" alt="加载出错" />
<h4>title提示文本</h4>
<img src="图像标签1.jpg" alt="加载出错" title="看得懂的人有福了" />
<h4>width /height,修改其中任意一个等比例缩放</h4>
<img src="图像标签1.jpg" width="300" />
<h4>border 边框</h4>
<img src="图像标签1.jpg" border="10" />
</body>2.3.2路径
<body>
<img src="图像标签1.jpg" height="300" />
<img src="images/下一级路径.jpg" height="300" />
<img src="../上一级路径.jpg" height="300" />
<img src="C:\Users\spring\Desktop\前端基础\案例\图像标签1.jpg" height="300" />
<img src="https://ylsy.hnu.edu.cn/images/stories/weixintupian_20250219092247.jpg" height="300" />
</body>注意：相对路径图片都应该在vscode的资源管理器中，否则加载不出来
2.3.3超链接标签
<body>
<h4 id="head">1.外部链接</h4>
<a href="http://www.itcast.cn">传智播客</a>
target默认值是_self，即当前页面打开<br />
<a href="http://www.qq.com" target="_blank">腾讯</a>
target值为_blank，新窗口打开<br />
<a href="#tail">去往底部</a>
<h4>2.内部链接：网站内部页面之间的相互链接</h4>
<a href="01-第一个页面.html" target="_blank">第一个页面（在同一个目录下）</a>
<h4>3.空链接:#</h4>
<a href="#" target="_blank">deepseek的住址</a>
<h4>4.下载链接：地址链接的是文件.exe或者zip等压缩包形式</h4>
<a href="图像标签1.zip" target="_blank">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com" target="_blank"> <img src=" img1.jpg" /> </a>
<h4 id="tail">6.锚点链接</h4>
<a href="#head">回到开头</a>
</body>2.4注释标签
2.5特殊字符
<body>
<!-- 我要 学习<br /> -->
我要 学习<br />
<!-- <p> 是一个段落标签 -->
< p > 是一个段落标签
</body>