结构层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

二、CSS3 http://www.runoob.com/css3/css3-tutorial.html

  • CSS的优势
  1. 内容与表现分离
  2. 表现的统一
  3. 丰富的样式,使得页面布局更加灵活
  4. 减少页面的代码量,提高页面的浏览速度,节省网络带宽
  5. 运用独立于页面的CSS,还有利于网页被搜索引擎收录
  • 高级选择器
  • 边框
    • border-radius 圆角
      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:写法上比上面稍微复杂一点,但是没有副作用,推荐使用

原文地址:https://www.cnblogs.com/guisenbin/p/10454429.html

时间: 2024-10-04 18:25:49

结构层HTML + 表现层CSS的相关文章

web开发 -- 表现层

web开发 -- 表现层 Java应用程序通常会分层开发,常见的是三层 : 表现层.逻辑层.数据层,层与层之间是通过接口进行交互的. 今天来说说 "表现层",应用程序的界面层也被称为表现层,专门用于图形化的跟用户进行交互. 通常来说 表现层具有如下几个主要功能: (1) 展示数据 : 主要是从逻辑层获取需要展示给用户看或者操作的数据 (2) 人机交互 : 用户可以在界面上输入值,也可以点击某些组件,从而引起某些动态事件 (3) 提交表单 : 收集界面参数,调用逻辑层接口 表现层的基本实

面向对象——三层架构(表现层、业务层、持久层)

三层架构:即表现层.业务层.持久层. ① 持久层:采用DAO模式,建立实体类和数据库表映射(ORM映射).也就是哪个类对应哪个表,哪个属性对应哪个列.持久层 的目的就是,完成对象数据和关系数据的转换. ② 业务层:采用事务脚本模式.将一个业务中所有的操作封装成一个方法,同时保证方法中所有的数据库更新操作,即保证同时成 功或同时失败.避免部分成功部分失败引起的数据混乱操作. ③ 表现层:采用MVC模式. M称为模型,也就是实体类.用于数据的封装和数据的传输. V为视图,也就是GUI组件,用于数据的

表现层(jsp)、持久层(类似dao)、业务层(逻辑层、service层)、模型(javabean)、控制层(action)

转自:http://www.blogjava.net/jiabao/archive/2007/04/08/109189.html 为了实现web层(struts)和持久层(Hibernate)之间的松散耦合,我们采用业务代表(Business Delegate)和DAO(Data Access Object)两种模式.DAO模式为了减少业务逻辑和数据访问逻辑之间的耦合,当一个持久曾框架被应用时,该模式将会减少业务对象和该框架之间的耦合,这样我们可以不修改业务对象而选择不同的持久层框架的实现.实际

少一些套路,多一些真诚 &mdash;&mdash;groovy消灭表现层套路

  初次认识groovy是在2009年,当时看了Manning出版的<Groovy in Action 1st Edition>,对groovy这个语言的交互性shell,以及灵活的语法留下了深刻的印象,但限制于自己对脚本语言的特性了解甚少,社区基础的薄弱,以及所谓java is best的年少轻狂,没有进行实际应用,只是作为一种兴趣的萌芽种在了知识的土壤里.   转眼间到了2016年9月,突然在Manning网站上发现一本似曾相似的书籍-<Groovy in Action 2nd Ed

应用程序框架实战三十:表现层及ASP.NET MVC介绍(一)

本文将介绍表现层及ASP.NET MVC的一些要点,特别是ASP.NET MVC的一些抽象和封装技巧,如果你对MVC还不了解,可以参考<ASP.NET MVC4 高级编程>,作者Jon Galloway等,这本书由ASP.NET MVC团队成员编写,相当不错. 表现层的职责 表现层的职责是展示和收集数据,将领域层的数据和逻辑展示出来,并收集用户输入的相关信息. 搞清楚表现层的职责以后,你就应该清楚,表现层不是你应该编写业务逻辑的地方,这也是分层架构的核心. 如果要展示一个计算值,不应该在表现层

表现层 FreeMarker与JSP

在java领域,表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术优点:1.功能强大,可以写java代码2.支持jsp标签(jsp tag)3.支持表达式语言(el)4.官方标准,用户群广,丰富的第三方jsp标签库5.性能良好.jsp编译成class文件执行,有很好的性能表现缺点:jsp没有明显缺点,非要挑点骨头那就是,由于可以编写java代码,如使用不当容易破坏mvc结构. velocity是较早出现的用于代替jsp的模板语言优点:1.不能编写ja

MyBatis知多少(6)表现层与业务逻辑层

表现层 表现层负责向最终用户展示应用程序的控制方式以及数据.它还要负责所有信息的布局和格式.今天,商业应用程序最流行的表现方式应该算是Web前端了,它使用HTML和JavaScript并通 过Web浏览器来满足用户的界面外观需求. Web应用程序的优势包括跨平台兼容性.易部署和可扩展.amazon.com就是Web应用程序的—个极好的例子,它允许你在线购书.这就是Web应用程序的一个绝佳应用,因为不可能要求用 户为了买一本书而去下载一个应用程序. 当需要高级的用户控件或者复杂的数据操纵时,Web

REST --- Representational State Transfer --- 表现层状态转化

引用:阮一峰的网络日志 如果一个架构符合REST原则,就称它为RESTful架构. 要理解RESTful架构,最好的方法就是去理解Representational State Transfer这个词组到底是什么意思,它的每一个词代表了什么涵义. 如果你把这个名称搞懂了,也就不难体会REST是一种什么样的设计. 一.资源(Resources) REST的名称"表现层状态转化"中,省略了主语."表现层"其实指的是"资源"(Resources)的&qu

Stripes视图框架实现纯Java代码控制表现层参考文档

Stripes是一个开放源码的Web应用程序框架的基础上的模型 - 视图 - 控制器(MVC)模式.它的目的是通过使用Java技术,如在Java 1.5.x或以上版本中引入,实现"约定优于配置"的注解和泛型,它比Struts2框架更轻量.Stripes强调一组简单的约定整个框架的想法,减少配置的开销.在实践中,这意味着几乎没有Stripes的应用程序需要的任何配置文件,从而降低开发和维护工作. 1.Stripes特性 行动基于MVC框架 没有配置文件 POJO的 注解取代XML配置文件