四，JavaWeb簡略的談下前端技術<一>HTML5的各個標記

1，一個基本的HTML的文檔結構是這樣的：

這個html文檔用瀏覽器打開是這個樣子的。

注意！本文介紹的前端技術，都是HTML5的。由於HTML5比之前的版本優化了不少，並且增長了一些接口。

2，HTML排版用的各類標記

1， 特殊標記：HTML文檔裏邊特殊字符是顯示不了的。它們須要特別的實體名稱。像空格= ，」="；等等。舉個例子吧，例如我想在瀏覽器中顯示 <」我是個大帥比」>那麼應該這麼寫。

看到紅色圈圈了吧。我是大帥比的兩邊就是特殊標記。

2，段落標記<p></p>，段落標記沒啥卵用，就是在段落前和段落後各加了一個空行。

3，換行標記<br>，換行標記的卵用比較大，由於HTML裏邊是不認識enter回車的，因此想另起一行就要用段落標記。

4,標題標記<h1></h1>，網站嘛不免有各類各樣的標題啊，<h1></h1>就是一級標記，顯示的時候，顯示的特別大，從h1一直到h6，一共六個級別。

5，無序列表標記，<ul></ul>這個是無序列表，裏邊的每一列都用<li></li>括起來。

6，有序列表標記，<ol></ol>這個是有序列表，裏邊的每一列也是用<li></li>括起來，注意有序列表並非會對列表自動排序什麼的，而是在瀏覽器中顯示的時候在每一列前邊增長了一個標記好1,2,3,4等。。。。

7，圖片標記：<img src=」url」 width=」value」 height=」value」 border=」value」 alt=」提示文字」>,src表示圖片的來源地址，width，height，border分別表示圖片的寬，高，外邊框的寬度。Alt若是因爲各類緣由，圖片沒有顯示，那麼就會顯示裏邊的提示文字。

8超連接標記，這個很是重要，幾乎每一個網站都有這個，點擊一個鏈接後，跳轉到另外一個頁面啥的。<a href=」url」 hreflang=」language」 name=」bookmarkname」 type=」mimetype」 charset=」code」 coords=」coordinate」 target=」target」 tabindex=」value」 accesskey=」key」></a>呵，好長一串。。其實一個簡單的超連接，只須要<a href=」url」></a>就好了

9，表格標記：這個不想提，好麻煩幾乎用不到。

10，播放音視頻：<audio autoplay>您的瀏覽器不支持<audio>標記！ <source src=」audio url.mp3」 type=」audio/mp3」></audio> 您的瀏覽器不支持，是當播放的音頻顯示不出來的時候顯示的，固然有時候並非真的由於瀏覽器不支持，管他呢，先把鍋甩出去再說，你不支持啊，和我不要緊啊。。。

11，播放視頻：<video src=」url」 width=」value」 height=」value」 autoplay=」ture/false」 control=」true/false」> 您的瀏覽器不支持<video>標記！<video> 固然瀏覽器不支持一樣爲了甩鍋哈，src指定視頻的在服務器的位置，width，height，autoplay，contory分別指寬，高，是否自動播放，是否可控。

12，HTML5還增長了header，footer，section，article，aside，nav。我的以爲這些新增長的標籤並沒什麼卵用，可是和CSS一塊兒配合使用，應該方便很多。

13，表單標記：這個很重要，若是要向服務器提交一些信息的話，就會用到這個標記。直接舉個例子吧，一個簡單的網站登陸：

效果以下：

固然還有一些其餘亂起八糟的標記，可是我們目標是後臺開發工程師，我就再也不一一的介紹了，有興趣或者真的要開發一些簡單的頁面，建議直接去一些網站看源代碼。在某個網站，點擊鼠標右鍵，查看源代碼~。好了，暫時就這樣了，晚安。

下期預告：《簡略的談下前端技術<二>CSS層疊樣式表》

若是像查看更多的原創技術文檔，請訂閱個人公衆號：ITYaoDao,或者直接掃描下邊的二維碼：