HTML4/5

HTML

概述
    超文本標(biāo)記語言，最基礎(chǔ)的網(wǎng)絡(luò)語言
發(fā)展歷史
    HTML1.0
      在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）
    HTML 2.0
      1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時
    HTML 3.2
      1997年1月14日，W3C推薦標(biāo)準(zhǔn)
    HTML 4.0
      1997年12月18日，W3C推薦標(biāo)準(zhǔn)
    HTML 4.01（微小改進(jìn)）
      1999年12月24日，W3C推薦標(biāo)準(zhǔn)
    ISO/IEC 15445:2000（“ISO HTML”）
      2000年5月15日發(fā)布，基于嚴(yán)格的HTML 4.01語法，是國際標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)。
    XHTML1.0
      發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布。
    XHTML 1.1
      于2001年5月31日發(fā)布，W3C推薦標(biāo)準(zhǔn)。
    XHTML 2.0
      W3C工作草案。
    HTML4.01
      是常見的版本。
    HTML 5
      2014年10月28日，W3C推薦標(biāo)準(zhǔn)
      從XHTML 1.x的更新版，基于HTML 5草案。
HTML相關(guān)聯(lián)盟
    W3C (World Wide Web Consortium) 
        萬維網(wǎng)聯(lián)盟  官方組織 
    WHATWG (Web Hypertext Application Technology Working Group)
        Web 超文本應(yīng)用技術(shù)工作組
HTML5
    HTML+CSS3+JavaScript+API
    html5是一致性檢查,沒有有效性檢查
支持HTML5的瀏覽器
    IE9+,Firefox,Opear,Safari,Chrome,獵豹,UC,遨游,海豚,百度
HTML5推廣網(wǎng)站
    http://www.html5cn.org/
    http://www.html5china.com/
    http://www.mhtml5.com/
HTML5對HTML4刪除了哪些標(biāo)簽
    新的文檔類型聲明(DTD)
    新增的HTML5標(biāo)簽
    刪除的HTML標(biāo)簽
    重新定義的HTML標(biāo)簽
    嶄新的頁面布局
    
    新的文檔類型聲明(DTD)
        <!DOCTYPE html> / <!doctype html>
    新增的HTML5標(biāo)簽
        (塊狀元素)有意義的div
            新的結(jié)構(gòu)標(biāo)簽帶來的是網(wǎng)頁布局的改變及提升對搜索引擎的友好
            <article> 標(biāo)記定義一篇文章
            <header> 標(biāo)記定義一個頁面或一個區(qū)域的頭部
            <nav> 標(biāo)記定義導(dǎo)航鏈接
            <section> 標(biāo)記定義一個區(qū)域
            <aside> 標(biāo)記定義頁面內(nèi)容部分的側(cè)邊欄
            <hgroup> 標(biāo)記定義文件中一個區(qū)塊的相關(guān)信息
            <figure> 標(biāo)記定義一組媒體內(nèi)容以及它們的標(biāo)題
            <figcaption> 標(biāo)記定義figure元素的標(biāo)題
            <footer> 標(biāo)記定義一個頁面或者一個區(qū)域的底部
            <dialog> 標(biāo)記定義一個對話框(會話框)類似微信(谷歌不支持)
        多媒體交互標(biāo)簽
            <video> 標(biāo)記定義一個視頻
            <audio> 標(biāo)記定義音頻內(nèi)容
            <source> 標(biāo)記定義媒體資源
            <canvas> 標(biāo)記定義圖片
            <embed> 標(biāo)記定義外部的可交互的內(nèi)容或插件比如flash
        Web應(yīng)用標(biāo)簽
            <menu> 命令列表-目前瀏覽器不支持
            <menuitem> menu命令列表標(biāo)簽FF(嵌入系統(tǒng))-目前瀏覽器不支持
            <command> menu標(biāo)記定義一個命令按鈕-目前瀏覽器不支持
            <meter> 狀態(tài)標(biāo)簽(實(shí)時狀態(tài)顯示:氣壓/氣溫C/O)
            <progress> 狀態(tài)標(biāo)簽(實(shí)時過程:安裝/加載 C/F/O)
            <datalist> 為input標(biāo)記定義一個下拉列表,配合optionF/O
            <details> 標(biāo)記定義一個元素的詳細(xì)內(nèi)容,配合dt,dd,C
        注釋標(biāo)簽
            <ruby> 標(biāo)記定義 注釋或音標(biāo)
            <rp> 告訴那些不支持ruby元素的瀏覽器如何去顯示,專門用來注釋括號
            <rt> 標(biāo)記定義對ruby的注釋內(nèi)容文本
        其它標(biāo)簽
            <keygen> 標(biāo)記定義表單里一個生成的鍵值(加密信息傳送)O/F
            <mark> 標(biāo)記定義有標(biāo)記的文本(黃色選中狀態(tài))
            <output> 標(biāo)記定義一些輸出類型,計算表單結(jié)果配合oninput事件
            <time> 標(biāo)記定義一個日期/時間 目前所有主流瀏覽器都不支持
    刪除的HTML標(biāo)簽
        純表現(xiàn)的元素
            basefont,big,center,font,s,strike,tt,u
        對可用性產(chǎn)生負(fù)面影響的元素
            frame,frameset,noframes
        產(chǎn)生混淆的元素
            acronym,appliet,isindex,dir
    重新定義的HTML標(biāo)簽
        <b> 代表內(nèi)聯(lián)文本，通常是粗體，沒有傳遞表示重要的意思
        <i> 代表內(nèi)聯(lián)文本，通常是斜體，沒有傳遞表示重要的意思
        <dd> 可以同details與figure一同使用，定義包含文本，dialog也可以
        <dt> 可以同details與figure一同使用，匯總細(xì)節(jié)，dialog也可用 
        <hr> 表示主題結(jié)束，而不是水平線，雖然顯示相同
        <menu> 重新定義用戶界面的菜單，配合command或者menuitem使用
        <small> 表示小字體，例如打印注釋或者法律條款
        <strong> 表示重要性而不是強(qiáng)調(diào)符號
    重新定義的HTML標(biāo)簽
        
