整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

用HTML制作一个简单页面(代码阅读练习)-零基础自学网页制作


面效果展示


<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>


页面完整代码

<!DOCTYPE HTML>
<html>
<head> 
<title>文内链接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使页面居中显示,并展视窗50%宽度-->
<div style="position:fixed; top:0px;"><!--使导航菜单悬停在顶端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">试飞进程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情况</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役动态</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">总体评价</a>
</div><!--使导航菜单悬停在顶端(结尾)-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隐藏滚动条-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >试飞进程</a></h2>
歼-20隐形战斗机首架技术验证机于2011年1月11日中午12时50分左右进行首次升空飞行测试,13时08分成功着陆,历时18分钟。<br>
整个首飞过程在歼-10S战斗教练机陪伴下完成 。
2016年10月28日,首次发布“空军试飞员将驾歼-20飞机亮相中国航展”后,还陆续发布了“歼-20战机列装空军作战部队”“空军歼-20战机首次开展海上方向实战化训练”等。
<h2><a id="chapter2">研制情况</a></h2>
在2016年11月1日,第十一届珠海航展,歼-20首次进行空中飞行展示。两架歼-20做了公开飞行,不仅在现场引起轰动,也立刻被西方媒体大量报道。歼-20是中国现代空中力量的代表作,也进入了世界最先进的第五代战斗机行列,它是中国国防能力高速发展的一个象征。<br>
2018年11月11日,第十二届中国航展在珠海迎来“高光时刻”:歼-20战机在公开飞行展示中挂弹开仓,震撼献礼人民空军成立69周年纪念日。 <br>
2019年10月13日,庆祝人民空军成立70周年航空开放活动新闻发布上,空军新闻发言人申进科大校介绍歼-20战机列阵人民空军“王牌部队”
<h2><a id="chapter3" >服役动态</a></h2>
2017年3月9日,中央电视台报道歼-20战斗机正式进入空军序列。<br>
2017年3月13日,《中国日报》发布消息称,中国自主研制的歼-20近期将装配国产发动机。<br>
2017年7月30日,歼-20三机编队参加在朱日和举行的庆祝中国人民解放军成立90周年阅兵。歼击机梯队飞来,3架歼-20隐形战斗机以楔形编队的形式在天空中飞过。<br>
2017年9月28日,在中国国防部行记者会上,国防部新闻发言人吴谦大校介绍歼-20飞机已经列装部队。<br>
2017年11月10日上午,中国空军发言人申进科大校表示,歼-20 列装部队后,已经开展编队训练。<br>
2018年2月9日,中国空军新闻发言人申进科大校发布消息,歼-20开始列装空军作战部队。<br>
2018年10月30日,中国空军4架歼-20隐形战斗机现身珠海金湾机场上空。<br>
2019年10月1日,歼-20现身庆祝中华人民共和国成立70周年阅兵式;阅兵中,歼-20与歼-16、歼-10C三型飞机分别以5机楔队组成战斗队形接受检阅;该三款歼击机被誉为中国空军歼击机家族的“三剑客”,是未来联合作战的骨干力量
<h2><a id="chapter4" >总体评价</a></h2>
歼-20是眼下亚洲区域最先进的战机,这让中国空军在面对日本、韩国与印度等国家的空军时占有显著优势。外媒将歼-20与其他国家战机进行了对比。俄罗斯苏霍伊苏-57战斗机由于研制进度几度推迟,尚未正式交付入役;美国F-35战斗机也多次出现飞机供氧不足的问题,大面积停飞,出口受阻;韩国KF-X隐形战机先是被爆出因掌握不了关键技术而被迫降成四代半战机的情况,后又传出了合作方印尼打算撤资并已告知韩国的消息。因此,中国歼-20战机成为亚太区域领跑的优势战机。<br>
中国空军正向全疆域作战的现代化战略性军种迈进,成为有效塑造态势、管控危机、遏制战争、打赢战争的重要力量。歼-20战机列装空军作战部队,将进一步提升空军综合作战能力,有助于空军更好的肩负起维护国家主权、安全和领土完整的神圣使命。<br>
歼20是我国自主研制的第五代战斗机,它的研制实现了既定的四大目标——打造跨代新机、引领技术发展、创新研发体系、建设卓越团队。打造跨代新机,是按照性能、技术和进度要求,研制开发我国自己的新一代隐身战斗机。引领技术发展,指通过自主创新实现强军兴军的目标。歼20在态势感知、信息对抗、协同作战等多方面取得了突破,这是中国航空工业从跟跑到并跑,再到领跑的必由之路。创新研发体系,是指建设最先进的飞机研制条件和研制流程。通过一大批大国重器的研制,我们建立了具有我国特色的数字化研发体系。建设卓越团队,是指通过型号研制,锤炼一支爱党爱国的研制队伍,这些拥有报国情怀、创新精神的优秀青年是航空事业未来发展的生力军。未来,我们将在战斗机的机械化、信息化、智能化发展征程上不断前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="歼20气动外形分析"><!--必须保证画面尺寸与页面显示尺寸一致!-->
</map>
</div><!--小div(结尾)-->
</div><!--小div套大div隐藏滚动条(结尾)-->
</div><!--使页面居中显示,并展视窗50%宽度(结尾)-->
</body> 
</html>

