感覺一周真是太快了，轉(zhuǎn)眼又周四了，這周瘋狂學(xué)H5，基礎(chǔ)知識倒是看得不亦樂乎，昨天一打開實(shí)際項(xiàng)目直接兩眼懵逼了，還差的很遠(yuǎn)呢，昨晚回去又沒忍住去網(wǎng)吧打了個(gè)晉級賽，新買的星之守護(hù)者金克絲皮膚真是太炫了，手感一流，就是第一把打的真不舒服，還好最后贏了還來了把三連勝，特別享受這種成就感帶來的喜悅，我好像又懈怠了，啊~~~~~
好了好了，整理下心態(tài)，繼續(xù)codeing~
今天從HTML CSS學(xué)習(xí)到了HTML圖像
實(shí)現(xiàn)效果:
今天想好好學(xué)一下CSS，但是發(fā)現(xiàn)有點(diǎn)晦澀難懂
1.CSS
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
其實(shí)CSS更多就像這個(gè)頁面的一個(gè)頭文件，里面規(guī)定了各種樣式，比如文字大小，顏色，字體等，這里我就將<h>標(biāo)題和<p>段落設(shè)置為紅色和藍(lán)色
<head>
? ? ? ? ? ?<style type="text/css">
? ? ? ? ? ? ? ? ? ? ? ? h1{color:red}
? ? ? ? ? ? ? ? ? ? ? ? p{color:blue}
? ? ? ? ? ?</style>
? ? ? ? ? ?設(shè)置當(dāng)前文本顯示為中文（其實(shí)不寫也會(huì)照常顯示，這個(gè)下去再仔細(xì)研究）
? ? ? ? ? ?<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
? ? ? ? ? ?<meta http-equiv="Content-Language" content="zh_cn">
</head>
2.設(shè)置背景圖片
實(shí)現(xiàn)效果：
在body里面設(shè)置background
<body background="http://img3.redocn.com/tupian/20150430/mantenghuawenmodianshiliangbeijing_3924704.jpg">
3.實(shí)現(xiàn)一個(gè)沒有下劃線的網(wǎng)頁鏈接
實(shí)現(xiàn)效果:
一般情況下設(shè)置網(wǎng)頁鏈接會(huì)出現(xiàn)下劃線
設(shè)置后取消下劃線
實(shí)現(xiàn)步驟:
<a style="text-decoration:none">點(diǎn)擊進(jìn)入Fantasychong的數(shù)碼小店</a>
4.創(chuàng)建HTML超級鏈接
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<p><a >本文本</a>是一個(gè)指向萬維網(wǎng)的頁面的鏈接</p>
5.創(chuàng)建圖片鏈接
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<a >
? ? ? <img border=“0” ? ? ? ? ?src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>
6.定位到同一個(gè)頁面的某個(gè)位置
實(shí)現(xiàn)效果：會(huì)直接跳轉(zhuǎn)到該頁面的某個(gè)位置，在網(wǎng)頁的最上面展示
<p>
? ? ? ?<a href="#C4">定位到C4的位置</a>
</p>
<h1>張永沖Fantasychong</h1>
? ? ? ?<p>zhangyongchong</p>
<h2 name="C4">張永沖Fantasychong</h2>
? ? ? ?<p>zhangyongchong</p>
7.HTML鏈接語法，鏈接文本除了文字還有其它圖片等其它HTML元素
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<a >百度一下，你就知道</a>
8.在新窗口打開鏈接
一般情況下，會(huì)在當(dāng)前頁面跳轉(zhuǎn)到新的網(wǎng)頁，通過設(shè)置target屬性可以在新的窗口打開鏈接
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<a target="_blank">訪問百度</a>
9.創(chuàng)建電子郵件鏈接
前提是要有郵件客戶端，這里用的是foxmail。
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<a href="mailto:925179076@qq.com?subject=Hello%20World">發(fā)送郵件</a>
10.創(chuàng)建復(fù)雜的郵箱鏈接
在上面創(chuàng)建的郵箱鏈接編寫收件人，主題的基礎(chǔ)上，再添加抄送和文本內(nèi)容
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<a href="mailto:925179076@qq.com?cc=3338307232@qq.com&subject=hi hello&body=？？？？">點(diǎn)擊發(fā)送郵件</a>
11.一幅靜態(tài)圖像
實(shí)現(xiàn)效果：
<p>
? ? ? ?<img src="xxxxxxxxx.jpg" width=“100” height=“100”>
</p>
12.一副動(dòng)態(tài)圖像
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
和靜態(tài)沒區(qū)別，沒有什么特殊處理的地方，就是放上個(gè)動(dòng)圖的gif鏈接就可以
<img src="xxxxxx.gif" width="100" height="100">
13.替換文本屬性alt，當(dāng)圖片不能正常加載時(shí)候會(huì)出現(xiàn)文字提示
實(shí)現(xiàn)效果：
當(dāng)圖片可以正常加載時(shí)，效果如下
當(dāng)圖片不能加載時(shí)（幾率很小，這里我們給圖片鏈接做點(diǎn)處理，讓其不能讀?。?，就會(huì)出現(xiàn)alt文本，相應(yīng)提升了用戶體驗(yàn)
14.設(shè)置圖文的幾種對齊方式
圖文默認(rèn)對齊，圖文底部對齊，圖文中部對齊，圖文頂部對齊
1)圖文默認(rèn)對齊
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<p>圖文<img src="xxxxxxx.gif" width="100" height="100">默認(rèn)對齊方式</p>
2)圖文底部對齊(和默認(rèn)相同)
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<p>圖文<img src="xxxxxxx.gif" width="100" height="100" align=bottom>設(shè)置底部對齊</p>
3)圖文中部對齊
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<p>圖文<img src="xxxx.gif" width="100" height="100" align="center">設(shè)置中部對齊</p>
4)圖文頂部對齊
實(shí)現(xiàn)效果：
實(shí)現(xiàn)步驟：
<p>圖文<img src="xxxx.gif" width="100" height="100" align="top">設(shè)置頂部對齊</p>
