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访问电脑