h5c3面试整理

一、表单的组成部分

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   尾行