文章目录
目标:
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>