【前端基础】Day 1 HTML
总结：
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>