HTML EDITOR

Hello h1

Hello h2

文字段落

簡易手冊

HTML

HTML 結構

網頁頭部 (head)

<html>
<head>
    <meta >
    <title>網頁標題</title>
</head>

網頁的身體(body)

<body>
    預期顯示在網頁上的本文資料
</body>

網頁的結尾(/html)

</html>

一個基本的 HTML 內容

<html>
<head>
  <meta >
  <title>網頁標題</title>
</head>
<body>
  預期顯示在網頁上的本文資料
</body>
</html>


HTML Tags

Div Section

<div>Block element 區塊級元素</div>

Headings 標題

<h1>Page title</h1>
<h2>Subheading</h2>
<h3>Tertiary heading</h3>
<h4>Quaternary heading</h4>

Paragraph 段落

<p style="text-align: center;">text</p>

Image 圖片

<img src="/demo.jpg" alt="description" height="48" width="100" />

Outbound Link 超連結

<a href="https://htmlg.com/" target="_blank" rel="nofollow">Click here</a>

Mailto link 郵件連結

<a href="mailto:x@x.com?Subject=Hi%20mate" target="_top">Send Mail</a>

Inner anchor (jump on page) 內錨(跳頁)

<a href="#footer">Jump to footnote</a>
<br />
<a name="footer"></a>Footnote content

Bold text 加粗字體

<strong>Bold text</strong>

Italic text 斜體文本

<em>Italic text</em>

Underlined text 帶下劃線的文本

<span style="text-decoration: underline;">Underlined text</span>

Iframe 框架(可內嵌載入其他網頁)

<iframe src="link.html" width="200" height="200">
</iframe>
HTML 的 iframe 有許多參數可以設定,最重要的就是 src 這個部分,嵌入目標就是要嵌入的網頁 ,少了這個部分,iframe 就等於沒有存在意義,嵌入的網頁可以是相同網域內的其他頁面,也可以 是外部網頁。width 與 height 分別用來設定 iframe 所要占用的寬度與高度。第三個參數 frameborder 可以用來設定 iframe 的邊框是否 要顯示,如果寫為 frameborder="0" 代表不顯示 邊框,如果寫成 frameborder="1" 則代表要顯示 邊框。最後 scrolling 用來控制 iframe 的卷軸 是否要顯示,有三種屬性質可以設定,寫成 scrolling="yes" 代表要顯示捲軸、寫成 scrolling="no" 代表不顯示捲軸、寫成 scrolling="auto" 則代表根據網頁大小自動顯示。

Abbreviation 縮寫

<abbr title="Hypertext Markup Language">HTML</abbr>

Comment 評論

<!-- HTML
Comment -->

Horizontal Line 水平線

<hr />

Line break 換行

<br />

Quotation 引用

<q>Success is a journey not a destination.</q>
<blockquote cite="https://ruwix.com/">
The Rubik's Cube is the World’s best selling puzzle toy.
</blockquote>

Video 影片視頻

<video width="200" height="150" controls>
	<source src="vid.mp4" type="video/mp4">
	<source src="vid.ogg" type="video/ogg">
	No video support.
</video>

Audio 音頻

 <audio controls>
    <source src="sound.ogg" type="audio/ogg">
    <source src="sound.mp3" type="audio/mpeg">
    No audio support.
</audio>

CSS

Style Sheets, CSS(層疊樣式表)用來描述 HTML 或 XML(包含 SVG 或 XHTML 等各種 XML 變形)文件外觀的樣式表語言。CSS 會描述文件裡的結構化元素,該如何呈現在螢幕、紙、語音報讀、或其他媒介上。

Selectors 選擇器

選擇器可以指定哪些元素以特定樣式顯示
* all elements -所有元素
div all div tags -所有的 DIV 標籤
div,p all divs and paragraphs -所有 DIV 和段落
div p paragraphs inside divs -div裡面的段落
div > p all p tags, one level deep in div -所有的 P 標籤,深度 DIV
div + p p tags immediately after div -DIV 內緊接的 P 標籤
div ~ p p tags preceded by div -以 DIV 開頭的 P 標籤
.classname all elements with class -所有與類有關的元素
#idname element with ID -帶 ID 的元素
div.classname divs with certain classname -伴隨類名的 DIV
div#idname div with certain ID -伴隨 ID 的 DIV
#idname * all elements inside #idname -#idname 中的所有元素

Box model

邊界(margin)
邊框(border)
留白(padding)
內容(content)

關於 Box Model(區塊模型)

內容(content) –
內容的寬高,該區塊指定的寬高,也就是說,如果對於一個<div>標籤使用 CSS 指定它 width:200px; height:150px,就代表在這個區塊當中的內容區域寬為200px,高為150px。注意:只有內容區域而已
內距(padding) –
也就是邊框與內容之間的距離,如果你把該區塊的padding設成0,也就是padding:0px,這樣一來,padding的區域就會和內容區域完全一樣。
邊框(border) –
邊框的寬度,如果沒有邊框,這個區域所包含的範圍當然就和padding所包含的範圍相同
邊界(margin) –
這邊設定的是邊框區域之於外部或是其他HTML區塊元件的距離,如果是0,自然就和邊框區域相等。

JavaScript

JavaScript 程式語言可讓開發者在網頁上建構複雜的東西。JavaScript是一種編程語言,為網站添加交互性(例如:按鈕被按下或數據以表格形式輸入時的響應,動態樣式,動畫)。