1.HTML技术
一、介紹開發
學習的路線：
- 基于瀏覽器端的技術：HTML、CSS、JavaScript、DOM、VueJS、ElementUI
- 服務器技術：tomcat、http協議
- JavaWEB基礎技術：Servlet、Request、Response、Cookie、Session、Filter、Listener、ajax
- 企業級框架：mybatis、Spring、SpringMVC、SpringBoot
- 微服務技術：SpringCloud、Linux、Nginx、Redis、MQ、ElasticSearch（ES）
二、HTML介紹
1、什么是HTML
HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。主要用于編輯網頁，編輯的網頁文件最終需要交給瀏覽器負責運行。只要在瀏覽器端看到的頁面全部都是由HTML編輯出來。
W3C組織負責HTML語言的標準的制定：HTML歷史上有如下版本：
①HTML 1.0：在1993年6月作為互聯網工程工作小組(IETF)工作草案發布。
②HTML 2.0：1995年1 1月作為RFC 1866發布，于2000年6月發布之后被宣布已經過時。
③HTML 3.2：1997年1月14日，W3C推薦標準。
④HTML 4.0：1997年12月18日，W3C推薦標準。
⑤HTML 4.01（微小改進）：1999年12月24日，W3C推薦標準。 （XHTML1.0、1.1）
⑥HTML 5：HTML5是公認的下一代Web語言，極大地提升了Web在富媒體、富內容和富應用等方面的能力，被喻為終將改變移動互聯網的重要推手。
2、HTML文件格式
創建記事本文件，將擴展名改為html或htm。
在記事本中書寫HTML
<html> <head> <title>頁面的標題</title> </head> <body> <p>這是我的第一個頁面。<b>這是粗體文本。</b></p> </body> </html>HTML超文本標記（標簽）語言，重點是書寫HTML的標簽。
任何一個HTML文件都有自己的默認的代碼骨架：
<html><head><title>標題</title></head> <body>12312321 </body> </html>任何網頁都是以 html 標簽作為起始和結束。
放在 head 標簽中的內容不會在瀏覽器的窗體中出現。
放在 body 標簽中的內容是針對頁面展示使用的
3、HTML的標簽
HTML的所有標簽由W3C制定。每個標簽都有自己特定的含義。現在的開發中主要使用標簽封裝頁面上需要展示的數據，而頁面的美化交給CSS技術。不管的標簽可能會攜帶一些簡單的頁面樣式（美化）。
標簽分類：
- 單標簽：<標簽名 屬性名=‘屬性值’ 屬性名=‘屬性值’ />
- 標簽名由W3C制定，屬性也會隨著標簽來確定
- 屬性值可以使用單或雙引號引用
- 雙標簽：<標簽名 屬性名=‘屬性值’ 屬性名=‘屬性值’ >包裹其他標簽或者數據</標簽名>
HTML的標簽不區分大小寫。要求書寫的時候全部小寫。
在HTML文件中要實現任何的效果，都需要使用標簽完成。
其實每個標簽最終都會被瀏覽器解析執行，任何瀏覽器都內置html標簽的解析器，解析到不同的標簽，瀏覽器會解析出當前標簽的具體的顯示效果。
三、HTML常用標簽
1、開發工具
使用HbuilderX ，后期項目中以Idea為主。
2、HTML文件的注釋
html中的注釋： <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 注釋的內容--><b>123</b>123</body> </html>HTML中的注釋在頁面上不會顯示，但是我們查閱網頁的源代碼的時候是可以看到的。
3、超鏈接標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 超鏈接標簽a：頁面上提交連接，點擊可以進行頁面跳轉href：書寫跳轉的地址target : 指定頁面在什么位置打開。默認值self_blank : 在新的頁簽中打開指定的內_self : 在當前頁面打開在使用a標簽書寫頁面跳轉的時候，href屬性書寫的時候必須添加協議。http:// https://ftp://ssh://file:// 在頁面上定義一些錨點，然后進行當前頁面的跳轉 a標簽的href屬性的值需要使用#引用定義的錨點的id或者name屬性的值--><a href="#download" >下載地址</a><a href="https://www.baidu.com" target="_blank">百度</a> <br /><a href="https://www.qq.com" target="_blank">QQ</a><a href="https://www.jd.com" target="_blank">京東</a><a href="www.taobao.com" target="_blank">淘寶</a><a href="thunder://sdfjlkdjfldsjklfjdsklf.avi" target="_blank">速度與激情10搶先版</a><a href="mailto://qu_bo@neusoft.com" target="_blank">聯系我們</a><a name="download">上當啦，不能下載</a> </body> </html>4、圖像標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- img：作用給頁面上嵌入圖片src：書寫圖片的地址（外網地址，可以本地的圖片）alt：如果圖片無法加載的時候，顯示alt屬性中的內容align ： 圖片在頁面上的對其方式width：設置圖片的寬度 （像素、百分比）height：設置圖片的高度（像素、百分比）border ： 設置圖片的邊框--><img src="imgs/2.jpg" alt="東哥的靚照" align="center" height="150px" border="1px"><img src="imgs/3.jpg" ><img src="imgs/4.jpg" ></body> </html>相對路徑：當在頁面上要書寫地址（路徑、URL），相對當前html文件而言的路徑。
? 當前目錄：./
? 上級目錄： ../
絕對路徑：不考慮當前文件所在的目錄，直接將要書寫的地址全部寫出
在書寫路徑的時候時候如果以：
- /（盤符:/） 、 https 、 http 、 盤符 等協議開始的，都是絕對路徑
- 直接書寫路徑 、 ./(省略不寫) 都是相對路徑
5、標題標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- h1到h6 ： 標題標簽，包裹的文字擁有固定的樣式--><h1 align="center">這是標題 1</h1><h2 align="left">這是標題 2</h2><h3 align="right">這是標題 3</h3><h4>這是標題 4</h4><h5>這是標題 5</h5><h6>這是標題 6</h6></body> </html>6、分割線和字體
<!-- 分割線 --> <hr size="7" width="400px" color="red"/> <hr size="1"/> <!-- 字體標簽 color： rgb(x,x,x) : 紅綠藍三元素 #xxxxxx ： 紅綠藍三元素的十六進制的值 colorname : 顏色的英文單詞 face： 字體 size ： 字體大小--> <font color="blue" face="楷體" size="1">中國</font> <font color="red" face="宋體" size="7">中國</font> <font color="gold" face="微軟雅黑" size="100">中國</font> <font color="red">*</font><input type="text">7、段落標簽
段落標簽：p，它主要作用在頁面上形成獨立的一段文字，文件段前段后的距離。
<h2>木蘭辭</h2> <p>唧唧復唧唧，木蘭當戶織。不聞機杼聲，唯聞女嘆息。</p> <p>問女何所思，問女何所憶。女亦無所思，女亦無所憶。昨夜見軍帖，可汗大點兵，軍書十二卷，卷卷有爺名。阿爺無大兒，木蘭無長兄，愿為市鞍馬，從此替爺征。</p> <p>東市買駿馬，西市買鞍韉，南市買轡頭，北市買長鞭。旦辭爺娘去，暮宿黃河邊，不聞爺娘喚女聲，但聞黃河流水鳴濺濺。旦辭黃河去，暮至黑山頭，不聞爺娘喚女聲，但聞燕山胡騎鳴啾啾。</p> <p>萬里赴戎機，關山度若飛。朔氣傳金柝，寒光照鐵衣。將軍百戰死，壯士十年歸。</p> <p>歸來見天子，天子坐明堂。策勛十二轉，賞賜百千強。可汗問所欲，木蘭不用尚書郎，愿馳千里足，送兒還故鄉。</p>8、列表標簽
8.1、無序列表
<!-- 無序列表 ul 表示無序列表type屬性：circle：列表前面顯示的○disc: 列表前面顯示的●square：列表前面顯示實心正方型--><ul type="circle"><li>Java</li><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>8.2、有序列表
<!-- 有序列表ol:表示有序列表type屬性：1：列表前面顯示數字a或A：列表前面顯示字母I或i：列表前面顯示的羅馬數字--><ol type="1"><li>Java</li><li>HTML</li><li>CSS</li><li>JavaScript</li></ol>8.3、自定義列表
<!-- 自定義列表 --><dl><dt>愛好：</dt><dd>爬山</dd><dd>打球</dd><dd>睡覺</dd><dt>技能：</dt><dd>編程</dd><dd>嘮嗑</dd><dd>泡妹子</dd></dl>9、表格標簽
表格標簽：
- 早期使用表格進行網頁的布局（將頁面劃分成不同的部分）
- 現在表格僅僅只是在頁面上展示數據
10、表單標簽
表單：主要功能是實現頁面的數據與后臺交互。
表單標簽它是一組標簽。
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 表單標簽：form，輸入項使用input標簽下拉選擇select標簽文本區域textarea重點介紹input中的type屬性type="text" ： 單行文本框type="password" ： 密碼框type="radio" ： 單選按鈕type="checkbox" ： 復選框type="file" ： 文件選擇type="submit" ： 提交按鈕type="reset" ： 將form中的所有項恢復到默認狀態type="number" : h5中添加，數字輸入項type="date" ： h5中添加，日期輸入項，只有年月日type="date" ： h5中添加，日期輸入項，年月日時分秒type="time" ：h5中添加，日期輸入項，時分秒type="tel" ：h5中添加，電話輸入項type="email" ： h5中添加，郵箱輸入項--><form action="">用戶名：<input type="text" value="123"/> <br />密碼：<input type="password" /> <br />性別：<input type="radio"/>男<input type="radio"/>女 <br />愛好：<input type="checkbox" />吃飯 <input type="checkbox" />睡覺<input type="checkbox" />敲代碼 <br />頭像：<input type="file" /> <br />年齡：<input type="number" /><br />生日：<input type="date" /><br />生日：<input type="datetime" /><br />生日：<input type="time" /><br />電話：<input type="tel" /><br />郵箱：<input type="email" /><br />地址：<select><option>--請選擇--</option> <option>江西</option><option>江蘇</option><option>安徽</option><option>上海</option><option>浙江</option></select><br />自我評價：<textarea cols="30" rows="10"></textarea> <br /><input type="submit" /><input type="reset" /></form></body> </html>11、表單的細節
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 表單標簽：form，表單的細節：form標簽上有：action：書寫表單中的數據具體提交給誰（URL地址）method：提交表單的方式：get：默認方式，提交的數據會拼接在瀏覽器的地址欄中，不能提交大量的數據超過64kb無法提交http://ip:端口/路徑?key=value&ke=valuepost：建議將表單的提交方設置為post，提交的數據會在請求體中隱藏可以提交任意多的數據，并且數據是隱藏的比較安全。put和delete，不能直接在form的method中書寫。后期會采用別的方式表示enctype：設置瀏覽器提交form表單中數據時的編碼方式enctype="application/x-www-form-urlencoded" 默認方式enctype="multipart/form-data" 支持文件上傳的表單------------------------------------------------------1、只要是form中需要提交的項，每個項必須擁有name屬性，否則此項數據不會被提交2、所有讓選擇的輸入項，必須提供value屬性，書寫提交的數據。3、輸入項需要提示信息請使用placeholder屬性4、select的option選項，如果value值和option中的文本相同可以省略value屬性單選按鈕：多個選項是一組，這時需要給他們相同的name屬性值單選按鈕和復選按鈕可以使用checked="checked"屬性標注默認選擇項針對select標簽下的option屬性，如果需要被默認選中selected="selected"但是在H5中，如果屬性名和屬性值相同，可以只書寫屬性名readonly 輸入項是只讀，無法輸入數據，但是可以通過JS去改disabled 禁用當前的input項--><form action="#" method="post" enctype="application/x-www-form-urlencoded"><input type="hidden" name="id" value="1" />用戶名：<input type="text" name="username" placeholder="請輸入用戶名" value="123" readonly disabled/> <br />密碼：<input type="password" name="password" placeholder="請輸入密碼"/> <br />性別：<label><input type="radio" name="sex" value="男"/>男</label><label><input type="radio" name="sex" value="女" checked />女</label> <br />愛好：<input type="checkbox" name="hobby" value="吃飯" checked />吃飯 <label><input type="checkbox" name="hobby" value="睡覺"/>睡覺</label><input type="checkbox" name="hobby" value="敲代碼" checked="checked"/>敲代碼 <br />頭像：<input type="file" name="file"/> <br />年齡：<input type="number" name="age"/><br />生日：<input type="date" name="birthday"/><br />生日：<input type="datetime" /><br />生日：<input type="time" /><br />電話：<input type="tel" name="telephone"/><br />郵箱：<input type="email" name="mail"/><br />地址：<select name="address"><option value="none">--請選擇--</option> <option value="江西" selected="selected">江西</option><option>江蘇</option><option>安徽</option><option>上海</option><option>浙江</option></select><br />自我評價：<textarea cols="30" rows="10" name="description"></textarea> <br /><input type="submit" value="注冊" disabled /><input type="button" value="注冊" /><button>注冊</button><input type="reset" /></form></body> </html>12、div和span標簽
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 在頁面上進行數據包裹或者頁面劃分等使用div和span標簽完成div標簽包裹的內容獨占一行span標簽包裹的內容只占據數據所需的區域div和span都不會給標簽中包裹的內容添加其他任何的樣式效果塊級標簽（標簽）block：標簽獨占一行div、p、ol、ul、dl、table、form行內（內聯）標簽inline：只占數據所需區域span、a、input、select、textarea--><p>段落標簽</p><p>段落標簽</p><div>div標簽</div><div>div標簽</div><span>span標簽</span><span>span標簽</span></body> </html> <!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><!-- 在頁面上進行數據包裹或者頁面劃分等使用div和span標簽完成div標簽包裹的內容獨占一行span標簽包裹的內容只占據數據所需的區域div和span都不會給標簽中包裹的內容添加其他任何的樣式效果塊級標簽（標簽）block：標簽獨占一行div、p、ol、ul、dl、table、form行內（內聯）標簽inline：只占數據所需區域span、a、input、select、textarea--><p>段落標簽</p><p>段落標簽</p><div>div標簽</div><div>div標簽</div><span>span標簽</span><span>span標簽</span></body> </html>總結
- 上一篇： oracle 频繁操作删除对索引的影响吗
- 下一篇： 2017年html5行业报告,云适配发布