<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{
margin: 0 10px;
float: left;
color: #f40;
font-weight: bold;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 0 5px;
}
li:hover{
background-color: #f40;
border-radius: 15px;
color: #fff;
}
</style>
</head>
<body>
<!-- == 空格 -->
<!-- <br> == 回車 -->
<!-- <hr> == 水平線 -->
<!-- 有序列表 -->
<!-- <ol type="1" reversed="reversed">
<li>qaq</li>
<li>1231</li>
<li>ppp</li>
沒用
</ol> -->
<!-- 無序列表 -->
<ul type="circle">
<li>天貓</li>
<li>聚划算</li>
<li>天貓超市</li>
</ul>
<!-- alt圖片佔位符 -->
<!-- 1.網上的url
2.本地的絕對路徑
3.本地的相對路徑 -->
<a href="https://www.baidu.com" target="_blank"><img src="http://img.mp.itc.cn/upload/20170511/c9b636a1b5e34f7b8c922052da72e927_th.jpg"
style="width: 200px; " alt="圖片佔位符" title="圖片提示符"></a>
<!-- 在新標籤頁打開網站target -->
<!-- 超鏈接 a -> anchor -> 錨 -->
<!-- 錨點 -->
<!-- 打電話發郵件 -->
<!-- 協議限定符 -->
<a href="javascript:while(1){alert('讓你手欠')}">協議限定符</a>
<a href="tel:136395125168">打電話功能</a>
<div id = "demo1" style="width: 100px; height: 100px; background-color: red">demo1</div>
<div id = "demo2" style="width: 100px; height: 100px; background-color: yellow">demo2</div>
<a href="#demo1">find demo1</a>
<a href="#demo2">find demo2</a>
<!-- 表單標籤 後端的數據發送到前端數據 -->
<form method="GET" action="後端地址">
<p>
username:<input type="text" name="username" value="請輸入用戶名" onfocus="if(this.value == '請輸入用戶名'){
this.value = '';
}" οnblur="if(this.value == ''){
this.value = '請輸入用戶名'
}">
<!-- 傳輸數據要數據值和數據名name
http://127.0.0.1:5500/%E5%90%8E%E7%AB%AF%E5%9C%B0%E5%9D%80?username=32424&password=1242424 -->
</p>
<p>
password:<input type="password" name="password">
</p>
<input type="submit" value = "提交">
<!-- 單選框 -->
1.貝克漢姆<input type="radio" name="star" value="1">
2.萊安納多<input type="radio" name="star" value="12">
3.QAQ<input type="radio" name="star" value="13">
</form>
</body>
</html>
HTML小白——高級標籤練習（form、input、a）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章