学习更多建议菜鸟教程
Target使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像,视频</title>
</head>
<body>
<img src="src\image\li.webp" width="300px"/>
<video controls autoplay>
<source src="src\image\vedio.avi">
<source src="src\image\vedio.mp4">
<source src="src\image\vedio.webm">
</video>
<a name="target"></a>
<p>
憨憨仲倩
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="Test.html#target">礼物</a>
</body>
</html>Link的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="src\css\index.css">
</head>
<body>
<div calss="head">头部</div>
<div calss="mid">
<div class="mid-col">左部</div>
<div class="mid-col">中部</div>
<div class="mid-col">右部</div>
</div>
<div id="test" class="foot">底部</div>
</body>
</html>*{
margin: 0;
padding: 0;
}
div{
height: 100px;
border: 1px solid slateblue;
}
.mid-col{
float: left;
width: 33%;
}
#test{
color: coral;
}表格表单
一、列表
带数字排序的列表：有序列表
带圆点的列表：无序列表
什么都不带的列表：定义列表
二、表格
三、表单
快捷将表格：
table>(tr>th*n)+(tr>td*n)*
<ul><li></li></ul>
<ol><li></li></ul>
<dl><dt></dt><dl>
<form action="#" method="get">
<p><input type="类型" name="自己随便写，最好和类型对应" ></p>
type类型有：text,password,submit,reset,radio(圆框)，checkbox(方框)
<form class="a" action="#" method="get">
<p><span>用户名：<input type="text" name="username"></span></p>
<p><span>密码：<input type="password" name="pwd"></span></p>
<p><input type="submit" value="登录就送998">
<input type="reset"></p>
<p>请选择职业<input type="radio" name="job" value="teacher">教师
<input type="radio" name="job" value="student">学生
<input type="radio" name="job" value="developer">程序员
<input type="radio" name="job" value="other">其他</p>
文本框：<p><textarea name="feedback" id="" cols="30" rows="10">
</textarea></p>
下拉选择用select
<p><select name="province">
<option value="">请选择省份</option>
<option value="beijing" >北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
</select></p>
时间： <p><input type="datetime-local" name="datetime-local"></p>
选择数字并且可以限定最大值最小值：
<p><input type="number" name="num" value="1" min="0" max="10"></p>
文本： <p><input type="range" value="30" min="1" max="10"></p>
上传文件：<p><input type="file" name="as"></p>
点击图片： <p><input type="image" src="image/tubiao1.webp" width="100px" height="100px"
οnclick="javascript:alert('我是个图片')">
<input type="image" src="image/tubiao.webp" width="100px" height="100px"
οnclick="javascript:confirm('我是个图片')"></p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul>li{
list-style-type:georgian;
}
</style>
</head>
<body>
<!--无序列表-->
<ul>
<li><a href="#">能有新闻?</a></li>
<li>真没有</li>
<li>你猜有没有</li>
<li>嘿，还真没有</li>
</ul>
<!--有序列表-->
<ol>
<li>哈哈</li>
<li>呵呵</li>
<li>喂喂</li>
<li>嗯嗯</li>
</ol>
<!--定义列表-->
<dl>
<dt>亚斯莫拉</dt>
<dt>哟西</dt>
<dt>哈嘿</dt>
</dl>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table.a{
border:1px solid dodgerblue;}
</style>
</head>
<table border="3px">
<tr>
<!--th代表表头-->
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<!--tr代表行-->
<td>03</td>
<!--td代表普通单元格-->
<td>张三</td>
<td>20</td>
</tr>
</table>
<table class='a' border="1px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>小明</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>范梦园</td>
<td>22</td>
<td>男</td>
</tr>
</table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<style>
form.a{
margin: 1px;
text-align: center;
padding:50px;
font-weight: bold;
font-size: 20px;
}
span{
border:1px darkcyan;
}
body{
background-image: url("image/zhi.jpg" ) ;
background-repeat: repeat;
background-position: 1px,1px;
}
</style>
</head>
<body>
<form class="a" action="#" method="get">
<p><span>用户名：<input type="text" name="username"></span></p>
<p><span>密码：<input type="password" name="pwd"></span></p>
<p><input type="submit" value="登录就送998">
<input type="reset"></p>
<p>请选择职业<input type="radio" name="job" value="teacher">教师
<input type="radio" name="job" value="student">学生
<input type="radio" name="job" value="developer">程序员
<input type="radio" name="job" value="other">其他</p>
<!--checked表示默认，同名的只能单选，不同名可一起选-->
<p>请选择爱好<input type="checkbox" name="hobbies" value="basketball">篮球
<input type="checkbox" name="hobbies" value="swimming">游泳
<input type="checkbox" name="hobbies" value="run">跑步
</p>
<p><select name="province">
<option value="">请选择省份</option>
<option value="beijing" >北京</option>
<option value="shanghai">上海</option>
<option value="nanjing">南京</option>
</select></p>
<!--selected表示默认，加在value值后-->
<p><textarea name="feedback" id="" cols="30" rows="10"></textarea></p>
<p><input type="datetime-local" name="datetime-local"></p>
<p><input type="number" name="num" value="1" min="0" max="10"></p>
<p><input type="range" value="30" min="1" max="10"></p>
<p><input type="file" name="as"></p>
<p><input type="image" src="image/tubiao1.webp" width="100px" height="100px"
onclick="javascript:alert('我是个图片')">
<input type="image" src="image/tubiao.webp" width="100px" height="100px"
onclick="javascript:confirm('我是个图片')"></p>
</form>
<form>
<p><input type="image" src="image/tubiao1.webp" width="100px" height="100px"></p>
</form>
</body>
</html>更多推荐
HTML、CSS、表格表单简单代码笔记
发布评论