前端学习(旧版)(Markdown版)

41 阅读2分钟

学习路径

图示

image.png

第一天 标签之文字排版、图片、链接、音视频

准备开发环境

使用编辑器写代码,浏览器看效果
VS Code和Chrome浏览器较常用 image.png

VS Code基本使用

  1. 打开文件夹
  2. 安装插件
  • 扩展->搜索插件->安装->重启VS Code
    image.png
  • 打开网页插件: open in browser
  • 汉化菜单插件: chinese
  1. 缩放代码字号
  • 放大:ctrl + 加号
  • 缩小:ctrl + 减号

另:想让open in browser插件每次打开chrome浏览器,需将其设置为默认浏览器

HTML

定义

超文本标记语言——Hyper Text Markup Language

  • 超文本——链接
  • 标记(标签)——带尖括号的文本

标签语法

  • 标签成对出现,中间包裹内容
  • 结束标签比开始标签多 /

先保存,然后右键文件名,选择在浏览器中打开以查看效果
若有更改,先保存,然后在已打开的浏览器中点刷新

标签有单标签双标签两种,单标签只有开始标签没有结束标签

HTML基本骨架

即网页模板,如下图
image.png

  • html:整个网页
  • head:网页头部,存放给浏览器看的代码,例如CSS
  • body:网页主体,存放给用户看的代码,例如图片文字
  • title:网页标题

VS Code快速生成骨架:
在HTML文件中,先打出 !(英文)再按Enter/Tab
屏幕截图 2025-10-20 144731.png title标签内的内容负责更改网页标题,如图 title功能展示.png

标签的关系

  • 父子关系(嵌套关系)
  • 兄弟关系(并列关系)

注释

格式:<!--这是一行注释-->
注释不会在浏览器中显示

VS Code中,添加/删除注释的快捷键是ctrl+/

标题标签

用于文章标题或网页LOGO 1.png
标题名:h1到h6(双标签)

使用经验:h1标签在一个网页中只使用一次,用作新闻标题或网页LOGO
h2到h6标签没有使用限制

段落标签

标签名:p(双标签)

换行与水平线标签

换行:br 水平线:hr

文本格式化标签

作用:为文本添加特殊格式
加粗——strong
倾斜——em
下划线——ins
删除线——del

图像标签

格式:<img src="图片的URL"> src用于指定图像的位置和名称,是<img>的必须属性

VS Code中快速写出路径方法:.(英文) + /