一、HTML的概述（了解）

????????a.html是什么?：?hypertext?markup?language?超文本標記語言
???????????????????超文本：音頻，視頻，圖片稱為超文本。.
???????????????????標記?：<英文單詞或者字母>稱為標記.?一個HTML頁面都是由各種標記組成。
????b.作用：編寫HTML頁面。
????????c.HTML語言不是一個編程語言(有編譯過程)，而是一個標記語言(沒有編譯過程).
????????????HTML頁面直接由瀏覽器解析執(zhí)行。?

二、HTML的歷史（了解）

三、HTML的網(wǎng)絡(luò)術(shù)語（明白）

????*?網(wǎng)頁?：由各種標記組成的一個頁面就叫網(wǎng)頁?.
????*?主頁(首頁)?:?一個網(wǎng)站的起始頁面或者導航頁面?.
????*?標記:<p>稱為開始標記??</p>稱為結(jié)束標記.?也叫標簽.每個標簽都規(guī)定好了特殊的含義。
????*?元素：<p>內(nèi)容</p>?稱為元素.
????*?屬性：?給每一個標簽所做的輔助信息。
????*?xhtml：?符合XML語法標準的HTML。
????*?dhtml：dynamic,動態(tài)的。javascript?+?css?+?html?合起來的頁面就是一個dhtml
????*?http：協(xié)議標準。用來規(guī)定客戶端瀏覽器和服務(wù)端交互時數(shù)據(jù)的一個格式。SMTP?郵件傳輸協(xié)議,ftp:文件傳輸協(xié)議.

四、HTML的編輯工具（了解）
????????*.notepad?記事本
????????*.editplus?:?語法高亮顯示
????????????????技巧：?根據(jù)顏色判斷單詞是否出錯。?（不是100%）
????????*.ultraedit?:?根據(jù)顏色判斷單詞是否出錯,可以顯示2進制數(shù)據(jù).
????????*.dw(dreamweaver,專業(yè)工具)??代碼提示.

五、HTML的規(guī)范(知道)
????*.HTML是一個弱勢語言
????????*.html?不區(qū)分大小寫
????????*.html頁面的后綴名是html或者htm(有一些系統(tǒng)不支持后綴名長度超過3個字符，比如dos系統(tǒng))
????????*.html?的結(jié)構(gòu)
????????????????1)聲明部分。主要作用是用來告訴瀏覽器這個頁面使用的是那個標準。<!doctype?html>是HTML5標準。
????????????????2)head部分：?不會顯示在頁面上。作用是告訴瀏覽器一些頁面的額外信息。
????????????????3)body部分：我們縮寫的代碼必須放在此標簽內(nèi)。

六、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:?內(nèi)容居中
????????????????pre:?預(yù)定義格式標簽?.告訴瀏覽器不要忽略空格和空行
????????????????div:?塊級標簽??必須單獨占據(jù)一行
???????????????????????????屬性：?align?:
????????????????span:?塊級標簽?不換行字體標記????
2?字體標簽
????????????????h1...h6:定義字體大小
????????????????????????屬性：?align?:居中
????????????????font:
????????????????????????color:字體顏色
????????????????????????????????顏色的寫法有3種：?1)英文單詞:?red?
??????????????????????????????????????????????????????????????2)十六進制：#00ffcc
??????????????????????????????????????????????????????????????????3)RGB(三原色)?:?new? size:字號 取值（1-7） face:字體類型 RGB(124,156,23)
????????????????????????size:字體大小
????????????????????????face：字體類型
????????????????特殊字符：?&lt;小于?&gt;大于?&amp;?&符號?&quot;?雙引號&apos;單引號
???????????????????????????????????????????&copy;?版權(quán)?&trade;商標?&nbsp;空格
???????????????????????????????????????????擴展：&#32464;?
????????????????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)?:?網(wǎng)絡(luò)路徑
????????????????????????????????????????????????????????????????????????????????????????????????eg:?http://www.baidu.com/images
?????????????????????????????????width:?寬度
?????????????????????????????????height：高度
?????????????????????????????????Alt：當圖片顯示不出來的時候代替圖片顯示的內(nèi)容
?????????????????????????????????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屬性:A,a,I,i,1.默認是阿拉伯數(shù)字 1 ? ?? start(控制序號開始的值)默認開始值為1 c.定義列表(dl)
?????????????????????????????????dt:?列表項的標題
?????????????????????????????????dd:?列表項
5.超鏈接????????
????????????????3種超鏈接:
????????????????????????1.?連接到其他頁面
????????????????????????2.?錨:?指給超鏈接起一個名字，作用是連接到本頁面或者其他頁面的特定位置。使用name屬性給超鏈起名字
????????????????????????3.?連接到郵件:?<a?href?=?"mailto:xugang@itcast.cn">進入我的郵箱</a>
????????????????????????????????屬性：target:?告訴瀏覽器怎么顯示目標頁面?
????????????????????????????????????????????????HTML中已定義4個值：?_self?:在同一個瀏覽器中顯示
????????????????????????????????????????????????????????????????????????????????_blank:?打開新的瀏覽器顯示
????????????????????????????????????????????????????????????????????????????????_parent:?在父窗口中顯示
????????????????????????????????????????????????????????????????????????????????_top:?在頂級窗口中顯示
6.表格標記
????table:?表格
??????????????????屬性：border:邊框
????????????????????????????????width:寬度
????????????????????????????????height：高度
????????????????????????????????align:表格的對齊方式
????????????????????????????????cellpadding:單元格內(nèi)容到邊的距離
????????????????????????????????cellspacing:單元格和單元格之間的距離
????????????????????????????????bgcolor:背景顏色
????????????????????????????????background:背景圖片
????????????????????????????????bordercolorlight:表格的上，左邊框，以及單元格的右，下邊框的顏色
????????????????????????????????bordercolordark:?表格的右，下邊框，以及單元格上，左的邊框的顏色
????????????????????????????????dir:單元格內(nèi)容的排列方式?取值：ltr?從左到右，?rtl:從右到左
????????????????tr:?行
??????????????????屬性：dir:
????????????????????????????????bgcolor:
????????????????td:?單元格
??????????????????屬性：?align:?內(nèi)容的橫向?qū)R方式
?????????????????????????????????valign:?內(nèi)容的縱向?qū)R方式?top,middle,bottom
?????????????????????????????????width:?絕對值或者相對值(%)
?????????????????????????????????height:單元格的高度

