一、初識HTML
初始基本標簽代碼解釋
點擊查看代碼
<!--DOCTYPE:告訴瀏覽器我們要使用什么規范-->
<!DOCTYPE html>
<html lang="en">
<!--生成注釋快捷鍵Ctrl + / 或 command + /-->
<!--head標簽代表網頁頭部-->
<head>
<!-- meta描述型標簽，它用來描述我們網站的一些資訊-->
<!--meta一般用來做SEO（漢譯為搜索引擎優化，是一種方式：利用搜索引擎的規則提高網站在有關搜索引擎內的自然排名）-->
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--body標簽表示網頁主體-->
<body>
</body>
</html>
二、基本標簽學習
1.標題標簽
點擊查看代碼
<!--標題標簽-->
<h1>Twq一級標簽</h1>
<h2>Twq二級標簽</h2>
<h3>Twq三級標簽</h3>
<h4>Twq四級標簽</h4>
<h5>Twq五級標簽</h5>
<h6>Twq六級標簽</h6>
2.段落標簽
點擊查看代碼
<!--段落標簽；生成快捷，打一個p然后按tab鍵會自動生成-->
<p>他叫我津漢公路可視對講</p>
<p>發斯蒂芬第三十</p>
<p>他啥發送到發送</p>
3.換行標簽
點擊查看代碼
他叫我津漢公路可視對講<br>
發斯蒂芬第三十<br>
他啥發送到發送<br>
4 .水平線標簽
點擊查看代碼
<!--水平線標簽-->
<hr/>
5 .粗體，加黑，斜體標簽
點擊查看代碼
<!--粗體，加黑，斜體標簽-->
<strong>Twq Twq</strong>
<b>Twq1 Twq1 Twq 1</b>
<em>Ym Ym Ym</em>
5 .特殊符號標簽
點擊查看代碼
<!--特殊符號-->
<!--空格-->
>；<!--大于號-->
<；<!--小于號-->
©<!--著作權-->
特殊符號記憶方式：先打一個&,然后隨便打一個字符，就可以找自己想要的字符
三、影像標簽
四、超鏈接標簽
1.錨鏈接
點擊查看代碼
<body>
<a name="top">頂部 </a>
<!--標題標簽-->
<h1>Twq一級標簽</h1>
<h2>Twq二級標簽</h2>
<h3>Twq三級標簽</h3>
<h4>Twq四級標簽</h4>
<h5>Twq五級標簽</h5>
<h6>Twq六級標簽</h6>
<!--段落標簽；生成快捷，打一個p然后按tab鍵會自動生成-->
<p>他叫我津漢公路可視對講</p>
<p>發斯蒂芬第三十</p>
<p>他啥發送到發送</p>
<!--水平線標簽-->
<hr/>
<!--換行標簽-->
他叫我津漢公路可視對講<br>
發斯蒂芬第三十<br>
他啥發送到發送<br>
<!--粗體，斜體標簽-->
<strong>Twq Twq</strong><br>
<b>Twq1 Twq1 Twq 1</b><br>
<!--<em>Ym Ym Ym</em><br>-->
<!--特殊符號-->
<!--空格--><br>
><!--大于號--><br>
<<!--小于號--><br>
©<!--著作權--><br>
<!--錨標簽-->
<a href="https://www.cnblogs.com/twq46/p/#top">回到頂部</a>
</body>
五、串列標簽
點擊查看代碼
<!--串列標簽-->
<!--有序標簽-->
<ol>
<li>java</li>
<li>python</li>
<li>C</li>
<li>C++</li>
</ol>
<hr>
<!--無序標簽-->
<ul>
<li>java
<ul>
<li>Web</li>
<li>網路</li>
<li>多執行緒</li>
</ul>
</li>
<li>python</li>
<li>C</li>
<li>C++</li>
</ul>
<hr>
<!--自定義標簽-->
<dl>
<dt>學科</dt>
<dd>java</dd>
<dd>Python</dd>
<dd>C</dd>
<dd>C++</dd>
<dt>關系</dt>
<dd>家人</dd>
<dd>親戚</dd>
<dd>朋友</dd>
</dl>
六、表格標簽
點擊查看代碼
<!--表格標簽
tr 行
td 列
-->
<table border="2px">
<tr >
<!--colspan跨列合并-->
<td colspan="3">學生成績</td>
</tr>
<tr >
<!--rowspan跨行合并-->
<td rowspan="2">Tang</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>
七、媒體元素
八、頁面結構分析
運行結果圖
九、iframe行內框架
點擊查看代碼
<!--
src:地址
w-h:寬度和高度
-->
<iframe src="https://www.csdn.net/" name = "hello" frameborder="0" height="500px"></iframe>
<!--通過name欄位可以使行內網站轉換到另一個網站-->
<a href="https://www.bilibili.com/" target="hello">點擊跳轉到B站</a>
十、表單
點擊查看代碼
<body>
<h1>登錄</h1>
<form action="iframe.html" method="get" target="_blank">
<!--
action:表單提交的位置，可以是網站，也可以是一個請求處理地址
method：post，get提交方式
get提交：我們可以在瀏覽器url欄目中看到我們提交的資訊，不安全，但是高效
post：比較安全，傳輸大檔案
value="https://www.cnblogs.com/twq46/p/請輸入名字" 默認輸出值
maxlength="8" 最長能寫幾個字符
size="30" 文本框的長度
-->
<p>名字 <input type="text" name="username" placeholder="請輸入用戶名"></p>
<p>密碼 <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
表單元素格式
（1）單選框
點擊查看代碼
<p>
<!-- input type="radio" 單選框
value="https://www.cnblogs.com/twq46/p/boy" 單選框的值
name="sex" 表示組，name值相同則表示同一個組，同一個組里的選項只能選擇其中一個
-->
<input type="radio" value="https://www.cnblogs.com/twq46/p/boy" name="sex">男
<input type="radio" value="https://www.cnblogs.com/twq46/p/girl" name="sex">女
</p>
（2）多選框和按鈕
點擊查看代碼
<!--多選框按鈕：checkbox
name也表示分組，同樣的name表示在同一個組
-->
<p>愛好：
<input type="checkbox" value="https://www.cnblogs.com/twq46/p/sleep" name="hobby">睡覺
<!-- checked默認為選中狀態 -->
<input type="checkbox" value="https://www.cnblogs.com/twq46/p/code" name="hobby" checked>打代碼
<input type="checkbox" value="https://www.cnblogs.com/twq46/p/eating" name="hobby">吃飯
<input type="checkbox" value="https://www.cnblogs.com/twq46/p/Game" name="hobby">游戲
</p>
<!-- 按鈕
value:表示按鈕上的文字
-->
<p>
<input type="button" value="https://www.cnblogs.com/twq46/p/點擊變小">
<!-- 圖片按鈕-->
<input type="image" src="https://www.cnblogs.com/twq46/resource/Image/1.jpeg" height="50" >
</p>
（3)下拉框
點擊查看代碼
<!--下拉框-->
<p>國家：
<select name="串列名稱" id="">
<option value="https://www.cnblogs.com/twq46/p/china">中國</option>
<option value="https://www.cnblogs.com/twq46/p/japan">日本</option>
<option value="https://www.cnblogs.com/twq46/p/us">美國</option>
</select>
</p>
（4）文本域與檔案域
點擊查看代碼
<!--文本域-->
<p>反饋：
<textarea name="textarea" cols="30" rows="10">文本內容</textarea>
</p>
<!--檔案域-->
<p>
<input type="file" name="files">
</p>
（5）郵箱、URL、數字驗證
點擊查看代碼
<!--郵箱驗證：必須輸入正確的郵箱格式才可以-->
<p>郵箱：
<input type="email" name="main">
</p>
<!--URL驗證：必須輸入正確的URL格式才可以-->
<p>URL
<input type="url" name="url">
</p>
<!--數字驗證：必須輸入數值在0-100之間的數值才可以-->
<p>商品數量：
<input type="number" name="num" min="0" max="100" step="1">
</p>
（6）滑塊&搜索框
點擊查看代碼
<!--滑塊-->
<p>音量
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框-->
<p>搜索
<input type="search" name="serch">
</p>
表單的應用
表單的初級驗證
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/498852.html
標籤：HTML5
上一篇：公眾號 H5 測驗號 注冊 和 授權 獲取code 前端部分
下一篇：前端周刊：2022-12 期