5.1认识网页中的图片<br/>
    5.1.1常用的图片格式<br/>
    bmp、jpeg、gif、png<br/>
    5.1.2选择合适的图片格式<br/>
    制作网页时图片格式一般在jpeg和gif格式中选择。jpeg是有损压缩，以24位（2的24次方）颜色存储，颜色比gif丰富，一般适用于对颜色丰富程度要求高的图片；gif格式仅支持256种颜色，支持透明度及动画，一般适用于颜色少的图片。<br/>
<br/>

5.2插入图片<br/>
    5.2.1插入图片到网页<br/>
    <p>白百合的照片<img src="bbh.jpg" height=200 /></p>
    5.2.2通过width和height设置图片在网页中显示的宽度和高度<br/>
    <br/>
    5.2.3通过border属性设置图片的边框<br/>
    <p>白百合的照片<img src="bbh.jpg" height=200 border=5 /></p>
    5.2.4通过title属性给图片添加提示文字<br/>
    <p>白百合的照片<img src="bbh.jpg" height=200 width=180 border=5 title="这是白百合的照片" /></p>
    5.2.5通过alt属性给图片添加替代文字<br/>
    <p>白百合的照片<img src="a/bbh.jpg" height=200 width=180 border=5 title="这是白百合的照片" alt="找不到白百合照片" /></p>

5.3图文混合排版<br/>
    img标签的align属性用于设置图片和段落的排版，align属性主要有以下几种情况：<br/>
    top——图像顶部和同行文本的最高部分对齐（可能是图像顶部也有可能是文本顶部）<br/>
    middle——图像顶部和同行文本的基线对齐（通常问文本行基线，并不是实际的中部）<br/>
    bottom——图像底部和同行文本的底部对齐<br/>
    left——使图像和左边界对齐（文本环绕图像）<br/>
    right——使图像和右边界对齐（文本环绕图像）<br/>
    absmiddle——图像中部和同行文本的中部绝对对齐<br/>

5.4给图片加链接<br/>
    <a href="http://www.baidu.com"><img src="bbh.jpg" height=200 /></a>
    <a href="http://www.baidu.com"><img src="bbh.jpg" height=200 border=0 /></a><br/>
    每个区域设置不同的链接，即设置不同的热区：<br/>
    <img src="bbh.jpg" usemap="test" border=0 width=160 height=200 />
    <map name="test">
        <area shape="rect" coords="0,0,160,100" href="http://www.baidu.com" />
        <area shape="rect" coords="0,100,160,200" href="http://www.sina.com" />
    </map>
    <br/>
    通过设置usemap属性定义图片的映射名称。双标签map包含多个area单标签，area包含shape和coords,shape定义热区形状，coords用于定义坐标，共包含以下四种情况。<br/>
    default,默认值，为整幅图片；<br/>
    rect,矩形区域，设置左上角和右下角顶点的坐标<br/>
    circle，圆形区域，设置中心坐标和半径<br/>
    poly，多边形区域，设置各顶点坐标<br/>

5.5设置滚动图片<br/>
    <marquee direction="left" ><img src="bbh.jpg" height="100" /></marquee>

在此仅介绍如何将一个简单的html网页放到阿里云上并通过浏览器进行访问。
首先你要有个云服务器，这里以阿里的轻量应用服务器为例，系统为cent os 7，若为Ubuntu系统，将命令中yum改为install即可。
远程登陆服务器后，在命令行输入命令:

[root@centos]yum -y install httpd

可使用SecureCRT等远程连接工具连接，也可使用阿里云网页上的远程连接。



安装完毕后，出现如下目录结构：

/etc/httpd/conf/httpd.conf  # 主配置文件

/var/www/html                   # 默认网站根目录

启动http服务，在shell命令行里输入如下代码：

service httpd start

接着把你的html文件放入/var/www/html/下即可访问。
如将index.html文件放入/var/www/html下，即可通过:http://云服务器IP地址/index.html 访问。
注：云服务器IP地址要为公网IP。

 叫我一个痛苦的老人，但回到我的时代，网站处于完全不同的疯狂状态 。 在设计方面，创新是如此不可预测，以至于您不知道要获得什么。 颜色狂野 ， 布局是实验性的 ，发生了很多事情 。 哎呀，您甚至可以在网站背景中听到一些不适的节拍或视频 。 
 仅十年前，网站或多或少都是从头开始构建的 。 如今， 一切都一样 。 您偶然发现了一个随机的公司网站，您会看到什么？ 

 屏幕最上方的导航栏 。 
 英雄形象或滑块 。 
 用Sans-Serif书写的短线大得惊人，即使在一英里之外也能看到它。 
 字幕不太醒目 。 
 使页面滚动的 按钮 。 
 至少三个带有简短说明的图标，详细说明该网站的内容。 

 现在是2017年，情况似乎保持不变 。 网页设计已成为可预测的 。 您很可能会一遍又一遍地看到相同的设计，也许颜色和图标略有不同 。 
 有人会说，过去的网页设计在美学上是残酷的，但从所有方面来说都是可以想象的和实验性的 。 如今，感觉就像您在浏览与以前访问过的网站看起来异常相似的网站一样。 
