8.【HTML】实践

256 阅读2分钟

1.HTML页面制作流程

1.选择一个个人喜欢的选题。
2.查找该选题相关资料
3.内容布局,层次划分

2.我制作的一个页面

<!DOCTYPE html>
<head>
    <style>
        img{
            max-width:100%;
        }
    </style>
    <!--img样式,使在手机浏览时,图片显示完整的宽度-->
</head>
<body>
<h1>李健</h1>
<p>李健,1974年9月23日出生于黑龙江省哈尔滨市,中国内地流行乐男歌手、音乐制作人,毕业于清华大学电子工程系。</p>
<nav>
    <ol>
        <li><a href="#znjl">早年经历</a></li>
        <li><a href="#rmgq">热门歌曲</a></li>
        <li><a href="#grsh">个人生活</a></li>
        <li><a href="#shz">生活照</a></li>
    </ol>
</nav>
<h2 id="znjl">早年经历</h2>
<ol>
    <li>1985年,刚上初中的李健因受电影《路边吉他队》的影响,而迷上了吉他。</li>
    <li>1988年,母亲用两个多月的工资给他买了一把红棉吉他。</li>
    <li>1993年,上高三的李健为了高考加分,参加了清华大学面向全国文艺爱好者举办的冬令营,在活动中他以一首《说句心里话》获得了全国第一名,为高考加了50分,最终被保送进入清华大学电子工程系。</li>
    <li>1994年,进入清华大学电子系的李健在班级中担任班长,期间与同班同学缪杰,在清华大学举办的“第一届校园歌曲大赛”上获得了第一名;同年,获得“首都大学生独唱比赛”一等奖;此外,他不仅为校园内的九支乐队担任吉他伴奏,而且还加入了清华合唱团,并常常以独唱演员的身份登台表演。</li>
    <li>1996年,获得中央电视台十二演播室大学生歌曲联播金奖。</li>
    <li>1998年,李健从清华大学毕业;毕业后,李健进入了国家广电总局,成为一名网络工程师。</li>
    <li>2000年年底,李健辞去了工作,开始了自己的音乐之路。</li>
</ol>
<h2 id="rmgq">热门歌曲</h2>
<table>
    <thead>
        <tr>
            <th>序号</th>
            <th>歌曲名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>风吹麦浪</td>
        </tr>
        <tr>
            <td>2</td>
            <td>传奇</td>
        </tr>
        <tr>
            <td>3</td>
            <td>贝加尔湖畔</td>
        </tr>
    </tbody>
</table>
<h2 id="grsh">个人生活</h2>
<p>李健的父亲名叫李九良,原是黑龙江省京剧院武生。李健的妻子孟小蓓比其小5岁,她是清华大学社会学博士,两人从很小的时候就相识了。</p>
<h2 id="shz">生活照</h2>
<div>
<img src="https://bkimg.cdn.bcebos.com/pic/30adcbef76094b364447adf1a9cc7cd98c109dd1?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxMTY=,xp_5,yp_5" alt="图一" width="400">
</div>
<div>
<img src="https://bkimg.cdn.bcebos.com/pic/0823dd54564e9258c74837f29682d158ccbf4ea9?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UxMTY=,xp_5,yp_5" alt="图二" width="400">
</div>
</body>

3.如何在手机上预览页面

在head标签中加入以下代码,保证手机页面的完整性

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!--输入“meta:vp”+“TAB”即可-->
    <style>
        img{
            max-width:100%;
        }
    </style>
</head>

调试方法一:笔记本+手机

1.手机、电脑连接同一个wifi
2.手机直接用端口+IP访问电脑

调试方法二:台式机+手机