Front-End(no More Update) on Quietbo

HTML -標記的語法規範與結構

Sun, 07 Mar 2021 08:57:00 +0000

Table of Contents

<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="顯示/隱藏內容目錄"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span>

語法

<li class='ez-toc-page-1 ez-toc-heading-level-2'>
 <a class="ez-toc-link ez-toc-heading-6" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#HTML%E6%96%87%E6%AA%94%E7%B5%90%E6%A7%8B" >HTML文檔結構</a><ul class='ez-toc-list-level-3' >
 <li class='ez-toc-heading-level-3'>
 <a class="ez-toc-link ez-toc-heading-7" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#HTML%E9%A0%81%E9%9D%A2" >HTML頁面</a><ul class='ez-toc-list-level-4' >
 <li class='ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-8" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E7%B6%B2%E9%A0%81%E9%A0%AD%E9%83%A8%E4%BF%A1%E6%81%AF" >網頁頭部信息</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-9" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E7%B6%B2%E9%A0%81%E7%9A%84%E4%B8%BB%E9%AB%94" >網頁的主體</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-10" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E5%85%83%E7%B4%A0" >元素</a>
 </li>
 </ul>
 </li>
 
 <li class='ez-toc-page-1 ez-toc-heading-level-3'>
 <a class="ez-toc-link ez-toc-heading-11" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#HTML%E6%A8%99%E8%A8%98" >HTML標記</a><ul class='ez-toc-list-level-4' >
 <li class='ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-12" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E6%96%87%E6%9C%AC" >文本</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-13" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E6%96%87%E6%9C%AC%E6%A8%A3%E5%BC%8F%E6%A8%99%E8%A8%98" >文本樣式標記</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-14" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E6%A8%99%E9%A1%8C%E6%A8%99%E8%A8%98" >標題標記</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-15" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E6%AE%B5%E8%90%BD%E5%85%83%E7%B4%A0" >段落元素</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-16" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E6%8F%9B%E8%A1%8C%E5%85%83%E7%B4%A0" >換行元素</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-17" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E6%B0%B4%E5%B9%B3%E7%B7%9A%E5%85%83%E7%B4%A0" >水平線元素</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-18" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E5%88%86%E5%8D%80%E5%85%83%E7%B4%A0" >分區元素</a>
 </li>
 <li class='ez-toc-page-1 ez-toc-heading-level-4'>
 <a class="ez-toc-link ez-toc-heading-19" href="https://quietbo.com/2021/03/07/html-%e6%a8%99%e8%a8%98%e7%9a%84%e8%aa%9e%e6%b3%95%e8%a6%8f%e7%af%84%e8%88%87%e7%b5%90%e6%a7%8b/#%E8%A1%8C%E5%85%A7%E5%85%83%E7%B4%A0%E8%88%87%E5%A1%8A%E7%B4%9A%E5%85%83%E7%B4%A0" >行內元素與塊級元素</a>
 </li>
 </ul>
 </li>
 </ul>
</li>

語法

單標記

只有一個標記，既能表示開始，也能表示結束
語法：<標記> 或 <標記/>
ex:

<br> 或 <br/> 換行
<hr> 或 <hr/> 一條水平線
<img> 或 <img/> 圖片
<input> 或 <input/> 表單控件

單標記是沒有內容文字的，所以沒有</img>，建議寫成<img />，
在>前加上一個”/”，這樣的話就可以很清楚的看見這個元素的結束。

雙標記

雙標記，是有顯示的開始和結束標記組成的
<標記>內容
ex:

<b>普通文本</b>
<s>文本內容</s>

有開始，必須有結束，否則會產生意想不到的效果

標記的嵌套

在一對標記中，又出現了其他的標記，相當於就是功能的嵌套

標記嵌套時一定要注意格式問題：
ex:

<s><b>文本內容</b></s>

被嵌套的內容一定要加縮進

<s>
 <b>文本內容</b>
</s>

標記的屬性和值

在標記中，屬性是用來修飾標記的顯示效果的。

屬性必須聲明在開始元素中
<元素屬性聲明位置處>
<元素屬性聲明位置處>
屬性和元素之間，用空格隔開
<元素屬性聲明位置處>
<元素屬性聲明位置處>
屬性和值之間使用 = 連接，值要用”或””引起來
<元素屬性=”值”>
一個元素允許設置多個屬性，並且排名不分先後，
多屬性間用空格隔開
<元素屬性1=”值1″ 屬性2=”值2″>
HTML中的註釋

<!-- 這是註釋內容
這也是註釋內容
-->

注意：

註釋不能出現在<>中
<p<!-- -->></p>

註釋不能嵌套
<!--
這是一段註釋
<!--
這又是一段註釋
-->
-->

HTML文檔結構

HTML頁面

在文檔類型聲明之下，使用一對根標記來表示頁面
html根標記包含兩對子標記：

網頁頭部信息

<head></head>

網頁的主體

