上海營(yíng)銷型網(wǎng)站設(shè)計(jì)谷歌瀏覽器下載手機(jī)版官網(wǎng)
一,HBuilder
–1,使用
直接解壓就可以用,
創(chuàng)建項(xiàng)目: 直接點(diǎn)擊 新建項(xiàng)目,輸入項(xiàng)目名和選中項(xiàng)目存放位置,創(chuàng)建.
創(chuàng)建資源: 選中項(xiàng)目,右鍵,新建…
二,HTML
–1,概述
是超文本標(biāo)記語言,專門用來制作網(wǎng)頁的.
超文本: 網(wǎng)頁中可以包含各種類型的元素.包括: 文字,數(shù)字,符號(hào),圖片,音頻,視頻…
標(biāo)記語言: 是一個(gè)獨(dú)特的語言,有獨(dú)特的語法. 由大量的標(biāo)記來描述的一門語言…
網(wǎng)頁文件的后綴名: .html / .htm
–2,入門案例
<!-- 這是HTML的注釋,這行用來作為文檔聲明行,聲明這是一個(gè)HTML文檔 -->
<!DOCTYPE html>
<!-- HTML是由大量標(biāo)記組成,有開始標(biāo)簽和結(jié)束標(biāo)簽 -->
<html><!-- head用來描述網(wǎng)頁的屬性 --><head><meta charset="utf-8"> <!-- 設(shè)置網(wǎng)頁的編碼--><title>html</title><!-- 設(shè)置網(wǎng)頁的標(biāo)題 --></head><!-- body用來控制瀏覽器即將展示的內(nèi)容 --><body>hello html~hello html~ <br/> <!-- br是換行,自閉標(biāo)簽-->hello html~ <!-- 是空格 --></body>
</html>三,HTML的常用標(biāo)簽
–1,標(biāo)題標(biāo)簽
在網(wǎng)頁中插入一些標(biāo)題元素(居中,字號(hào)加大)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用標(biāo)簽</title></head><body><!-- hbuilder的常用快捷鍵:復(fù)制粘貼ctrl c/v剪切ctrl x--><!-- 1.標(biāo)題標(biāo)簽 h1大~h6小,自動(dòng)換行,字體加粗 --><h1>31省份新增本土確診41例 陜西35例</h1><h2>31省份新增本土確診41例 陜西35例</h2><h3>31省份新增本土確診41例 陜西35例</h3><h4>31省份新增本土確診41例 陜西35例</h4><h5>31省份新增本土確診41例 陜西35例</h5><h6>31省份新增本土確診41例 陜西35例</h6></body>
</html>–2,列表標(biāo)簽
在網(wǎng)頁中加入列表效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用標(biāo)簽</title></head><body><!-- 2.列表標(biāo)簽: 有序無序,列表項(xiàng)自動(dòng)換行 --><h3>熱搜榜</h3><!-- 2.1 無序列表:使用ul+li , unorderlist+list --><ul> <li>31省份新增本土確診41例 陜西35例</li><li>穩(wěn)住農(nóng)業(yè)基本盤做好三農(nóng)工作</li></ul><!-- 2.2 有序列表:使用ol+li , orderlist+list --><ol> <li>31省份新增本土確診41例 陜西35例</li><li>穩(wěn)住農(nóng)業(yè)基本盤做好三農(nóng)工作</li></ol></body>
</html>–3,圖片標(biāo)簽 & 超鏈接標(biāo)簽
在網(wǎng)頁中加入圖片元素
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用標(biāo)簽</title></head><body><!-- 練習(xí):做一個(gè)能被點(diǎn)擊的圖片 --><a href="https://www.baidu.com"> <img src="3.jpg"/> </a><br /><!-- 4.超鏈接 href屬性用來讓超鏈接可以被點(diǎn)擊,也可以指定點(diǎn)擊的跳轉(zhuǎn)網(wǎng)址target屬性用來讓指定超鏈接的打開方式,默認(rèn)是_self當(dāng)前窗口打開_blank是用新窗口打開--><a href="#">百度一下</a> <br /><a href="https://www.baidu.com/" target="_blank">百度一下</a> <br /><!-- 4.2.錨定:從一個(gè)位置回到指定的另一個(gè)位置 --><a name="top">我是頂部</a><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><h1>北京富婆通訊錄</h1><a href="#top"> ^ </a> <br /><!-- 3.圖片標(biāo)簽: 同行展示多個(gè)圖片src屬性用來指定圖片位置/路徑(如果圖片和網(wǎng)頁文件在同級(jí)文件夾可以直接寫圖片名稱)width屬性用來指定圖片的寬度,單位是像素pxheight屬性用來指定圖片的高度,單位是像素px--><img src="3.jpg" width="30%" height="800px"/><img src="3.jpg"/><img src="3.jpg"/></body>
</html>–4,Input標(biāo)簽
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>常用標(biāo)簽</title></head><body><!-- 1.input標(biāo)簽,表示輸入框 -->普通的輸入框: <input type="text"/> <br />密碼輸入框: <input type="password"/><br />數(shù)字輸入框: <input type="number"/><br />日期輸入框: <input type="date"/><br />星期輸入框: <input type="week"/><br />單選框: <input type="radio"/>男 <br />多選框: <input type="checkbox"/>吃飯 <br />普通按鈕:<input type="button" value="保存"/><button>注冊(cè)</button><br />提交按鈕:把用戶在瀏覽器輸入的數(shù)據(jù),提交給后端的java程序來處理<input type="submit" value="保存"/><button type="submit">保存</button></body>
</html>