@
目錄
- HTML5
- 第一個網頁
- 1. 常見的html标簽
- 1.1資源路徑
- 1.2清單标簽
- 1.3表格标簽
- 1.4表單标簽
- 1.5表單送出
<!-- 文檔聲明 ： html5文檔 -->
<!DOCTYPE html>
<!-- 目前網頁的語言是英文，預設不指定是中文=> lang='zh'-->
<!-- 一般不用指定成en語言-->
<html lang="en">
<head>
<!-- 指定網頁的編碼格式 -->
<meta charset="UTF-8">
<!-- 在移動裝置浏覽網頁時，網頁不縮放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 在ie浏覽器浏覽網頁時，使用ie的最高版本-->
<meta http-equiv="X-UA-Compatible" content="ie-enge">
<title>Document</title>
</head>
<body>
<!-- html語言裡邊的注釋快捷鍵：windows： ctrl + / -->
hello
</body>
</html>
<!--1、成對出現的标簽-->
<h1>h1标題</h1>
<div>這是一個div标簽</div>
<p>這是一個段落标簽</p>
<!--2、單個出現的标簽-->
<br>
<img src="images/pic.jpg" alt="圖檔">
<hr>
<!--3、帶屬性的标簽，如src、 alt 和 href 等都是屬性-->
<img src="images/pic.jpg" alt="圖檔"> <!--src="資源路徑"-->
<a href="http://www.baidu.com">百度網</a>
<!--4、标簽的嵌套-->
<!--div容器标簽-->
<div>
<img src="images/pic.jpg" alt="圖檔">
<a href="http://www.baidu.com">百度網</a>
</div>
總體标簽大全
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 雙标簽：成對出現的标簽 -->
<h1>标題标簽</h1>
<h1>标題一共六級選，</h1>
<h2>文字加粗一行顯。</h2>
<h3>由大到小依次減，</h3>
<h4>從重到輕随之變。</h4>
<h5>文法規範書寫後，</h5>
<h6>具體效果重新整理見。</h6>
<div>我是一個容器标簽，可以包裹其他标簽内容</div>
<p>我說一個段落标簽</p>
<p>我說一個段落标簽</p>
<!-- 單标簽：隻有一個标簽，沒有标簽内容 -->
<!-- 水準分割線hr -->
<hr>
<img src="img/1.jpg" alt="圖檔加載失敗會顯示">
<br>
<img src="img/2.jpg" alt="圖檔加載失敗會顯示">
<!-- 帶有屬性标簽 -->
<a href="http://www.baidu.com">百度</a>
<!-- 标簽可以嵌套 ,不可以交叉嵌套-->
<DIV>
<!-- 錯誤示例 -->
<!-- <p>我說一個段落标簽</div></p> -->
<p>我說一個段落标簽</p>
</DIV>
<!-- HTML不區分大小寫，但是推薦大家使用小寫 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 資源路徑分為絕對路徑和相對路徑
1.絕對路徑是從根目錄算起的路徑叫絕對路徑
2.相對路徑是目前目錄算起的路徑叫相對路徑
-->
<!-- 相對路徑的第一種寫法 -->
<img src="img/4.jpg" alt="">
<!-- 相對路徑的第二種寫法 -->
<img src="./img/4.jpg" alt="">
<!-- 絕對路徑的寫法 -->
<img src="D:\resource\前端\HTML5\img\3.png" alt="">
<!-- 資源路徑一般會使用相對路徑，更加通用友善，絕對路徑把工程拷貝給别人可能會出現資源找不到的問題 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 清單标簽可以分為有序清單标簽和無序清單标簽 -->
<!-- 無序清單标簽 -->
<ul>
<li>蘋果</li>
<li>鴨梨</li>
</ul>
<!-- 有序清單标簽 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
<!-- 強調顯示的順序使用有序清單标簽，不強調順序使用無序清單标簽 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- border-collapse: collapse 表示表格的邊線進行合并 -->
<table style="border: 1px solid black; border-collapse: collapse;">
<tr>
<th style="border: 1px solid black;">姓名</th>
<th style="border: 1px solid black;">年齡</th>
</tr>
<tr>
<td style="border: 1px solid black;">張三</td>
<td style="border: 1px solid black;">22</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把資料送出給web伺服器使用表單标簽：<form> -->
<form action="">
<p>
<!-- for 根據id名給指定id設定光标 -->
<label for="name">使用者名</label>
<input type="text" name="" id="name">
</p>
<p>
<label for="">密碼</label>
<input type="password" name="" id="">
</p>
<p>
<label for="">性别</label>
<input type="radio">男
<input type="radio">女
</p>
<p>
<label for="">愛好</label>
<input type="checkbox">學習
<input type="checkbox">睡覺
<input type="checkbox">打遊戲
</p>
<p>
<label for="">照片</label>
<input type="file">
</p>
<p>
<label for="">個人描述</label>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label for="">籍貫</label>
<select name="" id="">
<option value="">北京</option>
<option value="">河北</option>
<option value="">深圳</option>
<option value="">湖北</option>
</select>
</p>
<p>
<input type="submit" value="送出">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把資料送出給web伺服器使用表單标簽：<form> -->
<!-- action 設定表單資料送出位址 -->
<!-- method 是表單送出方式，送出方式有GET和POST -->
<!-- name 表單元素的名稱，用于作為送出表單資料時的參數名 -->
<!-- value 表單元素的值，用于作為送出表單資料時參數名所對應的值-->
<form action="https://www.baidu.com" method="GET">
<p>
<!-- for 根據id名給指定id設定光标 -->
<label for="name">使用者名</label>
<input type="text" name="" id="name" name="username">
</p>
<p>
<label for="">密碼</label>
<input type="password" name="password" id="">
</p>
<p>
<label for="">性别</label>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<p>
<label for="">愛好</label>
<input type="checkbox" name="love" value="學習">學習
<input type="checkbox" name="love" value="睡覺">睡覺
<input type="checkbox" name="love" value="打遊戲">打遊戲
</p>
<p>
<label for="">照片</label>
<input type="file" name="pic">
</p>
<p>
<label for="">個人描述</label>
<textarea name="desc" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label for="">籍貫</label>
<select name="position" id="">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">深圳</option>
<option value="4">湖北</option>
</select>
</p>
<p>
<input type="submit" value="送出">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</p>
<!-- get和post方式送出表單資料都以http協定的方式送出資料給web伺服器 -->
</form>
</body>
</html>
GET請求會将内容放在路由裡
請求頭是GET
送出的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 把資料送出給web伺服器使用表單标簽：<form> -->
<!-- action 設定表單資料送出位址 -->
<!-- method 是表單送出方式，送出方式有GET和POST -->
<!-- name 表單元素的名稱，用于作為送出表單資料時的參數名 -->
<!-- value 表單元素的值，用于作為送出表單資料時參數名所對應的值-->
<form action="https://www.baidu.com" method="POST">
<p>
<!-- for 根據id名給指定id設定光标 -->
<label for="name">使用者名</label>
<input type="text" name="" id="name" name="username">
</p>
<p>
<label for="">密碼</label>
<input type="password" name="password" id="">
</p>
<p>
<label for="">性别</label>
<input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女
</p>
<p>
<label for="">愛好</label>
<input type="checkbox" name="love" value="學習">學習
<input type="checkbox" name="love" value="睡覺">睡覺
<input type="checkbox" name="love" value="打遊戲">打遊戲
</p>
<p>
<label for="">照片</label>
<input type="file" name="pic">
</p>
<p>
<label for="">個人描述</label>
<textarea name="desc" id="" cols="30" rows="10"></textarea>
</p>
<p>
<label for="">籍貫</label>
<select name="position" id="">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">深圳</option>
<option value="4">湖北</option>
</select>
</p>
<p>
<input type="submit" value="送出">
<input type="reset" value="重置">
<input type="button" value="按鈕">
</p>
<!-- get和post方式送出表單資料都以http協定的方式送出資料給web伺服器 -->
</form>
</body>
</html>
POST直接把内容放到請求頭裡