HTML5网页设计之王宝强个人博客网页成品作业模板
网页运行效果图<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/365a1ef3617b46a096b0e57736a999db~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664593&x-signature=jRkWd1aN0dwXBWASMQG9CH3WQdg%3D" style="width: 50%; margin-bottom: 20px;"><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">王宝强个人博客首页</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/a5d46f869fb84c34a502d1f14c04d166~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664593&x-signature=%2B3noEBRVnuWy3Vi5M9njDoGnoFg%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">个人博客简介页面</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/42d5f8e5a6f04fed8f2623b32f4ab251~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664593&x-signature=fKewMx3MLa6Z7eSlKwXJqy61vio%3D" style="width: 50%; margin-bottom: 20px;"></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/3a90fe9fecd64a16b2ccf67762bec287~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722664593&x-signature=5TmgG11ETrQtI68qvR1fdB1JAgE%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">个人避开联系<span style="color: black;">咱们</span>页面</p>
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">首页HTML代码</p>
<span style="color: black;"><!DOCTYPE <span style="color: black;">html</span>></span>
<span style="color: black;"><<span style="color: black;">html</span>></span><span style="color: black;"><<span style="color: black;">head</span>></span><span style="color: black;"><<span style="color: black;">meta</span> <span style="color: black;">http-equiv</span>=<span style="color: black;">"Content-Type"</span> <span style="color: black;">content</span>=<span style="color: black;">"text/html; charset=UTF-8"</span>></span>
<span style="color: black;"><<span style="color: black;">title</span>></span>王宝强个人网站<span style="color: black;"></<span style="color: black;">title</span>></span>
<span style="color: black;"><<span style="color: black;">link</span> <span style="color: black;">href</span>=<span style="color: black;">"css/style.css"</span> <span style="color: black;">rel</span>=<span style="color: black;">"stylesheet"</span> <span style="color: black;">type</span>=<span style="color: black;">"text/css"</span> <span style="color: black;">media</span>=<span style="color: black;">"all"</span>></span>
<span style="color: black;"></<span style="color: black;">head</span>></span>
<span style="color: black;"><<span style="color: black;">body</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"wrap"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"header"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"logo"</span>></span>
<span style="color: black;"><<span style="color: black;">h1</span>></span>王宝强个人简介<span style="color: black;"></<span style="color: black;">h1</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"clear"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"h_main"</span>></span>
<span style="color: black;"><<span style="color: black;">ul</span> <span style="color: black;">class</span>=<span style="color: black;">"nav"</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span><span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"index.html"</span>></span>首页<span style="color: black;"></<span style="color: black;">a</span>></span><span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span><span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"jianjie.html"</span>></span>基本信息<span style="color: black;"></<span style="color: black;">a</span>></span><span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span><span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"zuopin.html"</span>></span>个人作品<span style="color: black;"></<span style="color: black;">a</span>></span><span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"><<span style="color: black;">li</span>></span><span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"liuyan.html"</span>></span>给我留言<span style="color: black;"></<span style="color: black;">a</span>></span><span style="color: black;"></<span style="color: black;">li</span>></span>
<span style="color: black;"></<span style="color: black;">ul</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"search"</span>></span>
<span style="color: black;"><<span style="color: black;">form</span>></span>
<span style="color: black;"><<span style="color: black;">input</span> <span style="color: black;">type</span>=<span style="color: black;">"text"</span> <span style="color: black;">value</span>=<span style="color: black;">""</span>></span>
<span style="color: black;"><<span style="color: black;">input</span> <span style="color: black;">type</span>=<span style="color: black;">"submit"</span> <span style="color: black;">value</span>=<span style="color: black;">""</span>></span>
<span style="color: black;"></<span style="color: black;">form</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"clear"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"container"</span>></span> <span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"index.html#"</span>></span><span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"images/1.jpg"</span> <span style="color: black;">width</span>=<span style="color: black;">"1024"</span> <span style="color: black;">height</span>=<span style="color: black;">"300"</span>></span><span style="color: black;"></<span style="color: black;">a</span>></span> <span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"clear"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"main"</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"bm_title"</span>></span><span style="color: black;"><<span style="color: black;">a</span> <span style="color: black;">href</span>=<span style="color: black;">"index.html"</span>></span>基本信息<span style="color: black;"></<span style="color: black;">a</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"bm_des1"</span>></span>
<span style="color: black;"><<span style="color: black;">img</span> <span style="color: black;">src</span>=<span style="color: black;">"images/touxiang.JPG"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">b</span>></span> 姓名:<span style="color: black;"></<span style="color: black;">b</span>></span>王宝强<span style="color: black;"></<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">b</span>></span>生日：<span style="color: black;"></<span style="color: black;">b</span>></span>1982年4月29日<span style="color: black;"></<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">b</span>></span>籍贯：<span style="color: black;"></<span style="color: black;">b</span>></span>河北省邢台市南和区<span style="color: black;"></<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">b</span>></span><span style="color: black;">表率</span>作品：<span style="color: black;"></<span style="color: black;">b</span>></span>士兵突击、我的兄弟叫顺溜、人在囧途、唐人街探案、盲井、道士下山、人再囧途之泰囧、Hello!树先生、一个人的武林<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span><span style="color: black;"><<span style="color: black;">b</span>></span><span style="color: black;">重点</span>成就： <span style="color: black;"></<span style="color: black;">b</span>></span><span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>第24届中国电视金鹰奖观众<span style="color: black;">喜欢</span>的电视剧男演员奖<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>第7届中国金鹰电视艺术节最具人气男演员奖<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>第40届台湾电影金马奖最佳新人奖<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>第5届亚太电影大奖最佳男演员奖<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>第20届北京大学生电影节最受大学生的欢迎男演员<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">p</span>></span>第9届俄罗斯海参崴国际电影节最佳男演员奖<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"clear"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"footer"</span>></span>
<span style="color: black;"><<span style="color: black;">p</span> <span style="color: black;">class</span>=<span style="color: black;">"w3-link"</span>></span>Copyright © 王宝强20301201715<span style="color: black;"></<span style="color: black;">p</span>></span>
<span style="color: black;"><<span style="color: black;">div</span> <span style="color: black;">class</span>=<span style="color: black;">"clear"</span>></span><span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">div</span>></span>
<span style="color: black;"></<span style="color: black;">body</span>></span><span style="color: black;"></<span style="color: black;">html</span>></span>
可以发布外链的网站 http://www.fok120.com/ 谷歌网站排名优化 http://www.fok120.com/ 期待与你深入交流，共探知识的无穷魅力。
页:
[1]