瀏覽器之間的差異
    對相應(yīng)的css/html標(biāo)簽的渲染不同
    對JavaScript的支持不同

基本使用

<body>
    <header></header>
    <div>
        <section></section>
        <aside></aside>
    </div>
    <footer></footer>
</body>
header {height: 150px;background: red;}
div {margin-top: 10px;height: 700px;} /*div必須要有告訴,否則margin-top無效*/
section{height: 700px;background: green;width: 70%; float: left;}
aside{height: 700px; width: 28%;background: yellow; float: right;}
footer {height: 100px;background: yellowgreen;clear: both;margin-top: 10px;}

常用的網(wǎng)絡(luò)名詞

1.WWW  萬維網(wǎng)（資料空間）
2.HTTP  超文本傳輸協(xié)議
3.URL  網(wǎng)址，路徑  統(tǒng)一資源定位器

三、瀏覽器的種類

HTML代碼是通過瀏覽器加載解析的
1.IE  6/7/8/9/10
2.火狐  MozillaFirefox
3.谷歌  chrome
4.蘋果   safra
5.歐朋

四、什么是網(wǎng)頁文件

當(dāng)看到后綴命為.html或者.htm結(jié)尾的的文件時就是網(wǎng)頁文件

五、顯示擴(kuò)展名

1.打開任意文件夾
2.點(diǎn)擊組織
3.文件夾和搜素選項
4.查看
5.隱藏已知文件類型的擴(kuò)展名

六、HTML的語法

1.單標(biāo)記  
    <標(biāo)簽名/>  eg:<br/>
         1.沒有屬性<標(biāo)簽名/>  eg:<br/>
        2.有屬性<標(biāo)簽名  屬性名="屬性值"/>  eg:< hr  color="red"/>
         PS：<hr/>是水平線
     
