什麼是HTML？

什麼是超文本標記語言（Hypertext Markup Language）

知識點： "超文本"就是指頁面內可以包含圖片，鏈接，甚至音樂，程序等非文字因素

HTML的發展歷史

學文科的，咋滴，也得普及下，發展歷史吧

以下來源於黑馬程序員，如有侵權，請律師函警告

由於各個瀏覽器之間的標準不統一，給網站開發人員帶來了很大的麻煩。HTML5的出現即是爲了解決這一問題，致力於將Web帶入一個成熟的應用平臺。

很多人誤以爲HTML5是指用HTML5+CSS3+Javascript實現的綜合網頁效果，但實際上HTML5僅僅是一套新的HTML標準，是對HTML及XHTMI的繼承與發展。HTML5是一個向下兼容的版本，本質上並不是什麼新的技術，只是在功能特性上有了極大的豐富。

任何事情並不是一蹴而就的，HTML標準同樣也經歷了時間積累，逐漸演化而成HTML5標準。HTML的出現由來已久，從1993年首次以草案的形式發佈，再到2008年的HTML5正式版，中間經歷了多次版本升級。

HTML1.0：在1993年由互聯網工程工作小組(IETF)工作草案發布(並非標準，衆多不同版本HTML陸續在全球使用，但是始終未能形成一個廣泛的有相同標準的版本。
HTML2.0：HTML2.0相比初版而言，標記得到了極大的豐富。
HTML3.2：HTML3.2是在1996年提出的規範，注重兼容性的提高，並對之前的版本進行了改進
HTML4.0：1997年12月推出的HTML4.0，將HTML推向了一個新高度。該版本倡導將文檔結構和樣式分離，並實現了表格更靈活的控制。
HTM.401：由1999年提出的4.01版本是在HTML4.0基礎上的微小改進
20世紀90年代是HTML發展速度最快的時期，但是自1999年發佈的HTML4.01後，業界普遍認爲HTM已經步入瓶頸期，W3C組織開始對Web標準的焦點轉向 XHTMI上。
XHTMI1.0：在2000年由W3C組織提出， XHTMI是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。
XHTML1.1：XHTML1.1是模塊化的 XHTMI，是貨真價實的XML。
XHTML2.0：XHTML2.0是完全模塊化可定製的XHTMI，隨着HTML5的興起，XHTML2.0工作小組被要求停止工作。
2004年，一些瀏覽器廠商聯合成立了 WHATWG工作組，致力於Web表單和應用程序。此時的W3C組織專注於 XHTML2.0。在2006年，W3C組織組建了新的HTML工作組採納了 WHATWG的意見，並於2008年發佈了HTML5。
由於HTML5能解決實際的問題，所以在規範還未定稿的情況下，各大瀏覽器廠家已經開始對旗下產品進行升級以支持HTML5的新功能。因此，HTML5得益於瀏覽器的實驗性反饋並且也得到持續的完善，並以這種方式迅速融入對Web平臺的實質性改進中。2014年10月，W3C組織宣佈歷經8年努力，HTML5標準規範終於定稿。

嗯，下面是基本功能實現的代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node_of_HTML</title>
</head>
<body>
    <h1 align="center">提醒：學習時右鍵查看源代碼</h1>
    <br/><!--換行-->
    <h2>第一部分-簡單標籤元素</h2>
    <a href="https://www.bilibili.com">1.超鏈接（默認替換鏈接）</a>
    <br/><br/>
    <a href="https://www.bilibili.com" target="_blank">2.新建窗口跳轉至鏈接</a>
    <br/><br/>
    <a href="https://www.bilibili.com" target="_self">3.原窗口替換鏈接</a>
    <br/><br/>
    4.這一行是沒有粗體、斜體時的效果，對比下面
    <br/><br/>
    <b>5.這個是粗體</b>
    <br/><br/>
    <em>6.斜體效果</em>
    <br/><br/>
    <u>7.下劃線效果</u>
    <br/><br/>
    <s>8.刪除效果</s>
    <br/><br/>
    <b><em><u><s>9.粗體、斜體、下劃線、刪除效果疊加</s></u></em></b>

    <br/><br/>
    <h2>第二部分-表格------------------------華麗的分割線---------------------------------</h2>
    <br/><br/><b>1.普通表格</b><br/>
    <br/>
    <table border="1px" align="center">
<!--        <tr>
            <td>名字</td>
            <td>性別</td>
            <td>密碼</td>
        </tr>-->
        <thead>
            <tr>
                <th>名字</th>
                <th>性別</th>
                <th>密碼</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Admin</td>
                <td>男啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</td>
                <td>123</td>
            </tr>
            <tr>
                <td>Violet</td>
                <td>女</td>
                <td>456</td>
            </tr>
            <tr>
                <td>Andy</td>
                <td>男</td>
                <td>xxx</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>名字</th>
                <th>性別</th>
                <th>密碼</th>
            </tr>
        </tfoot>
    </table>
    <br/>

    <br/><br/><b>2.合併表格</b><br/>
    <table border="1px" align="center">
        <tr>
            <th rowspan="2">aaa</th>
            <th>aaa</th>
            <th>aaa</th>
            <th>aaa</th>
        </tr>
        <tr>
            <!--<td>aaa</td>-->
            <td colspan="2">aaa</td>
            <td>aaa</td>
            <!--<td>aaa</td>--><!--合併的時候，把多的單元格註釋掉-->
        </tr>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
    </table>

    <br/><br/><b>3.列表-分別爲順序、倒序和英文字母順序排列</b><br/>
    <br/>
    <b>(1)順序排列</b>
        <ol>
            <li>你好</li>
            <li>我好</li>
            <li>大家好</li>
        </ol>
    <br>
    <b>(2)倒序排列</b>
        <ol reversed>
            <li>你好</li>
            <li>我好</li>
            <li>大家好</li>
        </ol>
    <br>
    <b>(3)英文字母順序排列</b>
        <ol type="a">
            <li>你好</li>
            <li>我好</li>
            <li>大家好</li>
        </ol>

    <br/><br/><b>4.列表嵌套</b><br/>
    <ol>
        <li>圖像處理</li>
        <ol type="a">
            <li>java</li>
            <li>python</li>
            <li>PHP</li>
        </ol>

        <li>大數據處理</li>
        <ol type="a">
            <li>java</li>
            <li>python</li>
            <li>PHP</li>
        </ol>
        <li>自然語言處理</li>
        <ol type="a">
            <li>java</li>
            <li>python</li>
            <li>PHP</li>
        </ol>
    </ol>

    <br/><br/><b>5.無序標籤</b><br/>
    <br/>
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>


    <br/><br/>
    <h2>第三部分-表單------------------------華麗的分割線---------------------------------</h2>

    <form>
        <br/><br/><b>1.普通文本框（可以輸入信息）</b><br/>
        <input><!--文本框-->
        <input type="index"><!--同上面效果-->

        <br/><br/><b>2.含佔位符的文本框</b><br/>
        <input type="index" value="java天下第一"><!--佔位符-->

        <br/><br/><b>3.不含佔位符的文本框（有提示）</b><br/>
            <input type="index" placeholder="輸入賬號"><!--不佔位-->
        <br>
            <input type="index" placeholder="輸入密碼">

        <br/><br/><b>4.限定輸入字符數大小的文本框</b><br/>
            <input type="index" placeholder="maxlength" maxlength="5"><!--最大能輸入的字符-->

        <br/><br/><b>5.拓寬了的的文本框</b><br/>
            <input type="index" placeholder="輸入密碼" size="50"><!--拓寬單行文本框-->

        <br/><br/><b>6.只讀的文本框</b><br/>
            <input type="index" value="你刪不了我哈哈" readonly><!--只讀-->

        <br/><br/><b>7.密碼隱藏的文本框</b><br/>
            <input type="password" placeholder="輸入密碼">

        <br/><br/><b>8.多行表單，任意拉伸</b><br/>
            <textarea rows="20">
投我以木瓜，報之以瓊琚。匪報也，永以爲好也！投我以木桃，報之以瓊瑤。匪報也，永以爲好也！投我以木李，報之以瓊玖。匪報也，永以爲好也！《木瓜》是先秦時期衛國的一首描述愛情的民歌，是通過贈答表達深厚情意的詩作，傳誦極廣。成語“投桃報李”便出自這裏。禮尚往來是中華民族的傳統美德，不止友人，戀人之間也是如此。禮物本身的價值已不重要，象徵意義更加突出，以示兩心相許，兩情相悅</textarea>

        <br/><br/><b>9.按鈕</b><br/>
        <input type=button value="按鈕1">
        <br>
        <button>按鈕2</button><!--js合作並且作爲綁定事件的-->
        <br>
        <input type="submit" value="提交"><!--提交表單-->

        <br/><br/><b>10.範圍選擇</b><br/>
        <input type="range" min="-100" max="100">
        <input type="range" min="-200" max="200" step="100">
        <input type="range" min="-200" max="200" step="100" value="-200"><!--數字滑動-->
        <br/>
        <input type="number" min="-100" max="100" value="0"><!--上下調值-->

        <br/><br/><b>11.選擇框</b><br/>
        <input type="checkbox">選擇

        <br/><br/><b>12.單選框</b><br/>
        那個語言天下第一<br>
        <input type="radio" name="a" checked>java
        <input type="radio" name="a">PHP
        <input type="radio" name="a">JavaScript

        <br/><br/><b>12.下拉選擇表單</b><br/>
        你最喜歡的手機品牌是什麼
        <br>
        <select>
            <option>華爲</option>
            <option>榮耀</option>
            <option>蘋果</option>
        </select>

        <br/><br/><b>13.下拉選擇表單及手動輸入</b><br/>
        <input type="text" placeholder="其他水果請輸入" list="datalist1">
        <datalist id="datalist1">
            <option>蘋果</option>
            <option>香腳</option>
            <option>西瓜</option>
        </datalist>


        <br/><br/><b>14.郵件、電話、url、日期顏色等</b><br/>
        <input type="email">
        <input type="tel">
        <input type="url">
        <input type="date"><!--獲取日期-->
        <input type="color"><!--獲取顏色-->

        <br/><br/><b>15.隱藏表單</b><br/>
        <input type="hidden" value="123"><!--瀏覽器上不顯示，被隱藏起來了-->

        <br/><br/><b>16.圖片按鈕及選擇文件</b><br/>
        薇爾莉特永遠喜歡我！<br>
        <input type="image" src="我的寶貝.jpg" width="20%"><!--圖片按鈕-->
        <br>
        <input type="file" multiple><!--可以選擇一個文件，或者用multiple選擇多個文件-->
    </form>

    <br/><br/>
    <h2>第四部分-插入圖片------------------------華麗的分割線---------------------------------</h2>
    <br/><br/><b>1.創建圖片</b><br/>
    <!--<img src="violet.jpg">-->
    <img src="我的寶貝.jpg" width="128px" alt="薇爾莉特">

    <br/><br/><b>2.找不到圖片時</b><br/>
    <img src="我的.mp4" width="128px" alt="薇爾莉特"><!--alt在找不到文件時備用-->

    <br/><br/><b>3.點擊圖片跳轉到某個網站</b><br/>
    <a href="https://www.bilibili.com/bangumi/media/md8892/?from=search&seid=14554523757864175862" target="_blank">
        <img src="我的寶貝.jpg" width="128px" alt="薇爾莉特">
    </a>

    <br/><br/><b>4.分區響應圖（大家可以點擊任意一個app來玩一玩，很有意思吧）</b><br/>

    <img src="我的寶貝.jpg" usemap="#map1">
<!--    <form>
        <input type="image" src="tel.png">&lt;!&ndash;用於查找像素位置&ndash;&gt;
    </form>-->

<map name="map1">
    <area href="https://www.bilibili.com" shape="rect" coords="32,508,125,598" target="_blank">
    <area href="https://wannianrili.51240.com/" shape="rect" coords="178,508,271,598" target="_blank">
    <area href="https://baike.so.com/doc/10038773-10517096.html" shape="rect" coords="326,508,417,598" target="_blank">
    <area href="https://baike.so.com/doc/6883746-7101237.html" shape="rect" coords="471,508,566,598" target="_blank">

    <area href="http://time.tianqi.com/" shape="rect" coords="32,689,125,780" target="_blank">
    <area href="http://luyin.voicecloud.cn/" shape="rect" coords="178,689,271,780" target="_blank">
    <area href="http://www.kugou.com/" shape="rect" coords="326,689,417,780" target="_blank">
    <area href="http://meiyan.meipai.com/" shape="rect" coords="471,689,566,780" target="_blank">

    <area href="http://www.10086.cn/index/sc/index_280_280.html" shape="rect" coords="32,941,125,1032" target="_blank">
    <area href="https://dianhua.qq.com/" shape="rect" coords="178,941,271,1032" target="_blank">
    <area href="https://baike.baidu.com/item/%E7%9F%AD%E4%BF%A1/6203?fr=aladdin" shape="rect" coords="326,941,417,1032" target="_blank">
    <area href="https://www.google.cn/intl/zh-CN/chrome/" shape="rect" coords="471,941,566,1032" target="_blank">

    <area href="https://www.huya.com/" shape="circle" coords="296,188,154" target="_blank"><!--圖片時間處點擊有驚喜，老師這裏有些小問題，coords的參數分別是圓心座標x,y,和半徑r-->
</map>

    <h2>第五部分-插入視頻------------------------華麗的分割線---------------------------------</h2>
    <br/><br/><b>點擊進行播放</b><br/>
<!--<video src="gameplay.mp4" autoplay></video>-->
    <video src="我的.mp4" controls preload="auto" poster="我的寶貝.jpg"></video>
    
     <h2>第六部分-插入音頻------------------------華麗的分割線---------------------------------</h2>
    <br/><br/><b>提醒：調節好音量後點擊進行播放</b><br/>
    <!--<audio src="FlowerFire.mp3" autoplay controls></audio>--><!--自動播放-->
    <audio src="我的.mp4" controls></audio>
</body>
</html>

實現的網頁效果大概是這樣。實現完了，發現確實是超文本語言。。。

html背景知識---及基本用法

什麼是HTML？

HTML的發展歷史

線代複習知識點大綱

JQuery部分內容整理

sql語言總結合集

java---final關鍵字

java基礎內容總結

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結