標籤：字型 targe 圖片顯示 trade 是什麼 images hyper 工具 架構頁面
一、HTML的概述（瞭解）
a.html是什麼 ： hypertext markup language 超文字標記語言 (HTML)
超文本：音頻，視頻，圖片稱為超文本。.
標記 ：<英文單詞或者字母>稱為標記. 一個HTML頁面都是由各種標記組成。
b.作用：編寫HTML頁面。
c.HTML語言不是一個程式設計語言(有編譯過程)，而是一個標記語言(沒有編譯過程).
HTML頁面直接由瀏覽器解析執行。
二、HTML的曆史（瞭解）
三、HTML的網路術語（明白）
* 網頁 ：由各種標記組成的一個頁面就叫網頁 .
* 首頁(首頁) : 一個網站的起始頁面或者導航頁面 .
* 標記:<p>稱為開始標記 </p>稱為結束標記. 也叫標籤.每個標籤都規定好了特殊的含義。
* 元素：<p>內容</p> 稱為元素.
* 屬性： 給每一個標籤所做的輔助資訊。
* xhtml： 符合XML文法標準的HTML。
* dhtml：dynamic,動態。javascript + css + html 合起來的頁面就是一個dhtml
* http：協議標準。用來規定用戶端瀏覽器和服務端互動時資料的一個格式。SMTP 郵件傳輸協議,ftp:檔案傳輸通訊協定.
四、HTML的編輯工具（瞭解）
*.notepad 記事本
*.editplus : 文法高亮顯示
技巧： 根據顏色判斷單詞是否出錯。 （不是100%）
*.ultraedit : 根據顏色判斷單詞是否出錯,可以顯示2進位資料.
*.dw(dreamweaver,專業工具) 代碼提示.
五、HTML的規範(知道)
*.HTML是一個弱勢語言
*.html 不區分大小寫
*.html頁面的尾碼名是html或者htm(有一些系統不支援尾碼名長度超過3個字元，比如dos系統)
*.html 的結構
1)聲明部分。主要作用是用來告訴瀏覽器這個頁面使用的是那個標準。<!doctype html>是HTML5標準。
2)head部分： 不會顯示在頁面上。作用是告訴瀏覽器一些頁面的額外資訊。
3)body部分：我們縮寫的代碼必須放在此標籤內。
六、HTML的各種標籤(掌握)
明確：每個標籤都有私人屬性。也都有公有屬性。
html中表示長度的單位都是像素。HTML只有一種單位就是像素。
body:
bgcolor: 背景顏色
background:背景圖片
text: 文本顏色
1.排版標籤
所有的瀏覽器預設情況下都會忽略空格和空行
P：p代表一個段落
屬性： align:對齊. 取值：left,right,center
<br>代表是換行。
hr:
color: 線的顏色
size : 線的粗細
width: 線的長短
兩種寫法： 1) 絕對值 eg: 500
2) 相對值： 50%
noshade: 不要陰影
align: 對齊 取值： left,right,center
center: 內容置中
pre: 預定義格式標籤 .告訴瀏覽器不要忽略空格和空行
div: 塊級標籤 必須單獨佔據一行
屬性： align :
span: 塊級標籤 不換行字型標記
2 字型標籤
h1...h6:定義字型大小
屬性： align :置中
font:
color:字型顏色
顏色的寫法有3種： 1)英文單詞: red
2)十六進位：#00ffcc
3)RGB(三原色) : new RGB(124,156,23)
size:字型大小
face：字型類型
特殊字元： <小於 >大於 & &符號 " 雙引號'單引號
© 著作權 ™商標 空格
擴充：绐
b: 加粗
strong: 加粗
i:斜體
em: 斜體
u: 底線
s: 中劃線(刪除線)
sup: 上標
sub: 下標.
3.映像標記
img: 代表是一副圖片
屬性： src : 圖片的路徑
兩種寫法：a) : 相對路徑 路徑是相對頁面所在的路徑 兩個標記.和.. ,分表代表目前的目錄和父路徑
b) ：絕對路徑
1) : 以盤符開始的路徑
eg: C:\Documents and Settings\Administrator\案頭\day01_html\上課樣本/images/1.jpg
2) : 網路路徑
eg: http://www.baidu.com/images
width: 寬度
height：高度
Alt：當圖片顯示不出來的時候代替圖片顯示的內容
title： 提示性文本
border: 邊框
熱點： 就是特定的位置添加超鏈。
<img src="images/1.jpg" width="300" height="300" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="demo_字型標籤.html" />
</map>
4.清單標記
列表標籤：3種
a.無序列表ul
屬性：type : 值： disc(預設，實心原點),square(實心方點),circle(空心圓)
b.有序列表(OL)
屬性: type:取值：1(阿拉伯數字，預設),a,A,i,I
start: 從幾開始
c.定義列表(dl)
dt: 清單項目的標題
dd: 清單項目
5.超連結
3種超連結:
1. 串連到其他頁面
2. 錨: 指給超連結起一個名字，作用是串連到本頁面或者其他頁面的特定位置。使用name屬性給超鏈起名字
3. 串連到郵件: <a href = "mailto:[email protected]">進入我的郵箱</a>
屬性：target: 告訴瀏覽器怎麼顯示目標頁面
HTML中已定義4個值： _self :在同一個瀏覽器中顯示
_blank: 開啟新的瀏覽器顯示
_parent: 在父視窗中顯示
_top: 在最上層視窗中顯示
6.表格標記
table: 表格
屬性：border:邊框
width:寬度
height：高度
align:表格的對齊
cellpadding:儲存格內容到邊的距離
cellspacing:儲存格和儲存格之間的距離
bgcolor:背景顏色
background:背景圖片
bordercolorlight:表格的上，左邊框，以及儲存格的右，下邊框的顏色
bordercolordark: 表格的右，下邊框，以及儲存格上，左的邊框的顏色
dir:儲存格內容的相片順序 取值：ltr 從左至右， rtl:從右至左
tr: 行
屬性：dir:
bgcolor:
td: 儲存格
屬性： align: 內容的橫向對齊
valign: 內容的縱向對齊 top,middle,bottom
width: 絕對值或者相對值(%)
height:儲存格的高度
儲存格的合并：
儲存格的屬性：
colspan: 橫向合并
rowspan: 縱向合并
th: 相當於<td> + <b>
屬性同<td>
caption: 表格的標題
屬性：align: 取值：left,center,right,top,bottom
thead
tbody
tfoot
寫與不寫的區別：
1. 當表格非常大的時候，如果不寫，則必須等表格的內容全部下載完成才能顯示。但是用tbody標籤的話，那麼邊下載邊顯示。 2.如果不寫thead,tbody,tfoot那麼瀏覽器解析表格內容的時候是從上到下解析。如果寫了，那麼順序任意，瀏覽器解析的時候還是按照thead,tbody,tfoot的順序顯示內容
7.架構標記及<iframe>
架構頁面上不允許有body標籤
frameset: 架構的集合
rows: 縱向分部架構.
cols: 橫向分部架構.
寫法有兩種: 1) 絕對值 "200,*" ,*代表剩餘的
2) 相對值 "30%,*"
frame: 架構. 一個架構顯示一個頁面
scrolling: 是否需要捲軸。預設是true
noresize : 固定架構大小
bordercolor: 給架構邊框起一個顏色
name : 給架構起一個名字
內嵌架構： 嵌入在一個頁面上的架構.(僅僅IE支援)
iframe:
屬性： width: 寬度
height： 高度
scrolling : 是否需要捲軸
8.表單標記及語義化
9.多媒體標記
bgsound: 背景音樂
embed: 播放多媒體檔案.
marquee: 移動
屬性：direction 移動目標方向 left,right ,up,down ,up，down移動距離是固定的200px
behavior: 行為方式 取值：slide,alternate,scroll
scrollamount : 移動速度
loop: 迴圈多少圈。負值表示無限迴圈
scrolldelay: 移動一次休息多長時間。單位是毫秒
10.頭標記
HTML基礎匯總
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
