HTML新手入门教程，手把手教你使用记事本编写一个网页
目 录（本篇字数：3290）
-
背景
趁着处于学生狗时代又是在暑假期间，我们刚刚好利用这个时间来学习一下另一个对于我现在还没接触过的领域，那就是网页编程。虽然说我想做一名Android工程师，但是现在Android开发的跨平台性使得Android编程不再仅仅局限于原生开发。我个人学习Android已经将近一年了，记得从去年的暑假，自己拿了学校讲课的书一边敲一边学习Android基础。后来因为书内容有限，自己又买了《第一行代码第二版》来自学，现在Android基础知识也基本学习完了。
因为对于Android的兴趣比较高，自己也想以后可以从事Android开发这个工作，所以在Android领域花了所有的时间来学习安卓编程知识。学了一年以后呢，发现Android水平已经很难进步了，这也是我们Android初级开发应需要过的一道坎。
在这段时间，我买了几本网上推荐的Android进阶的书籍。例如：《Android开发进阶，从小工到专家》、《Android群英传》、《Android开发艺术探索》等。可是这些书籍毕竟是进阶的书，《Android群英传》这本会比其它略好懂一点。虽然有学过一年的Android代码，但是读起这几本书，以我的感觉来看还是偏理论了一点。虽然书中有一些代码解释例子，但进阶的知识毕竟无法以偏概全，想要深入理解，还需要我们自己的深入研究。
可能有点离题了，但是这是我一个月以来的一些学习内容以及我们推荐给大家几本Android学习书籍。网上有挺多的相关书籍推荐的，但是这几本是本人读过的，虽然有些知识我这个阶段很难理解，但是之后的学习生涯我会慢慢克服这些困难。
-
HTML5学习
不得不承认一个事实，程序猿这个职业真的是活到老学到老！现在好多招Android的可能会偏向于有Android + H5混合开发经验的程序猿。H5即是HTML5（超文本标签语言）。这种标签语言的简直像我们Android XML文件，所谓同一个爸妈生的，总归有点类似。
既然我们有这个基本概念，学起来一定会轻松很多了。关于我们的软件架构有两种，归纳为：
- C/S
- B/S
C/S：即是Client/Server（客户端/服务器，例如：QQ、网易云音乐、有道词典等）
B/S：即是Brower/Server（浏览器/服务器，例如：Chrome、IE、火狐等）
那么，我们的网页就是这种B/S架构软件，这种软件有一个重要的特点：跨平台性。
以我们的QQ客户端为例子，我们在Windows环境需要开发一个Windows版；Linux环境需要开发一个Linux版；而Mac需要开发一个Mac版；Android、IOS、WindowsPhone等同理。这就给我们的软件投入使用大大增加的难度。我们需要招很多工程师来开发不同的版本，成本当然就多出了。
这样看来，我们的网页就体现出它的巨大优势。我们在任何一个平台运行浏览器它显示出来的结果基本没差别。我们在Windows、Android、Mac、IOS等平台打开[百度]基本没差别。
既然我们学习网页，我们就要了解它的基本构成。我们这里拿人体来作为抽象来理解我们的网页。
1、HTML（结构：意为主体框架，构成网页基本结构。例如：人的骨架）
HTML经历我们好几个版本的历程，现在我们基本统一在使用的HTML5。HTML语言称为超文本标签语言。
那何为超文本呢？超过文本的限制，我们文本（常用的记事本）只能输入/显示文字。而超文本既能显示文字，也能够显示图片、链接、动态图等等。
2、CSS（表现：意为显示效果，好看、漂亮。例如：人的皮肤、着装）
CSS既是CSS样式表，装饰着我们的HTML主题骨架，比如：我们给字体换颜色、大小、位置等。它必须与我们的HTML语言解耦，一般不会写在HTML语言中，通常以标签引入我们的CSS样式表。
3、JavaScript（行为：意为一般动作，像点击事件、弹窗行为。例如：人的行为动作）
这个没什么好介绍的，我们网页肯定都会有一定的行为。例如：点击事件、输入、弹框等等。这种赋予网页行为的我们称为动态网页，而没有行为的我们称为静态网页，就像死的一样。
说了这么多理论知识，其实这个还是挺有作用的，我们从它的思想上就可以发现，它的三分部其实没什么联系，要说真没联系，那不可能的。只是抽离了它使其分成了三个部分内容，实际上就是为了解耦。其中最难的就是JavaScript。我们放在最后学习。
-
HTML5结构
讲了这么多，我们还是看一下代码吧。首先，我们看一下最基本的HTML骨架，这个也是最有必要的，以这个骨架为基础，一层一层的开发出我们漂亮的网页。
· 开发工具：Hbuidler（免费、国人打造），往后我们主要使用这个软件做开发。
今天呢，我们的Hbuidler先不用，我们拿最简单的记事本来写一个网页吧，以便于记忆标签。代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个的网页：HTML</title>
</head>
<body>
<h1>我是网页中标题</h1>
</body>
</html>-
标签介绍
<!doctype html>
最开头指定文档类型为 html ，为了让我们浏览器更好的解码我们的网页，避免出现未知异常。
<html>
这是必要标签，全文有且仅有一个，是整个HTML主体，所有子标签必须写在内部。
<head>
在这里面写再多的代码浏览器也无法显示出效果，这是给开发者或搜索引擎使用的，通常配置一些HTML属性，例如我们的CSS样式。
<title>
这个标题显示的位置是我们浏览器的标题栏里，其主要作用：例如，百度第一个时候搜索引擎会去遍历title是否含有此内容。
<meta charset="utf-8">
这个非常重要，charset指定了字符集编码，有常用的ASCll（美国使用的编码）、GBK（中国使用的编码）、UTF-8（万国码）。只要我们在地球开发，我们就用UTF-8。
<body>
这里面的所有代码会显示在我们浏览器中。换句话说，就是以可见的效果显示给用户。
<h1> <h2>...... <h6>
这里总共6个标题级别，大小依次缩小，我们常用的一般到<h3>级别，<h4>之后就很少用的到了。
<br/> 换行
<hr/> 分割线
<center> 居中显示
<font color=”red” size=”7”> 字体颜色和大小，大小范围1~7
<p> 段落内容 </p> 另起一个段落，段落之间有间距
<a href=”链接地址” target=”_self”> 链接显示的名称 </a> 超链接，用于跳转网页。
_self对于本页跳转（默认），_blank对于新建一页跳转。
<img src=”图片相对路径” alt=”图片描述”></img> 显示图片（格式为png,、jpg、gif都可以。）
alt 属性一定记得写。例如我们搜索引擎会遍历alt属性，我们写个猫，那么搜索猫图片的时候就会显现出来，即使图片不是猫。
这个标签还附带width、height属性，用于指定图片大小（px像素）。如果只指定一个width/height，便以宽、高等比例缩放；指定两个便以指定的大小缩放。不理解的可以自己尝试一下。
-
图片格式区别
既然提到图片格式，我们有多种可选。比如.jpg、.png、.gif等，我们来看一下这三种的区别和优先选择哪个吧。
一、jpg格式图片：
jpg格式图片最大的缺点是不支持透明，但是它的优点是支持的颜色比较多，颜色丰富逼真。
二、png格式图片：
png补足了jpg格式图片的缺点，它支持了透明效果，支持的颜色也众多。
三、gif格式图片：
gif区别其它两种，是动态图片。它虽然支持透明，但只是简单的线性透明，比如图像复杂度高的，它便无法透明并且支持的颜色比较少。
我们开发者需要根据我们的需求情况，做出相应的选择。例如：图片显示效果一致，我们选择占用内存最小的；如果显示效果好的，我们当然选择显示效果优先，为了增加用户体验。
标签属性我们先介绍到这里，大家不妨可以把我们的代码拷贝到记事本中，然后后缀改成.html文件即可看到效果，我们顺便贴出我们的网页效果吧。
-
HTML5实战
根据我们刚学的一些标签，现在我们就来实战一个网页吧。为了方便，我就用了李白的两首诗来充当我们的网页内容，可以预览一下我们的网页效果。
这一个简单的例子，涵盖了我们刚刚学的几个知识点，所谓活学活用就是要这样。这个是我们纯HTML没有任何CSS样式，看起来有点丑。但介于初学者，也可以凑合学习了。下面看一下我们的网页源码，自己好好琢磨琢磨，熟悉一下我们的标签吧。
先看看我们的网页效果，这个图片缩放的有点不正常，大家自己试一试源码效果会更好：
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="keywords" content="李白,唐诗,静夜思,望庐山瀑布"/>
<meta name="description" content="有关于李白写的两首诗">
<title>诗仙李白</title>
</head>
<body>
<center>
<h1><font color="pink" size="6">静夜思</font></h1>
<p><font color="purple">床前明月光，</font></p>
<p><font color="purple">疑是地上霜。</font></p>
<p><font color="purple">举头望明月，</font></p>
<p><font color="purple">低头思故乡。</font></p>
<hr/>
<h1><font color="red">望庐山瀑布</font></h1>
<p><font color="bule">
日照香炉生紫烟，<br/>
遥看瀑布挂前川。<br/>
飞流直下三千尺，<br/>
疑是银河落九天。<br/></font></p>
<hr/>
<h3>李白<h3>
<p><img src="libai.jpg" alt="李白图片"></img></p>
<p>简介：李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”。<br/>
是唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”。<br/>
为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。<br/></p>
<p><a href="https://www.baidu.com/link?url=egINeZjr5GoWqQeInn7JPMSN5t9Sz4xUqTAX3G0n0QnVGmfz26xcV8a_JXPoZV4053s9-DlC0y8TlrZAGYueRnsvNnuSO-GBjLgGla0HXCe&wd=&eqid=f5f722d700010650000000065b691924" target="_blank">更多详情</a></p><br/>
<p><a href="https://blog.csdn.net/smile_Running/article/details/81505627" target="_blank">©版权所有</a></p>
<p><a href="https://blog.csdn.net/smile_Running" target="_blank">®作者</a></p>
</center>
<p><a href="mailto:767412271@qq.com">联系作者</a></p>
<p><a id="bottom" href="#">回到顶部</a></p>
</body>
</html>这是我的第一个网页，后面继续学习CSS后将会结合CSS样式，写出更好看的页面。运行这段代码很简单，复制我们的代码到你的记事本中，另存为.html文件。最后打开就可以看到效果了。
©原文链接：https://blog.csdn.net/smile_Running/article/details/81505627
@作者博客：_Xu2WeI
@更多博文：查看作者的更多博文
