html写一个简单的浏览页面

模仿百度百度百科来写一个浏览页面
效果图如下

第一步：安装编程软件
编写html文件可以用很多软件甚至记事本都可以，由于记事本使用不方便，这里使用比较常用的vscode，网上下载安装即可
安装之后插件安装，点击最左侧的按钮

在输入框中输入关键词chinese就可以找到汉化包，点击安装即可

下面是我安装的几个常用的插件

第二步：创建html文件
新建文件

将其后缀名改为html，这里将其保存在html命名的文件夹中

生成html框架：！+tab
修改标题

框架上的内容不作解释了，这里只需要用到body标签进行html的书写。

html标签通常是双标签如<body></body>,,我们将需要用到的文字放在双标签的中间；如果需要进行修饰，就在标签的括号内打一空格然后书写修饰部分如超链接标签<a></a>，需要进行链接的添加时 <a href="#早年经历">【早年经历】</a>

第三步：生成文章的骨架
我们从百度百科将文字复制过来

注意：调试浏览我们生成的页面右键点击，然后用默认浏览器打开即可（另一个是选择其他浏览器打开）

由于网页不会自动进行换行处理，所以我们的文字不会像我们复制过来那么整齐有序，二是会挤成一团。所以我们需要用到几个常见的标签对文字进行处理。
<h></h>标题标签
相应的h1为一级标题，h2为二级标题，h3，h4为三四级标题，一级标题最大，然后越来越小
段落标签
 换行标签
这里凯里*欧文使用二级标题标签，目录、经历、生涯、评价使用四级标签即可。使用段落标签和换行标签进行文章结构的划分

效果如图

第四步：插入图片
将图片插入文章适当位置
这里将图片下载在html文件的同一个文件夹中，所以不需要追踪图片的位置，
插入图片需要用到<img src=" ">标签,如果图片不在同一个文件夹需要在" “内输入图片的地址及图片名

适当调整大小，使用宽度width或高度height其中一个即可

第五步：添加链接
我们想要实现点击目录上的文字即可跳转到想要浏览的位置，或者想要点击跳转的文字，即可跳转到其他页面，需要使用到超链接标签<a></a>
实现跳转到其他标题的位置我们在跳转到的标题上添加id属性

然后在想要点击的位置,添加a标签，添加href属性，” “内输入#+id

在文章最后添加百度百科上欧文的链接，想要点击链接的同时在新的页面打开，在a标签内添加target=”_blank"

源代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面</title>
</head><body><h2>凯里·欧文</h2><img src="t1.jpg"><p>凯里·欧文（Kyrie Irving），1992年3月23日出生于澳大利亚墨尔本，拥有美国/澳大利亚双重国籍，美国/澳大利亚职业篮球运动员，司职控球后卫，效力于NBA布鲁克林篮网队。 [1] </p><p>凯里·欧文于2011年以选秀状元身份进入NBA，先后效力于骑士队、凯尔特人队以及篮网队；新秀赛季当选最佳新秀；2014年首次入选全明星正赛先发阵容，并当选全明星赛最有价值球员；2014-15赛季入选最佳阵容第三阵容；2015-16赛季随骑士队夺得NBA总冠军；2018-19赛季入选最佳阵容第二阵容；截至2018-19赛季共6次入选NBA全明星阵容。 [2] </p><p>凯里·欧文于2014年代表美国队参加男篮世界杯，随队获得冠军并当选MVP。2017-18赛季荣获年度运球奖。 [3] 2019福布斯100名人榜，凯里·欧文排名第74位。 [4] </p><h4 id="mulu">目录</h4><a href="#早年经历">【早年经历】</a><br><a href="#NBA生涯">【NBA生涯】</a><br><a href="#人物评价">【人物评价】</a><br><h3 id="早年经历">【早年经历】</h3><h4>高中时期</h4><p>凯里·欧文高一和高二就读于蒙特克莱尔·金伯利私立高中，两个学年场均可得26.5分、10.3个篮板、4.8次助攻和3.6次抢断，成为校队历史上第一位个人得分超过1000分的球员。之后欧文转学至圣帕特里克高中，高四学年场均可得24.5分、5.0个篮板、6.5次助攻和1.6个抢断。</p><p>凯里·欧文参加了2010年麦当劳全明星赛，得到13分、2篮板、2助攻和3次抢断。随后欧文又参加了2010年乔丹精英赛，得到全队最高的22分和7次助攻，此外还有3个篮板和1次抢断，欧文和哈里森·巴恩斯共同当选乔丹精英赛最有价值球员。</p><img src="t2.jpg" height="300"><h4>大学时期</h4><p>2010年，凯里·欧文进入杜克大学，代表杜克大学参加大学篮球比赛。 [6] </p><p>2010年11月23日，在杜克与堪萨斯州立大学野猫队的比赛中，欧文得到17分、6个篮板和5次助攻，并在防守端很好地限制了堪萨斯州大的第一得分手雅各布·普伦，导致后者全场12投仅1中。</p><p>2010年12月1日，在NCAA焦点之战——杜克大学和密歇根州立大学斯巴达的比赛中，欧文12投8中，砍下全场最高的31分，带领球队战胜对手，这也是杜克校史上新人得分第二高，仅次于J.J.雷迪克在2003年得到的34分。</p><img src="t3.jpg" height="300"><p>2010年12月10日，在杜克大学对阵巴特勒大学的比赛中，欧文右脚趾韧带受伤。</p><p>2011年2月4日，欧文受伤两个月后，脱掉了右脚保护靴。</p><P>2011年3月18日，凯里·欧文火线复出，上场20分钟拿下14分4篮板，帮助球队以87-45击败汉普顿。</P><p>2011年3月24日，在NCAA甜蜜16强比赛中，卫冕冠军杜克大学负于亚利桑那大学，欧文出场31分钟，得到28分和3次助攻。</p><p>2010-11赛季，凯里·欧文因脚趾伤势缺席了大部分的比赛，在出场的11场比赛中，场均得到17.5分、3.4个板和4.3次助攻，两分球命中率为59%，三分球的命中率为45%。</p><p>2011年4月7日，凯里·欧文宣布参加2011年NBA选秀。 [7-8] </p><img src="t4.jpg" height="300"><br><a href="#mulu">返回目录</a><br><h3 id="NBA生涯">【NBA生涯】</h3><p>2011-12赛季</p><p>2011年6月24日，在2011年NBA选秀中，克里夫兰骑士队用状元签选中了凯里·欧文。 [9-10] </p><img src="t5.jpg" height="300"><p>2011年12月10日，骑士队和状元秀凯里·欧文签约，合同为期4年价值2402万美元，其中合同最后两年为球队选项。 [11] </p><img src="t6.jpg" height="300"><p>2011年12月17日，在季前赛骑士与活塞的比赛中，凯里·欧文完成NBA首秀，得到全场最高的21分，帮助骑士以91-87战胜对手。 [12] </p><p>2012年2月2日，凯里·欧文当选1月东部最佳新秀。1月份，欧文的场均得分领跑新秀榜（18.1分），助攻（场均4.9次）和命中率（51.1%）都排在第二位，三分球命中率（41.1%）则排在了第三位。</p><p>2012年1月27日对阵新泽西篮网，欧文得到生涯新高的32分，其中有21分在第四节获得，成为自2006年11月24日马库斯·威廉姆斯之后首位在第四节拿到21分的新秀球员。 [13]</p><a href="#mulu">返回目录</a><br><h3 id="人物评价">人物评价</h3><p>凯里·欧文球风华丽，非常像当年的“微笑刺客”伊塞亚·托马斯。大学期间，作为一个纯控卫，欧文兼具了NCAA1号位上最顶尖的技术、 速度和意识，拥有相当棒的控球技术，突破犀利，投篮能力优秀，传球视野开阔，判断力一流。 [133] （网易体育评）</p><p>作为一名控卫，凯里·欧文的身体素质非常不错，而且他基本功扎实，敏捷性和弹跳能力也非常出色。 [7] （骑士主帅的拜伦·斯科特评）</p><p>凯里·欧文控球技巧非常出色，左右手都能突破，几乎没有投篮短板，现役最好的新生代控卫中， 威少、罗斯以身体劲爆闻名，史蒂芬·库里靠的是投篮，欧文则更加均衡。 欧文是联盟最擅长单打的球员之一。欧文最大的短板就是防守。 [134] （新浪体育评）</p><p>骑士核心凯里·欧文已经取得了很大成功，唯一限制他成为超级巨星的问题就是伤病。 [135] （ESPN评）</p><a href="#mulu">返回目录</a><br><p>具体内容参考<a href="https://baike.baidu.com/item/%E5%87%AF%E9%87%8C%C2%B7%E6%AC%A7%E6%96%87/4796186?fromtitle=%E6%AC%A7%E6%96%87&fromid=8732990&fr=aladdin" target="_blank">百度搜索欧文</a></p>
</body></html>

