第一個html
<!DOCTYPE html>
<html lang="en">
<head>
<!--meta 描述性標簽，用來描述網站的一些信息-->
<!--meta 標簽一般用來做SEO-->
<meta charset="UTF-8">
<meta name="key" content="第一個網站，學html">
<meta name="description" content="學習html">
<title>第一個網站</title>
</head>
<body>
Hello,World!
</body>
</html>
基本標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標簽學習</title>
</head>
<body>
<!--標題標簽-->
<h1>一級標簽</h1>
<h2>二級標簽</h2>
<h3>三級標簽</h3>
<h4>四級標簽</h4>
<h5>五級標簽</h5>
<h6>六級標簽</h6>
<!--段落標簽 將文字分為一個個段落-->
<p>兩只老虎，兩只老虎</p>
<P>跑得快，跑得快</P>
<P>一只沒有眼睛</P>
<P>一只沒有尾巴</P>
<P>真奇怪！真奇怪！</P>
<!--水平線標簽-->
<hr/>
<!--換行標簽 只是換了一行，但是還是一段-->
兩只老虎，兩只老虎<br/>
跑得快，跑得快<br/>
一只沒有眼睛<br/>
一只沒有尾巴<br/>
真奇怪！真奇怪<br/>
<!--粗體，斜體-->
<h1>字體樣式標簽</h1>
粗體：<strong>i love you</strong> <br/>
斜體：<em>i love you</em> <br/>
粗體：<B>i love you</B> <br/>
斜體：<I>i love you</I> <br/>
<hr/>
<!--特殊符號-->
空 格； <br/>
<!-- 代表一個空格-->
空 格 <br/>
<!--> 代表大於號 <代表小於號-->
>
< <br/>
<!--版權符號-->
©
</body>
</html>
圖片標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片標簽</title>
</head>
<body>
<!--
src:圖片的地址
絕對地址：使用盤符找到的文件 D:\代碼\HTML\resources\image\2.png
相對地址：相對於當前項目的文件 ../resources/image/2.png
../返回上一級目錄
alt ： 如果src路徑下的文件未找到，就用這里名的內容替代
title ： 將鼠標放置在這個圖片上面會顯示title里賣弄的內容
width : 圖片顯示的寬度
height ： 圖片顯示的高度
-->
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
<!--從這里可以直接跳轉到下面這個鏈接的down這個錨標記處-->
<a href="4.鏈接標簽.html#down">跳轉</a>
</body>
</html>
鏈接標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽</title>
</head>
<body>
<!--使用a標簽里面的name屬性設置錨鏈接標記-->
<a name="top">頂部</a>
<br/>
<!--
a標簽：
href ： 必填，表示要跳轉到哪里去
target : 表示窗口在哪里打開
_blank ： 在新標簽中打開
_self : 在自己的網頁中打開，屬於默認設置
a標簽中間填寫鏈接的文本或圖片
-->
<a href="1.我的第一個html.html" target="_blank">點擊我跳轉到頁面一</a>
<a href="https://www.baidu.com" target="_self">點擊我跳轉到百度</a>
<br/>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
</p>
<p>
<a href="1.我的第一個html.html">
<img src="../resources/image/2.png" alt="桌面壁紙" title="懸停文字" width="255" height="255">
</a>
</p>
<!--
錨鏈接 ：
1.需要一個錨標記
2.跳轉到錨標記
使用方法為 #+錨鏈接的標記名
可以實現頁面內的跳轉，，也可從一個頁面直接跳轉到錨鏈接的標記位置
-->
<a href="#top">回到頂部</a>
<a name="down">down</a>
<!--
功能性鏈接：
mailto:郵箱地址（可以將內容發送到這個郵箱里面）
QQL鏈接
-->
<a href="mailto:1713791837@qq.com">點擊聯系我</a>
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1713791837&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2:1713791837:52" alt="你好，加我領取小電影" title="你好，加我領取小電影"/>
</a>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表 ： Orderly list 顯示出有順序的結構，前邊用數字顯示順序
應用范圍：試卷，答題卡...
-->
<ol>
<li>Java</li>
<li>Python</li>
<li>匯編</li>
<li>前端</li>
<li>編譯原理</li>
</ol>
<!--無序列表 顯示出沒有順序的結構，前邊用黑點顯示
應用范圍：導航，側邊欄...
-->
<ul>
<li>Java</li>
<li>Python</li>
<li>匯編</li>
<li>前端</li>
<li>編譯原理</li>
</ul>
<!--自定義列表
dl : 列表標簽
dt : 列表名稱
dd : 列表內容
-->
<dl>
<dt>學科</dt>
<dd>java</dd>
<dd>linux</dd>
<dd>spring</dd>
<dd>c</dd>
<dt>位置</dt>
<dd>寧夏</dd>
<dd>西安</dd>
<dd>甘肅</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--
表格 ： table
行 ： tr
列 ： td
colspan : 合並多少列為一列
rowspan : 合並多少行為一行
border : 設置邊框寬度
-->
<table border="1px">
<tr>
<td colspan="3"> 學生成績</td>
</tr>
<tr>
<td rowspan="2">小破孩</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">憨憨</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
</table>
</body>
</html>
視頻與音頻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--視頻和音頻
controls : 控制條
autoplay : 設置視頻自動播放
-->
<video src="../resources/video/2.qlv" controls autoplay></video>
<br/>
<audio src="../resources/audio/ai.mp3" controls></audio>
</body>
</html>
頁面結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<header>
<h1>網頁頭部</h1>
</header>
<section>
<h1>網頁主體</h1>
</section>
<footer>
<h1>網頁腳部</h1>
</footer>
</body>
</html>
內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架</title>
</head>
<body>
<!--
iframe : 可以將src里面的網頁內容嵌套在本網頁內
src : 鏈接地址
w-h : 寬和高
還可以使用name屬性：
將a標簽里面的鏈接內容放置到iframe里面
-->
<iframe src="" name="hello" width="855px" height="512px"></iframe>
<a href="https://www.bilibili.com/" target="hello">點擊跳轉</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!--表單form
action : 提交到哪個位置，可以是網站也可以是請求處理地址
method : 提交方式，，有post與get
get方式提交，數據可以在url里面看到，不安全，但高效
post方式提交：比較安全，能夠提交數據量較大的文件
-->
<h1>注冊</h1>
<form action="1.我的第一個html.html" method="get">
<!--文本輸入框 ： type="text"
value="你好帥" 默認初始值
maxlength="8" 最多能輸入幾個字符
size="30" 文本框的長度
readonly 只讀
placeholder 提示的默認信息 只能用在輸入框上
required 非空判斷，表示此字段必須填寫 只能用在輸入框上
-->
<p>名字：<input type="text" name="userName" placeholder="請輸入用戶名" required> </p>
<!--密碼框 ： type="password"
hidden 隱藏，將這個框用戶看不到，但是卻是存在的，可以放置默認值
-->
<p>密碼：<input type="password" name="pwd" hidden value="123456"> </p>
<p>性別：
<!--單選框:
type="radio"
value:單選框的值
name : 表示組，name值一樣則表示為一組數據，不能同時選擇兩個
disabled : 禁用，禁止選擇男性
-->
<input type="radio" value="boy" name="sex" disabled>男
<input type="radio" value="girl" name="sex">女
</p>
<p>
<!--多選框
type="checkbox"
value:多選框的值
name : 表示組，name值一樣則表示為一組數據
-->
<input type="checkbox" value="sleep" name="hobby">睡覺
<!--checked : 默認選中-->
<input type="checkbox" value="code" name="hobby" checked>敲代碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戲
</p>
<p>
<!--按鈕
type="button"
name ： 按鈕名稱
value : 按鈕上顯示的內容
-->
<input type="button" name="btn1" value="點擊按鈕">
<!--圖片按鈕 相當於提交按鈕-->
<input type="image" src="../resources/image/2.png" width="50px" height="50px">
</p>
<p>國家：
<!--下拉框
使用select標簽
name ：列表的名稱，后台可以獲得列表名稱
value ： 傳到后端的值
-->
<select name="country">
<option value="china">中國</option>
<option value="usa">美國</option>
<!--selected 表示默認選擇法國-->
<option value="fa" selected>法國</option>
<option value="ying">英國</option>
</select>
</p>
<p>反饋：
<!--文本域
textarea標簽
cols : 默認顯示幾列
rows : 默認顯示幾行
-->
<textarea name="textarea" cols="30" rows="10">默認文本</textarea>
</p>
<p>
<!--文件域-->
<input type="file" name="files">
</p>
<p>
<!--郵箱驗證 輸入的值必須添加@並且前后都有值-->
郵箱：<input type="email" name="email">
</p>
<p>
<!--url驗證 輸入的值必須是一個網址-->
url:<input type="url" name="url">
</p>
<p>
<!--數字驗證 輸入的值必須大於0小於100並且是10的倍數
max ： 最大值
min ： 最小值
step ： 步長，每次加幾
-->
數字:<input type="number" name="num" max="100" min="0" step="10">
</p>
<p>
<!--滑塊
range 標簽
可以在參數中獲取得到的多少數值
-->
滑塊：<input type="range" name="voice" min="0" max="100" step="2">
</p>
<p>
<!--搜索框-->
搜索:<input type="search" name="search">
</p>
<p>
<!--增強鼠標可用性
label標簽
也就是在點擊label這個標簽里面的內容時，會自動將光標鎖定到輸入框id為for屬性里面的內容
-->
<label for="work">你點我逝世：</label>
<input type="text" id="work">
</p>
<p>
<!--pattern 正則表達式，這里輸入的東西必須滿足pattern的規則-->
自定義郵箱：
<input type="text" name="diyEmail"
pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
</p>
<p>
<!--提交按鈕 ： type="submit" -->
<input type="submit">
<!--重置按鈕 ： type="reset"-->
<input type="reset">
</p>
</form>
</body>
</html>
