一、表单的组成部分
1.表单标签 form
action 表单提交的地址
methods 提交的方式
name 表单的名字
2.表单域 8个按钮
普通输入框text
密码框password
单选框radio
多选框 checkbox
多行文本框 textarea 选择框 select>option
普通按钮 <input type = 'button'>
重置按钮 <input type = 'reset'>
3.提交按钮
<input type = 'submit'>
使用
<form action ="" methods="" name=“”>
<div>
<lable for ="">账号</lable>
<input type='text' id="2" name="" value="">
</div>
二、圣杯布局的集中方式
第一 padding值
大盒子中包含三个子盒子
大盒子宽度100%,相对定位且设置左右padding值
左右两个子盒子固定宽高,且绝对定位到两边
中间盒子设置宽100%
第二 magin值
大盒子中包含三个子盒子
大盒子宽度100%,相对定位
左右两个子盒子固定宽高,且绝对定位到两边
中间盒子不要设置宽,设置左右magin值
第三 flex布局
大盒子中包含三个子盒子
大盒子宽度100%,display:flex;
左右两个子盒子固定宽高
中间盒子 设置 flex:1;
第四 calc函数
大盒子中包含三个子盒子
大盒子宽度100%,相对定位
左右两个子盒子固定宽高,且绝对定位到两边
中间盒子设置宽 calc(100% - 两边子盒子宽度和) 绝对定位到挨着左边盒子/右边盒子
h5c3向比较htmlcss多了什么
h5新增标签
导航标签 nav 侧导航 aside 文章标签 article
<header>我是网页的头部区域</header>
<section>我是网站的中间区域 </section>
<footer>我是网页的底部区域</footer>
新增按钮 <button>按钮</button>
<progress value= "50" max="150">
</progress>
max最大的进度值
value:实际值
新增表单
<label for="">邮箱</label> 提交时验证是否含有@符号
<input type="email" >
<label for="">地址</label> url 提交验证是否含有http://或https://
<input type="url">
<label for="">数字</label> 只能输入数字
<input type="number">
<label for="">搜索</label> 搜索框 右侧有一个小x号,可以清除文本内容
<input type="search">
<input type="range" max="100"value ="25" >
range显示滚动条范围
max最大值
value 实际值
<label for="">选择颜色</label>
<input type="color">
<label for="">时间</label>
<input type="time">
<label for=""></label>
<input type="date">
<label for=""></label>
<input type="month">
<input type="submit" value="登录">
新增颜色
颜色hsl
h:hue 色轮(色相、色调)0~360 0与360都是红色 120是绿色 240是蓝色
s:saturation 饱和度 是一个百分比值:0%是灰色 100%是全彩 一般设置100%
l:lightness 亮度 是一个百分比值 %0是黑色 100%是白色的 一般设置50%
盒子阴影box-shadow/文本阴影text-shadow:水平阴影 垂直阴影 阴影的模糊距离 阴影颜色 正数往右移垂直向下移 负数在左移向上移
四、怪异盒模型和普通盒模型有啥区别
标准盒与怪异盒的区别在于他们的总宽度的计算公式不一样。 标准模式下总宽度=width+margin(左右)+padding(左右)border(左右);怪异模式下总宽度=width+margin(左右)
五.弹性布局
display :flex 表明了当前的容器是弹性父容器
justify-content:flex-start(默认值 开始对齐)|flex-end (结束对齐)|center(居中)|space-between
第一个项目距离主轴起点和最后一个项目距离主轴终点为0
|space-around
第一个项目和最后一个项目为中间项目间隔的一半|
间隔平分space-evenly
flex-decoration:row(默认值)|row-reverse|column|column-reverse 设置项目排列方向(主轴的方向)
align-items:stretch(默认值)|center |flex-end|baseline|flex-start 设置项目在交叉轴方向上
flex-wrap:nowrap(默认值 不换行)|wrap(换行)|wrap-reverse(反转)
align-content:flex-start 首行在交叉轴起点开始,行间不留间距 flex-end 尾行