html基础语法和使用

2023-12-13 06:22:32

html基础语法和使用

01 模板

  • 使用VScode创建html文件时,可以通过打!的方式快速获取到html模板
  • 注意:是英文符号的!号
    在这里插入图片描述

02 注释

  • 快捷键为Ctrl+/

03 标签类型

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

04 标签属性

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

在这里插入图片描述

  • 效果图

在这里插入图片描述

2.标签名后可以带属性

在这里插入图片描述

  • 通用属性:idclasstitle

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值】。

文章来源:https://blog.csdn.net/2302_77182979/article/details/134961259
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。