html常用标签

菲燚莫属
142 阅读5分钟

开发工具(vscode): VS Code使用前要求:

  1. VScode 软件安装完毕
  2. Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
  3. open in browser 直接打开浏览器插件安装完毕

VS Code基本的快捷键:

  1. 快速生成标签：英文 + tab
  2. 保存文件：ctrl + s • 注意1：写完文件之后务必需要保存文件，否则网页无变化 • 注意2：可以设置自动保存省去每次保存的麻烦
  3. 快速查看网页效果：右击 → Open in Default Browser • 快捷键：alt + b • 注意：必须安装了open in browser 插件
  4. 快速生成结构标签：! + tab • 注意1：!必须是英文的，中文!无效 • 注意2：必须保证当前文件后缀名是.html，否则无效 • VS Code自动生成的骨架多了其他标签，之后会介绍
注:标签分为 单标签 和 双标签

主体标签:

  • html标签：网页的整体(页面最大的标签,根标签)
  • head标签：网页的头部
  • body标签：网页的身体
  • title标签：网页的标题

标题标签(只有六个):

  • • h1标签：一级标题
  • • h2标签：二级标题
  • • h3标签：三级标题
  • • h4标签：四级标题
  • • h5标签：五级标题
  • • h6标签：六级标题 示例代码:
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

段落标签: p标签 示例代码:

特点:

  • 双边标签,独占一行,段落之间存在缝隙
  • 会根据浏览器窗口大小自动换行显示.
<!-- 段落标签 -->
<p>这是一个寂寞的天吓着伤心的雨</p>
<p>这是一个寂寞的天吓着伤心的雨</p>  

换行标签: <br>

特点:单边标签 文字强制换行显示；

水平分割线: <hr>

分割不同主题内容的水平线

扩展:

重点掌握：strong 加粗、em 倾斜、ins下划线、del 删除线

    <strong>加粗</strong>
    <b>加粗</b>
    <!-- 倾斜 -->
    <em>倾斜</em>
    <i>倾斜</i>
    <!-- 删除线 -->
    <del>删除线</del>
    <s>删除线</s>
    <!-- 下划线 -->
    <ins>下划线</ins>
    <u>下划线</u>

图片标签:

  • img标签.单边标签

  • 必须属性是src.

  • src:指定需要展示图片的路径和文件名.

  • alt :替换文本,当图片路径不正确时,才显示的文字.

  • title:提示文本,鼠标悬停的时候显示的文字.

    • title属性不仅仅可以用于图片标签，还可以用于其他标签

  • width:设置图片宽度.(如果宽高就设置了一个,另外一个会等比例缩放,好处就是图片不变形)

  • height:设置图片高度.

<!-- 图像标签 -->
<img src="图片的路径" alt="替换文本" title="提示文本" width="" height="">

绝对路径

应用场景: 页面加载图片或文件时,需要找到对应的图片及文件.

问题1:路径分几种?分别是什么?

问题2:什么是绝对路径?

问题1:

  • 2种
  • 绝对路径(了解)
  • 相对路径(掌握)

问题2:

  • 绝对路径：指目录下的绝对位置，可直接到达目标位置(能够直接定位)，通常从计算机盘符开始的路径.
  • 盘符开头：D:\day01\images\3.jpg.
  • 网络地址:www.itheima.com/images/logo…（了解）

路径-相对路径

问题1:什么是相对路径?

问题2:什么同级目录?

问题1:

  • 从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置.

问题2:

  • 当前文件和目标文件在同一目录中

  • 书写方式:

    • 方式一:目标文件名字！ 例如:<img src="目标图片.gif">
    • 方式二:./目标文件名字！ 例如<img src="./目标图片.gif"> 推荐使用

问题1:什么是下级目录?

  • 目标文件在下级目录中(当前文件与目标文件的文件夹在同一个目录下面)

  • 书写方式:

    • 方式一: 目标文件的文件夹/目标文件 例如:<img src="img/目标图片.gif">
    • 方式二: ./目标文件的文件夹/目标文件 例如:<img src="./img/目标图片.gif"> 推荐使用

问题1: 什么是上级目录

  • 目标文件在当前文件的上一级目录或者上N级目录

    • 上一级:../ 上两级:../../

小结

  • 相对路径有哪三种情况：

    • 同级目录：直接写：目标文件名字！
    • 下级目录：直接写：文件夹名/目标文件名字！
    • 上级目录：直接下：../目标文件名字！

  • VSCode中路径的快捷操作？

    • 同级和下级目录：./ 之后选择即可
    • 上级目录：../ 之后选择即可

音频标签

应用场景: 在页面中插入音频

 <audio src="./music.mp3" controls autoplay loop></audio>

问题1:网页中插入音频使用什么标签？

问题2:音频标签支持几种格式?

问题3:音频标签有哪些常见属性？

小结

问题1:

  • audio标签

问题2:

  • 三种, 分别是:MP3、Wav、Ogg; 推荐使用MP3格式.

问题3:

  • src：音频路径
  • controls：音频控件
  • autoplay：自动播放
  • loop：循环播放

视频标签

应用场景: 在页面中插入视频

 <video src="./video.mp4" controls autoplay muted loop></video>

问题1:网页中插入视频使用什么标签？

问题2:视频标签支持几种格式?

问题3:视频标签有哪些常见属性？

小结

问题1:

  • video标签

问题2:

  • 三种,分别是MP4 、WebM 、Ogg; 推荐使用MP4

问题3:

  • src：视频路径
  • controls：视频控件
  • autoplay：自动播放 → 谷歌浏览器中可以配合muted属性实现自动静音播放
  • loop：循环播放

超级链接标签

应用场景: 鼠标点击后,一个页面跳转到另一个页面

 <!-- 语法 -->
<a href="跳转目标" target="窗口打开方式">文本或图像</a>
<a href="https://www.mi.com/" >外部链接</a>
<a href="./01.html">内部链接</a>
<a href="#">空链接</a>

问题1:实现点击之后,从一个页面跳转到另外一个页面,需要用什么标签

问题2:超级链接标签最重要的属性是哪个?

问题3:通过什么属性可以设置a标签的跳转方式？取值有哪些？

小结

问题1:

  • 超级链接标签,a标签

问题2:

  • href属性

问题3:

  • target属性

    • _self：默认值,在当前窗口中跳转(覆盖原始窗口)
    • _blank：在新窗口中跳转(保留原始窗口)
avatar
文章
阅读
粉丝