结构层HTML + 表现层CSS

结构层HTML + 表现层CSS

---

一、HTML5 超文本标记语言

• 什么是HTML5

1. 用于取代1999年所定制的HTML4.01和XHTML1.0标准的html标准版本
2. 强化Web网页的表现性能，其次追加了本地数据库等Web应用的功能
3. 是包括HTML、CSS、JavaScript在内的一套技术组合
4. 特性【优势】：各大浏览器厂商的支持  跨平台  兼容性  市场需求

• HTML5结构元素

1. 之前的版本中
• 开发者不同,ID的命名也不同导致代码可读性差
• 不能很好的定位标记，明确某标记在页面中的位置和作用
• 代码不够简洁和高效，不利于搜索引擎搜索
2. HTML5新增加的结构元素
• header 页面或页面中某一个区块的页眉，通常是一些引导和导航信息。
• nav 可以作为页面导航的链接组 
• section web页面中的一块独立区域 页面中的一个内容区块，通常由内容及其标题组成  
• article  独立的文章内容代表一个独立的、完整的相关内容块，可独立于页面其它内容使用  
• aside 相关内容或应用（常用语侧边栏）非正文的内容，与页面的主要内容是分开的，被删除而不会影响到网页的内容  
• footer 页面或页面中某一个区块的脚
• Html5的设计以效率优先为原则，要求样式和内容分离，因此在实际开发中，必须使用css来定义样式

• HTML5媒体元素

1. 一种是视频媒体元素标签<video>   还有一种是音频<audio>  embed：嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
2. 【属性】src是视频路径
3. 【属性】controls是控制播放器开始 关闭 音量调节等
4. 【属性】source 也可以输入地址，避免各个浏览器不兼容的问题
5. 【属性】autoplay是自动播放

• HTML5其他元素

1. dialog：对话框标签，内容表现为“浮起来的对话框”
2. progress：进度条标签（单标签）表现为一个进度条的样子；代码<progress value="50" max="100">
3. mark：标记标签，文本有“突出显示”效果（通常是显示为黄色背景）
4. time：时间标签，表示其内容是一个时间；跟span一样的表现效果
5. address：地址标签，表示其内容是一个地址
6. canvas：画布标签，可以在其上面作画（需要后续js知识才能实现）http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp   Canvas vs  . SVG
7. details/summary：两者配合使用，实现文本的“详情/概述的折叠效果”、
8. HTML5新增元素、标签总结 https://www.cnblogs.com/ksl666/p/5964810.html
9. 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的优势 

1. 内容与表现分离 
2. 表现的统一
3. 丰富的样式，使得页面布局更加灵活
4. 减少页面的代码量，提高页面的浏览速度，节省网络带宽
5. 运用独立于页面的CSS，还有利于网页被搜索引擎收录

• 高级选择器
• 
• 边框
  • border-radius 圆角 
  1. 1. 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
     2. 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
     3. 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
     4. 一个值： 四个圆角值相同
  • 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
• 多列布局 http://www.runoob.com/css3/css3-multiple-columns.html
• 清除浮动，防止父级边框塌陷的四种方法：
  • 浮动元素后加空div：很简单，空div会造成HTML代码冗余；
  • 设置父元素的高度：很简单，元素固定高会降低元素可扩展；
  • 父级添加overflow属性：很简单，但是有下拉框的场景不能用；
  • 父级添加伪类after：写法上比上面稍微复杂一点，但是没有副作用，推荐使用