HTML培訓課程-------Day01(HTML基本元素)
HTML基礎
HTML的基本結構
HTML標記的格式
(1)<標記名稱>單一型,無設置值的。
如:<br>
(2)<標記名稱 屬性=”屬性值”>單一型,有設置值的。
如:<hr width=”80%” >
(3)<標記名稱>…</標記名稱>對稱型,無設置值。
如:<title>…</title>
(4)<標記名稱 屬性=”屬性值”>…</標記名稱>對稱型,有設置值。
如:<body bgcolor=”red”>…</body>
<font size=”7”>…</font>
常見的頁面頭部標記
表1 頁面頭部標記
標記 |
作用 |
<title> |
文件標題聲明 |
<meta> |
提供有關某個 HTML 元素的元信息 ,比如描述、針對搜索引擎的關鍵詞以及刷新頻率 |
<base> |
頁面中的鏈接地址基準參考點,作用的標簽包括 <a>、<img>、<link>、<form> 標簽中的 URL |
<script> |
Javascript腳本程序 |
<style> |
設置排版,創建CSS樣式 |
<link> |
可引用外部文件,例如.css樣式文件 |
常用頁面標記
(1)<body> 頁面主體標記
作用:頁面內容顯示的開始標記,設置頁面屬性。
格式:<body bgcolor=”” text=””>…</body>
屬性名稱 |
屬性值 |
說明 |
bgcolor |
顏色的表示方式 |
設置網頁背景顏色 |
background |
圖片位置信息 |
設置網頁背景圖案 |
text |
顏色的表示方式 |
設置頁面文字顏色 |
顏色的三種表示方式:6位十六進制編碼、顏色的英文關鍵詞、RGB(R,G,B)
(2)標題標記
l <h1>…</h1>設置一級標題
l <h2>…</h2>設置二級標題
l <h3>…</h3>設置三級標題
l <h4>…</h4>設置四級標題
l <h5>…</h5>設置五級標題
l <h6>…</h6>設置六級標題
屬性名稱 屬性值 說明
align left 靠左
center 靠中
right 靠右
(3)換行<br> 標記
作用:強制換行
格式:<br>-----單標記
(4)段落<p>標記
在頁面中表示一個段落:
格式:<p align=”排列方式”>…</p>
屬性名稱 屬性值 說明
align left 往左靠(默認)
center 往中靠
right 往右靠
(5)水平線<hr>
作用:在頁面插入水平線。
格式:<hr>
屬性名稱 屬性值 說明
size 像素 絕對設置,以數字表示,屬性值越大,線越粗
百分比 相對設置,以%表示,屬性值越大,線越粗
width 像素 絕對設置,長度不會應視窗的改變而改變
百分比 相對設置,長度會隨著視窗寬度而改變
noshade 實體線
(6)特殊字符(了解)
格式:< à < > à >
& à & “ à "
(7)添加註釋
作用:為HTML頁面添加註釋
格式:<!-- … -->
實例:
(8)實體字符控制標記(了解)
1.<b>…</b> 粗
2.<i>…</i> 斜
3.<s>…</s> 刪
4.<u>…</u> 下劃
5.<tt>…</tt> 電報
6.<sub>…</sub> 下標
7.<sup>…</sup> 上標
(9)語意字符控制(了解)
1.<address>…</address> 地址
2.<big>…</big> 大字
3.<del>…</del> 刪除
4.<small>…</small> 小字
5.<strong>…</strong> 加強語氣(加粗)
6.<em>...</em> 加強語氣(傾斜)
(10)<font>字體控制
格式:<font>…</font>
屬性名稱 屬性值 說明
size 0-7 字體大小
color 顏色表示方式 顏色
face 字體 字體
(11)格式化
作用:保留原有的書寫格式
格式:<pre>標簽內部是什麽格式頁面就顯示什麽格式!</pre>
實例:
HTML培訓課程-------Day01(HTML基本元素)