网页设计什么时候变得如此无聊？
 Web设计变得停滞不前 ，部分是因为它变得容易-以及我们使它变得容易 。 我们希望使工作更轻松，因此我们创建了一个框架 ，该框架基本上允许每个设计人员以最小的努力建立一个网站 。 
 以Bootstrap为例。 在过去的几年中，Bootstrap在网页设计中的使用呈爆炸式增长，如今已在近20％的网站中使用 。 如果您认为数量不多，请再考虑一下，因为它占了1100万个网站 。 
 这背后的原因是，Bootstrap使设计人员可以更快地构建网站，因为它已经具有很可能在任何类型的网站设计中都存在的元素。 

 这主要是Bootstrap提供的钩子框架。 他们通常具有网格布局系统 ， 易于使用的组件以及易于导航的代码 ，这些代码使设计人员能够快速完成项目 。 
 最重要的是，这些框架不仅使设计人员更容易，更快捷地完成工作，而且还使营销人员可以检查清单中的任务，因为这些框架的转换效果更好 。 它们经过高度优化，可提供出色的用户体验 ， 易用性和可访问的号召性用语 。 
 当然，这些都是利用的绝佳机会 。 这是可以理解的。 您不必每次都需要重新创建轮子 。 您只需要根据需要进行调整即可。 但是，使用框架的普及也阻碍了设计的创造性 ，这是创建网站的基本目的之一。 
 由于框架易于使用，因此很多人都可以利用它。 首先，您会获得使用这些框架的早期采用者，但是当每个人都开始追赶 ，并且设计变得无处不在时 ，它就会变得烦人 。 

 举例来说，当前在Themeforest数据库中有9,238个WordPress主题 – 仅使用Bootstrap构建了3,760个 WordPress主题 。 占网站上所有WordPress主题的42％以上。 此外，过去五年来对Bootstrap的需求一直在上升 。 

 这令人震惊，因为使用框架虽然有时可能是有利的，但不一定是最好的选择 。 
 一遍又一遍地使用相同的设计并不能使您成为更好的设计师。 它使你成为僵尸 。 首先，您认为自己使工作变得更轻松，但最终，您不会意识到框架正在为您缓慢地做出样式决定 。 您对此非常满意，以至于开始产生通用解决方案 。 
 想象一下，像网站这样使用框架？ 它的外观和感觉都不应该很好 。 
为什么会这样呢？
 事实是，从头开始设计和构建的网站倾向于为设计师提供更多的使用自由 。 框架通常是盒装的，并具有某些规则，以便您可以轻松使用它们。 建立这些规则是为了使框架保持不变 。 这样比较容易，因为技术水平较低的设计人员可以轻松地遵守它们， 而不会带来任何复杂性 。 
 但是，随着这些规则的制定，设计人员被束缚了自己的能力 。 对于他们而言， 添加 框架中未包含的 某些元素将非常困难。 很难进行试验，因为您已经知道它是否可以工作。 
我们可以从中得出什么结论
 很难做到独特 ，这是可以理解的，但是随着时间的流逝，坚持使用同一类型的设计可能对您不利 。 作为设计师，您希望自己的创造力更加出色 ，因此尝试设计 并从头开始 进行设计的过程可能会有所帮助。 但是，如果您将自己可以做或不能做的事情装在盒子里，那么您将很难提出新的想法 。 
 请记住，框架就像自行车上的安全轮 。 它们旨在帮助您一路走来，但迟早您必须将它们卸下 。 走出设计舒适区，放开您的创造力。 



翻译自: https://www.hongkiat.com/blog/web-design-everything-looks-the-same/

前情
想做一张表格传到云服务器上以便随时查看，自己用table标签写网络表格忒麻烦，各种有关excel的js折腾起来也费事，上网一查excel表格可以直接导出html格式。

上传服务器浏览出现乱码，遂知是编码的问题，记录一下以免以后用到又忘了
步骤（此处仅以导出单工作表为例）
Excel - - 文件 – 保存副本（另存为）

1.保存类型选择网页，保存选择发布工作表（保存整个工作簿则会有一个文件夹和一个网页文件）



2.修改编码类型（上传之后出现乱码就是在这被坑了，等网页生成再改编码相当麻烦）

点击右下角工具


在下拉框里选择Web选项，点击编码，选择需要的编码格式



之后就可以愉快的上传服务器浏览了