當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

1.HTML技术

發布時間：2024/3/26 HTML 63 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 標簽中的內容不會在瀏覽器的窗體中出現。

放在 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="#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="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 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"/>  <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"><li>Java</li><li>HTML</li><li>CSS</li><li>JavaScript</li></ul>

8.2、有序列表

<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、表格標簽

表格標簽：

早期使用表格進行網頁的布局（將頁面劃分成不同的部分）
現在表格僅僅只是在頁面上展示數據

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><table align="center" width="600px" border="1" cellpadding="10px" cellspacing="0"><tr ><th>姓名</th> <th>年齡</th> <th>電話</th> <th>地址</th> </tr><tr align="center"><td>吳山</td><td align="left">18</td><td>10086</td><td>中國移動</td></tr><tr align="center"><td>董良偉</td><td>20</td><td>110</td><td>中國公安</td></tr><tr align="center"><td>楊陽</td><td>19</td><td>119</td><td>中國火警</td></tr></table><br /><br /><br /><table align="center" width="600px" border="1" cellpadding="10px" cellspacing="0"><tr ><th>姓名</th> <th>年齡</th> <th>電話</th> <th>地址</th> </tr><tr align="center"><td rowspan="2">吳山</td><td align="left">18</td><td colspan="2">10086</td></tr><tr align="center"><td>20</td><td>110</td><td>中國公安</td></tr><tr align="center"><td>楊陽</td><td>19</td><td>119</td><td>中國火警</td></tr></table> </body> </html>

10、表單標簽

表單：主要功能是實現頁面的數據與后臺交互。

表單標簽它是一組標簽。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><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 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><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><p>段落標簽</p><p>段落標簽</p><div>div標簽</div><div>div標簽</div><span>span標簽</span><span>span標簽</span></body> </html>

總結

以上是生活随笔為你收集整理的1.HTML技术的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
技术

上一篇： oracle 频繁操作删除对索引的影响吗
下一篇： HTML5 行业首款 3D 游戏及 VR