HTML5语法总结

目录

使用环境

  • VS Code编译器
  • 浏览器(谷歌或Microsoft Edge)

注释

  • 注释标签： < !-- .. -- >
  • VsCode注释快捷键： Ctrl + /

一.HTML基本框架

如何快速生成VS Code基本框架：在VS Code中输入'!'并回车生成一个HTML基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 
</body>
</html>
  • html:整个网页
  • head:网页头部，存放给浏览器看的代码，例如CSS
  • body:网页主体，存放给用户看的代码，例如图片、文字等
  • title:网页标题

二.标题标签

  • 标签名： h1~h6（双标签）
  • 显示特点：文字加粗，且标签数字越大，标题的文字大小越小；一个标题标签独占一行；
  • 注意：h1标签在一个网页中只能用一次，而h2~h6标签没有使用次数的限制

代码示例

 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>

结果展示：

三.段落标签

标签名：p（双标签）
显示特点：独占一行；段落之间存在间隙

代码示例

 <p>我我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我我我我嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄嚄我我</p>
 <p>你你你你你你你你你</p>
 <p>她她她她她她她她她她她她她她她她她她她</p>

运行结果：

四.换行与水平线标签

  • 换行：br（单标签）
  • 水平线：hr （单标签）

代码示例

<body>
 <h1>这里展示换行与水平线标签</h1>
 <hr>
 第一行内容
 <br>
 第二行内容
 <br>
 第三行内容
</body>

运行结果：

五.文本格式化标签(加粗、倾斜、下划线、删除线)

  • 加粗：strong或b
  • 倾斜：em或i
  • 下划线：ins或u
  • 删除线：del或s

代码示例

<body>
 <h1>这里展示文本格式化标签</h1>
 <strong>加粗标签</strong>
 <b>加粗标签</b>
 <br>
 <em>倾斜标签</em>
 <i>倾斜标签</i>
 <br>
 <ins>下划线标签</ins>
 <u>下划线标签</u>
 <br>
 <del>删除线标签</del>
 <s>删除线标签</s>
</body>

结果展示：

六.图像标签

  • 作用：在网页中插入图片
  • 语法：< img src = "图片的URL" >

src用于指定图像的位置和名称，是img的必须属性

代码示例

<body>
 <h1>这里展示图片的标签</h1>
 <br>
 <img src="./map.jpg" alt=""> <!--这里用的是相对路径-->
</body>

运行结果：

常用属性

扩展：相对路径,绝对路径与在线网址

  • 相对路径：从当前文件位置出发查找目标文件
  • 绝对路径：从盘符出发查找目标文件
  • 在线网址：路径为网址的形式
相对路径：./map.jpg
绝对路径：C:\imges\map.jpg
在线网址：src="https://www.baidu.com/images/logo.png"

七.超链接标签

  • 作用：跳转到其他页面
  • 标签名：a(双标签)
  • 必须属性：href-跳转地址

开发时，如果不知道超链接的跳转地址，则href属性值写#，表示空链接，点击不会跳转

默认是点击链接在当前页面打开网址，如果想新建页面打开网址，则需要添加属性 target="_blank"

代码示例

<body>
 <h1>这里展示超链接跳转标签</h1>
 <a href="https://www.baidu.com">点击我跳转到百度</a>
</body>

八.音频标签

  • 标签名：audio(双标签)

常用属性

属性作用说明
src(必须属性)音频URL支持格式：MP3,Ogg,Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放通常禁用

代码示例

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

运行结果

九.视频标签

  • 标签名：video(双标签)

常用属性

属性作用说明
src(必须属性)视频URL