前端基础入门-高级
1.下载VScode
这一步直接下就可以了
2.下载两个插件
Chinese这个插件就是让我们的软件从英文变成汉字，open in browser这个插件就是看我们在浏览器里面看我们代码的效果嘛，然后我们就可以进行调试嘛。Chinese这个要重启我们的vscode
3.创建文件
1.点击文件-打开文件夹（自己要存放代码的地方）
2.先在自己盘里面创建test文件夹--直接拖到vscode里面就可以了
然后里面新建文件就可以了，后缀名为.html
4.-HTML骨架
-
html：整个网页
-
head：网页头部，用来存放给浏览器看的信息，例如 CSS
-
title：网页标题
-
body：网页主体，用来存放给用户看的信息，例如图片、文字
<html> <head> <title>网页标题</title> </head> <body> 网页主体 </body> </html>
提示
VS Code 可以快速生成骨架：在 HTML 文件（.html）中，!（英文）配合 Enter / Tab 键
具体架构：
<!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>
</body>
</html>我们直接在网页主体里面编写代码
5.标签的写法
<!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>
<strong>文字内容</strong>
<!-- <strong></strong> 给文字加粗-->
<hr>
<!-- <hr>下划线 -->
<br>换行
<br>换行
</body>
</html>Alt+B 在浏览器中看效果
6-注释
概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。
注释不会再浏览器中显示。
在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /
<!-- 我是 HTML 注释 -->7-标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>显示特点：
-
文字加粗
-
字号逐渐减小
-
独占一行（换行）
经验
h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo
h2 ~ h6 没有使用次数的限制
8-段落标签
一般用在新闻段落、文章段落、产品描述信息等等。
<p>段落</p>
显示特点：
-
独占一行
-
段落之间存在间隙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
<p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
</body>
</html>9-换行和水平线
-
换行：br
-
水平线：hr
-
<br>
-
<hr>
10-文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>em 倾斜</em>
<i>i 倾斜</i>
<ins>ins 下划线</ins>
<u>u 下划线</u>
<del>del 删除线</del>
<s>s 删除线</s>
</body>
</html>11-图像标签
作用：在网页中插入图片
<img src="图片的 URL">
src用于指定图像的位置和名称，是 <img> 的必须属性。
图像属性：
属性语法：
-
属性名="属性值"
-
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序
12-路径
概念：路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
-
相对路径：从当前文件位置出发查找目标文件
-
绝对路径：从盘符出发查找目标文件
-
Windows 电脑从盘符出发
-
Mac 电脑从根目录出发
-
相对路径：
查找方式：从当前文件位置出发查找目标文件
特殊符号：
-
/ 表示进入某个文件夹里面 → 文件夹名/
-
. 表示当前文件所在文件夹 → ./
-
.. 表示当前文件的上一级文件夹 → ../
绝对路径：
查找方式：Windows 电脑从盘符出发；Mac 电脑从根目录（/）出发
<img src="C:\images\mao.jpg">
提示
Windows 默认是 \ ，其他系统是 /，建议统一写为 /
特殊的绝对路径 → 文件的在线网址：https://www.itheima.com/images/logo.png "，应用场景：网页底部友情链接
13-超链接标签
作用：点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>href 属性值是跳转地址，是超链接的必须属性。
超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现新窗口打开页面。
拓展：开发初期，不确定跳转地址，则 href 属性值写为 #，表示空链接，页面不会跳转，在当前页面刷新一次。
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com/">跳转到百度</a>
<!-- 跳转到本地文件：相对路径查找 -->
<!-- target="_blank" 新窗口跳转页面 -->
<a href="./01-标签的写法.html" target="_blank">跳转到01-标签的写法</a>
<!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 -->
<a href="#">空链接</a>
</body>
</html>