结构层HTML + 表现层CSS
结构层HTML + 表现层CSS
一、HTML5 超文本标记语言
-
用于取代1999年所定制的HTML4.01和XHTML1.0标准的html标准版本
-
强化Web网页的表现性能,其次追加了本地数据库等Web应用的功能
-
是包括HTML、CSS、JavaScript在内的一套技术组合
-
特性【优势】:各大浏览器厂商的支持 跨平台 兼容性 市场需求
- 之前的版本中
-
开发者不同,ID的命名也不同导致代码可读性差
- 不能很好的定位标记,明确某标记在页面中的位置和作用
- 代码不够简洁和高效,不利于搜索引擎搜索
- HTML5新增加的结构元素
- header 页面或页面中某一个区块的页眉,通常是一些引导和导航信息。
- nav 可以作为页面导航的链接组
- section web页面中的一块独立区域 页面中的一个内容区块,通常由内容及其标题组成
- article 独立的文章内容代表一个独立的、完整的相关内容块,可独立于页面其它内容使用
- aside 相关内容或应用(常用语侧边栏)非正文的内容,与页面的主要内容是分开的,被删除而不会影响到网页的内容
- footer 页面或页面中某一个区块的脚
- Html5的设计以效率优先为原则,要求样式和内容分离,因此在实际开发中,必须使用css来定义样式
- 一种是视频媒体元素标签<video> 还有一种是音频<audio> embed:嵌入内容(包括各种媒体),Midi、Wav、AU、MP3、Flash、AIFF等。
- 【属性】src是视频路径
- 【属性】controls是控制播放器开始 关闭 音量调节等
- 【属性】source 也可以输入地址,避免各个浏览器不兼容的问题
- 【属性】autoplay是自动播放
- 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
- 内容与表现分离
- 表现的统一
- 丰富的样式,使得页面布局更加灵活
- 减少页面的代码量,提高页面的浏览速度,节省网络带宽
- 运用独立于页面的CSS,还有利于网页被搜索引擎收录
- 高级选择器
- 边框
- 四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
- 两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
- 一个值: 四个圆角值相同
- box-shadow 盒子阴影
- border-image 便捷图片
- 文本效果
- text-shadow 文本阴影
- text-overflow 文本溢出解决
- word-wrap 自动换行属性允许您强制文本换行
- word-break 单词拆分换行
- 背景
- 透明度设置
-
Background:rgba(0,0,0,0.5)
-
Opacity:0.8
-
Background-color:transparent;(不能设置半透明)
-
Filter:alpha(opacity=x)(IE专用)
- 高级特效
- 多列布局 http://www.runoob.com/css3/css3-multiple-columns.html
- 清除浮动,防止父级边框塌陷的四种方法:
- 浮动元素后加空div:很简单,空div会造成HTML代码冗余;
- 设置父元素的高度:很简单,元素固定高会降低元素可扩展;
- 父级添加overflow属性:很简单,但是有下拉框的场景不能用;
- 父级添加伪类after:写法上比上面稍微复杂一点,但是没有副作用,推荐使用
原文地址:https://www.cnblogs.com/guisenbin/p/10454429.html