---
# System prepended metadata

title: 前端程式筆記-HTML-HELLO WORLD+結構
tags: [程式筆記]

---

---
title:  前端程式筆記-HTML-HELLO WORLD+結構
tags: 程式筆記
---
因為要學習Servlet的前面要先學HTML~(雖然我是倒過來了~還是學一下比較好)
1.安裝軟體-atom-https://atom.io/

---
開始創建HTML的HELLO WORLD
先幫他們蓋一個家
![](https://i.imgur.com/jyqiSWv.png)
然後進入編輯的地方~
![](https://i.imgur.com/CmSRIro.png)
然後保存
![](https://i.imgur.com/vV4TvxM.png)
命名為index.html(第一個字一定要小寫)
![](https://i.imgur.com/30WCjkf.jpg)
然後用瀏覽器開就可以看了~
![](https://i.imgur.com/6Y41qHs.png)
長這樣~比寫 SERVLET/JSP還要連TOMCAT還容易~QQ
![](https://i.imgur.com/GaQcj4C.jpg)
---
學習要有一個目標~來看看標準的網頁長的樣子http://example.com/
然後按右鍵看原始碼~
![](https://i.imgur.com/rdXM6WN.png)
<>tag..都是成對出現.結尾會有</>
![](https://i.imgur.com/oJGi6DQ.png)

<head></head> 是頭的部分~(看不到=不是字)
![](https://i.imgur.com/yT256VZ.png)

<body><body> 是身體的部分~(看的到=是字)
![](https://i.imgur.com/9qf4RqQ.png)

在裡面可以看到要連結的內容
---
來做自己的網頁:
![](https://i.imgur.com/JmUYTO3.png)

要記得存檔~(只有標題)
![](https://i.imgur.com/oQHwcAL.jpg)
---
然後就是要讓大家可以搜尋到就是要在<body><body> 裡面寫東西<h1>開始
h1-最大的字
h2-會比較小.而且會自動換行
h3-更小...可以找到h6
![](https://i.imgur.com/cgJTlrN.jpg)
結果
![](https://i.imgur.com/43Gepx3.jpg)

pre-再來就是寫內容..然後有換行(可以長得像你的格式)
hr-水平線
p要在裡面寫br才會分段
![](https://i.imgur.com/XEJA1iw.jpg)
結果~
![](https://i.imgur.com/9YffFqT.jpg)

後面太長了改道~https://hackmd.io/@sSA6NW2ZToCxgSaVETWNCg/Hy1-BO76U






