HTML的表单标签和CSS的选择器、浮动、和盒子模型解析

  • A+
所属分类:HTML5

Html的表单标签

应用场景

登录 注册等等

作用

只要需要将页面用户填写的数据传递给后台,都需要使用表单标签

使用

标签格式:表单标签不是由一个组成,而是有多个组成

<form>
  1 文本框    <input type="text" />
  2 密码框    <input type="password" />
  3 单选框    <input type="radio" />
  4 复选框    <input type="checkbox" />
  5 日期框    <input type="date" />
  6 隐藏框    <input type="hidden" />
  7 文件框    <input type="file" />
  8 下拉框    <select><option>内容</option></select>
  9 文本域    <textarea></textarea>
  10 提交按钮  <input type="submit" />
  11 普通按钮  <input type="button"/>
  12 重置按钮  <input type="reset" />
<form>
细节:所有的表单标签都要写在<form></form>里面

form标签的属性

form标签的2个属性:action method
action:指定表单提交到哪里的地址
method:提交方式  get提交  post提交
细节:get提交和post提交的区别
get提交方式会将整个表单提交的内容都显示在地址栏上(默认不写就为get)
post提交方式不会将整个表单提交的内容显示在地址栏上

所有标签的核心属性

name属性:表单提交数据是以key=value的形式进行提交的 name属性就是用来设置key名的 
细节:表单数据要想提交 必须得有name属性
value属性:用来设置value值的 一般只给单选框 复选框设置  其余标签会将用户填写的内容当成是value属性值
细节:按钮的value属性是用来设置按钮名称的

单选框/复选框特有的属性

checked="checked" 被选中

下拉框特有的属性

selected="selected" 被选中

CSS样式

概述

CSS:Cascading Style Sheets —-层叠样式表 专门用于网页的美化

css的美化初体验:有三个font标签 需要设置字体大小为70 颜色为红色

结论:比HTML美化的功能更加强大,可以实现HTML不能实现的美化效果

CSS使用

1.css的代码三种引入方式

1、内嵌方式(行内方式) 内部方式  外部方式
2、内嵌方式(行内方式) 
需要在每个标签内部加上style属性
属性的值:key1:value1;key2:value2... 
3、内部方式  
需要在<head></head>之间定义标签<style>
标签名{
key1:value1;
key2:value2;
}
细节:css的注释: /* 注释内容 */
4、外部方式 条件:需要引入外部的文件
在外部创建一个css样式文件写样式
在需要的页面将css文件引入 <link rel="stylesheet" href="文件地址">
外部方式可以用于多个页面
外部了解方式:<style type="text/css">
            @import url("css文件地址"); 
            </style>

细节:三种引入方式的优先级:就近原则 谁离标签近谁的优先级高

CSS的选择器

作用:用来获取页面的标签的

条件:只能使用内部样式和外部样式来控制选择器

1 基本选择器

元素选择器:可以用来设置所有标签 根据标签名直接获取标签
类选择器:可以用来设置一组标签的 需要在标签上设定class属性根据class属性名获取标签
ID选择器:可以用来设置单个标签  需要在标签上设定ID属性根据id属性名获取标签
细节:ID选择器>类选择器>标签选择器

2 扩展选择器

并集(组合)选择器 多个选择器的集合           选择器1,选择器2,选择器3{属性}    
层级选择器 父元素下所有的子孙元素           元素1>元素2      元素1 元素2(包含子子孙孙)
<div>
    <div>
        <div></div>
    <div>
    <div><div>
    <div><div>
<div>
属性选择器 只要包含的有属性名就能被选中  
伪类选择器 同一个元素在不同的操作状态下呈现不同的样式 例如超链接
元素:link 正常状态
元素:hover 鼠标悬停
元素:active 正在激活
元素:visited 访问过的

CSS属性介绍

设定背景
       background-color  设置元素的背景颜色
       background-image  把图像设置为背景
       background-repeat 设置背景图像是否重复及如何重复    
设定文本
       color 设置文本颜色
       text-align 对齐元素中的文本
       text-indent 缩进元素中文本的首行
       text-decoration 去除超链接的下划线
       line-height  设置行高
设定字体
       font-size 设置字体的尺寸
       font-family 设置字体属性(楷体)
       font-style 设置字体风格(斜体)
       font-weight 设置字体的粗细
元素的显示和隐藏属性
       display
       取值:
          none 设置元素不可见
          inline 设置元素为内联元素
          block 设置元素为块级元素

CSS的浮动

作用:可以让div在一行

属性:float 取值:left right

clear清除浮动

left:清除自身的左浮动

right:清除自身的右浮动

both:不管左浮动还是右浮动都清除自身

盒子模型

css认为所有元素就是一个盒子

盒子组成:内容 边框 内边距 外边距

外边距 :margin 盒子和盒子或盒子和页面之间的距离

取值:left right top bottom

内边距 : padding 盒子中的内容和盒子边框之间的距离

取值:left right top bottom

标准盒子(默认):内容不变,盒子变化

属性控制(默认):box-sizing:content-box

怪异盒子:盒子不变 内容变化

属性控制:box-sizing:border-box
历史上的今天
六月
15
  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
AnyNode:最便宜的国外服务器
美女讲师教你学C语言
网站https安全证书安装,伪静态配置
动力节点最牛Java自学基础教程

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: