归零——html-第二天
2020-02-23 本文已影响0人
夏沫雪殇
html高级标签
<!DOCTYPE html>
<html>
<head>
<title>高级标签</title>
<meta charset="utf-8">
<style type="text/css">
p input{
width: 200px;
height: 30px;
border: 1px solid gray;
}
/*表单*/
#form{
width: 1000px;
background-color: orange;
}
</style>
</head>
<body>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582455514721&di=ba336568d3025efff2d63c51cb2
dfef9&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg" alt="猫咪" title="this is cat">
<!-- 引入图片：1.网上url——网上拷贝图片地址 2.本地的绝对路径——图片与文件不在同一文件下，路径名称要写全 3.本地的相对路径——图片与文件在同一文件夹下 -->
<!-- alt图片占位符 -->
<!-- title图片提示符 -->
<br>
<!-- a标签超链接 -->
<!-- hyperText reference == href -->
<a href="https://www.baidu.com" target="_blank" id="cat">
<!-- target="_blank"点击超链接打开一个新窗口 -->
<img src="https://www.baidu.com/img/bd_logo1.png?qua=high" width="280px" >
</a>
<br>
<img src="http://b-ssl.duitang.com/uploads/item/201712/09/20171209095824_2J4Se.jpeg" id="warm">
<!-- a标签锚点 -->
<a href="#cat" style="position: fixed;width: 200px;height: 50px;bottom: 100px;right: 100px;background-color: green;border: 1px solid black;font-size: 18px;color: white;text-align: center;line-height: 50px;">cat</a>
<a href="#warm" style="position: fixed;width: 200px;height: 50px;bottom: 50px;right: 100px;background-color: orange;border: 1px solid black;font-size: 18px;color: white;text-align: center;line-height: 50px;">warm</a>
<br>
<!-- a标签打电话发邮件 -->
<a href="tel:17856##3106">给快递打电话</a>
<a href="mailto:26979016##@qq.com">发邮件</a>
<br>
<!-- a标签协议限定符 -->
<a href="javascript:{alert('复制')}" style="color: red;">复制</a>
<!-- 表单 -->
<div id="form">
<form method="get" action="">
<!-- method:get/post -->
<p>
username:<input type="text" name="username" value="" placeholder="请输入用户名" onfocus="if(this.placeholder==''){this.placeholder=''}" onblur="if(this.placeholder==''){this.placeholder='请输入用户名'}">
</p>
<p>
password:<input type="password" name="password">
</p>
<input type="submit">
<!-- 单选框 -->
<p>
热爱的运动：
篮球<input type="radio" name="sport">
羽毛球<input type="radio" name="sport">
乒乓球<input type="radio" name="sport">
</p>
<!-- 复选框 -->
<p>
热爱的水果：
香蕉<input type="checkbox" name="fruit" value="香蕉" checked="checked">
橘子<input type="checkbox" name="fruit">
车厘子<input type="checkbox" name="fruit">
</p>
<!--checked="checked"默认选-->
<!-- 下拉菜单 -->
<h1>Province</h1>
<select name="province">
<option>北京</option>
<option>上海</option>
<option>安徽</option>
</select>
<br>
<input type="submit">
</form>
</div>
</body>
</html>
效果展示
1.gif
