HTML常用標簽

<!DOCTYPE html>
<!--html 文件開始-->
<html lang="en">
<!--head 文件頭-->
<head>
 ? ?<meta charset="UTF-8">
 ? ?<title>這是第一個網頁</title>
</head>
<!--body文件體-->
<body>
<a id="top">頂部錨點</a>
<h1>這是一個大標題</h1>
<!--換行符-->
<br/>
<p>段落標簽</p>
<!--水平分割線-->
<hr/>
<!-- ../返回上一級標簽 -->
<img src="../resource/img/1.jpg" alt="QQ頭像" title="懸停顯示字體" />
?
<!--鏈接標簽-->
<a href="2.鏈接頁面.html" target="_blank"> 點擊跳轉</a>
<!--錨鏈接標簽  實現頁面間的跳轉-->
 <a href="#top">回到頂部</a>
?
<!--功能性鏈接
郵件鏈接： mailto:</p>
?
-->
<a href="mailto:2475624676@qq.com">點擊聯系我們</a>
<!--列表標簽
有序列表
無序列表
自定義列表
-->
<!--有序列表-->
<ol>
 ? ?<li>java</li>
 ? ?<li>c++</li>
 ? ?<li>python</li>
 ? ?<li>php</li>
</ol>
<hr/>
<!--無序列表-->
<ul>
 ? ?<li>java</li>
 ? ?<li>c++</li>
 ? ?<li>python</li>
 ? ?<li>php</li>
</ul>
<!--自定義列表
dl:標簽
dt:列表名稱
dd:列表內容
-->
<dl>
 ? ?<dt>學科</dt>
 ? ?<dd>Java</dd>
 ? ?<dd>python</dd>
 ? ?<dd>c++</dd>
</dl>
<!--表格標簽
行 tr
列 td
跨行  rowspan
跨列 ? colspan
-->
<table border="2px">
 ? <tr>
 ? ? ? <td rowspan="2">1-1</td>
 ? ? ? <td>1-2</td>
 ? ? ? <td>1-3</td>
 ? ? ? <td>1-4</td>
 ? </tr>
 ? ?<tr>
 ? ? ? ?<td>1-1</td>
 ? ? ? ?<td>1-2</td>
 ? ? ? ?<td>1-3</td>
 ? ?</tr>
 ? ?<tr>
 ? ? ? ?<td colspan="4">1-1</td>
 ? ?</tr>
</table>
<!--視頻標簽
controls 控制視頻
autoplay 自動播放
-->
<video href=" 視頻的相對路徑" controls autoplay></video>
?
<!--音頻標簽
controls 控制音頻
autoplay 自動播放
-->
<audio href="音頻的相對路徑" controls autoplay></audio>
<!--iframe內聯框架
src:地址
name:框架標識名
實現在網頁里嵌套另一個網頁
-->
<iframe src="引用頁面地址" frameborder="1px"></iframe>
<!--form表單語法
隱藏域：hidden
只讀：readonly
禁用：disable
action: 表單提交的位置 ， 可以是網站，也可以是一個請求地址
method : post,get 提交方式
get: 我們可以在url中看到我們提交的信息，不安全，但是高效
post: 比較安全，可以傳輸大文件
-->
<h5>登陸注冊</h5>
<form action="2.鏈接頁面.html" method="post" >
<!-- input標簽
 ? type  類型
 ? name 用于JavaWeb獲取輸入的信息
 ? value="html" 默認初始值
 ? maxlength="7" 默認字符的最大長度,最多能輸入幾個字符
 ? size="30" 文本框的長度
 ? -->
?
<p> 姓名:<input type="text" name="username"></p>
<!--  單選框radio
 ?value : 單選框的值，選擇事件，”男“只是用來修飾value的值的
 ?name： 表示組的類別
 ?-->
 ? ?<p>
 ? ? ?  性別:
 ? ? ? ?<input type="radio" value="boy" ?name="sex" >男
 ? ? ? ?<input type="radio" value="girl" name="sex" >女
 ? ?</p>
 ? ?<p>密碼:<input type="password" name="password"></p>
<!--多選框checkbox-->
 ? ?<p>
 ? ? ?  愛好：
 ? ? ? ?<input type="checkbox" value="sleep" name="hobby">睡覺
 ? ? ? ?<input type="checkbox" value="game" name="hobby">游戲
 ? ? ? ?<input type="checkbox" value="chat" name="hobby">聊天
 ? ? ? ?<input type="checkbox" value="shop" name="hobby">購物
 ? ?</p>
<!--  下拉框  -->
 ? ?<p>地區：
 ? ? ? ?<select name="文本選項">
 ? ? ? ? ? ?<option value="china">中國</option>
 ? ? ? ? ? ?<option value="american">美國</option>
 ? ? ? ? ? ?<option value="UN">英國</option>
 ? ? ? ? ? ?<option value="faguo">法國</option>
 ? ? ? ? ? ?<option value="eluosi">俄羅斯</option>
 ? ? ? ?</select>
 ? ?</p>
<!--文本域textarea-->
 ? ?<p>
 ? ? ? ?<textarea name="textarea" rows="10" cols="50">文本內容</textarea>
 ? ?</p>
<!--文件域file
-->
 ? ?<p>
 ? ? ? ?<input type="file" name="files">
 ? ? ? ?<input type="button" value="上傳" name="up">
 ? ?</p>
<!--郵箱驗證mail-->
 ? ?<p>郵箱：
 ? ? ? ?<input type="mail" name="mail"/>
 ? ?</p>
<!--URL-->
 ? ?<p>
 ? ? ? ?<input type="file" name="url"/>
 ? ?</p>
<!--數字
step 每次增加或縮小的值
-->
 ? ?<p>商品數量：
 ? ? ? ?<input type="number" name="num" max="100" min="0" step="1"/>
 ? ?</p>
<!--滑塊range-->
 ? ?<p>
 ? ? ? ?<input type="range" name="range"/>
 ? ?</p>
<!--搜索search-->
 ? ?<p>搜索：
 ? ? ? ?<input type="search" name="search"/>
 ? ?</p>
<p> <input type="submit" name="提交">
 ? ?<input type="reset" name="重置">
</p>
</form>
</body>
?
</html>
本文摘自：https://www.cnblogs.com/
HTML常用標簽2022-04-25 22:57:48

HTML常用標簽

HTML常用標簽
2022-04-25 22:57:48
