<!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>
