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" /> ...
随机推荐
- Linux安装JAVA并且配置环境
在写之前我先说一下我遇到的坑,我在配置环境的时候由于/etc/profile文件没有配置好导致系统彻底坏掉 1.ls vi等等命令使用不了,报错说找不到命令 2.在重启后虚拟机不能进入桌面 1.下载j ...
- Scrum转型(一) 为什么敏捷和Scrum
1.1 为什么敏捷 由于传统的瀑布模型管理方法无法满足现代某些软件产品开发过程的特点,我们需要使用敏捷的方法(例如,Scrum是一个让我们关注于在短时间里交付高质量商业价值的敏捷框架). 需求频繁变动 ...
- Ceph实现数据的'不拆分'
前言 之前看过一个朋友一篇文章,讲述的是Vsan为什么使用的是两副本,而ceph则大多数情况下需要三副本,当时个人观点是这个并不是关键点,但是在仔细考虑了问题的出发点以后,这个也可以说是其中的一个点 ...
- 【建议收藏】阿里P7总结的Spring注解笔记，把组件注册讲的明明白白
环境搭建 注解的方式是通过配置类的方式来注入组件,注解注入要比XML注入的方式简单,注解注入也需要在前者的基础上,添加一个spring-context的包,也是实际开发中常用的方式. 准备所需Jar包 ...
- 在IDM上设置防止过度抓取网站信息
在使用Internet Download Manager(IDM)下载器时,有时会发现IDM自带的抓取功能过于强大,以至于有时会抓取一些无效的链接.那么,该如何避免IDM的过度抓取呢? 图1:IDM的 ...
- 在多个浏览器中添加IDM插件
许多朋友下载了IDM(Internet Download Manager)不知如何使用.把包含视频的链接放到软件新建任务,下载下来的的却是网页而不是视频.该软件下载视频的其中一个方法,需安装浏览器插件 ...
- 思维导图软件iMindMap怎么使用
人人都说,思维导图记忆法实用.可是,我们应该如何使用思维导图呢?又该如何从思维小白摇身一变成为逻辑大神呢?俗话说,心急吃不了热豆腐,让我们一步一步来,慢慢接触使用思维导图吧. 小编作为"过来 ...
- Java Bean拷贝工具Orika原理解析
最近面试被问及对象拷贝怎样才能高效,实际上问的就是Orika或者BeanCopier的原理.由于网上对Orika原理的解析并不太多-因此本文重点讲解一下Orika的原理.(Orika是基于JavaBe ...
- CF1156D 0-1-Tree
路径考虑顺序. 显然合法的路径只有以下两种: 一段 \(0\) 加一段 \(1\) 或一段 \(1\) 加一段 \(0\). 全 \(0\) 或全 \(1\). 用并查集将边权为 \(0\) 和 \( ...
- Crossing River 题解(贪心)
题目链接 题目大意 t组数据(t<=20) 给你n个人(n<=1000)过河,每个人都有权值,一条船,每次船最多运2个人,每次的花费为两个人的较大花费 求所有人都过河需要的最小花费 题目思 ...