提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

08·灵魂前端工程师养成-HTML实践&手机调试

amp工程师调试HTML前端手机 实践 08
2023-06-13 09:11:06 时间

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

HTML实战

写一个自己喜欢的明星，或者动漫人物...的介绍页面

内容布局

1.个人简介 2.重要事件 3.主要成就 4.主要作品 5.生活照 6.生平



添加TOC

TOC：Table Of Content 中文：目录

技巧：用a href=#xxx做到页面的跳转

注意：最下面一个锚点，往往无法达到页面顶部，可以通过添加额外的空白栏解决

添加外部资源

添加图片 1.注意，不要让图片变形 2.如果图片比例不对，需要使用工具裁剪 3.如果图片尺寸过大，无需特殊处理 4.如果图片体积过大（300Kb）则需要压缩

添加链接 1.国内一般需要：target="_blank" 2.防止出错，自己测试一遍

如何兼容手机

需要两行代码：

meta:vp 完整内容

VSCode 默认生成的不完整！

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

img {
    max-width: 100%;
}

解析：

width=deviice-width : 按照设备宽度
initial-scale=1.0   : 缩放大小一倍（不允许缩放）
minimum-scale=1.0   : 最小缩放一倍
maximum-scale=1.0   : 最大缩放一倍
user-scalable=no    : 用户不准缩放

最终代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>邓紫棋</title>
    <style>
        table {
            width: 600px;
            table-layout: fixed;
            border-spacing: 0;
            border-collapse: collapse;
            text-align: center;
        }

        th,
        td {
            border: 1px solid black;
        }

        img {
            max-width: 100%;
        }
    </style>
</head>

