html基础语法和使用

html基础语法和使用

01 模板

• 使用VScode创建html文件时，可以通过打！的方式快速获取到html模板
• 注意：是英文符号的！号
  

02 注释

• 快捷键为Ctrl+/

03 标签类型

• 分为单标签和双标签
• 双标签
• 单标签

04 标签属性

1.双标签中可以嵌套其他标签

• 效果图

2.标签名后可以带属性

• 通用属性：id、class、title 等

05 打开方式

• 在VScode中下载插件Live Server
• 右键选择open with Live Server
• 优势保存代码后浏览器自动更新，不需要手动更新

06 标题标签

• <h1> - <h6>

  芙宁娜-德-枫丹

  芙宁娜-德-枫丹

  芙宁娜-德-枫丹

  芙宁娜-德-枫丹

  芙宁娜-德-枫丹

  芙宁娜-德-枫丹

• 效果图

07 段落标签

• <p> </p>

用于快速设置段落文本，自带段落首行缩进效果。

<p>芙宁娜，米哈游出品的游戏《原神》及其衍生作品中的角色，魔神名芙卡洛斯，“尘世七执政”中的末任水神，众水、众方、众民与众律法的女王，曾经统治着水之国枫丹 ，深受民众喜爱 。</p>

• 效果图

08 文本修饰标签

1.加粗文本

• <strong> </strong>

  用于快速设置文本加粗效果。

2.斜体文本

• <em> </em>

用于快速设置文本斜体效果

3.上标文本

• <sup> </sup>

用于快速设置文本作为上标效果

4.下标文本

• <sub> </sub>

用于快速设置文本作为下标效果。

5.删除文本

• <del> </del>

用于快速设置文本有一个删除线的效果,来描述文档中的删除。

6.添加文本

• <ins> </ins>

用于快速设置文本有一个下划线的效果,来描述文档中的更新和修正。

• 案例

<p>
        <strong>芙芙</strong>
        <em>芙芙</em>
        芙芙<sup>2</sup>
        芙芙<sub>2</sub>
        <del>芙芙</del>
        <ins>芙芙</ins>
</p

• 效果图

09 图片标签

• <img src="" alt="">

引用一张图片。

• **src：**图片的文件地址 【磁盘地址（相对路径/绝对路径）、网络地址】。
• **alt：**图片不能正常显示的时候，替代显示的文本提示。

 <img src="image-20231212183411453.png" alt="图片加载失败">xxxxxxxxxx  <img src="image-20231212183411453.png" alt="图片加载失败">

• 效果图

10 文件路径

• 分为本地路径和网络路径
• 本地路径分为相对路径和绝对路径
  • 相对路径是相对项目文件的图片路径（常用）
  • 绝对路径是图片在本机电脑中的位置
  • 网络路径是图片在网络中的位置

11 链接标签

• <a href="" target=""> </a>

从一个页面跳转到另一个页面（可以是其他网址，也可以是本地的html）。

• href

  跳转的地址（一个链接或者其他html文件）。

• target

  链接的打开方式（_self - 在当前页面打开【默认值】 _blank - 在新标签页打开）。

12 锚点

• <a href="#id" > </a>

• 标签和属性id的合作使用

• 若页面出现滚动条，可以在本页面内跳转到指定标签位置。

• href

  跳转目标标签的【id值】。