1常用字符：
bgcolor设置背景颜色：
<head>
<body bgcolor="green">
</body>
</head>
background设置背景图片：
如果图片太小会再自动多生成几张图片使得全屏铺满
<head>
<body background="https://pic.cnblogs.com/avatar/2566268/20210929111718.png">
</body>
</head>
img,src显示图片：
<!DOCTYPE html>
<html>
<head>
<title>图片显示</title>
</head>
<body>
<img src="https://pic.cnblogs.com/avatar/2566268/20210929111718.png">
</body>
</html>
效果图：
a,href超链接：
<html>
<head>
<title>超链接</title>
</head>
<body>
<a href="https://www.cnblogs.com/sff-0-0/">申疯疯的博客</a>
</body>
</html>
target新窗口显示超链接内容：
<html>
<head>
<title>超链接</title>
</head>
<body>
<a href="https://www.cnblogs.com/sff-0-0/" target="_blank">申疯疯的博客</a>
</body>
</html>
ul,ol有序无序列表:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英雄联盟小列表</title>
</head>
<body>
<ul>
<li>刺客
<ol>
<li>泰隆</li>
<li>劫</li>
<li>乐芙兰</li>
<li>阿狸</li>
</ol>
</li>
<li>法师
<ol>
<li>瑞兹</li>
<li>斯维因</li>
<li>泽拉斯</li>
</ol>
</li>
<li>射手
<ol>
<li>卡莎</li>
<li>薇恩</li>
<li>艾希</li>
</ol>
</li>
</ul>
</body>
</html>
效果图：
from,input表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
</head>
<body>
<form method="get" action="https://www.cnblogs.com/sff-0-0/">
<input type="submit" value="博客"/>
</form>
</body>
</html>
效果图：
表单提交：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单提交</title>
</head>
<body>
<form action="http://localhost:8080/oa/login"method="get">
<!--
input标签中常用的type属性，
text文本框
password密码框
radio单选按钮
checkbox复选框
-->
<h2>用户登录</h2>
<!--name属性才可以提交数据-->
用户名: <input type="text" name="用户名"><br>
密码: <input type="password" name="密码"><br>
<input type="submit" value="登录">
</form>
</body>
</html>
效果图：
稍微复杂一点的表单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>稍微复杂一点的表单</title>
</head>
<body>
<!--
check的默认勾选为checked
select的默认勾选是selected
-->
<form action="http://localhost:8080/oa/rester" method="get">
用户名<input type="text" name="用户名"><br>
密码 <input type="password" name="密码"><br>
性别:
<!--单选就要加name-->
男<input type="radio" name="sex" value="male" checked="checked">
女<input type="radio" name="sex" value="female">
<br>
学历
<select name="学历">
<option value="">--请选择--</option>
<option value="1">大专</option>
<option value="2" selected>本科</option>
<option value="3">硕士</option>
</select><br>
兴趣
吃饭<input type="checkbox" name="爱好" value="吃饭">
睡觉<input type="checkbox" name="爱好" value="睡觉">
爱学习<input type="checkbox" name="爱好" value="爱学习" checked><br>
简介<br>
<textarea rows="10" cols="60" name="简介"></textarea><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
效果图：
file,hidden控件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件提交与隐藏域</title>
</head>
<body>
文件提交<input type="file" >
<form action="http://localhost:8080/oa/login">
<!--hidden会将内容隐藏，但是提交数据时会携带默认的字段-->
<input type="hidden" name="用户名" value="1111">
姓名<input type="text" name="姓名">
<input type="submit" value="保存">
</form>
</body>
</html>
效果图：
返回值：
标签：疯疯,表单,效果图,HTML,超链接,提交,图片 来源： https://www.cnblogs.com/sff-0-0/p/15355419.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。