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

語法

單標記

只有一個標記,既能表示開始,也能表示結束
語法:<標記> 或 <標記/>
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. 屬性必須聲明在開始元素中
    <元素 屬性聲明位置處>
    <元素 屬性聲明位置處>
  2. 屬性 和 元素之間,用空格隔開
    <元素 屬性聲明位置處>
    <元素 屬性聲明位置處>
  3. 屬性 和 值之間使用 = 連接,值要用”或””引起來
    <元素 屬性=”值”>
  4. 一個元素允許設置多個屬性,並且排名不分先後,
    多屬性間用 空格 隔開
    <元素 屬性1=”值1″ 屬性2=”值2″>
  5. HTML中的註釋
<!-- 這是註釋內容
這也是註釋內容
-->
  1. 注意:
註釋不能出現在<>中
<p<!-- -->></p>

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

HTML文檔結構

HTML頁面

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

網頁頭部信息

<head></head>

網頁的主體

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

<body></body>

元素

<head></head> 
  1. 標題內容
  2. 指定網頁內容的編碼格式
<meta charset="utf-8>
  1. 指定網頁的關鍵字 – 面向搜索引擎
<meta name="keywords" content="關鍵字1,關鍵字2,關鍵字3">
  1. 指定網頁的描述文本 – 面向搜索引擎
<meta name="description" content="... ...">

HTML標記

文本

HTML中的特殊字符

&nbsp; 表示一個空格
&lt; 表示一個 <
&gt; 表示一個 >
&copy; 表示一個 c (copyright)
&yen; 表示 ¥

文本樣式標記

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

<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>

分區元素

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

行內元素與塊級元素

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

HTML、CSS、JavaScript 簡易介紹

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

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

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

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的地方。