如果你已經(jīng)看了我前寫的前2篇關(guān)于html的文章尿瞭，那么你肯定已經(jīng)可以編寫html了乾蛤。嗯，如果你不介意用戶體驗(yàn)的話日缨，一個~~ 破破爛爛 ~~钱反，簡簡單單的網(wǎng)頁隨時可以出自你的手中，就像互聯(lián)網(wǎng)剛興起時那些買賣域名的網(wǎng)站一樣匣距。一看就懂面哥，給人一種簡潔大氣的感覺。如果你不想編寫這種“簡潔大氣”的網(wǎng)站的話毅待，可以看看接下來要寫的東西尚卫。
昨天寫的簡單小頁面，看了之后是不是覺的色彩比較單一尸红，不夠炫酷個性吱涉。今天我們就這個小網(wǎng)頁再加點(diǎn)新東西。
1.在網(wǎng)頁中添加圖片
在網(wǎng)頁中加入圖片外里，其實(shí)很簡單怎爵，只要使用<img>標(biāo)簽就可以了。在<body></body>之間加上下面的代碼盅蝗，雙擊打開網(wǎng)頁就可看到效果鳖链。
<img src="zuzi.jpeg" />
<!-- 上一句是你圖片就在當(dāng)前文件夾內(nèi)，調(diào)用本地文件用的墩莫，下面是調(diào)用網(wǎng)絡(luò)圖片用的-->
<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" />
圖片調(diào)用就是這么簡單芙委，但因?yàn)槭褂眠@個標(biāo)簽需要"src"這個屬性一樣，所以昨天沒講贼穆。這里跟大家講一講什么是屬性题山。
簡單來說，屬性是 HTML 元素提供的附加信息故痊。一般放在開始標(biāo)簽中顶瞳，以名稱/值對的形式出現(xiàn)，格式：name="value"（這里使用單雙引號都可以，不過規(guī)范的來說是使用雙引號慨菱。當(dāng)然如果value這個值里本身包含雙引號的話焰络，你就需要使用單引號了）。
如果你已經(jīng)看過圖片展示的效果了符喝，那么你就會發(fā)現(xiàn)……闪彼，圖片太大影響觀瞻。這個時候該怎么辦呢协饲？還是用屬性畏腕。看下面這段代碼（因?yàn)殒溄犹L茉稠，所以代碼顯示的時候默認(rèn)都改成本地圖片寫法的描馅，沒影響，大家知道就行而线。）铭污。
<img src="zuzi.jpeg" width="256px" height="201px">
其中width是圖片寬度，height是高度的意思膀篮，px是大小單位嘹狞。當(dāng)然這是廢話，都看的懂誓竿。只是讓剛?cè)肟記]多久的朋友們感受一下磅网。而類似的屬性還有很多這里跟大家先熟悉下，想了解更多的自己查筷屡。我想說也說不完知市，真要說完了大家估計都要煩的沒興趣和心情繼續(xù)看下去了。
2.在網(wǎng)頁中添加鏈接
這東西跟圖片一樣簡單速蕊，一樣是內(nèi)聯(lián)標(biāo)簽，不過不是單個的空元素標(biāo)簽娘赴。在代碼中添加<a></a>就可以规哲，具體代碼如下：
<a >去百度百科看看吧！</a>
這樣你就得到了一個點(diǎn)擊后會跳轉(zhuǎn)到《竹石》百度百科的鏈接诽表。你可以復(fù)制代碼看看效果唉锌，然后你會發(fā)現(xiàn)這樣普通的鏈接會不會無法襯托出這首詩的逼格。什么年代了還用這樣的藍(lán)色下劃線鏈接竿奏，點(diǎn)了還會覆蓋自身網(wǎng)頁袄简。
現(xiàn)在講講如何利用屬性制作一個自己喜歡的鏈接，首先是target屬性泛啸。對于不想覆蓋原網(wǎng)頁绿语，想直接再開個網(wǎng)頁顯示的時候，在鏈接里加上這個屬性，屬性值為_blank吕粹。代碼如下：
<a target="_blank">去百度百科看看吧种柑！</a>
看了看還是有些不好，這是內(nèi)聯(lián)元素匹耕，跟上一行內(nèi)容接一起了聚请，得重新開一行，否則不爽快稳其，加個
就行驶赏。但如果想用屬性解決呢？嗯既鞠，直接改變樣式屬性style就可以了煤傍，值為display:block，代碼如下：
<a target="_blank" style="display:block">去百度百科看看吧损趋！</a>
嗯患久，這就是我昨天說用的溜了不用太在意區(qū)塊與內(nèi)聯(lián)區(qū)別的原因，想怎么玩自己改就行了浑槽。所以蒋失，……，你平常一定要注意用的是區(qū)塊標(biāo)簽還是內(nèi)聯(lián)標(biāo)簽桐玻。案萃臁！镊靴？為什么铣卡？因?yàn)槟悴皇谴笊癜。谴笊衲氵€看我寫的這種回顧性基礎(chǔ)類文章偏竟？html都專門做了區(qū)分了煮落，當(dāng)人家閑的dt啊踊谋！何必自找麻煩蝉仇？當(dāng)然要是真大神在看文，莫怪莫怪殖蚕。
注：其實(shí)現(xiàn)在的網(wǎng)頁中更常用的是用圖片做點(diǎn)擊鏈接轿衔，很簡單，把圖片標(biāo)簽和鏈接標(biāo)簽合起來用就可以了睦疫。具體請看最后部分的代碼害驹。
3.內(nèi)容居中與背景
添加以上代碼運(yùn)行后，你是不是發(fā)現(xiàn)已經(jīng)好多了蛤育，但內(nèi)容都是靠左顯示的宛官，不好看葫松，這個時候你就要在做些細(xì)微的屬性調(diào)節(jié)。
首先是居中摘刑，需要用到樣式屬性style进宝，值為text-align:center。代碼：style="text-align:center;"枷恕。記得要添加在外圍塊中党晋。然后是背景（我用的是圖片的淡黃色），同樣是樣式屬性style徐块，值為background: #d4cdc2未玻。代碼：style="background: #d4cdc2;"。合起來為style="text-align:center; background: #d4cdc2;"胡控。代碼如下：
<!-- 注：html 色值常用格式為#d4cdc2（16進(jìn)制模式）或rgb(a)格式（紅扳剿，綠，藍(lán)（透明度））-->
<div style="text-align:center; background: #d4cdc2;">……</div>
4.demo代碼
別的也不多說了昼激，沒辦法庇绽，說多了你也記不住。想了解的話自己去網(wǎng)上找吧橙困，一堆一堆的瞧掺。
注：代碼中我還用了padding和color兩個樣式中的屬性》哺担可以看看效果辟狈，很常用，去了解一下吧夏跷。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>簡單小實(shí)例</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">任爾東西南北風(fēng)壹蔓。</p>
<!-- <img src="zuzi.jpeg" width="256px" height="201px" />-->
<!-- 上一句是你圖片就在當(dāng)前文件夾內(nèi)，調(diào)用本地文件用的猫态，下面是調(diào)用網(wǎng)絡(luò)圖片用的-->
<!-- <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 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>
