久沒用真的是很容易忘記,老了記憶力真的不好!!
今天來復習一下 HTML CSS JavaScript 基本語法吧~
首先先來介紹一下<HTML>
HTML是由許多標簽組成,
<標籤 屬性="屬性值">內容</標籤>
<!DOCTYPE html> ＝ 宣告這內容是用html來解析
<html></html> ＝ 所有標在這範圍內的皆為html程式碼
<head></head> = 放一些標題拉,設定等
<title></title> = 網頁標題,寫在head裡面
<body></body> = 放網頁內容
<h1></h1> = 網頁標題,其包含h1~h6大小等階級有差
<p></p> = 段落
<a></a> = 超連結 EX: <a herf="http://www.yahoo.com>Yahoo</a>
<img src="image路徑" alt="預防路徑遺失時顯示">
<ul><li>......</li><li>.......</li></ul> = 無順序清單
<ol><li>......</li><li>.......</li></ol> = 有順序清單
<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table> = 表格,還有 tbody.....等等
<div></div> = 可將想包在一起的區塊放置其中,包在一起作設定等
<span></span> = 也是分區塊,但與div不同於他不會將其後html自動換行
<button><input>等等就不提囉!!
<CSS>
可以直接寫於宣告出來的UI中
EX: <input type="text" style="width:100px"/>
其中 style 內就是寫入欲設定的css型態
但此法較不靈活,建議寫入<style></style>內
<style>
標籤名稱{}
.樣式名稱{若有class="樣式名稱"者將使用}
標籤.樣式{標籤下 樣式又為其宣告者 使用}
#id名稱{}
標籤 標籤{ EX: input input }
</style>
設定完指定項後,就可以在其{}中寫入想要對應的屬性值囉!!
屬性大致上有:
color , 設定顏色
font-family , 設定字型
font-weight , 設定字體粗細
font-size , 設定字體大小
font-style , 設定文字風格 EX:斜體？
text-align , 設定文字對其方向
border , 設定邊框
border-width , 邊框寬度
border-style , 邊框風格
border-color , 邊框顏色 border皆可用(border-上下左右-項目)來做四邊的個別設定
float , 讓項目不受格式管理浮出既定排版
clear , 在float宣告之後的項目都會不受排版若要關閉要使用clear
display , 是否顯示若none將看不見也不佔位子與hidden不同(hidden會佔空間)
border-radius , 邊框圓角 (border-*-radius) *=top-left,top-right,bottom-right,bottom-left
box-shadow , EX: box-shadow:水平陰影 垂直陰影 模糊大小 蔓延大小 陰影顏色
background , 背景
background-color , 背景顏色
background-image , 背景引用圖案URL
background-repeat , 背景重複 EX: background-repeat:repeat-x
background-position , 設定背景圖片由該引用的圖片的哪邊開始,在其範圍之前的圖將不會看到
background-size , 設定大小
........等等,還有許多不同的屬性喔!!!!
<JavaScript>
跟css一樣,也是不建議寫在該標簽內,使用
<script></script>將其包覆會較好喔!!
用事件去驅動script內的方法,使網頁動起來,
驅動的事件包含:滑鼠 鍵盤 表單 瀏覽器 .....
<script>
function hello(userName){
alert('Hello'+userName);
}
</script>
<button onClick=hello('Dylan');/>
這邊是Script的基本用法,之後在補充多一點相關資料囉!!
留言列表
