新手登入
前端後端又是什麼東東?? (´゚д゚`)
我沒打過扣也可以嗎?!
處理應用系統和使用者接觸的部份
資料的計算、資料庫的操作及存取等,無須直接接觸使用者。
架構
行為
佈局
that's see what's
"Inside"
a web page
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 文件資料元素 -->
</head>
<body>
<!-- 文件內容 -->
</body>
</html>
<!-- 註解文字 -->
<head>
<meta charset="UTF-8">
<!-- 使用萬國碼,避免因為中文而出現亂碼-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--設置IE兼容模式-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--這個讓行動網頁也可以看-->
<meta name="google-site-verification" content="GLckJ3t4qBK8yCXQuv610FtjTXSplj9EDfDjLseDldA" />
<!--google驗證-->
<title>2017 中興電資營MISsion EmpirE</title>
<link rel="shortcut icon" href="misee (2).ico">
<!--電資營icon-->
<script src="plugin.js"></script>
<!--javascript-->
</head>
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p><b>Hi~~:</b> (。◕∀◕。) </p>
</body>
</html>
我被刪掉惹
底線,在這裡
邊緣人字體
就是這麼簡單
肚臍的英文是unbilicus
有序表單
無序表單
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- 加上start可以控制要從多少開始 -->
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
<!-- 最基本款 -->
<img src="圖檔連結路徑">
<!-- 範例 -->
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<!-- 範例解說-->
<img src="圖檔連結路徑" alt="若圖檔連結失效會出現的文字" height="多少像素" width="多少像素">
<!-- 範例 -->
<a href="http://sa.mis.nchu.edu.tw/2017EEMIS/">帝國風雲官網</a>
<!-- 範例解說 -->
<a href="連結地址">連結處的文字內容</a>
༼ つ •́ o•̀ ༽つ 點我
產品履歷:
直接為你的HTML tag 新增一個為style的元素
<h1 style='color: lightblue; font-size: 18px;'>Hello, World!</h1>
normal:也就是預設字體厚度,其實可以不用特別寫出來。
bold:常用的粗體字。
bolder:比粗體更粗一點。
lighter:比一般字體更細。
100~900:數字越大越厚,數字小於 500 似乎效果不明顯。
參考:顏色對照表
<h2 style='color: lightblue;'>Hi~</h2>
<h2 style='color: lightgreen;'>I'm</h2>
<h2 style='color: #9F4D95;'>Jackie chen</h2>
<h2> Hi I'm Jackie chen</h2>
通常是在<head>裡面加一個<style>去宣告CSS屬性
或者是:
然後再到<head>裡面去引用他
<!-- External style sheet -->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!-- Internal Style Sheet -->
<head>
<style>
</style>
</head>
<!-- Inline Styles -->
<body>
<h1 style="color:blue;margin-left:30px;">HEHEXD</h1>
</body>
三種使用CSS的方式(可混搭)
1
2
3
ex: 先寫<link> 後寫<style> →→ 最後呈現<style>的東西
先重新再好好介紹一次
<style type="text/css">
h1 {
color: red;
font-size:12px;
background-color:#403050;
屬性:數值;
}
</style>
Selector
(被選擇的元素)
屬性的宣告:
記得用分號 ; 做結尾
.class [ 選到class底下的所有元素]
#id [ 選到id底下的所有元素]
* [ 所有元素 ]
div [ 所有 div 元素 ]
div, p [ 所有 div 及所有 p 元素 ]
div > p [ 直屬 div 的 p 元素( p 為 div 的直屬子元素)]
div p [ 所有在 div 底下的 p 元素(不論是否直屬 div)]
div + p [ 所有與 div 相鄰 p 元素 ]
div ~ p [ 所有在 div 後,與 div 同級的 p 元素 ]
(ノ>ω<)ノ
click: CSS Diner
最多先玩到第八關就好囉~~
<div class="intro"> <!-- 選到了 -->
<h1>I'm h1</h1>
<div>
<p>I'm p element</p> <!-- 選到了 -->
</div>
<p>I'm p element 2</p> <!-- 選到了 -->
</div>
<p>I'm p element 3</p> <!-- 選到了 -->
selector: .intro, p
<div class="intro"> <!-- X -->
<h1>I'm h1</h1>
<div>
<p>I'm p element</p> <!-- X -->
</div>
<p>I'm p element 2</p> <!-- 選到了 -->
</div>
<p>I'm p element 3</p> <!-- X -->
selector: .intro > p
selector: intro p
<div class="intro"> <!-- X -->
<h1>I'm h1</h1>
<div>
<p>I'm p element</p> <!-- 選到了 -->
</div>
<p>I'm p element 2</p> <!-- 選到了 -->
</div>
<p>I'm p element 3</p> <!-- X -->
我們先來了解一下,只用CSS可以做多少事~
CSS
版型需要看懂並做出至少3處的修改
Why Google use JS? (文章連結)
在 2004 年,JavaScript 就得到了一次契機:Google 推出了使用 Ajax 技術的Gmail信箱,那堪比桌面的無刷體驗,引發了業界轟動和模仿浪潮。而 Ajax 的操作核心就是 JavaScript。此後,JS 在瀏覽器中的地位變得十分穩固,已經成了事實標準。
The purpose of jQuery is to make it much easier to use JavaScript on your website.
js的一組好用libery
Fire up a browser and go to
http://username.github.io.
還是想要更輕鬆地寫網頁架網站
有這麼好的事嗎???? (≧∀≦)ゞ