排版标签

标题标签

  • <h1> 标题 </h1> 这样的就是标题标签，只有 1-6 这6级标签，1级最大，6 级最小.

vs code 中使用

  • 可以先输入 h1 再使用 tab 进行补完
  • 在标题行上 ctrl c ctrl v 就可以复制粘贴这一行标签了。
  • 如果需要把 h1 标签改为 h6 标签，只需要先选中 1, 然后 ctrl d 就会自动选中本行下一个 1, 这样只需要修改一处，其他选中的也会被一起修改

段落标签

<p> </p> 这个是段落标签。

  • 如果段落太长，在 vs code 中不方便查看，可以 查看 -> 自动换行。
  • 段落之间，有行间隙

换行标签

<br>

水平线标签

<hr>

文本格式化标签

格式化标签有短标签，也有长标签，作用是一样的。但是长标签用于对内容进行强调，方便后期的维护识别。

短 长 作用
b string 加粗
u ins 下划线
i em 倾斜
s del 删除线

媒体标签

图片标签

<img src="" alt="" title="" width="" height="">
属性 作用
src 图片路径
alt 图片加载失败时，替换用的文本
title 鼠标在图片上悬停时，显示的文字
width 宽
height 高

标签名和属性间有空格，属性间也有空格。

注意: 宽和高只标注一个的话，会自动等比例缩放，如果都标注，需要注意比例变化的问题。

路径

可以绝对路径也可以相对路径.

相对路径

  • 同级: 直接文件名，或者前面有一个点表示的同级。
  • 上级: 使用两点表示的

音频标签

<audio src="./music.mp3" controls></audio>
属性 功能
src 路径
controls 显示播放的控件
autoplay 自动播放（部分浏览器不支持）
loop 循环播放

注意: 音频标签目前支持: mp3, wav, ogg

视频标签

<video src="./video.mp4" controls></video>
属性 功能
src 路径
controls 显示播放控件
autoplay 自动播放（chrome 需要 muted 实现静音播放）
loop 循环播放
muted 静音播放

注意: 视频目前支持: mp4, webm, ogg

链接标签

<a href="./目标网页.html">超链接</a>

target 属性

target 用于控制目标网页的打开形式。

取值 效果
_self 默认，当前窗口跳转
_blank 新窗口跳转

注意: 一般网站首页是 index.html, 其他页面是从首页跳转过去

参考:

前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程