当前位置： 首页 > news >正文

前端基础入门-高级

news 2025/3/9 10:29:37

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>

显示特点：

  • 文字加粗

  • 字号逐渐减小

  • 独占一行（换行）

经验

  1. h1 标签在一个网页中只能用一次，用来放新闻标题或网页的 logo

  2. 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">

提示

  1. Windows 默认是 \ ，其他系统是 /，建议统一写为 /

  2. 特殊的绝对路径 → 文件的在线网址：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>

14.音频

<audio src="音频的 URL"></audio>

 代码：

<!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><!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 --><audio src="./media/music.mp3" controls loop autoplay></audio>
</body>
</html>

15.视频

<video src="视频的 URL"></video>

常用属性

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->
<video src="./media/vue.mp4" controls loop muted autoplay></video>
<!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><!-- 在浏览器中，想要自动播放，必须有 muted 属性 --><video src="./media/vue.mp4" controls loop muted autoplay></video>
</body>
</html>

 

16.无序列表

无序列表：

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>

注意事项：

  • ul 标签里面只能包裹 li 标签

  • li 标签里面可以包裹任何内容


http://www.mrgr.cn/news/93385.html

相关文章：

  • WLAN无线组网 WI-FI
  • 如何改变怂怂懦弱的气质（2）
  • 从零构建企业级财务分析数仓 | Hive建模实战
  • Spring（四）先注册后注入
  • 为AI聊天工具添加一个知识系统 之138 设计重审 2 文章学 之2 结合诠释学的重组
  • Gazebo11 与 Protobuf 版本管理
  • Python：简单的爬虫程序，从web页面爬取图片与标题并保存MySQL
  • K8s 1.27.1 实战系列（五）Namespace
  • aws(学习笔记第三十一课) aws cdk深入学习（batch-arm64-instance-type）
  • MacOS Big Sur 11 新机安装brew wget python3.12 exo
  • ubuntu20.04已安装 11.6版本 cuda，现需要通过源码编译方式安装使用 cuda 加速的 ffmpeg 步骤
  • AI绘画软件Stable Diffusion详解教程（7）：图生图基础篇
  • 【JAVA架构师成长之路】【JVM实战】第2集：生产环境内存飙高排查实战
  • DeepSeek + 飞书多维表格搭建你的高效工作流
  • tcc编译器教程2 编译lua解释器
  • 运算放大器LM358的简单应用
  • thunder bird 配置邮箱
  • 维度建模事实表技术基础解析（以电商场景为例）
  • ORB-SLAM2源码学习（六）：相机跟踪（局部地图跟踪和关键帧创建）
  • 【Java数据结构】前K个高频单词