<body>
    <nav>
        <ol>
            <li><a href="#GEM">个人简介</a></li>
            <li><a href="#events">重要事件</a></li>
            <li><a href="#chengjiu">成就和荣誉</a></li>
            <li><a href="#works">主要作品</a></li>
            <li><a href="#photo">生活照</a></li>
            <li><a href="#life">生平</a></li>
        </ol>
    </nav>
    <h1 id='GEM'>邓紫棋</h1>
    <p>
        邓紫棋，又名G.E.M.（“Get Everybody Moving”的简称，即“让大家动起来”），本名邓诗颖，是一名香港创作歌手。她生于中国上海，四岁时移居到英属香港。
    </p>
    <h2 id='events'>
        重要事件
    </h2>

    <ul>
        <li>2008年，7月10日，以16岁之龄出道，取得香港各大乐坛颁奖礼新人金奖。</li>
        <li>2012年，发行专辑《Xposed（曝光）》并夺得香港IFPI成为全年最高销量香港女歌手。</li>
        <li>2013年，入围第24届台湾金曲奖最佳女歌手，成为入围金曲歌后最年轻的女歌手。</li>
        <li>2014年，因参与中国湖南卫视歌唱竞赛节目我是歌手时的亮眼表现在中国大陆及全球华语地区迅速走红。</li>
    </ul>

    <h2 id='chengjiu'>成就和荣誉</h2>
    <hr>
    <h3>加拿大至Hit中文歌曲排行榜</h3>
    <table>
        <thead>
            <tr>
                <th>年份</th>
                <th>奖项</th>
                <th>入围作品</th>
                <th>结果</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2008</td>
                <td>
                    年度卓越唱作演绎女新人
                </td>
                <td style="background-color: lightgrey;">
                    不适用
                </td>
                <td style="background-color: lightgreen;">
                    获奖
                </td>
            </tr>
            <tr>
                <td>2009</td>
                <td>
                    全国推崇十大粤语歌曲
                </td>
                <td>
                    "All About U"
                </td>
                <td style="background-color: lightgreen;">
                    获奖
                </td>
            </tr>
        </tbody>
    </table>

    <h3 style="color: blue;">CASH金帆音乐奖</h3>
    <hr>
    <table>
        <thead>
            <tr>
                <th>年份</th>
                <th>奖项</td>
                <th>入围作品</th>
                <th>结果</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">2017</td>
                <td>
                    CASH最佳歌曲大奖
                </td>
                <td rowspan="4" style="background-color: lightgrey;">
                    "光年之外"
                </td>
                <td style="background-color: lightpink;" rowspan="4">
                    提名
                </td>
            </tr>
            <tr>
                <td>
                    最佳旋律
                </td>
            </tr>
            <tr>
                <td>
                    最佳歌词
                </td>
            </tr>
            <tr>
                <td>
                    最佳女歌手演绎
                </td>
            </tr>
        </tbody>
    </table>
    <h3>华语金曲奖</h3>
    <table>
        <thead>
            <tr>
                <th>年份</th>
                <th>奖项</th>
                <th>入围作品</th>
                <th>结果</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">2017</td>
                <td>年度艺人</td>
                <td rowspan="3" style="background-color: lightgrey;">不适用</td>
                <td style="background-color: lightgreen;">获奖</td>
            </tr>
            <tr>
                <td>我最喜爱的女歌手（香港）</td>
                <td style="background-color: lightgreen;">获奖</td>
            </tr>
            <tr>
                <td>全国传媒联合推介歌手</td>
                <td style="background-color: lightgreen;">获奖</td>
            </tr>
            <tr>
                <td>十大国语金曲</td>
                <td>"光年之外"</td>
                <td style="background-color: lightgreen;">获奖</td>
            </tr>
        </tbody>
    </table>

    <h2 id='works'>主要作品</h2>

    <table>
        <thead>
            <tr>
                <th>上映日期</th>
                <th>电影</th>
                <th>角色</th>
                <th>性质</th>
                <th>导演</th>
                <th>备注</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2009年2月19日</td>
                <td> 保持爱你</td>
                <td> 阿仪</td>
                <td>客串</td>
                <td> 叶念琛</td>
                <td></td>
            </tr>
            <tr>
                <td>2009年9月3日</td>
                <td> 爱出猫</td>
                <td> GEM</td>
                <td>女主角</td>
                <td> 黄柏基、彭顺、刘永泰、陈惠沂、何冠寰、陈卓贤</td>
                <td></td>
            </tr>
            <tr>
                <td>2012年12月20日</td>
                <td> 无敌破坏王</td>
                <td> 云妮露·凡史威兹</td>
                <td></td>
                <td> 里奇·摩尔</td>
                <td> 粤语版配音</td>
            </tr>
            <tr>
                <td>2017年1月6日</td>
                <td> 一路逆风</td>
                <td> 自己</td>
                <td> </td>
                <td>尼克·威克卡海姆（英语：Nick Wickham）</td>
                <td> 首部音乐纪录片</td>
            </tr>
            <tr>
                <td>2018年4月20日</td>
                <td> 白马王子(电影)（英语：Charming (film)）</td>
                <td> 睡公主</td>
                <td></td>
                <td> </td>
                <td>配音</td>
            </tr>
        </tbody>
    </table>
    <h2 id="photo">生活照</h2>
    <div>
        <a href="images/dzq2.jpeg" target="_blank">
            <img style="width: 500px;" src="images/dzq2.jpeg" alt="一张邓紫棋的照片">
        </a>
    </div>

    <div>
        <a href="images/dzq3.jpeg" target="_blank">
            <img style="width: 500px;" src="images/dzq3.jpeg" alt="一张邓紫棋的照片">
        </a>
    </div>

    <div>
        <a href="images/dzq4.jpeg" target="_blank">
            <img style="width: 500px;" src="images/dzq4.jpeg" alt="一张邓紫棋的照片">
        </a>
    </div>
    <h2 id="life">生平</h2>
    <p>
        邓紫棋出生于上海市，家中长女，有一个妹妹。4岁时随父母移居香港。出生于1991年8月16日的当天刚好为农历七月七日－七夕情人节。
    </p>
    <p>
        父亲是香港人，母亲是上海音乐学院声乐系毕业生，外祖母为歌唱老师，舅父为小提琴手，外祖父则是乐团萨克斯风手。邓紫棋离开上海前与外婆同住，在家人熏陶下，自小热爱音乐。5岁起便尝试作曲及填词，13岁完成英国皇家音乐学院联合委员会钢琴检定考试八级。而首张EP中“睡公主”为13岁时所创作的作品。这一首歌也是邓紫棋因暗恋别校的篮球队队长，而为他创作的作品。
    </p>
    <p>
        7岁时，邓紫棋参与演出教育电视。13岁时，与陈奕迅合拍加州红月饼义卖广告。2006年，在Westlife亚洲巡回演唱会（Westlife's Face to Face Asia Tour）记者会中担任表演嘉宾。
    </p>
    <p>
        2003年，邓紫棋毕业于在香港九龙太子道西中华基督教会协和小学上午校，为校内诗歌班成员。此前她在九龙塘方方乐趣英文小学就读一年级。二年级才转读协和小学。中学升读九龙油麻地真光女书院，课余时参与体操活动。中学一年级起，不断地参加各项歌唱比赛，曾于一年内赢得五项歌唱比赛冠军。2006年，参加Spice
        It Up
        学园祭获得冠军，亚军为JW。比赛中，被前经理人张丹邀请签约蜂鸟音乐。2008年，邓紫棋在香港中学会考取得21分的成绩。同年10月，正式发行首张个人EP《G.E.M.》，荣获“叱咤乐坛生力军女歌手金奖”，成为历来最年轻，同时也是首位未成年得奖者。


    </p>
</body>

</html>

部署到GitHub上

一个免费的服务器

#初始化仓库
MacBook-Pro:html-demo-3 driverzeng$ git init 
#添加仓库
MacBook-Pro:html-demo-3 driverzeng$ git add .
#提交仓库
MacBook-Pro:html-demo-3 driverzeng$ git commit -v
#提交到远程仓库
git remote add origin git@github.com:DriverZeng/dengziqi.git
#推送
git push -u origin master







点击链接：https://driverzeng.github.io/dengziqi/

全世界都可以看见了

相关文章