HTML5标签及其属性

一  表单元素及其属性

在HTML中，表单元素有：text 、password 、  textarea 、  checkbox、    radio、  file、 select 、button 、 submit 、reset，

分别为：文本框、密码、文本域、选择框、选择圆、文件、多选项、按钮、提交、重置。

而在HTML5中，表单如下表示：email、url、date、week、month、time、number、color、range、search，

分别为：邮件、网址、日期、周、月、时间、数字、颜色、滑动条，搜索框。执行结果如下所示：

H5的表单属性：

• required --------- 必填项
• autocomplete --------- 自动记忆
• plactholder --------- 提示信息
• pattern  --------- 正则表达式
• autofocus --------- 自动聚焦

二  各种选择器

（1）关系选择器

• e f--------- 包含选择器
• e>f----------父子选择器
• e+f --------- 相邻选择器 ：e元素后所有的f元素
• e~f --------- 兄弟选择器 ：e后面所有的兄弟元素f

（2）伪类选择器

• :link--------- 访问前
• :hover--------- 鼠标悬停时
• :active --------- 点击激活状态
• :visited --------- 访问后
• :focus ---------  获取焦点时

（3）UI元素状态伪类选择器

• e:checked --------- 选中状态 （只针对单选按钮和复选框）
• e:enabled --------- 可编辑状态 （默认状态）
• e:disabled ---------  禁用状态

（4）属性选择器

e[attr]--------e[attr="value"]

• e[attr!="value"]  包含空格及value的e元素
• e[attr|="value"]  以value开头且有分隔符-的e元素
• e[attr^="value"]  以value开头的e
• e[attr$="value"]   以value结尾的e
• 有[attr*="value"]  attr中包含value的e标签

（5）伪对象选择器

• e:first-letter --------- 第一个字符
• e:first-line   --------- 第一行
• e:before  ---------     前
• e:after     ---------    后
• e::selection ---------   选中状态时触发的效果

（6）结构伪类选择器

• ：root  ---------  根选择器
• e:first-child---------    第一个子元素e
• e:last-child  ---------   最后一个子元素e
• e:only-child  ---------   唯一的一个子元素e
• e:nth-child(n) ---------  第n个子元素e n=odd  even 数字  公式  
• e:nth-last-child(n) ---------  倒数第n个子元素e
• e:first-of-type---------   第一个同类型元素
• e:last-of-type ---------  最后一个同类型元素
• e:only-of-type---------   唯一同类型元素
• e:nth-of-type（n）---------   第n个同类型元素e n=odd  even 数字  公式  
• e:nth-last-of-type(n)---------   倒数第n个同类型元素e
• e:empty ---------  空元素

三  盒子标签及其属性

（1）box-shadow --------- 盒子阴影

#boxshadow{
            width: 400px;
            height: 300px;
            padding: 10px;
            box-shadow:1px 2px 15px rgba(0,0,0,.5);
            background: #0dcd0c;
            position: relative;
        }

box-shadow ---------  水平位置  垂直位置 模糊距离 阴影大小  阴影颜色  [内置或外置]。

（2）背景

• background-origin:border-box,padding-box,content-box---------圆心位置
• background-clip:border-box,padding-box,content-box
• background:linear-gradient(方向，颜色，……)---------线性渐变
• background:repeating-linear-gradient(方向，颜色……) ---------重复线性渐变
• background:repeating-linear-gradient(方向，颜色……) ---------重复线性渐变
• background:repeating-radial-gradient() ---------重复径向渐变
• 大小：

closest-side ---------最近的边

farthest-side   ---------最远的边

closest-corner --------- 最近的角

farthest-corner --------- 最远的角

• 形状：

circle 或 ellipse（默认椭圆）

（3）文本的列

• column-count:分列数
• column-gap:栏间距
• column-rule:分隔线

（4）弹性盒子

• 父元素中添加

display:flex;  

display:-webkit-flex;

• 添加方向

祖先元素添加:direction:ltr/rtl   ----------排列方向：从左到右/从右到左
父元素：flex-direction:row/row-reverse/column/column-reverse  ----------按行分/按列分 

• 子元素排列方式 ：（父元素添加）

justify-content:flex-start/flex-end/center/space-between/space-around

• 子元素垂直对齐方式(父元素中添加)

align-items:flex-start/flex-end/center/baseline/stretch----------顶端/底端/居中/基线/默认auto

• 子元素换行方式（父元素添加）

flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit----------单行（不换行，会溢出）/多行，自动换行/换行，反转排列/初始化默认效果相似/默认（不换行）

• align-content  设置行对齐方式 （添加到父元素中）

前提条件是flex-wrap为wrap时才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around----------默认/顶端、底端、居中、两端、平均分布

• 子元素顺序（子元素添加）

order：1----------值越小越靠前 可以为负值

• 子元素对齐（子元素添加）

margin:auto;对象自动留白

• 子元素纵向对齐（子元素添加）

align-self:auto/flex-start/flex-end/center/baseline/stretch----------有父元素按align-item值走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走

• 按比例分配元素（子元素添加）

flex:比例值

代码如下：

.box1>.b-2{
            /*order:-1;*/
            /*margin: auto;*/
            align-self: stretch;
            flex: 3;
        }
        .box1>.b-1{
            flex:1;
        }
        .box1>.b-3{
            flex:1;
        }

执行结果为：

•