HTML（三）
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>
效果图：
返回值：
readonly,disabled控件：
<!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>readonly和disabled只读的区别</title>
</head>
<body>
<form action="http://localhost:8080/oa/test">
<input type="test" name="数据" value="123" readonly>
<input type="submit" value="保存">
<br>
<input type="test" name="数据2" value="456" disabled>
<input type="submit" value="保存">
</form>
</body>
</html>
效果图：
返回值：
maxlength最大输出长度控件：
<input type="test" name="数据" maxlength="9">
div,span网页布局：
<!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>div与span的区别</title>
</head>
<body>
<!--
div是块级，会占用一行，div是可以一直套div的
span是行级，不会占用一行
-->
<div>
我是一个div
</div>
测试span<span>我是span</span>测试span
</body>
</html>
效果图：
浙公网安备 33010602011771号