第十六天笔记，flex布局，HTML5语义化标签，智能表单

flex布局

设置在子元素中的属性：

1.order:控制它们在flex容器中出现的顺序，值越小越靠前，默认值0；

2.align-self:设置子元素自身的对齐方式，可以覆盖父元素的align-items属性

align-self：flex-start(上对齐)/flex-end(下对齐)/center(居中对齐)/stretch(拉伸)/baseline(基线对齐)/auto

3.flex-grow:长大延伸，默认值为0

4.flex-shrink:缩小缩水，默认值为1，设置0代表不缩水

5.flex-basis:基本宽度

6.flex:grow shrink basis开发中使用最多的

CSS3多列布局

基本属性

column-count:设置列的具体个数

column-width：列的宽度

column-gap:列的间隙

column-rule:列的宽度，样式和颜色

column-span:设置元素应该跨多少列

列宽属性

column-width:取大优先

列数属性

column-count

间距属性

column-gap

列边框样式

column-rule

column-rule-width:1px

column-rule-style:dashed

column-rule-color:#000;

跨列属性

column-span

怪异盒模型：

width:100px=padding+border

box-sizing: border-box;

box-sizing: content-box;

video和audio

video视频

<video controls="controls">     
<source src="movie.mp4" type="video/mp4">       <source src="movie.ogg" type="video/ogg">
</video>

audio音频

<audio src="someaduio.wav">Audio元素</audio>

controls:显示控件，进度条；

autoplay:视频就绪后马上播放视频

loop:重复播放

muted：静音

poster:规定视频正在下载时显示的图像，直到用户点击播放按钮

智能表单

新增输入类型：

input:

type="email"限制用户必须输入Email类型

type="url"限制用户必须输入url类型

type="range"产生一个滑动条表单

type="search"产生一个搜索意义的标签

type="color"生成一个颜色选择的表单

type="time"限制用户必须输入时间类型

type="month"限制用户必须输入月类型

type="week"限制用户必须输入周类型

type="datetime-local"选取本地时间

type="number"只能输入数字min 最小值max 最大值step 数字间隔

日期和时间的：(date, month, week, time, datetime,datetime-local)

新属性

Datalist ：选项列表

<input type="url" list="url_list" name="link" />
<datalist id="url_list">
  <option label="W3School" value="http://www.W3School.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

placeholder：文本框处于为输入状态时显示的输入提示

autofocus：给文本框、选择框、或者按钮控件加上该属性，打开页面时，该控件自动获取焦点，一个页面只能有一个

required:验证输入不能为空

list:结合datalist元素使用

autocomplete：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十分方便的功能。只有三种：on/off/""。on可是显示指定候补输入的数据列表，使用datalist元素与list属性提供候补输入的数据列表，自动完成时，可以讲该datalist元素中的数据作为候补输入的数据在文本框中显示： <input type="text" name="greeting" autoconplete="on" list ="greeting">

novalidate：取消验证，对form表单添加novalidate属性，即使form表单中的input添加了required属性，也将不进行验证

multiple：可以输入一个或多个值，每个值之间用逗号隔开