本文介绍了HTML的基本结构，包括双标签与单标签的使用，如<head>、<body>、<title>等。讨论了标题标签(h1-h6)和段落标签(p)的应用，以及换行(<br>)和水平线(<hr>)的使用。此外，还涵盖了文本格式化标签(strong,em,ins,del,b,i,u,s)和图像标签(img)的属性，如src、alt、width、height。最后，提到了超链接(a标签)和多媒体元素(音频<audio>与视频<video>)的使用及属性，如controls、autoplay、loop等。
标签
-
标签成对出现，中间包裹内容
-
<>里面放英文字母，也就是标签名
-
结束标签比开始标签多/
拓展
双标签：成对出现的标签
单标签：只有开始标签，没有结束标签
HTML基本骨架
<html> <head> <title>网页标题</title> </head> <body> </body> </html>
html:整个网页
head：网页头部，用来存放给浏览器看的信息，例如CSS
-
title：网页标题
body：网页主体，用来存放给用户看的信息，例如图片文字
VSCode快速生成网页基本骨架：键入!(英文)然后点击TAB
标签的关系
作用：明确标签的书写位置；让代码格式更整齐
-
父子关系（嵌套关系）:子级标签换行且缩进（Tab键）
<html> <head></head> </html>
-
兄弟关系（并列关系）：兄弟标签换行要对齐
<head></head> <body></body>
排版标签-标题和段落
1、标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名：h1~h6
显示特点：
文字加粗
字号逐渐减小
独占一行（换行）
经验分享：
-
h1标签在一个网页中只能用一次，用来放新闻标题或网页logo
-
h2~h6没有使用次数的限制
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3> <h4>四级标签</h4> <h5>五级标签</h5> <h6>六级标签</h6> </body> </html>
效果图
2、段落标签
一般用在新闻段落、文章段落、产品描述信息等。
标签名：p（双标签）
显示特点：
独占一行
段落之间存在间隙
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p>Vue是一个JavaScript框架。[5] 与大型框架不同的是，Vue被设计为自底向上逐层应用。</p> <p>段落二，不知道写什么随便写写。</p> </body> </html>
效果图
换行与水平线标签
-
换行：<br>（单标签）
-
水平线：<hr>（单标签）
在代码中直接敲Enter键对文本内容换行是无效的。
代码实现：
<!-- 省略了html基本骨架 --> <!-- 换行标签 --> 第一行<br>第二行<br> <!-- 水平线标签 --> <hr>
效果图：
文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗，倾斜，下划线，删除线等。
主要标签：
| 标签名 | 效果 | 标签名 | 效果 |
|---|---|---|---|
| strong | 加粗 | b | 加粗 |
| em | 倾斜 | i | 倾斜 |
| ins | 下划线 | u | 下划线 |
| del | s |
strong、em、ins、del标签自带强调含义（语义）。
代码实现：
<!-- 省略html基本骨架 --> <strong>strong标签</strong> <em>em标签</em> <ins>ins标签</ins> <del>del标签</del> <br><!-- 换行 --> <b>b标签</b> <i>i标签</i> <u>u标签</u> <s>s标签</s>
效果图：
图像标签-基本使用
作用：在网页中插入图片。
标签名：<img src="图片的URL">
src用于指定图像的位置和名称，是<img>的必须属性。
代码实现：
<img src="./images/1.jpg"> <img src="./images/2.jpg">
效果图：
写URL时键入./，VSCode有提示功能。
图像标签-属性
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面时显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
| src | 指定图像的位置和名称 | 必须属性，没有则无法显示图片 |
代码实现：
<img src="" alt="这是LOGO" title="LOGO"> <img src="" alt="这是我爱罗" title="我爱罗"> <img src="./images/1.jpg" height="50" width="50"> <img src="./images/2.jpg" height="100" width="100">
效果图：
属性特点：
属性值=“属性名”
属性写在尖括号里面，标签名后面，标签名和属性之间用逗号隔开，不区分先后顺序
路径
查找文件时，从起点到终点经历的路线。
路径分类：
相对路径：从当前文件位置出发查找目标文件（重点）
/表示进入某个文件夹里面 形式：文件夹名字/
.表示当前文件所在文件夹 形式：进入当前文件所在文件夹
..表示当前文件的上一级文件夹 形式：进入当前文件上一级文件夹
绝对路径：从盘符出发查找目标文件
Windows电脑从盘符出发
Mac电脑从根目录（/）出发
网页上某文件的在线地址
Window默认是\，其他系统是/，建议统一写为/
超链接标签
作用：点击跳转到其他页面。
标签名：<a href="跳转的地址"></a>
href属性值是跳转地址，是超链接的必须属性。
代码实现：
<a href="https://www.baidu.com">跳转到百度</a> <a href="./01-标签的使用.html">跳转到“01-标签的使用”页面</a>
效果图：
超链接的属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| href | # | 空链接，不会跳转 |
| 将跳转的地址 | 超链接的必需属性，用于跳转地址 | |
| target | _blank | |
| 还有其他的属性但还没学到，暂定 |
多媒体标签
音频标签
标签名：<audio src="音频的URL"><audio>
音频标签的属性：
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必需属性） | 音频URL | 支持格式：MP3、Ogg、Wav |
| controls | 显示音频控制面板 | 可以直接将controls添加到尖括号里面，不用加属性值，因为在HTML5里面规定，如果属性值与属性名完全一样，可以简写为一个单词 |
| loop | 循环播放 | 与controls一样可以简写 |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能，加上这个属性也没用。与controls一样可以简写 |
代码实现：
<!-- 添加了controls属性使音频控制面板显示出来，不加controls则不会显示 --> <!-- controls不加属性值，因为在HTML5里面规定，如果属性值与属性名完全一样，可以简写为一个单词（完整写法为controls="controls"） --> <audio src="./media/The Way I Still Love You.mp3" controls>这是一个音频</audio>
效果图：
视频标签
标签名：<video src="视频的URL"><video>
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必需属性） | 视频URL | 支持格式：MP4、WebM、Ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器支持在静音模式下自动播放 |
代码实现：
<video src="./media/魔戒.mp4" controls></video>
效果图：
扫一扫
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
