html基础标签笔记

最新推荐文章于 2024-09-07 21:02:27 发布

xuhan97

最新推荐文章于 2024-09-07 21:02:27 发布

阅读量218

点赞数 2

本文链接：https://blog.csdn.net/xuhan97/article/details/78428811

版权

 
  
 控制前后颜色 

 
 .div:before{ 

 
 center:"你猜今咋样" 

 
 color: blue; 

}

 
 .div:after{ 

 
 content:"今天不困" 

}

 
 .div{ 

 
 color:red; 

}

 
  
 相对位移 

 
 相对位移：参照物是物体原来的位置 

 
 设置相对定位 并没有脱离当前的层级 所以下面的元素 不会挤上来 偏离计算的位置 自身左上角 

 
 div{ 

 
 width: 100px; 

 
 height: 100px; 

}

 
 .div1{ 

 
 background-color: red; 

}

 
 .div2{ 

 
 background-color: black; 

 
 position: relative; 

 
 left: 20px; 

 
 top: 20px; 

}

 
 .div3{ 

 
 background-color: yellow; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
 <div class="div1"></div> 

 
 <div class="div2"></div> 

 
 <div class="div3"></div> 

 
  
 绝对定位 

 
 绝对定位参照物：从父级标签开始寻找 如果没找到就找父级的父级 如果父级的父级有定位效果那么就会以父级的父级为参照物 如果父级的父级的父级也没有那么就会以body标签为参照物（会找最近的参照物作为参照物） 

 
 下面是一body为参照物 

 
 div{ 

 
 width: 100px; 

 
 height: 100px; 

}

 
 .div1{ 

 
 background-color: red; 

}

 
 .div2{ 

 
 background-color: black; 

 
 position: absolute; 

 
 left: 20px; 

 
 top: 20px; 

}

 
 .div3{ 

 
 background-color: green; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
 <div class="div1"></div> 

 
 <div class="div2"></div> 

 
 <div class="div3"></div> 

 
 下面以父级为参照物 

 
 div{ 

 
 width: 100px; 

 
 height: 100px; 

}

 
 .div1{ 

 
 background-color: red; 

 
 margin-top: 200px; 

 
 position: absolute; 

}

 
 .div2{ 

 
 background-color: black; 

 
 position: absolute; 

 
 left: 50px; 

 
 top: 50px; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
 <div class="div1"> 

 
 <div class="div2"></div> 

 
 </div> 

 
  
 透明度 

 
 opacity: 1; 

 
  
 浮动 

 
 浮动如果都不设置浮动效果 那么两个div处于同一个文本流 

 
 相当于同一层面上 

 
 当你设置 div2浮动效果时 

 
 这div2 脱离的原有的流 左浮动 

 
 div2 会出入 div1的底牌排列 

 
 div1和div2同时做浮动  

 
 这时会按div创建的顺序来排列 

 
 向左浮动：float: left；  

 
 向右浮动：float: right； 

 
  
 表单的操作 

 
 <form action="#" method="get"> 

 
  
 <!--表单可以提交的内容--> 

 
 <!--常用的文本框 

 
 输入服务器的形式 

 
 key-value的形式 

 
 username->相当于健值对key 

-->

 
 账号：<input type="text" name="username" placeholder="请输入账号" /><br /> 

 
  
 <!--密码输入框--> 

 
 密码：<input type="password" name="" placeholder="请输入密码" /><br /> 

 
  
 <input type="file" name="" /><br /> 

 
 <!--文件输入框 name一般填写文件的名字--> 

 
 <!--数值的输入框--> 

 
 出生年月：<input type="number" max="30" min="0" step="2" /><br /> 

 
  
 <!--每次增加或减少的值 step--> 

 
  
 <!--大文本输入框--> 

 
 自我简介：<textarea></textarea><br /> 

 
  
 <!--单选框--> 

 
 性别：<br /> 

 
 男<input type="radio" name="gender" value="男" /><br /> 

 
 女<input type="radio" name="gender" value="女" /><br /> 

 
  
 <!--复选框--> 

 
 你喜欢的类型:<br /> 

 
 男<input type="checkbox" name="sex" value="nan" /><br /> 

 
 女<input type="checkbox" name="sex" value="nv" /><br /> 

 
  
 <!--选择器--> 

 
 国籍： 

 
 <select name=""> 

 
 <option value="ch">中国</option> 

 
 <option value="mg">美国</option> 

 
 <option value="fg">法国</option> 

 
 </select><br /> 

 
  
 <!--隐藏提交 

 
 你的信息 设备信息 地址 

-->

 
 <input type="hidden" name="hidden" value="" /> 

 
  
 <!--点击按钮 出发事件--> 

 
 <input type="button" οnclick="alert('你点到我了')" value="点我啊" /><br /> 

 
 <button οnclick="alert('你又点到我了！！！')">点我啊啊啊啊啊</button><br /> 

 
  
 <!--提交按钮--> 

 
 <input type="submit" value="确定" /><br /> 

 
 </form> 

关注