目录
一、排版标签
（标题标签、段落标签、换行标签、水平线标签）
1）标题标签
1.文字都加粗
2.文字都有变大，从h1至h6逐渐减小
3.独占一行
4.h系列标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6> 
5.ctrl+D(替换)
2）段落标签
1.段落之间有间隙且独占一行
2.<p>一段文字</p>
<p>我是第一段</p>
<p>我是第二段</p>
<p>我是第三段</p>3）换行标签
1.文字强制换行显示
2.<br>
<p>我是第一段 这里换行了吗</p>
<p>我是第二段</p>
<p>我是第一段 <br>这里换行了吗</p>
<p>我是第二段</p> 
4）水平线标签
1.页面中显示一条水平线
2.<hr>
二、文本格式化标签
（加粗、下划线、倾斜、删除线）
| 标签1 | 标签2 | 说明 |
| b | strong | 加粗 |
| u | ins | 下划线 |
| i | em | 倾斜 |
| s | del | 删除线 |
<b>加粗1</b> <strong>加粗2</strong><br>
<u>下划线1</u> <ins>下划线2</ins><br>
<i>倾斜1</i> <em>倾斜2</em><br>
<s>删除线1</s> <del>删除线2</del>三、媒体标签
(图片标签、路径、音频标签、视频标签)
1）图片标签
<img src="" alt="">
<img src="./小black羊.gif" alt="这是一只小黑🐏" title="小羊酱">1.src:标签属性（./: 当前文件夹）
| 属性注意点： |
| 1.标签属性写在开始标签内部 |
| 2.标签上可以同时存在多个属性 |
| 3.属性之间以空格隔开 |
| 4.标签名和属性之间必须以空格隔开 |
| 5.属性之间没有顺序之分 |
2.alt:替换文本（当图片加载失败时，才显示alt文本）
3.title:提示文本（鼠标悬停时显示的文本）
4.width和height（若只设置其中一个，会自动等比例缩放）
2）路径
（绝对路径、相对路径）
1.绝对路径：通常是从盘符开始的路径
2.相对路径：从当前文件开始出发找目标文件的过程（常用）
·同级目录：当前文件和目标文件在同一目录中
方法一：<img src="目标图片.gif">
方法二：<img src="./目标图片.gif">
·下级目录：目标文件在下级目录中
<img src="文件夹/目标图片.gif">
·上级目录
<img src="../目标图片.gif">
3)音频标签(目前支持MP3、Wav、Ogg)
<audio src="./music.mp3" controls></audio>
1.常见属性
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
4）视频标签
<video src="./video.mp4" controls></video>
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌配合静音muted使用） |
| loop | 循环播放 |
四、链接标签
（又称a标签、超链接、锚链接）
<a href="./目标网页.html">超链接</a>
1.当开发网站初期，还不知道跳转地址时，hred的值书写#(空链接)
2.target:控制目标网页的打开形式
<a href="./目标网页.html" target="_blank">超链接</a>
| 取值 | 效果 |
| _self | 默认值 在当前窗口中跳转(覆盖原网页) |
| _blank | 在新窗口中跳转(保留原网页) |
五、综合案例
1）招聘
<body>
<h1>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验， <b>精通html5/css3/javascript等</b> web开发技术；</p>
<p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
<p>代码风格严谨，能高保真还原设计稿，能兼容各种浏览器；</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
<p>责任心强，思路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./腾云大厦地图.png" height="270" alt="腾云大厦地图" title="腾云大厦">
</body>
2）跳转
index
<body>
<h1>今日搜索热词</h1>
<hr>
<h2>1.左手右手</h2>
<p>很好听的歌，巴拉巴拉巴拉巴拉。音频示例：<a href="./左手右手.html" target="_blank">左手右手</a></p>
<h2>2.可爱小猫</h2>
<p>可爱小猫，巴拉巴拉巴拉巴拉。视频示例：<a href="./可爱小猫.html" target="_blank">可爱小猫</a></p>
</body>左手右手
<body>
<h1>左手右手</h1>
<hr>
<h2>歌曲</h2>
<audio src="./左手右手.mp3" controls></audio>
</body>可爱小猫
<body>
<h1>可爱小猫</h1>
<hr>
<h2>视频</h2>
<video src="./cat-eat.MP4" controls height="400"></video>
</body> 
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
