HTML5和CSS3

浏览器兼容问题

  由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重合，浏览器的兼容问题是程序员必须要客服的。
五大浏览器内核及代表作品及前缀：
Trident ： IE、360浏览器：-ms-
Gecko ： Firefox：-moz-
Webkit ： Safari：-webkit-
Presto ： Opera：-o-
Blink ： Google Chrome

表单补充

单选按钮

<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女

多选按钮

<input type="checkbox" name="like"/>吃饭
<input type="checkbox" name="like" checked="checked"/>睡觉（此选项默认选中）
<input type="checkbox" name="like" disabled="disabled"/>打豆豆（此选项禁选）
<input type="checkbox" name="like"/>玩

文件上传

<input type="file" name="" accept="image/gif"/>
允许gif格式文件上传

图像形式的提交按钮

<input type="image" src="submit.gif" alt=""/>

隐藏字段

<input type="hidden" name="country" value="郑州"/>
隐藏域在页面中对用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，
以利于被处理表单的程序所使用。点击提交按钮之后，在地址栏可见。

下拉菜单

<select name="">
		<option>菜单内容</option>
	</select>

文本域/多行文本框

<textarea name="名" cols="宽度" rows="行数"></textarea>

表单字段集

<fieldset></fieldset>
功能：相当于一个方框

字段级标题

<legend></legend>
功能：legend元素可以在filedset对象绘制的方框内插入一个标题。
legend元素必须是fieldset里的第一个元素。

提示信息标签

<label for="绑定控件id名"></label>
功能：label元素用来定义标签，为页面上的其他元素指定提示信息。
要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。

表格补充

单元格间距：border-spacing:value;（类似于cellspacing）
合并相邻单元格边距：border-collapse:separate（边框分开）/collapse（边框合并）
无内容单元格显示、隐藏：empty-cells:show/hidden;
表格布局算法table-layout：auto/fixed
表格标题caption

表格分割线：rules=“rows/cols/all/none/groups”
  rows：位于行之间的线条
  cols：位于列之间的线条
  all：位于行和列之间的线条
  none：没有线条
  groups：位于行组和列组之间的线条

行组（一个table中，只能包含一个thead，一个tfoot，但可有多个tbody）：

<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾

列组

<colgroup span="value" ></colgroup>
<col span="value" />

BFC

BFC，块级格式化上下文，它是指一个独立的块级渲染区域，只与Block-level BOX参与，该区域与外部无关。

BFC的生成
1、根元素
2、float的值不为none
3、overflow的值不为visible，可用(hidden、auto、scroll)
4、display的值为inline-block、table-cell、table-caption
5、position的值为absolute或fixed

HTML5新增标签

语义化标签，就是尽量使用有相对应含义的html标签。
优点：有利于搜索引擎的抓取（SEO的优化）；开发人员的维护（可维护性高，结构清晰）；有利于特殊终端的阅读（手机、个人助理等）。

1、header：头部信息
2、footer：页脚
3、nav：导航链接部分
4、main：主体。元素中的内容对于文档来说应当唯一。

5、section：独立的内容区块
6、aside：侧边栏导航
7、article：文章标签
8、hgroup： 标签用于对网页或区段（section）的标题进行组合
9、mark：标记，内容显示背景颜色，可以修改
10、address：地址标签
11、time： 表示日期或时间，也可以同时表示两者，相当于span

12、figure+figcaption：表示一段独立的内容，一般表示文档主体流内容中的一个独立单元。figcaption表示 figure 的标题，从属于 figure。并且，figure 中只能放置一个figcaption。

13、dialog：标记定义一个对话框(会话框)类似微信
open(指示这个对话框是激活的和能互动的。当这个 open 特性没有被设置，对话框不应该显示给用户。)

14、source：标记定义媒体资源

HTML5浏览器兼容，在head标签中加入

<!--[if lt IE 9]> 
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
<![endif]-->

表单属性

