结构层HTML + 表现层CSS
一、HTML5 超文本标记语言
- 什么是HTML5
-
用于取代1999年所定制的HTML4.01和XHTML1.0标准的html标准版本
-
强化Web网页的表现性能，其次追加了本地数据库等Web应用的功能
-
是包括HTML、CSS、JavaScript在内的一套技术组合
-
特性【优势】：各大浏览器厂商的支持 跨平台 兼容性 市场需求
-
HTML5结构元素
- 之前的版本中
-
开发者不同,ID的命名也不同导致代码可读性差
- 不能很好的定位标记，明确某标记在页面中的位置和作用
- 代码不够简洁和高效，不利于搜索引擎搜索
- HTML5新增加的结构元素
- header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息。
- nav 可以作为页面导航的链接组
- section web页面中的一块独立区域 页面中的一个内容区块，通常由内容及其标题组成
- article 独立的文章内容代表一个独立的、完整的相关内容块，可独立于页面其它内容使用
- aside 相关内容或应用（常用语侧边栏）非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容
- footer 页面或页面中某一个区块的脚
- Html5的设计以效率优先为原则，要求样式和内容分离，因此在实际开发中，必须使用css来定义样式
- HTML5媒体元素
- 一种是视频媒体元素标签<video> 还有一种是音频<audio> embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
- 【属性】src是视频路径
- 【属性】controls是控制播放器开始 关闭 音量调节等
- 【属性】source 也可以输入地址，避免各个浏览器不兼容的问题
- 【属性】autoplay是自动播放
- HTML5其他元素
- dialog：对话框标签，内容表现为“浮起来的对话框”
- progress：进度条标签（单标签）表现为一个进度条的样子；代码<progress value="50" max="100">
- mark：标记标签，文本有“突出显示”效果（通常是显示为黄色背景）
- time：时间标签，表示其内容是一个时间；跟span一样的表现效果
- address：地址标签，表示其内容是一个地址
- canvas：画布标签，可以在其上面作画（需要后续js知识才能实现）http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas vs . SVG
- details/summary：两者配合使用，实现文本的“详情/概述的折叠效果”、
- HTML5新增元素、标签总结 https://www.cnblogs.com/ksl666/p/5964810.html
- HTML5新增的标签和属性归纳 https://blog.csdn.net/garvisjack/article/details/54754928
- Html5表单 http://www.w3school.com.cn/html5/html_5_form_input_types.asp 【* Date Pickers（日期选择器）】
- Html5全局属性 【新增全局属性的概念，是指可以对任何元素都使用的属性】
二、CSS3 http://www.runoob.com/css3/css3-tutorial.html
- CSS的优势
- 内容与表现分离
- 表现的统一
- 丰富的样式，使得页面布局更加灵活
- 减少页面的代码量，提高页面的浏览速度，节省网络带宽
- 运用独立于页面的CSS，还有利于网页被搜索引擎收录
- 高级选择器
- 边框
- border-radius 圆角
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
- box-shadow 盒子阴影
- border-image 便捷图片
- 文本效果
- text-shadow 文本阴影
- text-overflow 文本溢出解决
- word-wrap 自动换行属性允许您强制文本换行
- word-break 单词拆分换行
- 背景
-
Background-size 规定背景图片大小
-
Background-origin 规定定位区域
-
Bacaground-clip 规定背景图片绘制区域
- background-image
- background-position 属性设置背景图像的起始位置。
-
字体 @font-face http://www.runoob.com/css3/css3-fonts.html
-
- 透明度设置
-
Background：rgba（0，0，0，0.5）
-
Opacity：0.8
-
Background-color：transparent；（不能设置半透明）
-
Filter：alpha（opacity=x）（IE专用）
-
- 高级特效
- 2D变形转换 transform
- translate（） 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
- rotate（） 在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
- scale（） 该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
- skew(<angle> [,<angle>]) 分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
- matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
-
3D变形转换
-
Transform（）
-
transform-origin 允许改变元素的位置
-
transform-style 潜逃元素在3D空间如何显示
-
perspective 规定3D元素的透视效果
-
Perspective-origin 规定3D元素的底部位置
-
Backface-visibility 元素在不面都屏幕时是否可见
-
注意：如果想要某一个元素进行3D转换，必须在父元素上添加transform-style，而且该属性值必须设置为preserve-3d
-
- transition 属性的过渡效果 http://www.runoob.com/css3/css3-transitions.html
- animation 属性的动画效果 http://www.runoob.com/css3/css3-animations.html
- gradient 属性的渐变效果 http://www.runoob.com/css3/css3-gradients.html
- 2D变形转换 transform
- 多列布局 http://www.runoob.com/css3/css3-multiple-columns.html
- 清除浮动，防止父级边框塌陷的四种方法：
- 浮动元素后加空div：很简单，空div会造成HTML代码冗余；
- 设置父元素的高度：很简单，元素固定高会降低元素可扩展；
- 父级添加overflow属性：很简单，但是有下拉框的场景不能用；
- 父级添加伪类after：写法上比上面稍微复杂一点，但是没有副作用，推荐使用