---------------------HTML5
HTML a 元素
anchor 建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。
src --> img標籤，script標籤，iframe標籤;
是英語單詞source的縮寫
href --> link標籤，a標籤
是Hypertext Reference的缩寫。 意思是指定超鏈結目標的URL。
rel
relation 關聯
HTML img alt -->圖片替代文字。 alternative 兩者（或若干）中擇一的；替代的；
HTML img title -->滑鼠移經顯示文字標示
------範例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="09kkStyle.css">
<style>
body{
width: 90%;
margin: 0 auto;
background-color: #EEFFBB;
font-size: 1em;
font-family: 新細明體,serif;
color: #333333;
line-height: 1.5em;
letter-spacing: 0.05em;
}
header, section, footer{
background-color: #F0F8FF;
border-radius: 5px;
border: 1px solid #CCCCCC;
box-shadow: 5px 0px 10px -3px #AAAAAA;
}
header p{
font-size: 3.5em;
font-family: 微軟正黑;
color: #F0F8FF;
text-align: center;
letter-spacing: 1em;
text-shadow: -2px -2px 0px #FFFFFF, 2px 2px 0px #444444, 2px 2px 6px #888888 ;
margin-top: 40px;
}
#topnav{
background-color: #FFF0E6;
border-top: 1px dashed #FF9F60;
border-bottom: 1px dashed #FF9F60;
height: 40px;
}
#topnav ul {
float: left;
left: 16%;
position: relative;
margin: 5px;
}
#topnav li{
float: left;
padding: 4px;
background-color: #FF6600;
list-style-type: none;
width: 85px;
text-align: center;
margin: 0 5px 0 0;
}
#topnav a{
font-family: 新細明體;
font-size: 1.1em;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}
#topnav a:hover{
font-size: 1.2em;
color: #000000;
text-decoration: underline;
}
section{
clear: left;
}
.Title01{
font-size: 2em;
font-family: 標楷體;
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F;
}
figure {
display:inline ;
border: 1px solid #BFBFBF;
box-shadow: 2px 2px 3px rgba(135, 139, 133,0.4);
float:left;
margin: 0 15px;
}
figure img{
display: table-row;
margin: 5px 5px 10px 5px;
}
figcaption {
display:block ;
background-color: #145A32;
color: #FFFFFF;
font: italic smaller sans-serif;
}
#p1{
margin: 15px ;
text-align:justify;
}
#p2{
margin: 15px;
text-indent: 2em;
text-align: justify;
}
#float_off{
clear: both;
}
footer{
text-align: center;
}
footer p{
font-size: 1.5em;
font-weight: bold;
text-shadow: 1.4px 1.4px 1.3px #333333;
}
</style>
</head>
<header>
<p>網站名稱</p>
<nav id="topnav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">網路學堂</a></li>
<li><a href="#">蒐羅天下</a></li>
<li><a href="#">部落格</a></li>
<li><a href="#">專欄</a></li>
<li><a href="#">免費廣告</a></li>
<li><a href="#">下載專區</a></li>
<li><a href="#">論壇</a></li>
</ul>
</nav>
</header>
<section>
<p class="Title01">章節名稱</p>
<figure>
<img src="pic/02.png" >
<figcaption>夜宿高山</figcaption>
</figure>
<p id="p1">
真的是太厲害了，用手抄寫經文，當成家裡壁紙！台南安南區一位75歲的阿伯，他七八年前退休後，就開始抄寫佛經，當成家裡的壁紙，走進他家，牆壁上、貼滿手寫經文，讓人大開眼界，他受訪時笑著說，對他來講，這也是一種修身養性的方式。經過台南安南區這裡的透天厝，常常有人會被，這醒目的黃色壁紙，給吸引住停下來看，走近一看，上面密密麻麻的，都是用手寫的佛家經文，整整齊齊大小一致，讓人忍不住讚嘆，而作者就是這位已經75歲的徐阿伯。這是他家不管是鐵捲門，或是壁磚上頭有護貝過的紙張，是他製作的佛經壁紙，七八年前他退休後，開始用手抄寫經文，當成修身養性的方式，慢慢地，這些妝點家裡的壁紙，讓看過的人印象深刻，阿伯的家，也成為這個區域，最有特色的房子。真的是太厲害了，用手抄寫經文，當成家裡壁紙！台南安南區一位75歲的阿伯，他七八年前退休後，就開始抄寫佛經，當成家裡的壁紙，走進他家，牆壁上、貼滿手寫經文，讓人大開眼界，他受訪時笑著說，對他來講，這也是一種修身養性的方式。經過台南安南區這裡的透天厝，常常有人會被，這醒目的黃色壁紙，給吸引住停下來看，走近一看，上面密密麻麻的，都是用手寫的佛家經文，整整齊齊大小一致，讓人忍不住讚嘆，而作者就是這位已經75歲的徐阿伯。這是他家不管是鐵捲門，或是壁磚上頭有護貝過的紙張，是他製作的佛經壁紙，七八年前他退休後，開始用手抄寫經文，當成修身養性的方式，慢慢地，這些妝點家裡的壁紙，讓看過的人印象深刻，阿伯的家，也成為這個區域，最有特色的房子。
</p>
<p id="p2">
真的是太厲害了，用手抄寫經文，當成家裡壁紙！台南安南區一位75歲的阿伯，他七八年前退休後，就開始抄寫佛經，當成家裡的壁紙，走進他家，牆壁上、貼滿手寫經文，讓人大開眼界，他受訪時笑著說，對他來講，這也是一種修身養性的方式。
經過台南安南區這裡的透天厝，常常有人會被，這醒目的黃色壁紙，給吸引住停下來看，走近一看，上面密密麻麻的，都是用手寫的佛家經文，整整齊齊大小一致，讓人忍不住讚嘆，而作者就是這位已經75歲的徐阿伯。
這是他家不管是鐵捲門，或是壁磚上頭有護貝過的紙張，是他製作的佛經壁紙，七八年前他退休後，開始用手抄寫經文，當成修身養性的方式，慢慢地，這些妝點家裡的壁紙，讓看過的人印象深刻，阿伯的家，也成為這個區域，最有特色的房子。
</p>
<p id="float_off"></p>
</section>
<footer><p>CopyRight (c) 2020 GuoChin All Righs Reserved.</p></footer>
</html>
沒有留言:
張貼留言