2.雙標(biāo)記  
    <開始標(biāo)記></結(jié)束標(biāo)記>  eg:<title></title>
     1.沒有屬性 
        <開始標(biāo)記></結(jié)束標(biāo)記>  eg:<title></title>
     2.有屬性 
        <開始標(biāo)記 屬性名="屬性值"></結(jié)束標(biāo)記> eg:<font color="red"></font>

    PS:屬性不區(qū)分先后順序
    PS：所有的 標(biāo)點(diǎn)符號必須在英文輸入法狀態(tài)下書寫
    PS：文件或文件夾名盡量使用英文或者拼音命名
    PS:html是一門不嚴(yán)謹(jǐn)?shù)恼Z言，不區(qū)分大小寫，但是我們一定要遵循XHTML的書寫規(guī)范
        <font color="red" size="7">HELLO WORD</font><br/>
        <hr align="left" size="10" width="50" color="pink"/>
        <font color="blue" size="5">HELLO WORD</font>

七、 HTML的骨架（結(jié)構(gòu)）

    <html>
        <head>
            <title>html的骨架</title>
        </head>
        <body> 
            <font color="blue" size="5">hello word</font>
        </body>
    </html>

八、常用標(biāo)記

    1. font  控制文字   color  size

    2. br   換行

    3. hr   水平線   color  width 寬度  align 對齊方式  size 高度

    4. h1-h6  標(biāo)題標(biāo)記  align  ps：h標(biāo)記不是用來控制文字大小的，h1在一個頁面中盡量只出現(xiàn)一次
    5. p   段落標(biāo)記  align  

    6. b i u del   加粗  傾斜  下劃線  刪除線

    7. blockquote  縮排 縮進(jìn)

    8. center 居中

    9. strong  加粗  含有語義或者語氣 起強(qiáng)調(diào)作用 便于SEO搜索引擎優(yōu)化

    10. em  傾斜 含有語義或者語氣

ps：當(dāng)你聽到html標(biāo)簽，html標(biāo)記，html元素，html節(jié)點(diǎn)時都是一個意思

九、DW設(shè)置

    1. 設(shè)計器改為經(jīng)典

    2. 修改字號  編輯---> 首選參數(shù) ---> 字體

    3. 代碼提示  編輯---> 首選參數(shù) ---> 代碼提示 ---> 選擇第二個
    新建完成后出現(xiàn)的頁面是設(shè)計，我們要點(diǎn)擊代碼才會出現(xiàn)我們想要的頁面

十、特殊字符

    1.   空格

    2. >   > 大于號

    3. <  < 小于號

    4. ? 版權(quán)

    5. ?  注冊

十一、網(wǎng)頁基本要素

    1. 文字

    2. 圖片

    3. 鏈接

十二、插入圖片

![](圖片的路徑)
    
    img的屬性

        1. alt   替換圖片文本，當(dāng)圖片不能正常顯示時

        2. title  圖片標(biāo)題

        3. width/height  寬/高

        4. border 邊框

        5. hspace  圖片左右空白

        6. vspace  圖片上下空白

十三、 body里的屬性

    1. bgcolor  背景色

    2. background 背景圖片

十四、doctype的作用 文檔聲明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    讓所有瀏覽器遵循一個規(guī)范顯示頁面

ps: doctype可以減少兼容性問題瀏覽器之間的

十五、圖片的類型

    1. jpg  不支持透明和動畫，有1670萬種顏色，圖片格式大，加載慢  照片

    2. gif  支持透明和動畫， 有256種顏色，圖片格式小，加載快  logo 小圖標(biāo)

    3. png  支持透明不支持動畫， 有256種-1670萬種顏色， png8 png24 png32

        ps：png8=gif在IE6下圖片背景不會透明，解決辦法使用JS代碼

    4. tiff 印刷格式 注意：絕對不允許出現(xiàn)在網(wǎng)頁中！ 圖片格式超大

frame，是網(wǎng)頁開發(fā)必須掌握的知識。例如后臺架構(gòu)、局部刷新，頁面分割，都是frame的用途表現(xiàn)，尤其是后臺頁面制作，使用frame會給用戶帶來非常舒適的使用感受。
frame知識點(diǎn)包括（frameset標(biāo)簽、frame標(biāo)簽、iframe標(biāo)簽）

frameset 在html5中已經(jīng)廢棄了。
frame在html5中已經(jīng)廢棄了。
iframe 在html5中 可以使用。