<input type=”search” />
<input type=”tel” />
<input type=”url” />
<input type=”email” />
<input type=”number” max=“最大值” min=”最小值” step=”数字间隔”/>
<input type=”range” max=“最大值” min=”最小值” step=”数字间隔”/>
<input type=”color” />
有关时间的：
<input type="date"  value="2018-07-22"  min="2018-01-01"  max="2018-12-31" />
<input type="month"/>
<input type="week" />
<input type="time" />  
<input type="datetime-local" />

新增表单属性：
1、required：表示该项是必填项，如果表单未填写，则会弹出提示信息；
2、placeholder：占位符，当获取焦点或者输入框中的值输入为空时显示，否则显示自己填写的内容
3、autocomplete：是否在输入的时候自动补全，默认为on，另一个值为off
4、multiple：支持用户输入多个此类行的文本，以逗号隔开，每个文本均会进行验证,适用于类型type为email属性值和file属性值
5、pattern：正则表达式，一般和title属性配合说明该项填写的内容

国家代码：<input type=“text” name=“country_code” pattern=“[A-z]{3}” title="三个字母的代码" />

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

CSS3选择器

1、属性选择器：
E[att]{} 带有att属性的E元素
E[att=“val”]{} att属性为val的E元素
E[att~=“val”]{} att属性带有val词汇的E元素
E[att|=“val”]{} att属性以val，-连接的E元素（如果att属性的值仅为val，也将被选择）

E[att*=“val”]{} att属性包含val字符串的E元素
E[att^=“val”]{} att属性以val开头的字符串的E元素
E[att$=“val”]{} att属性以val结尾的字符串的E元素

2、结构性伪类选择器
:first-line 用于为某个元素的第一行文字使用样式
:first-letter 用于为某个元素的第一个文字使用样式
:before 用于在某个元素之前插入一些内容
:after 用于在某个元素之后插入一些内容
:root 将样式绑定到页面的根元素中
:not 排除某个选择器样式
:empty 使用该选择器来制定当元素内容为空白时使用的样式
:target 使用该选择器来对页面中的某个target元素（锚记链接）指定样式
:first-child 单独指定第一个子元素的样式
:last-child 单独指定最后一个子元素的样式

:nth-child 选择子元素
:nth-of-type 选择某种类型的子元素

3、状态伪类选择器
:hover/:active/:focus
:read-only/:read-write
:enable/:disable
::selection

4、层级选择器
相邻兄弟选择器 li + li 后边相邻的选择器被选中，第一个li不会被选中
通用兄弟选择器 li ~ li 后面的所有li元素被选中
子选择器 ul > li ul的直接子元素li被选中

渐进增强、优雅降级

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

CSS3颜色阴影等

1、CSS3颜色，在rgb的基础上增加了控制alpha透明度的参数。
语法：color:rgba(R,G,B,A)，RGB分别取值0-255之间的正整数，A取值0~1之间。
2、文本阴影：text-shadow:5px 5px 5px #f66;
指定多个阴影：(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)
text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;
3、盒子阴影：box-shadow:5px 5px 10px #f66;
属性值依次为：
X轴偏移量：必需。水平阴影的位置，允许为负值。
Y轴偏移量：必需。垂直阴影的位置，允许为负值。
阴影模糊半径：可选，模糊距离。
阴影扩展半径：可选，阴影尺寸。
阴影颜色：可选，阴影的颜色，默认为黑色。
投影方式：可选，设置为inset时为内部阴影方式，默认为外阴影方式。
4、圆角：border-radius:5px;
只有一个值时：为四个角的半径；
两个值时：第一个值为左上角、右下角，第二个值为右上角、左下角；
三个值时：第一个值为左上角，第二个值为右上角、左下角，第三个值为右下角；
四个值时：依次为左上角、右上角、右下角、左下角。
5、图像边框（移动端订单确定页面使用居多）
border-image:url(url) A B C D 显示方式
border-image: url(borderimage.png) 25 25 25 25 stretch/repeat/round
ABCD表示当浏览器自动把边框所使用到的图像进行分隔时的上边距，右边距，下边距，左边距。