前端之路--第三周学习

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>腾讯科技高级 web 前端开发岗位</h1><hr><h2>职位描述</h2><p>负责重点项目的前端技术方案和架构的研发和维护工作；</p><h2>岗位要求</h2><p>5年以上前端开发经验，精通html5/css3/javascript等 web 开发技术；</p><p>熟悉 bootstrap , vue , angularjs , reactjs 等框架，熟练掌握一种以上；</p><p>代码风格严谨，能高保真还原设计稿，能兼容各种浏览器；</p><p>对 web 前端的性能优化以及 web 常见漏洞有一定的理解和相关实践；</p><p>具备良好的分析解决问题能力，能独立承担任务，有开发进安把控能力；<br>责任心强，思路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p><h2>工作地址</h2><p>深圳市-南山区-粤海街道</p><img src="./images/8b4ee88dc0522ed9a9d270bc2d2d3ee.png" width="200"></body>
</html>

效果图：

二、第二个应用实例：

该案例由三个html文件组成，一个索引文件，另外两个是索引文件里面的超链接内容的文件，分别是one.html文件和two.html文件。
index.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="#">阿拉贝拉《千与千寻》</a></p><h2>2、翻唱</h2><p>“翻唱是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。”视频示例：<a href="#">有一种悲伤（翻唱）-《A Kind of Sorrow》</a></p>
</body>
</html>

效果图：

one.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>音频</h2><audio src="" controls target="_blank"></audio>
</body>
</html>

效果图：

two.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>视频</h2><video src="" controls target="_blank"></video>
</body>
</html>

效果图：

应用的知识点总结：h标签、hr标签、p标签、img标签(src,alt等命令)、audio标签，video标签(controls命令，用于控制播放；target命令，是否保留原网页)。

（注：由于没有对应的视频文件，只是做了一个简单点实操流程）

列表：

1.1列表的种类：无序列表、有序列表、自定义列表
1.2列表使用场景：按行展示关联性内容，如新闻列表、排行榜、账单等。
1.3列表的特点：按照行的形式展示，整齐展示内容

2.1无序列表命令标签：
ul、li（ul作为一个整体囊括全部，里面只能放li标签）
（li标签里面可以放任何东西）
应用代码：

<body><ul>Fruits&phones<li>apples</li><li>bananas</li><li>pears</li></ul>
</body>

效果图：

2.2有序列表命令标签：
ol、li（ol与上面ul的规范类似）
（li里面也是可以放任何东西）
应用代码：

<body><ol>Grade Rank<li>Tony:100</li><li>James:96</li><li>Shally:50</li></ol>
</body>

效果图：

2.3自定义列表命令标签：
dl、dt、dd（dl与上面ul和ol规范类似）
（dt是小标题、dd是文本信息，dd默认有缩进）

代码：

<dl>Phones Sales Ranks<dd>Iphone14</dd><dd>Huawei</dd><dd>Vivo</dd></dl>

效果图：