文章目錄
- 一,HBuilder
- --1,使用
- 二,HTML
- --1,概述
- --2,入門案例
- --3,結構
- 三,HTML的常用標簽
- --1,標題標簽
- --2,串列標簽
- --3,圖片標簽 & 超鏈接標簽
- --4,Input標簽
- --5,表格標簽
- --6,表單標簽
- --7,其他標簽
- 作業
一,HBuilder
–1,使用
直接解壓就可以用,
創建專案: 直接點擊 新建專案,輸入專案名和選中專案存放位置,創建.
創建資源: 選中專案,右鍵,新建…
二,HTML
–1,概述
是超文本標記語言,專門用來制作網頁的.
超文本: 網頁中可以包含各種型別的元素.包括: 文字,數字,符號,圖片,音頻,視頻…
標記語言: 是一個獨特的語言,有獨特的語法. 由大量的標記來描述的一門語言…
網頁檔案的后綴名: .html / .htm
–2,入門案例
<!-- 這是HTML的注釋,這行用來作為檔案宣告行,宣告這是一個HTML檔案 -->
<!DOCTYPE html>
<!-- HTML是由大量標記組成,有開始標簽和結束標簽 -->
<html>
<!-- head用來描述網頁的屬性 -->
<head>
<meta charset="utf-8"> <!-- 設定網頁的編碼-->
<title>html</title><!-- 設定網頁的標題 -->
</head>
<!-- body用來控制瀏覽器即將展示的內容 -->
<body>
hello html~
hello html~ <br/> <!-- br是換行,自閉標簽-->
hello html~ <!-- 是空格 -->
</body>
</html>
–3,結構
檔案宣告行: 宣告檔案的型別
頭部分: 描述網頁的屬性, 標題,編碼…
體部分: 控制網頁即將要展示的元素…
標簽: 在HTML里,就是由大量的標簽組成的,標簽是成對兒出現(開始標簽和結束標簽)
屬性: 為了修飾元素的效果,每個標簽都可以擁有更多的屬性. 多個屬性用空格隔開.
每個屬性的描述都要遵循 屬性名=“屬性值”
HTML不區分大小寫.而且語法相對java不太嚴謹.
HTML的元素有特殊性,換行用br標簽. 空格用
三,HTML的常用標簽
–1,標題標簽
在網頁中插入一些標題元素(居中,字號加大)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標簽</title>
</head>
<body>
<!-- hbuilder的常用快捷鍵:復制粘貼ctrl c/v剪切ctrl x-->
<!-- 1.標題標簽 h1大~h6小,自動換行,字體加粗 -->
<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,串列標簽
在網頁中加入串列效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標簽</title>
</head>
<body>
<!-- 2.串列標簽: 有序無序,串列項自動換行 -->
<h3>熱搜榜</h3>
<!-- 2.1 無序串列:使用ul+li , unorderlist+list -->
<ul>
<li>31省份新增本土確診41例 陜西35例</li>
<li>穩住農業基本盤做好三農作業</li>
</ul>
<!-- 2.2 有序串列:使用ol+li , orderlist+list -->
<ol>
<li>31省份新增本土確診41例 陜西35例</li>
<li>穩住農業基本盤做好三農作業</li>
</ol>
</body>
</html>
–3,圖片標簽 & 超鏈接標簽
在網頁中加入圖片元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標簽</title>
</head>
<body>
<!-- 練習:做一個能被點擊的圖片 -->
<a href="https://www.baidu.com"> <img src="3.jpg"/> </a>
<br />
<!-- 4.超鏈接
href屬性用來讓超鏈接可以被點擊,也可以指定點擊的跳轉網址
target屬性用來讓指定超鏈接的打開方式,默認是_self當前視窗打開
_blank是用新視窗打開
-->
<a href="#">百度一下</a> <br />
<a href="https://www.baidu.com/" target="_blank">百度一下</a> <br />
<!-- 4.2.錨定:從一個位置回到指定的另一個位置 -->
<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.圖片標簽: 同行展示多個圖片
src屬性用來指定圖片位置/路徑
(如果圖片和網頁檔案在同級檔案夾可以直接寫圖片名稱)
width屬性用來指定圖片的寬度,單位是像素px
height屬性用來指定圖片的高度,單位是像素px
-->
<img src="3.jpg" width="30%" height="800px"/>
<img src="3.jpg"/>
<img src="3.jpg"/>
</body>
</html>
–4,Input標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標簽</title>
</head>
<body>
<!-- 1.input標簽,表示輸入框 -->
普通的輸入框: <input type="text"/> <br />
密碼輸入框: <input type="password"/><br />
數字輸入框: <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>注冊</button>
<br />
提交按鈕:把用戶在瀏覽器輸入的資料,提交給后端的java程式來處理
<input type="submit" value="保存"/>
<button type="submit">保存</button>
</body>
</html>
–5,表格標簽
通常用來展示資料
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標簽</title>
</head>
<body>
<!-- 練習表格 ,th是表頭效果:加粗居中
合并單元格:
合并行/行合并 rowspan:把N行合并成一大行
合并列/列合并 colspan:把N列合并成一大列
-->
<h3>流量調查表</h3>
<table bgcolor="lightblue" border="1px">
<tr>
<th>總頁面流量</th>
<th>共計來訪</th>
<th>會員</th>
<th>游客</th>
</tr>
<tr>
<td>平均每人瀏覽</td>
<td colspan="3">1.58</td>
</tr>
</table>
<!-- 1.表格標簽
table表示表格,tr表示行,td表示列
bgcolor背景色,width寬度,border邊框,cellspacing單元格的間距
-->
<table bgcolor="pink" width="500px" border="1px" cellspacing="0">
<tr>
<td colspan="2">11</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td rowspan="2">23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</table>
</body>
</html>
–6,表單標簽
只有表單標簽,才能提交資料(是指 把前端輸入的資料 提交給 java程式 的程序),表單標簽本質上就是一個特殊的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用標簽</title>
</head>
<body>
<!-- 1.表單標簽:比表格多了資料提交的功能
1.1,要求:必須使用form標簽 + 必須有提交按鈕 + 必須配置name屬性
1.2,效果: 實作了資料提交,資料都在地址欄進行了拼接,多組資料使用&連接
http://127.0.0.1:8848/hbuilderx/cgb2111/register.html?user=jack&pwd=123
1.3,資料提交的格式: 屬性名=屬性值是
其中,屬性名是 網頁上name屬性的值 ,屬性值 是用戶在瀏覽器中輸入的資料
-->
<form>
<h1>注冊表單</h1>
<table bgcolor="lightgray" border="1px"
width="500px" cellspacing="0">
<tr>
<td>用戶名:</td>
<td>
<input type="text" name="user"/>
</td>
</tr>
<tr>
<td>密碼:</td>
<td>
<input type="password" name="pwd"/>
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" />
</td>
</tr>
<tr>
<td>昵稱:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>郵箱:</td>
<td>
<input type="email" />
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" />男
<input type="radio" />女
</td>
</tr>
<tr>
<td>愛好:</td>
<td>
<input type="checkbox"/>籃球
<input type="checkbox"/>足球
<input type="checkbox"/>乒乓球
</td>
</tr>
<tr>
<td>城市:</td>
<td>
<select>
<option>請選擇</option>
<option>北京</option>
<option>廣州</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>頭像:</td>
<td>
<input type="file"/>
</td>
</tr>
<tr>
<td>驗證碼:</td>
<td>
<input type="text" />
<img src="a.png" />
<button>點我換一張</button>
</td>
</tr>
<tr>
<td>自我描述:</td>
<td>
<textarea>請在這里寫...</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit">提交</button>
<button type="reset">重置</button>
</td>
</tr>
</table>
</form>
</body>
</html>
–7,其他標簽
作業
把今天的表單標簽的練習敲三遍
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/404129.html
標籤：java