前端之路--第三周学习

最新推荐文章于 2024-11-01 13:37:40 发布

sjdxcg

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量554

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/sjdxcg/article/details/127453167

版权

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>

效果图：
请添加图片描述

sjdxcg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