HTML5与CSS3

HTML5学习笔记1HTML简介1.1什么是HTML？HTML是用来描述网页的一种语言。HTML指的是超文本标记语言(HyperTextMarkupLanguage)。HTML不是一种编程语言，而是一种标记语言(markuplanguage)。标记语言是一套标记标签(markuptag)HTML使用标记标签来描述网页。1.2HTML标签HTML标记标签通常被称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如htmlHTML标签通常是成对出现的，比如b和/b，标签对中的第一个标签是开始标签，第二个标签是结束标签，开始和结束标签也被称为开放标签和闭合标签。1.3HTML4.01与XHTML具有很好的兼容性，XHTML是更严谨更纯净的HTML版本，XHTML要求HTML必须是一份XML文档。XHTML规范：属性名称必须小写属性值必须加引号属性不能简写用Id属性代替name属性XHTMLDTD定义了强制使用的HTML元素1.4HTML5HTML5成为HTML、XHTML以及HTML、DOM的新标准。1.5结构变化只要将HTML4中的DTD改为!DOCTYPEhtml。支持两种方式改变页面字符集：1.6语法变化（1）标签不再区分大小写、（2）元素可以省略结束标签、（3）允许省略属性值的属性，（4）允许属性不适用引号。2HTML5常见元素及属性2.1Html5保留的通用元素2.1.1基本元素1.1文本格式化元素2.1.3语义相关元素2.1.4保留超链接和锚点2.1.5保留列表2.1.6保留图像2.1.7表格相关元素2.1.8框架相关元素2.2新增通用属性2.2.1contentEditable属性该属性设置为true，那么文本框，文本域等元素变为可编辑的，此属性具有可继承性，如果父元素是可编辑的，子元素也是可编辑的，除非显示指定值为false。2.2.2designMode属性2.2.3hidden属性2.2.4spellcheck属性2.3新增常用元素2.3.1文档结构元素2.3.2新增语义相关元素2.3.3新增meter和progress2.4头部和元信息2.5新增的拖放API2.5.1启动拖放2.5.2接收放2.5.3DataTransfer对象2.5.4拖放行为2.5.5改变拖放图标3表单相关元素3.1原有表单及控件3.1.1表单元素3.1.2input元素3.1.3使用label定义标签3.1.4button定义按钮3.1.5列表框和下拉列表3.1.6文本域3.2新增元素与属性3.2.1为表单新增属性（1）form属性（2）formation属性（3）formXXX属性（4）autofocus属性（5）placeholder属性（6）list属性（7）autocomplete属性3.2.2input元素3.2.3output元素3.3增强文件上传域3.3.1新增file和FileList对象3.3.2FileReader读取文件内容3.4新增校验3.4.1用校验属性完成校验3.4.2调用checkValidity方法校验3.4.3自定义错误提示4绘图4.1使用canvas元素4.2绘图4.2.1绘图基础4.2.2绘制几何图形4.2.3绘制字符串4.2.3设置阴影4.2.4使用路径4.2.6绘制曲线4.2.7绘制位图4.3图形特效4.3.1坐标变换4.3.2坐标变换与路径变换结合4.3.3矩阵变换4.4控制叠加风格4.5控制填充风格4.5.1线性渐变4.5.2圆形渐变4.5.3位图填充4.6位图处理4.6.1裁剪4.6.2像素处理4.7位图输出5多媒体支持5.1使用audio与vedio元素5.2用js脚本控制播放5.2.1HTMLAudioElement与HTMLVideoElement支持方法5.2.2HTMLAudioElement与HTMLVideoElement属性5.3事件监听5.3.1事件5.3.2监听器CSS部分1级联样式单与css选择器1.1概述1.2基本使用1.2.1外部引入1.2.2导入外部样式单1.2.3使用内部CSS样式1.2.4使用内联样式1.3CSS选择器1.3.1元素选择器1.3.2属性选择器1.3.3ID选择器1.3.4class选择器1.3.5包含选择器1.3.6子选择器1.3.7兄弟选择器1.3.8组合选择器1.4伪元素选择器1.4.1内容相关属性1.4.2插入图像1.4.3直插入部分图像1.4.4配合quotes属性执行输入1.4.5配合counter-increment属性添加编号1.4.6自定义编号1.4.7添加多级编号1.5新增的伪类选择器1.5.1结构性伪类选择器1.5.2UI元素状态伪类选择器1.5.3浏览器专属属性1.5.4：not和：target1.6在脚本中更改样式1.6.1随即改变页面的背景色1.6.2动态增加立体效果2字体与文本相关属性2.1字体相关属性2.1.1添加阴影2.1.2添加多个阴影2.1.3font-size-adjust属性微调字体大小2.2颜色表示方法2.3文本相关属性2.3.1文本自动换行2.3.2长单词与URL换行2.4新增服务器字体2.4.1使用服务器字体2.4.2定义粗体斜体2.4.3优选使用客户端字体3背景，边框，补丁相关属性3.1背景相关属性3.1.1背景图片固定3.1.2新增背景相关属性2.1.3新增的多背景图片3.2边框相关属性3.2.1渐变边框3.2.2圆角边框3.2.3图片边框3.3补丁相关属性3.3.1内补丁相关属性3.3.2外补丁相关属性4大小，定位，轮廓相关属性4.1大小相关属性4.1.1box-sizing属性4.1.2resize属性4.2定位相关属性4.3轮廓相关属性5盒模型与布局相关属性5.1布局相关属性5.1.1float实现多栏布局5.1.2clear实现换行5.1.3clip属性控制裁剪5.1.4控制组件滚动条5.2盒模型和display属性5.2.1两种基本盒模型5.2.2none值5.2.3inline-block盒模型5.2.4inline-table盒模型5.2.5表格相关盒模型5.2.6list-item盒模型5.2.7run-in盒模型5.3盒模型添加阴影5.3.1box-shadow属性5.3.2对表格或单元格添加阴影5.4多栏布局5.4.1新增多栏功能5.4.2盒模型实现多栏布局6表格，列表相关属性6.1表格相关属性6.2列表相关属性6.3控制光标相关属性6.4mediaquery功能6.4.16.4.27变形与动画相关属性7.1变性支持7.1.1四种基本变形7.1.2同时指定多种变形7.1.3指定中心点7.1.4矩阵变换7.2transition动画7.2.1多个属性同时渐变7.2.2指定渐变的速度7.3Animation动画7.3.1同时改变多个动画7.3.2鱼眼效果