<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
hello,HTML
</body>
</html>
基本標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本標簽學習</title>
</head>
<body>
<!--標題標簽-->
<h1>我是標題標簽</h1>
<h2>我是標題標簽</h2>
<h3>我是標題標簽</h3>
<h3>我是標題標簽</h3>
<hr/>
<!--段落標簽-->
用戶發送請求到中央控制器
中央控制器收到請求后，調用處理器映射器
處理器映射器找到具體的處理器（根據注解進行查找），返回處理器對象返回給中央控制器
中央控制器調用處理器適配器
處理器適配器經過執行具體的控制器（controller）
controller執行完成后，返回modelandview（模型跟視圖）
處理器適配器將controller執行結果返回給中央控制器
中央控制器將modelandview傳給視圖解析器（viewreslover）
視圖解析器解析害后返回具體的view
中央控制器根據view進行渲染
中央控制器響應用戶
<hr/>
<p>用戶發送請求到中央控制器</p>
<p>中央控制器收到請求后，調用處理器映射器</p>
<p>處理器映射器找到具體的處理器（根據注解進行查找），返回處理器對象返回給中央控制器</p>
<p>中央控制器調用處理器適配器</p>
<p>處理器適配器經過執行具體的控制器（controller）</p>
<p>controller執行完成后，返回modelandview（模型跟視圖）</p>
<p>處理器適配器將controller執行結果返回給中央控制器</p>
<p>中央控制器將modelandview傳給視圖解析器（viewreslover）</p>
<p>視圖解析器解析害后返回具體的view</p>
<p>中央控制器根據view進行渲染</p>
<p>中央控制器響應用戶</p>
<hr/>
<!--換行標簽-->
用戶發送請求到中央控制器
中央控制器收到請求后，調用處理器映射器
處理器映射器找到具體的處理器（根據注解進行查找），返回處理器對象返回給中央控制器
中央控制器調用處理器適配器
處理器適配器經過執行具體的控制器（controller）
controller執行完成后，返回modelandview（模型跟視圖）
處理器適配器將controller執行結果返回給中央控制器
中央控制器將modelandview傳給視圖解析器（viewreslover）
視圖解析器解析害后返回具體的view
中央控制器根據view進行渲染
中央控制器響應用戶
用戶發送請求到中央控制器 <br/>
中央控制器收到請求后，調用處理器映射器 <br/>
處理器映射器找到具體的處理器（根據注解進行查找），返回處理器對象返回給中央控制器 <br/>
中央控制器調用處理器適配器 <br/>
處理器適配器經過執行具體的控制器（controller） <br/>
controller執行完成后，返回modelandview（模型跟視圖） <br/>
處理器適配器將controller執行結果返回給中央控制器 <br/>
中央控制器將modelandview傳給視圖解析器（viewreslover） <br/>
視圖解析器解析害后返回具體的view <br/>
中央控制器根據view進行渲染 <br/>
中央控制器響應用戶 <br/>
<hr/>
<!--水平線標簽-->
<hr/>
<!--字體樣式標簽-->
加粗 <strong>我變粗了</strong>
斜體 <em>我變斜了</em>
<hr/>
<!--注釋和特殊符號-->
<!--注釋快捷鍵 Ctrl+/-->
特殊符號:
<!-- 空格-->
©版權符號 <br/>
>大于號<br/>
<小于號<br/>
</body>
</html>
圖像標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片標簽學習</title>
</head>
<body>
<!--
img學習
src:圖片地址
地址分為兩種:相對路徑（推薦）跟絕對路徑
絕對路徑是把路徑寫死 點擊圖片img的圖片右鍵點擊 Copy Path 然后Ctrl+V復制到src后面即可
相對路徑 ../返回上一級
alt的意思為 如果src地址中的圖片不存在，那么會輸出alt中的內容
title為鼠標停留在圖片上的時候顯示的內容
width,height 寬跟高
-->
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
<a href="4.鏈接標簽.html#top">點我跳轉</a>
</body>
</html>
鏈表標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽學習</title>
</head>
<body>
<a name="top">頂部</a>
<!--
文字超鏈接
href:要跳轉到那個頁面的地址
-->
<a href="1.我的第一個網頁.html">點我跳轉</a>
<a href="https:/www.baidu.com">點我跳轉</a>
<!--<br/> -->
<!--圖片超鏈接-->
<p><a href="1.我的第一個網頁.html">
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一個網頁.html">
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一個網頁.html">
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一個網頁.html">
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一個網頁.html">
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
</a></p>
<p><a href="1.我的第一個網頁.html">
<img src="../resources/image/紅色少女.jpg" alt="紅色少女" title="紅色少女" width="300" height="300">
</a></p>
<!--<a href="" target="_self"></a>
target表示窗口在哪里打開
默認""為_self在本頁面打開
_blank在新頁面打開
-->
<a href="1.我的第一個網頁.html" target="">點我跳轉</a>
<a href="1.我的第一個網頁.html" target="_blank">點我跳轉</a>
<!--錨鏈接-->
<!--可以回到標記的地方 如：在頁面頂部寫一個a標簽，顯示為頭部，給它一個name屬性為top
那么<a href="#top">回到頂部</a> href="#+(跳轉標記地方的name值)top"
不同頁面的跳轉，，比如我想從3.圖像標簽.html中跳轉到這個頁面
寫法為:<a href="4.鏈接標簽.html#top">點我跳轉</a>
-->
<a href="#top">回到頂部</a>
<!--功能性鏈接
郵件鏈接mailto:+郵箱
-->
<a href="mailto:1623909716@qq.com">點擊聯系我</a>
</body>
</html>
行內元素跟塊元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
塊元素
無論內容多少，該元素獨占一行 如：
<p></p>
<h1></h1>
行內元素
內容撐開寬度，左右都是行內元素可以排在一行 如：
<a href=""></a>
<strong></strong>
<em></em>
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表學習</title>
</head>
<body>
<!--有序列表 ol -->
<ol>
<li>java</li>
<li>Python</li>
<li>運維</li>
<li>前端</li>
<li>C/c++</li>
</ol>
<hr/>
<!--無序列表 ul-->
<ul>
<li>java</li>
<li>Python</li>
<li>運維</li>
<li>前端</li>
<li>C/c++</li>
</ul>
<hr/>
<!--自定義序列表
dl:標簽
dt:列表名稱
dd:列表內容
-->
<dl>
<dt>學科</dt>
<dd>java</dd>
<dd>Python</dd>
<dd>Linux</dd>
<dd>C</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格學習</title>
</head>
<body>
<!--表格table
行: tr
列: td
-->
<table border="1px">
<tr>
<!--colspan 合并列(跨列)-->
<td colspan="4">1-1</td>
<!--<td>1-2</td>-->
<!--<td>1-3</td>-->
<!--<td>1-4</td>-->
</tr>
<tr>
<!--rowspan 合并行(跨行)-->
<td rowspan="4">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<!--<td>3-4</td>-->
</tr>
</table>
<!--
有三個tr為三行
td為列 3行 一列有四個
border=1px給表格加一個邊框
-->
<hr/>
<table border="1px">
<tr>
<td colspan="3">學生成績</td>
</tr>
<tr>
<td rowspan="2">狂神</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<!--<td>狂神</td>-->
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">秦江</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<!--<td>秦江</td>-->
<td>數學</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒體元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素學習</title>
</head>
<body>
<!--src為資源地址
video視頻
audio音樂
controls設置可見
autoplay設置自動播放
-->
<!--視頻-->
<video src="" controls autoplay></video>
<!--音樂-->
<audio src=""></audio>
</body>
</html>
頁面結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構分析</title>
</head>
<body>
<header> <h2>我是頭部標簽</h2></header>
<footer><h2>我是尾部標簽</h2> </footer>
<nav><h2>我是導航類輔助</h2> </nav>
</body>
</html>
內聯框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>內聯框架學習</title>
</head>
<body>
<!--iframe內聯框架
src放跳轉的地址
name給一個名字其他的標簽可以通過它進行跳轉，，比如name="hello"
<!--<a href="1.我的第一個網頁.html" target="hello">點我跳轉</a>
就可以進行跳轉
targer _self在本頁面跳轉
_blank 在另外一個頁面跳轉
-->
-->
<iframe src="https:www.baidu.com" frameborder="1px" name="p" width="100px" height="100px"></iframe>
</body>
</html>
表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單學習</title>
</head>
<body>
<!--
form表單
action需要跳轉的地方
method:get方法可以在輸入欄看到輸入的信息，相對于不安全，但是高效
post方法相對于get方法安全，在輸入欄看不到輸入的信息，可以傳輸大文件
想看post輸入的信息，可以在運行后點擊f12查看 network 選headers就可以看到
name為元素的名稱
type:類別
submit為提交按鈕 為系統提供的一個按鈕
reset為重置按鈕
value為元素的默認值 size為input的長度 maxlength為最多能輸入幾個字符
-->
<form action="1.我的第一個網頁.html" method="get">
<p>姓名: <input type="text" name="username" value="劉博豪" size="30" maxlength="5"></p>
<p>密碼: <input type="password" name="passwrod"></p>
<p>
<!--radio 為單選按鈕 如果不加name屬性 單選按鈕可以選多個
如果加上name屬性并且name的值是一樣的話
就說明它們是一個組的只能選一個
那么就只能選一個
-->
<input type="radio" value="boy" name="0" checked>男
<input type="radio" value="girl" name="0">女
</p>
<!--單選按鈕跟多選按鈕默認選中為checked-->
<p>
<!--checkbox 為多選按鈕 name的值最好是相同，這樣會判定為一個數組 values為真實的值 睡覺相當于一個外衣-->
<input type="checkbox" value="sleep" name="hobby">睡覺
<input type="checkbox" value="code" name="hobby" checked>敲代碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">游戲
<!--button為自定義按鈕
image為圖片按鈕
-->
<!--<input type="button" name="b1" value="點擊變長">-->
<!--<input type="image" src="">-->
<p>
國家:
<!--select 下拉框 默認選中為selected-->
<select name="列表名稱" id="">
<option value="zhongguo" >中國</option>
<option value="meiguo" >美國</option>
<option value="ruishi" selected>瑞士</option>
<option value="yindu" >印度</option>
</select>
</p>
<!--文本域 textarea cols,row為列跟行-->
<p>反饋:
<textarea name="text1" cols="30" rows="10"></textarea>
</p>
<!--文件域 可以用來上傳文件-->
<p>
<input type="file" name="files">
<input type="button" value="上傳" name="upload">
</p>
<!--功能驗證標簽 如果不符合郵箱標準會提示-->
郵箱：<p><input type="email" name="e"></p>
<!--功能驗證標簽 如果不符合網址標準會提示-->
網址：<p><input type="url" name="u"></p>
<!--功能驗證標簽 如果不符合數字max min之間的標準會提示 step為一次增加多少-->
商品：<p><input type="number" name="n" max="10" min="0" step="2"></p>
音量：<p><input type="range" max="100" min="0" name="voice"> </p>
<!--輸入后 可以點叉號清空-->
搜索：<input type="search" name="s">
<!--hidden 隱藏-->
<p>水果：<input type="hidden" name="shuiguo" ></p>
<!--readonly 只看，不可修改-->
我被禁用了：<input type="text" value="我不能被修改" readonly>
<!--disabled 禁用-->
<p>婚姻情況：
<input type="radio" name="1">已婚
<input type="radio" name="1" disabled>未婚
</p>
<!--placeholder 提示信息-->
<p><input type="text" placeholder="請輸入"></p>
<!--required 非空提示-->
<p>請輸入，我不能為空<input type="text" required ></p>
<!--pattern正則表達式 網上查找正則表達式-->
<!--<input type="text" pattern="">-->
<!--增強鼠標可用性 -->
<p><label for="dian">你點我試試
</label>
<input type="text" id="dian">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</p>
</form>
</body>
</html>
浙公網安備 33010602011771號