页面制作技术解析

1.页面内容居中显示方法

2.导航栏悬停顶端方法

3.鼠标滑过导航标题或链接时改变背景色提示

3.隐藏滚动条方法

4.图片区域链接

大家结合代码和技术解析,先自行分析一下每段代码的作用,以及它们之间的前后关系。这一步练习对培养代码阅读能力很有好处,希望大家可以先自行阅读分析。

下一次,我会逐步演示“页面制作技术解析”中的五个步骤以及一些注意事项。

使用碎片时间,学习完整知识!关注大鱼师兄,一起精研技艺。

目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么?——零基础自学网页制作

第一个HTML页面如何写?——零基础自学网页制作

HTML页面中head标签有啥用?——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

HTML中的图片区域链接方法详解——零基础自学网页制作

HTML图片区域链接注意事项与Gimp基本用法——零基础自学网页制作

用HTML制作一个简单页面(详解)——零基础自学网页制作(完结篇)

今天,前端工程师已经成为研发体系中的重要岗位之一。

可是与此相对的是,极少大学的计算机专业愿意开设前端课程,大部分前端工程师的知识,也都是在实践和工作中不断学习的。

最近收到很多同学的后台留言,说希望多推出一些前端方向的教程。

今天我们就带来一门适合前端初学者的课程,可以带你从零入门 HTML、CSS、JS、React 等前端核心技能,并创建一个待办事项的管理应用~

项目效果:


课程从最基础的 HTML/ CSS/JS 讲起,还包含了 TypeScript/React/Fabric 等常用技能的讲解。由浅入深,层层递进,如果你想快速上手 React 框架,这门课会是你非常好的选择。

访问“实验楼”官网,搜索“从 0 到 1 构建待办事项应用”就能学习全部课程内容。

以下是课程第一节的内容 —— 「HTML 简介」,带你快速入门HTML,让我们一起进入前端的大门看看吧:

「HTML 简介」

实验介绍

本实验是对 HTML 进行学习,并且较详细的说明了 Web 是如何工作的。主要内容有:HTML 常见标签、HTML 文档结构、HTML 表格和表单、HTML 有序列表和无序列表。通过本节学习,可以构建简单的 HTML 网页。

知识点

  • 什么是 HTML
  • Web 是如何工作的
  • 文档结构
  • 常见标签
  • 表格
  • 表单
  • 有序列表和无序列表

什么是 HTML

HTML(超文本标记语言)是一种用于创建网页的标准标记语言。HTML 不需要编译,可以直接由浏览器执行,它的解析依赖于浏览器的内核。它不是一种编程语言,而是一种标记语言。

Web 是如何工作的

下面我们来演示用户是如何看到一个网页显示的。

具体来讲:

  1. 当用户通过浏览器输入网址后,浏览器先在 DNS 服务器上找到它,然后对它进行解析。
  2. 解析完成后,浏览器给服务器发送 http 请求。
  3. 服务器同意这个请求,就把 HTML 文件发送回浏览器。
  4. 浏览器拿到 HTML 文件,对其解析执行,显示在用户屏幕上。

HTML 文档结构

首先我们来看一个例子:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

这是一个 HTML 的基本骨架,我们将逐步介绍这些是什么意思。

文档类型声明

<!DOCTYPE html> 是我们的文档声明头。他告诉了浏览器,本文档处理的是 HTML 文档。

html 标签

html 标签即根元素,此处表示文档的开始,该标签包含两个子标签:head 和 body。

head 元素

head 标签下面所包含的标签由 title、meta、link、style、script 等(后面会讲到)。

title 标签

作用:设置文档的标题或者名称。浏览器通常将该标签的内容显示在窗口顶部或者标签页上。每个 HTML 文档只能有一个,必须有一个 title 标签。

meta 标签

<metacharset="UTF-8"> 声明字符的编码格式为 utf-8。

body 标签

body 标签定义文档的主体,也就是我们的主要内容(比如文本、超链接、图像、表格和列表等)。

常见标签

1.h 系类标签

h 标签有六种 h1,h2,h3,h4,h5,h6,它代表着我们的标题。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 简介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
  </body>
</html>

为了大家能更有效的学习,请使用实验楼的环境。首先我们新建一个文件,点击 File,然后 New File,命名为 index.html。

然后输入上面的代码。

