如果你已经看了我前写的前2篇关于html的文章，那么你肯定已经可以编写html了。嗯，如果你不介意用户体验的话，一个~~ 破破烂烂 ~~，简简单单的网页随时可以出自你的手中，就像互联网刚兴起时那些买卖域名的网站一样。一看就懂，给人一种简洁大气的感觉。如果你不想编写这种“简洁大气”的网站的话，可以看看接下来要写的东西。
昨天写的简单小页面，看了之后是不是觉的色彩比较单一，不够炫酷个性。今天我们就这个小网页再加点新东西。
1.在网页中添加图片
在网页中加入图片，其实很简单，只要使用<img>标签就可以了。在<body></body>之间加上下面的代码，双击打开网页就可看到效果。
<img src="zuzi.jpeg" />
<!-- 上一句是你图片就在当前文件夹内，调用本地文件用的，下面是调用网络图片用的-->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534493662053&di=531cb414ecc1ab1cfd2b41e639c99a69&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F81%2F13%2F27i58PICNFf_1024.jpg" />
图片调用就是这么简单，但因为使用这个标签需要"src"这个属性一样，所以昨天没讲。这里跟大家讲一讲什么是属性。
简单来说，属性是 HTML 元素提供的附加信息。一般放在开始标签中，以名称/值对的形式出现，格式：name="value"（这里使用单双引号都可以，不过规范的来说是使用双引号。当然如果value这个值里本身包含双引号的话，你就需要使用单引号了）。
如果你已经看过图片展示的效果了，那么你就会发现……，图片太大影响观瞻。这个时候该怎么办呢？还是用属性。看下面这段代码（因为链接太长，所以代码显示的时候默认都改成本地图片写法的，没影响，大家知道就行。）。
<img src="zuzi.jpeg" width="256px" height="201px">
其中width是图片宽度，height是高度的意思，px是大小单位。当然这是废话，都看的懂。只是让刚入坑没多久的朋友们感受一下。而类似的属性还有很多这里跟大家先熟悉下，想了解更多的自己查。我想说也说不完，真要说完了大家估计都要烦的没兴趣和心情继续看下去了。
2.在网页中添加链接
这东西跟图片一样简单，一样是内联标签，不过不是单个的空元素标签。在代码中添加<a></a>就可以，具体代码如下：
<a href="https://baike.baidu.com/item/竹石/276?fr=aladdin">去百度百科看看吧！</a>
这样你就得到了一个点击后会跳转到《竹石》百度百科的链接。你可以复制代码看看效果，然后你会发现这样普通的链接会不会无法衬托出这首诗的逼格。什么年代了还用这样的蓝色下划线链接，点了还会覆盖自身网页。
现在讲讲如何利用属性制作一个自己喜欢的链接，首先是target属性。对于不想覆盖原网页，想直接再开个网页显示的时候，在链接里加上这个属性，属性值为_blank。代码如下：
<a href="https://baike.baidu.com/item/竹石/276?fr=aladdin" target="_blank">去百度百科看看吧！</a>
看了看还是有些不好，这是内联元素，跟上一行内容接一起了，得重新开一行，否则不爽快，加个
就行。但如果想用属性解决呢？嗯，直接改变样式属性style就可以了，值为display:block，代码如下：
<a href="https://baike.baidu.com/item/竹石/276?fr=aladdin" target="_blank" style="display:block">去百度百科看看吧！</a>
嗯，这就是我昨天说用的溜了不用太在意区块与内联区别的原因，想怎么玩自己改就行了。所以，……，你平常一定要注意用的是区块标签还是内联标签。啊！？为什么？因为你不是大神啊，是大神你还看我写的这种回顾性基础类文章？html都专门做了区分了，当人家闲的dt啊！何必自找麻烦？当然要是真大神在看文，莫怪莫怪。
注：其实现在的网页中更常用的是用图片做点击链接，很简单，把图片标签和链接标签合起来用就可以了。具体请看最后部分的代码。
3.内容居中与背景
添加以上代码运行后，你是不是发现已经好多了，但内容都是靠左显示的，不好看，这个时候你就要在做些细微的属性调节。
首先是居中，需要用到样式属性style，值为text-align:center。代码：style="text-align:center;"。记得要添加在外围块中。然后是背景（我用的是图片的淡黄色），同样是样式属性style，值为background: #d4cdc2。代码：style="background: #d4cdc2;"。合起来为style="text-align:center; background: #d4cdc2;"。代码如下：
<!-- 注：html 色值常用格式为#d4cdc2（16进制模式）或rgb(a)格式（红，绿，蓝（透明度））-->
<div style="text-align:center; background: #d4cdc2;">……</div>
4.demo代码
别的也不多说了，没办法，说多了你也记不住。想了解的话自己去网上找吧，一堆一堆的。
注：代码中我还用了padding和color两个样式中的属性。可以看看效果，很常用，去了解一下吧。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单小实例</title>
</head>
<body>
<div style="text-align:center; background: #d4cdc2;">
<h3 style="padding-right:18px;">竹石</h3>
<p style="padding-left:50px">--郑燮</p>
<p style="color:white"=>咬定青山不放松，</p>
<p style="color:white">立根原在破岩中。</p>
<p style="color:white">千磨万击还坚劲，</p>
<p style="color:white">任尔东西南北风。</p>
<!-- <img src="zuzi.jpeg" width="256px" height="201px" />-->
<!-- 上一句是你图片就在当前文件夹内，调用本地文件用的，下面是调用网络图片用的-->
<!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534493662053&di=531cb414ecc1ab1cfd2b41e639c99a69&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F19%2F81%2F13%2F27i58PICNFf_1024.jpg" width="256px" height="201px" />-->
<a href="https://baike.baidu.com/item/竹石/276?fr=aladdin" target="_blank"style="display:block"><img src="zuzi.jpeg" width="256px" height="201px" /></a>
</div>
</body>
<!--脚本与css文件在这里引入-->
<script src="testjs.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</html>
