前端框架
後端資料
<!DOCTYPE html>
<html>
<head>
<title>我是標題</title>
</head>
<body>
<h1>H1 大小</h1>
</body>
</html>
打開 Sublime Text 3 → Ctrl + S
<Filename>.html
<!DOCTYPE html>
<html>
<head>
<title>我是標題</title>
<style>
body {
background-color: #123123;
}
h1 {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>H1 置中</h1>
<h2 style="color: yellow;">我是 H2</h2>
</body>
</html>
CSS 可內嵌也可獨立
<!DOCTYPE html>
<html>
<head>
<title>Web Intro</title>
</head>
<body>
<h1>NISRA</h1>
<h2>LAVI</h2>
<h3>FJCU CSIE</h3>
<h4>資工二乙</h4>
<p>Lavinia</p>
<p>Hello World!</p>
<a href="https://www.nisra.net/" target="_blank">NISRA</a>
<br><br>
<a href="https://discord.gg/RGqpdPBPNm"><img src="https://cdn-icons-png.flaticon.com/512/2111/2111370.png" alt="Discord" style="width: 100px; height: inherit;" onerror='alert()'></a>
<form>
使用者名稱:<input type="text" name="name" value="使用者名稱"><br>
密碼 (長度限 5):<input type="password" name="passwd" maxlength="5">
</form>
</body>
</html>
HTML demo
<!DOCTYPE html>
<html>
<head>
<title>我是標題</title>
<script>
function Get_Date(){
document.getElementById('time').innerHTML = Date();
}
</script>
</head>
<body>
<h1>H1 大小</h1>
<script>alert(1)</script>
<script>console.log('Hello NISRA!')</script>
<button type="button" onclick="Get_Date()">按我顯示時間</button>
<p id="time">顯示在這裡</p>
</body>
</html>
JavaScript 可內嵌也可獨立
打上你的自我介紹內容~
Edge 也是哦
檢視網頁原始碼 or Ctrl + U
空白處右鍵
F12 or fn + F12
Ctrl + Shift + C
Ctrl + Shift + I
右鍵 → 檢查
一般人眼中的網站
駭客眼中的網站
洞
洞
洞
洞
洞
洞
洞
洞
洞
洞
洞
洞
洞
洞
洞
一個躺著也中槍的路人甲故事
一個被小三介入的無情斂財故事