1.基本html網路架構
<!DOCTYPE html><html>
<head>
<title>Page Title</title>
</head>
<body>(整個內容都在這個地方）
<h1>My First Heading</h1>（h代表標題）
<p>My first paragraph.</p>（p代表段落）
</body>
</html>
＊＊指令都是成雙成對，尾巴那個要有斜線
＊＊兩條斜線就是註解 或是command+slash
2.圖片的配置（也可以放gif檔案）
(2)語法
<!DOCTYPE html><html><body><h2>HTML Image</h2> //段落名字 顯示在網頁上面
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333"></body></html>
(3)圖片大小可以改變
可以利用Width,Height,Style來修改圖片的大小。只是不建議用前面兩個，因為那兩個寫法可能會被網站改變就變形。
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
(4)在電腦的資料夾找圖片或gif檔案
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
(5)圖片當作一個網址的連結
<a href="https://www.youtube.com"> 紅字那邊放上想要去的網址
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
(6)備註
＊＊img=image src=screen
“pic_trulli.jpg" 這個前提是「電腦」的『桌面』要有這個檔案，否則就要以網址的方式呈現。
右鍵圖片->拷貝影像網址
修正：上面那句話是錯的 png可以。
＊＊網址呈現的方式就不用 『雙引號』直接拷貝影像網址即可(記得還是有要檔名jpg (png不行）)
＊＊雙引號用意“區分”
alt 用意在 當圖片無法呈現的時候 將出現的字（常用於備註圖片）
3.超連結 （a為tag)
(2)語法
<a href="url">link text</a>
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
＊＊ url代表網址。link test 代表會出現的字
(3)連結->讓在底層的頁面跑到最上層
.....................................................
.....................................................
.....................................................
.....................................................
<a href="#top">Go to top</a>
(4)連結到javascript
<a href="javascript:alert('Hello World!');">Execute JavaScript</a> 黃字是內文
4.Layouts (區塊用法）
(2)語法：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>
</section> 改這邊的程式碼
<footer>
<p>Footer</p>
</footer>
</body>
</html>
5.documentElementby("id")
<p id="demo">
<script>
function myFunction() { //定義myFunction function是功能字document.getElementById("demo").innerHTML = "Hello World";
}
點了按鈕，就會執行myFunction()，執行後，會把<p>裡面的東西取代掉
** innerHTML = "Hello JavaScript!";
** innerHTML = text
切記都要加引號。
切記都要加引號。
(3)還可以改字體的顏色
<p id="demo">Click the button to change the color of this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "red";
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "red";
6.Javascript
(1) 學習網址：https://www.w3schools.com/js/js_intro.asp
(2) 語法：
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
上面的程式碼，理論上段落中不會顯示東西出來。但是，有了這行程式碼，onclick，代表點了這個按鈕，段落就會被date取代，document.getElementById('demo')。
<button type="button" onclick="myFunction()">Click Me!</button>
＊＊ onclick代表：點了之後會發生的反應
<p id="demo">This is a demonstration.</p>
這個段落定義為id 並且為下文做準備
這段就是可以被取代的段落
7.計算的部分
<script>
function（運算） myFunction(p1, p2)
（我的算式）
{
return p1 * p2;（運算方式）
}
document.getElementById("demo").innerHTML = myFunction(4, 3）
沒有留言:
張貼留言