结构层HTML + 表现层CSS
结构层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:写法上比上面稍微复杂一点,但是没有副作用,推荐使用