本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
说我们IIS7站长博客，有一篇博文用了他们的图片。
要求我们给他们一张图片6000元。要不然法院告我们
为避免不必要的麻烦，IIS7站长博客，全站内容图片下架、并积极应诉
博文内容全部不再显示，请需要相关资讯的站长朋友到必应搜索。谢谢！
另祝：版权碰瓷诈骗团伙，早日弃暗投明。
相关新闻：借版权之名、行诈骗之实，周某因犯诈骗罪被判处有期徒刑十一年六个月
叹！百花齐放的时代,渐行渐远!
不得不承认一个事实，程序猿这个职业真的是活到老学到老！现在好多招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 ，为了让我们浏览器更好的解码我们的网页，避免出现未知异常。
<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>
原文链接：https://blog.csdn.net/weixin_33774883/article/details/93382987
