Facebook加入
LINE加入
2021/12/25
一、HTML的概述（了解）
a.html是什麼 ： hypertext markup language 超文本標記語言
超文本：音頻，視頻，圖片稱為超文本。.
標記 ：<英文單詞或者字母>稱為標記. 一個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: 移動一次休息多長時間。單位是毫秒
熱門推薦
留言回覆
