html标签学习2
input 系列
<form enctype="multipart/form-data">
<input type="text" name="user" value="haha"> <!--value是默认值-->
<input type="password" name="pwd" value="hah"> <!--value是默认值-->
<input type="button" value="登录1">
<input type="submit" value="登录2"> <!--value提交到后台 -->
<p>性别:</p>
<p>男<input type="radio" name="xingbie" ></p> <!--单选框 name相同互斥-->
<p>女<input type="radio" name="xingbie" ></p>
<p>爱好:</p>
<p>篮球<input type="checkbox" name="aihao"></p> <!--多选框 name相同同类-->
<p>足球<input type="checkbox" name="aihao"></p>
<p><input type="file"></p> <!--上传文件 依赖form表单属性enctype="multipart/form-data"-->
<p><input type="reset"></p> <!--重置-->
</form>
<textarea name="sasa">默认值</textarea>
<select name="dizhi">
<option value="1">安徽</option>
<option value="2">合肥</option>
<option value="3">荷兰</option>
</select>
以上提交后台的标签
a 标签 跳转 锚
<a href="https://www.baidu.com/">百度</a>
<a href="#a1">第一章</a>
<a href="#a2">第二章</a>
<a href="#a3">第三章</a>
<a href="#a4">第四章</a>
<div id="a1" style="height: 600px">第一章内容</div>
<div id="a2"style="height: 600px">第二章内容</div>
<div id="a3"style="height: 600px">第三章内容</div>
<div id="a4"style="height: 600px">第四章内容</div>
css
<link rel="stylesheet" href="1.css"> 导入
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*#i1,#i2{*/
/*background-color: yellow;*/
/*color: #b3d4fc;*/
/*}*/
/*.c1{*/
/*background-color: yellow;*/
/*color: #b3d4fc;*/
/*}*/
/*div{*/
/*background-color: yellow;*/
/*color: #b3d4fc;*/
/*}*/
/*span div{*/
/*background-color: yellow;*/
/*color: #b3d4fc;*/
/*}*/
div[name="alex"]{
background-color: yellow;
color: #b3d4fc;
}
</style>
</head>
<body>
<div class="c1">hello</div>
<div class="c1">hello</div>
<span>
<div class="c1">hello</div>hello
</span>
<div name="alex">hello</div>
</body>
</html>
<div style="
border: 4px solid red; /*边框 像素 虚实线 边框颜色*/
height: 48px; /*高度*/
width:80%; /* 宽度*/
font-size: 16px; /*字体大小*/
text-align: center; /*水平居中*/
line-height: 48px; /*垂直根据标签高度居中*/
font-weight: bold; /*字体加粗*/
color: red; /* 字体颜色*/
">hello</div>
position ：fixed relative absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: yellow;width: 1200px;height: 100px;margin:auto;position: relative">
<div style="width: 40px;background-color: red; height:40px;position:absolute;left: 0;bottom: 0"></div>
</div>
</body>
</html>
后台管理页面
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 margin: 0;
9 }
10 .ms-head{
11 height: 48px;
12 background-color: #b3d4fc;
13 }
14 .body-menu{
15 position: absolute;
16 left: 0;
17 background-color: yellow;
18 width: 200px;
19 }
20 .body-content{
21 position: absolute;
22 top: 48px;
23 right: 0;
24 left: 200px;
25 bottom: 0;
26 background-color: #2459a2;
27 overflow: auto;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="ms-head"></div>
33 <div class="ms-body">
34 <div class="body-menu">
35 <ol>
36 <li>1</li>
37 <li>1</li>
38 <li>1</li>
39 </ol>
40 </div>
41 <div class="body-content">
42 <h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1><h1>1</h1>
43 </div>
44 </div>
45 </body>
46 </html>
边缘提示框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <table>
9 <tr>
10 <td>1</td>
11 <td>2</td>
12 <td>
13 <div style="position: relative">
14 <a>删除</a>
15 <div style="position: absolute;left: 38px;top: 0px">
16 <input type="button" value="确定">
17 <input type="button" value="取消">
18 </div>
19 </div>
20 </td>
21 </tr>
22 <tr>
23 <td>11</td>
24 <td>22</td>
25 <td>删除</td>
26 </tr>
27 <tr>
28 <td>11</td>
29 <td>22</td>
30 <td>删除</td>
31 </tr>
32 </table>
33 </body>
34 </html>
输入框和图表
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 .d1{
8 width: 200px;
9 position: relative;
10 /*background-color: #2459a2;*/
11 }
12 .d1 input{
13 padding-right: 30px;
14 width:150px;
15 }
16 .r{
17 position: absolute;
18 left: 160px;
19 top: 1px;
20 }
21 </style>
22 </head>
23 <body>
24 <div class="d1">
25 <input type="text">
26 <span class="r">r</span>
27 </div>
28 </body>
29 </html>
模态对话框 三级层叠
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 margin: 0;
9 padding: 0;
10 }
11 .d1{
12 background-color: #b3d4fc;
13 z-index: 1;
14 }
15 .c2{
16 position: fixed;
17 top: 0;
18 left: 0;
19 right: 0;
20 bottom: 0;
21 background:rgba(0,0,0,.5);
22 z-index: 2;
23 }
24 .c3{
25 position: fixed;
26 top: 50%;
27 left: 50%;
28 background-color: white;
29 width: 200px;
30 height: 200px;
31 margin-left: -100px;
32 margin-top: -100px;
33 z-index: 3;
34 }
35 </style>
36 </head>
37 <body>
38 <div class="d1">
39 <h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1><h1>11</h1>
40 </div>
41 <div class="c2"></div>
42 <div class="c3"></div>
43 </body>
44 </html>
加减框
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .dw{
12 height: 22px;
13 width: 150px;
14 border: 1px solid darkgray;
15 }
16 .d1{
17 float: left;
18 height: 22px;
19 width: 40px;
20 text-align: center;
21 line-height:22px;
22 }
23 .d2 input{
24 float: left;
25 height: 20px;
26 width: 66px;
27 border: 1px solid darkgray;
28 }
29 .d3{
30 float: left;
31 height: 22px;
32 width: 40px;
33 text-align: center;
34 line-height: 22px;
35 }
36 </style>
37 </head>
38 <body>
39 <div class="dw">
40 <div class="d1">-</div>
41 <div class="d2">
42 <input type="text">
43 </div>
44 <div class="d3">+</div>
45 </div>
46 </body>
47 </html>
加减框 2
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .dw{
12 float: left;
13 height: 22px;
14 width: 156px;
15 float: left;
16 }
17 .d1{
18 float: left;
19 height: 22px;
20 width: 40px;
21 text-align: center;
22 line-height:22px;
23 border: 1px solid darkgray;
24 }
25 .d2 input{
26 padding: 0;
27 float: left;
28 height: 20px;
29 width: 60px;
30 border: 1px solid darkgray;
31 margin-left:5px;
32 }
33 .d3{
34 float: right;
35 height: 22px;
36 width: 40px;
37 text-align: center;
38 line-height: 22px;
39 border: 1px solid darkgray;
40 margin-left:5px;
41 }
42 </style>
43 </head>
44 <body>
45 <div class="dw">
46 <div class="d1">-</div>
47 <div class="d2">
48 <input type="text">
49 </div>
50 <div class="d3">+</div>
51 </div>
52 </body>
53 </html>
加减框js实现
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .dw{
12 height: 22px;
13 width: 150px;
14 border: 2px solid darkgray;
15 }
16 .d1{
17 float: left;
18 height: 22px;
19 width: 40px;
20 text-align: center;
21 line-height:22px;
22 cursor: pointer;
23 }
24 .d2 input{
25 float: left;
26 height: 20px;
27 width: 66px;
28 border: 1px solid darkgray;
29 }
30 .d3{
31 float: left;
32 height: 22px;
33 width: 40px;
34 text-align: center;
35 line-height: 22px;
36 cursor: pointer;
37 }
38 </style>
39 </head>
40 <body>
41 <div class="dw">
42 <div class="d1" onclick="Minus();">-</div>
43 <div class="d2">
44 <input id="count" type="text"value="123">
45 </div>
46 <div class="d3" onclick="Plus();">+</div>
47 </div>
48 <script type="text/javascript">
49 function Plus() {
50 var old_str = document.getElementById('count').value;
51 var old_int = parseInt(old_str)
52 var new_int = old_int + 1
53 document.getElementById('count').value=new_int
54 }
55 function Minus() {
56 var old_str = document.getElementById('count').value;
57 var old_int = parseInt(old_str)
58 var new_int = old_int - 1
59 document.getElementById('count').value=new_int
60 }
61 </script>
62 </body>
63 </html>
html标签学习2的更多相关文章
- java struts2入门学习--OGNL语言常用符号和常用标签学习
一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...
- 论文笔记：多标签学习综述（A review on multi-label learning algorithms）
2014 TKDE(IEEE Transactions on Knowledge and Data Engineering) 张敏灵,周志华 简单介绍 传统监督学习主要是单标签学习,而现实生活中目标样 ...
- HTML标签学习总结（2）
点我:HTLM标签学习总结(1) 11. 在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器. 语法: & ...
- video标签学习使用
video标签学习使用 学习前的理解 video是HTML5中的新标签,可以用来播放视频.对于不同的浏览器支持的视频格式不一样,但是具体浏览器支持的类型并不清楚. 支持的类型 视频的格式分为编码格式和 ...
- HTML基础标签学习
HTML基础学习 前言 HTML基础学习会由HTML基础标签学习.HTML表单学习和一张思维导图总结HTML基础三篇文章构成,文章中博主会提取出重点常用的知识和经常出现的bug,提高学习的效率,后续会 ...
- html中的一些标签学习
今天看手册学习到了HTML5很多属性.现在总结如下 <body bgcolor="BED1A2" text="FFFFFF" link="yel ...
- （转）DEDECMS模板原理、模板标签学习 - .Little Hann
本文,小瀚想和大家一起来学习一下DEDECMS中目前所使用的模板技术的原理: 什么是编译式模板.解释式模板,它们的区别是什么? 模板标签有哪些种类,它们的区别是什么,都应用在哪些场景? 学习模板的机制 ...
- HTML中的Head标签学习
在页面加载完成的时候,标签head里的内容,是不会在页面中显示出来的.它包含了像页面的<title>(标题) ,CSS(如果你想用CSS来美化页面内容),图标和其他的元数据(比如 作者,关 ...
- spring自定义标签学习
看到几篇很全的自定义标签,从定义到使用,写的很好. 这里我也是在那里学习的,对学习spring源码也很有帮助. 贴出来与大家共享. http://sammor.iteye.com/blog/11009 ...
- 2、head 标签学习
5秒自动刷新 <meta http-equiv="refresh" content="5,url:http://www.baidu.com" /> ...
随机推荐
- Luogu Daily & Original Blog (reproduced)
震惊,新的功能:可以按Ctrl + F 进行关键字查询. \(update\) on 10.26:把这两个月的日报也加入进去了,并且修复了几个错误. 本文会把小编用过的博客和比较好的博客放在这里. 可 ...
- ceph erasure默认的min_size分析
引言 最近接触了两个集群都使用到了erasure code,一个集群是hammer版本的,一个环境是luminous版本的,两个环境都出现了incomplete,触发的原因有类似的地方,都是有osd的 ...
- 通过ip访问项目
- 应聘阿里，字节跳动美团90%会问到的JVM面试题！ 史上最全系列！
Java 内存分配 • 寄存器:程序计数器,是线程私有的,就是一个指针,指向方法区中的方法字节码.• 静态域:static 定义的静态成员.• 常量池:编译时被确定并保存在 .class 文件中的(f ...
- 交换机通过Loopback Detection检测(设备所在网络环路)
组网图形 Loopback Detection简介 见上篇文章(详情见),不再赘述. 组网需求 如图1所示,某小型企业采用二层组网,所属VLAN为100.由于人员流动性大,网络拓扑变动频繁,变动往往 ...
- 如何在IDM中设置代理服务器？
很多时候,大家下载文件都是在国外的一些网站上进行下载,这样不可免会受到自身国内网络的限制,另一方面下载源为避免服务器带宽占用过多而限制下载速率,这就会导致文件下载极慢,甚至几KB每秒. 这种情况是不是 ...
- CENTOS 7平滑升级PHP到最新版7.3
安装Remi和EPEL数据源(仓库) rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm r ...
- python画猫并打包成EXE文件
因python自带有海龟画图库,尝试给爱猫的小仙女来画个猫咪. 1.代码如下 from turtle import * #两个函数用于画心 def curvemove(): for i in rang ...
- 【AcWing 113】【交互】特殊排序——二分
(题面来自AcWing) 有N个元素,编号1.2..N,每一对元素之间的大小关系是确定的,关系不具有传递性. 也就是说,元素的大小关系是N个点与N*(N-1)/2条有向边构成的任意有向图. 然而,这是 ...
- Java + maven + httpclient + testng + poi实现接口自动化
一.maven中引入httpclient.testng.poi依赖包 <project xmlns="http://maven.apache.org/POM/4.0.0" x ...