????????????????單元格的合并：
??????????????????????單元格的屬性：
??????????????????????????????colspan:?橫向合并
??????????????????????????????????rowspan:?縱向合并
?????????????????th:?相當于<td>?+?<b>
????????????????????屬性同<td>
????????????????caption:?表格的標題
???????????????????屬性：align:?取值：left,center,right,top,bottom
????????????????thead
????????????????tbody
????????????????tfoot
???????????????????寫與不寫的區(qū)別：?
???????????????????????????1.?當表格非常大的時候，如果不寫，則必須等表格的內(nèi)容全部下載完成才能顯示。但是用tbody標簽的話，那么邊下載邊顯示。????????????????????????????????????????2.如果不寫thead,tbody,tfoot那么瀏覽器解析表格內(nèi)容的時候是從上到下解析。如果寫了，那么順序任意，瀏覽器解析的時候還是按照thead,tbody,tfoot的順序顯示內(nèi)容
7.框架標記及<iframe>
????????框架頁面上不允許有body標簽
????????????????frameset:?框架的集合
????????????????????????rows:?縱向分部框架.?
????????????????????????cols:?橫向分部框架.
??????????????????????????????寫法有兩種:?1)?絕對值??"200,*"?,*代表剩余的
??????????????????????????????????????????????????????????2)?相對值??"30%,*"
????????????????frame:?框架.?一個框架顯示一個頁面
????????????????????????scrolling:?是否需要滾動條。默認是true
????????????????????????noresize?:?固定框架大小
????????????????????????bordercolor:?給框架邊框起一個顏色
????????????????????????name?:?給框架起一個名字
????????????????????????????????內(nèi)嵌框架：?嵌入在一個頁面上的框架.(僅僅IE支持)
????????????????????????????????iframe:

---

<iframe src="../code/1.jpg" width="400" height="300"/> 屬性 name=“mainFrame“ 窗口名稱 width=“800px“ ?寬度 height=“150px” ? 高度 scrolling=“yes” ?是否允許滾動 src=“subframe/the_second.html“ 鏈接的網(wǎng)頁

---

8.表單標記及語義化 表單標簽：<form>用于與服務(wù)器端的交互。 <input>：輸入標簽 ,接收用戶輸入,Type屬性 ?text,password,radio,checkbox,hidden, ?submit,reset,button,file，image ? <select>標簽 下拉列表 ?size ?selected ? <textare>標簽 多行文本框 <lable>:for屬性配合id一起用形成標注 form表單的兩種提交方式的區(qū)別 <form action="" method="post" > <fieldset> <!--域--> ?? <legend>用戶信息</legend> ? ?<!--域標題--> 姓名：<input type="text"/> ? ?</fieldset> </form>
9.多媒體標記

---

多媒體文件的鏈接 ?<embed src="zxmzf.mp3" width="300" ?height="300" autostart="true" ?loop="true"></embed>

---

在網(wǎng)頁中加入背景音樂 ?<bgsound src="zxmzf.mp3" loop="-1" /> ?

---

跑馬燈 ? <marquee behavior=“alternate” width>

---

????????????????bgsound:?背景音樂?
????????????????embed:?播放多媒體文件.
????????????????marquee:?移動
????????????????????????屬性：direction?移動目標方向?left,right?,up,down?,up，down移動距離是固定的200px
??????????????????????????????????behavior:?行為方式?取值：slide,alternate,scroll
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scrollamount?:?移動速度
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? loop:?循環(huán)多少圈。負值表示無限循環(huán)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scrolldelay:?移動一次休息多長時間。單位是毫秒
10.頭標簽 頭標簽都放在<head></head>頭部分之間。包括：title base meta link <title>：指定瀏覽器的標題。 <base>：為頁面上的所有鏈接規(guī)標題欄顯示的內(nèi)容定默認地址或默認目標。? <meta>：可提供有關(guān)頁面的基本信息 <link>：定義文檔與外部資源的關(guān)系。
補充： 水平線標記<hr> ? ? ? ?

---

屬性： ? 1.align="" ? ? ? ? ? ? ? 設(shè)定線條置放位置，可選擇：left；right；center 三種設(shè)定值。 ? ? ? ? ? ? 2.size="2" ? ? ? ? ? ? ? 設(shè)定線條厚度，以像素作單位，內(nèi)定為 2。 ? 3.width="70%" ? ? ? ? ? ? ? 設(shè)定線條長度，可以是絕對值或相對值，內(nèi)定為100%。 ? ? ? ? ? ? 4.color="#0000FF" 『只適用于IE』 ? ? ? ? ?? 5.noshade 設(shè)定線條為平面顯示，若刪去則具陰影或立體，這是內(nèi)定值

---

轉(zhuǎn)載于:https://my.oschina.net/jiMap/blog/665887

總結(jié)

以上是生活随笔為你收集整理的HTML视频笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。