一、frameset

  1. 屬性
    ①border
    設(shè)置框架的邊框粗細(xì)。
    ②bordercolor
    設(shè)置框架的邊框顏色。
    ③frameborder
    設(shè)置是否顯示框架邊框。設(shè)定值只有0、1；0 表示不要邊框，1 表示要顯示邊框。
    ④cols
    縱向分割頁面。其數(shù)值表示方法有三種：“30%、30（或者30px）、”；數(shù)值的個數(shù)代表分成的視窗數(shù)目且數(shù)值之間用“,”隔開。“30%”表示該框架區(qū)域占全部瀏覽器頁面區(qū)域的30%；“30”表示該區(qū)域橫向?qū)挾葹?0像素；“”表示該區(qū)域占用余下頁面空間。例如：cols="25%,200," 表示將頁面分為三部分，左面部分占頁面30%，中間橫向?qū)挾葹?00像素，頁面余下的作為右面部分。
    ⑤rows
    橫向分割頁面。數(shù)值表示方法與意義與cols相同。
    ⑥framespacing
    設(shè)置框架與框架間的保留的空白距離。
    用例：
    <frameset cols="40%,    ,">
    意思是：第一個框架占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。
    <frameset cols="    ,,,*">
    意思是：瀏覽器窗口等分為四部分。

二、frame

  1. 屬性
    ①name
    設(shè)置框架名稱。此為必須設(shè)置的屬性。
    ②src
    設(shè)置此框架要顯示的網(wǎng)頁名稱或路徑。此為必須設(shè)置的屬性。
    ③scrolling
    設(shè)置是否要顯示滾動條。設(shè)定值為auto, yes, no。
    ④bordercolor
    設(shè)置框架的邊框顏色。
    ⑤frameborder
    設(shè)置是否顯示框架邊框。設(shè)定值只有0、1；0 表示不要邊框，1 表示要顯示邊框。
    ⑥noresize
    設(shè)置框架大小是否能手動調(diào)節(jié)。
    ⑦marginwidth
    設(shè)置框架邊界和其中內(nèi)容之間的寬度。
    ⑧marginhight
    設(shè)置框架邊界和其中內(nèi)容之間的高度。
    ⑨width
    設(shè)置框架寬度。
    ⑩height
    設(shè)置框架高度。
  2. 用例
    <frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />

三、iframe
是浮動的框架（frame），其常用屬性與frame類似，其他的主要有以下（相同的就不列舉了）

  1. 屬性
    ①align
    設(shè)置垂直或水平對齊方式
    ②allowTransparency
    設(shè)置或獲取對象是否可為透明。
  2. 用例
    <iframe name="123" align="middle" marginwidth="0" marginheight=0 src="???" frameborder="0" scrolling="no" width="776" height="2500"></iframe>
    注意：
    iframe標(biāo)簽與frameset、frame標(biāo)簽的驗(yàn)證方法不同，是XHTML 1.0 Transitional。且iframe是放在body標(biāo)簽之內(nèi)，而frameset、frame是放在body標(biāo)簽之外。

【說明】
<noframes></noframes>標(biāo)志對也是放在<frameset></frameset>標(biāo)志對之間，用來在那些不支持框架的瀏覽器中顯示文本或圖像信息。
在此標(biāo)志對之間先緊跟<body></body>標(biāo)志對，然后才可以使用我們熟悉的任何標(biāo)志。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,320評論 1贊 41
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,082評論 0贊 1
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進(jìn)階之旅閱讀 16,599評論 32贊 459
  • 類 對 HTML 進(jìn)行分類（設(shè)置類），使我們能夠?yàn)樵氐念惗x CSS 樣式。 為相同的類設(shè)置相同的樣式，或者為不...
    滿滿正能量_617a閱讀 523評論 0贊 1
  • 1. 出發(fā)永遠(yuǎn)是最有意義的事去做就是了——《愿有人陪你顛沛流離》 2. 在現(xiàn)實(shí)斷裂的地方夢匯成了河——顧城《彌合》...
    晨陽聊電影閱讀 494評論 0贊 2