顯示給用戶看的內容，是最長編寫的地方。

<body></body>

元素

<head></head>

標題內容
指定網頁內容的編碼格式

<meta charset="utf-8>

指定網頁的關鍵字 – 面向搜索引擎

<meta name="keywords" content="關鍵字1,關鍵字2,關鍵字3">

指定網頁的描述文本 – 面向搜索引擎

<meta name="description" content="... ...">

HTML標記

文本

HTML中的特殊字符

  表示一個空格
< 表示一個 <
> 表示一個 >
© 表示一個 c （copyright）
¥ 表示 ￥

文本樣式標記

改變文本在網頁中的表現形式
特點：以下標記允許與其他文本內容在一行內顯示。

<i></i> : 斜體
<u></u> : 下劃線
<s></s> : 刪除線
<b></b> : 加粗顯示
<sup></sup> : 上標
<sub></sub> : 下標

標題標記

改變文字大小以及加粗效果
每個標題都具備垂直的空白距離
每個標題獨占一行
每個標題都有一個屬性
屬性：align
取值：left / center / right

<h1></h1> : 一級標題，文字最大
<h6></h6> : 六級標題，文字最小
<h1 align="left">標題H1 </h1>
<h2 align="left">標題H2 </h2>
<h3 align="center">標題H3 </h3>
<h4 align="center">標題H4 </h4>
<h5 align="right">標題H5 </h5>
<h6 align="right">標題H6 </h6>

段落元素

突出顯示一段文本
獨占一行
每個元素都具備垂直空白距離
屬性：align
取值：left / center / right

<p></p>
<p align="left">left</p>
<p align="center">center</p>
<p align="right">right</p>

換行元素

<br>

水平線元素

<hr>

分區元素

塊分區元素
作用：佈局
獨占一行
<div></div>
屬性：align (left / center / right)
行內分區元素
設置同一行文本的不同樣式。
能在一行中顯示多個。
<span></span>

行內元素與塊級元素

按照元素不同的表現形式，對元素進行的一個類別的劃分。
塊級元素
在網頁中能夠獨占一行的元素都是塊級元素
p,div,h1~h6
以上元素都有align屬性
行內元素
多個元素能夠在一行內顯示的，都是行內元素
span,i,b,s,u,sub,sup

<b><i><u>xxxx</u></i></b>

HTML、CSS、JavaScript 簡易介紹

Fri, 05 Mar 2021 06:55:55 +0000

寫網頁時常聽到的三大名稱:

簡單來說:
html是網頁的結構，CSS是網頁的樣式，JavaScript是網頁的行為。

HTML 網頁的結構，看起來都方方正正。
CSS 把外貌給顯示出來，讓網頁的外貌看起來美觀一些
JavaScript 控制網頁裡面的內容以及使用者的操作行為

Table of Contents

<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="顯示/隱藏內容目錄"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span>

HTML 基本觀念

<li class='ez-toc-page-1 ez-toc-heading-level-2'>
 <a class="ez-toc-link ez-toc-heading-5" href="https://quietbo.com/2021/03/05/html%e3%80%81css%e3%80%81javascript-%e7%b0%a1%e6%98%93%e4%bb%8b%e7%b4%b9/#CSS" >CSS</a>
</li>
<li class='ez-toc-page-1 ez-toc-heading-level-2'>
 <a class="ez-toc-link ez-toc-heading-6" href="https://quietbo.com/2021/03/05/html%e3%80%81css%e3%80%81javascript-%e7%b0%a1%e6%98%93%e4%bb%8b%e7%b4%b9/#JavaScript_%E2%80%93_JS" >JavaScript &#8211; JS</a>
</li>

HTML 基本觀念

巢狀結構
元素(element)
屬性(attribute)
使用文本編輯軟件即可做開發，以 .html 或 .htm 為結尾的文件，最後使用瀏覽器開啟檔案即可顯示。

巢狀結構

簡單來說就是一層一層的概念
範例:

<html>
 <head>
 <title>Title</title>
 </head>
 <body>
 <h1>標題H1 </h1>
 </body>
</html>

因為巢狀結構有分層級，上層稱為父元素，下層稱為子元素。
而層級之間有一定上下、左右的規則，會透過Document Object Model (DOM)來進行遍歷的順序。

元素(element)

使用過程中，需要用 <> 括起來。
HTML元素網址

屬性(attribute)

可以藉由各種方式去設定元素或調整它們的行為。
簡單來說，除了最開頭的元素以外，中間都是屬性。

HTML屬性網址

CSS

CSS就是管理網頁的外貌。

.mainBody{
 min-width: 1024px;
 width: 100%;
 height: 100%;
}
.mainBody .logo{
 height: 45px;
 line-height: 45px;
 background-color: #214D8A;
}

JavaScript – JS

JavaScript 就是管理網頁的內容以及使用者的操作行為，為了要控制網頁的內容。

<script>
</script>

就是實做JavaScript的地方。