html写一个简单的浏览页面相关推荐

写一个简单的登录页面!!!(html)
写一个简单的登录页面!!! 大家好,我是伍柒. 今天我又双叒叕发现了一个好东西. 那就是用html做一个登录页面那,该如何做呢? 首先现在html里的body里写一个头部header标签(双标签 ...
一个HTML实例:写一个简单的注册页面
<!-- 暂时还没学CSS,只能是用表格进行页面布局,但是实际开发的时候不要这样写,这个题还是挺不错的,能够检验前面所学知识是否牢固,但是对于实际开发的时候不可这样使用做这个网页的时候遇到两个 ...
java写一个窗体并连接MySQL_大神帮忙写一个简单地java页面，连接MySQL数据库之后能够显示数据库上的数据...
展开全部用jdbc 连接mysql数据库就行了,网上搜下一大把. --记得在classpath下加入mysql 的jdbc驱动包. /** * @author :来e68a84e8a2ad32313 ...
java用爬虫爬一个页面_使用Java写一个简单爬虫爬取单页面
使用Java爬虫爬取人民日报公众号页面图片使用Java框架Jsoup和HttpClient实现,先看代码爬取目标页面 1.使用Maven构建一个普通Java工程加入依赖: org.jsoup j ...
小白教程——Windows下用PHP写一个简单的登录注册页面（二）
哈喽,看到这里希望小伙伴们都把wampserver环境安装好了,如果还没有安装或创建数据表就移步去看我上一篇文章吧.OK~接下我们将进入代码实现部分,首先我们需要一个文本编辑器,可以是电脑自带的not ...
用CSS写一个简单的幻灯片效果页面
这里是修真院前端小课堂,本篇分析的主题是 [用CSS写一个简单的幻灯片效果页面] 每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方 ...
弄一个html的登录页面,使用HTML写一个简单的跳转登录页面
最近在学习前端的知识,于是就想写一个简单的页面跳转,必须是勾选了"我同意"这个选项以后才能跳转,否则不能,不废话,直接上代码. 首先是第一个页面:testlogin1.html h ...
用Qt写一个简单的音乐播放器（四）：歌曲浏览、上一曲、下一曲
一.前言在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
如何搭建python框架_从零开始:写一个简单的Python框架
原标题:从零开始:写一个简单的Python框架 Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. 你为什么想搭建一个Web框架?我想有下面几个原因: 有一个 ...

html写一个简单的浏览页面

html写一个简单的浏览页面

html写一个简单的浏览页面相关推荐

最新文章

热门文章