文章目录
目标：
1、排版标签（标题标签、段落标签、换行标签、水平线标签）
2、文本格式化标签
3、媒体标签（图片标签、路径、音频标签、视频标签）
4、链接标签
一、排版标签
1、标题标签
h系列标签
代码：
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
特点：
· 文字都有加粗
· 文字都有变大，并且从h1->h6文字逐渐减小
· 独占一行
注意：
· h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
2、段落标签
场景：用于分段显示
代码：
<p>我是一段文字</p>
特点：
· 段落之间存在间隙
· 独占一行
3、换行标签
场景：让文字强制换行显示
代码：
<br>
特点：
· 单标签
· 让文字强制转换
4、水平线标签
场景：分隔不同主题内容的水平线
代码：
<hr>
特点：
· 单标签
· 在页面中显示一条水平线
二、文本格式化标签
场景：需要让文字加粗、下划线、倾斜、删除线等效果
代码：
三、媒体标签
1、图片标签
场景：在网页中显示图片
代码：
<img src = "" alt = "" title = “” width = “” height = “”>
src:目标图片的路径
注意：
· 当前网页和目标图片在同一个文件夹，路径直接写目标图片的名字即可（包括后缀名）
alt：替换文本
注意：
· 当图片加载失败时，才显示alt的文本
· 当图片加载成功时，不会显示alt的文本
title：提示文本（当鼠标悬停时，才显示的文本）
注意：
· title属性不仅可以用于图片标签，还可以用于其他标签
width和height：宽度和高度（数字）
注意：
· 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
· 如果同时设置了width和height两个，若设置不当此时图片可能会变形。
特点：
· 单标签
· img标签需要展示对应的效果，需要借助标签的属性进行设置
2、路径
场景：页面需要加载图片，需要先找到对应的图片
分类：
· 绝对路径（了解）：目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
· 相对路径（常用）：从当前文件（当前的html网页）开始出发找目标文件的过程（要找到的图片）
相对路径分类：
·同级目录
·下级目录
·上级目录
同级目录：当前文件和目标文件在同一目录中
代码步骤：直接写目标文件的名字即可
<img src = "目标图片.gif">
<img src = "./目标图片.gif">
VS Code快捷操作：直接敲./可以提示当前文件夹下所有文件信息，直接选择即可。
下级目录：目标文件在下级目录中
<img src = "目标文件夹/目标文件名">
VS Code快捷操作：直接敲./可以提示当前目录下有哪些文件夹，直接一层层选择即可。
上级目录：目标文件在上级目录中
<img src = "../目标文件名">
VS Code快捷操作：直接敲…/可以提示上级目录下所有文件信息，直接选择即可。
3、音频标签
场景：在页面中插入音频
代码：
<audio src="./音频名称" controls autoplay loop></audio>
src：音频路径
controls：显示播放的控件
autoplay：自动播放（部分浏览器不支持）
loop：循环播放
注意：
·音频标签目前支持三种格式：MP3、Wav、Ogg
4、视频标签
场景：在页面中插入视频
代码：
<video src="./视频名称" controls muted loop></video>
src：视频路径
controls：显示播放的控件
autoplay：自动播放（谷歌浏览器中配合muted实现自动静音播放）
loop：循环播放
注意：
·视频标签目前支持三种格式：MP4、WebM、Ogg
四、链接标签
场景：点击之后，从一个页面跳转到另一个页面
称呼：a标签、超链接、锚标签
代码：
<a href = "./目标网页.html"></a>
特点：
如果需要a标签点击之后去指定页面，需要设置a标签的href属性。
属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）
·外部链接：
<a href = "http://www.baidu.com/">百度一下</a>
·内部链接
<a href = "./目标网页.html">网页目标</a>
属性名：target
属性值：目标网页的打开形式
<a href = "https://www.baidu.com/" target = "_blank">百度一下</a>
_self：默认值，在当前窗口中跳转（覆盖原网页）
_blank：在新窗口中跳转（保留原网页）
空链接
代码：
<a href = "#">空链接</a>
功能：
·点击之后回到网页顶部
·开发中不确定该链接最终跳转位置，用空链接占个位置
五、综合案例
（一）招聘案例
1、代码
<!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>腾讯科技高级web前端开发岗位</h1>
<hr>
<h2>职位描述</h2>
<p>负责重点项目的前端技术方案和架构的研发和维护工作</p>
<h2>岗位要求</h2>
<p>5年以上前端开发经验，精通<strong>html5/css3/javascript等web</strong>开发技术;</p>
<p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上;</p>
<p>代码风格严谨，能高保真还原设计稿，能兼容各种浏览器;</p>
<p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践:</p>
<p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力;</p>
<p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
<h2>工作地址</h2>
<p>上海市-徐汇区-腾云大厦</p>
<img src="./img/map.png" alt="">
</body>
</html>
2、网页效果
（二）今日热词案例
1、代码
综合案例.html
<!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>
<hr>
<h2>1、阿卡贝拉</h2>
<p>阿卡贝拉，即无伴奏合唱。音频示例：
<a href="one.html">阿卡贝拉《千与千寻》</a></p>
<h2>2、翻唱</h2>
<p>“翻唱”是指将已经由他人演唱的歌曲根据自己的风格重新演唱。
视频示例：<a href="two.html">有一种悲伤（翻唱）</a></p>
</body>
</html>
one.html
<h1>阿卡贝拉《千与千寻》</h1>
<hr>
<p>音频</p>
<audio src = "./img/music.m4a" controls></audio>
two.html
<h1>有一种悲伤（翻唱）</h1>
<hr>
<p>视频：</p>
<video src = "img/video.mp4" controls></video>
2、网页效果
六、总结
1、排版标签
标题h系列、段落p、换行br、水平线hr
2、文本格式化标签
加粗strong、下划线ins、倾斜em、删除线del
3、图片标签
<img src = "" alt = "" title = “” width = “” height = “”>
4、路径
相对路径：同级目录+下级目录+上级目录
5、音频标签、视频标签
<audio src="./音频名称" controls autoplay loop></audio>
<video src="./视频名称" controls muted loop></video>
6、链接标签
<a href = "https://www.baidu.com/" target = "_blank">百度一下</a>
126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