让我们来看一下运行效果吧。鼠标右键 index.html 文件,点击 Open With,然后点击 Preview。

最终效果为:

2.p 标签

p 标签是我们的文本标签,p 标签会自动在其两个标签之间创建一些空白。删掉上段代码 <body> 标签里的内容,把下面的内容放到 <body> 标签里面去。

<p>我是第一段文字,实验楼,做实验,学编程</p>
<p>我是第二段文字,实验楼,做实验,学编程</p>

3. 图片标签

HTML 的图像是通过标签 <img> 来定义的。语法: <imgsrc="图片地址"/> 删掉上段代码 <body> 标签里的内容,把下面的内容放到 <body> 标签里面去。

<p>实验楼图片:</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 标签

<a> 标签是超链接标签,意思就是我们点击它可以跳转到一个网页。删掉上段代码 <body> 标签里的内容,把下面的内容放到 <body> 标签里面去。

<a href="https://www.shiyanlou.com/">实验楼</a>

点击文字:

跳转到指定网页:


篇幅有限,后续的课程内容,请在“实验楼”边敲代码边学习~

访问“实验楼”官网,搜索“从 0 到 1 构建待办事项应用”,就能找到课程,继续学习啦!

互联网高速发展的今天,我们通过浏览器可以看到各种各样的网站,包含了各式不同的领域还有内容,通过点击网站上的标签和栏目我们就能够很方便地看到网站上显示的各种数据,而这些都是建立在HTML这种标记语言的基础上做到的。

HTML的英文全称为Hyper Text Markup Language,中文称作超文本标记语言,是一种专门用来建立网站的标识语言。其中包括了许多标签将分散的网络数据连接到一起,聚合同一之后形成了我们现在所看到的网页。

看到这里是不是有许多朋友想要知道这个HTML语言该怎么去学习呢?是需要找老师统一学,还是去图书馆找专业书籍自己学好呢?不用担心,因为今天要给大家推荐的就是一个专门为大家提供各种编程语言教程的学习网站。

这个网站名叫 runoob,直接在浏览器上搜索即可找到。


图片来自RUNOOB网页截图

在首页可以看到该栏目的第二个就是关于HTML的学习教程,点击左边的方框可以调整你的课程进度,在第一章节的教程中很清晰地讲解了什么是HTML,以及告诉了你一些关于网站建立的小知识。

下方的提示框会给你提供一些对HTML零基础新手的科普,关于这种标记语言应该如何进行保存,如何查看文件后辍名,如何打开代码文件等等,还会提供一些专用工具供你学习使用。同时网站会给你简单介绍一些网页编程语言的区别,还有各种用途上的区分,非常地详细。


图片来自RUNOOB网页截图

在第三章节的编辑器一栏里,会提供给你一些HTML的专用编辑器,例如VS Code,还有sublime text 等实用工具,在后面会教你如何将这些HTML必备编辑器下载并安装,然后在浏览器上面运行。

通过插件还有语言编程的格式我们就能够学会如何制作第一步的标题了,刚开始的一步比较简单,相信大家很快就能学会如何在网页上显示自己打入的文字了。之后进一步的学习就是关于如何调整文字段落,还有各种标识的使用。


图片来自RUNOOB网页截图

在如何进行文字排版编辑的方面,教程中也讲述得很详细,包括一些用户们常犯的错误,还有一些网页的实例,甚至是这个教学网站上的排版示范都会进行一一讲解。

更深入的章节会对如何进行图像排列,传输等方面进行细讲,教程中把大部分网站会使用到的技巧还有排版方式都分成了许多个小片段,方便大家能够对每个方面针对性地学习。这些内容并不多,几乎每一个片段都是用很直白的语言进行讲解,方便所有人都能够看懂,并且在下方都会有更详细的术语解析,还有一些比较难懂的点会举例解释。


图片来自RUNOOB网页截图

经过十几章节的教学之后,基本上能够掌握HTML语言的基本用法,还有一些简单的操作了,这个时候如果想要进阶学习的话还可以在网站上查找其他的进阶语言用法,例如CSS, JavaScript等等复杂一些的语言,相应的你也会学到更多如何运营网页的方法。

当然如果想要自己建立一个网站的话,还需要更多资源还有设备,例如高速的网络连接保持网页的稳定性,以及稳定的服务器,用来保证自己的网页24小时都能保持流畅可用。不过这些都是在学会了如何建立网页之后才考虑的事了。



现在网上也有许多编程教学,在网上自学一门知识一门语言变得非常方便,但是仅仅是拥有资源还是不够的。学习如何建立自己的网站还需要大量的努力以及知识的积累,通过不断的练习还有实践才能自如地使用,只有基础扎实,建立出来的网站才能够长久。但还需要大家能够行动起来,只有去学习去实践才能够真正学会东西,希望这个教学网站推荐能够帮到更多人!