使用HTML5打造一个漂亮的个人简介页面

本文来创建一个现代感的个人简介HTML5页面。整个实验通过 前端预览工具 完成,请访问 http://preview.tianmaying.com 前端预览工具的截图如图所示: 预览工具一共分为四个部分: 左上角为HTML代码输入区域 右上角为CSS代码输入区域 左下角为JavaScript代码输入区域 右下角的效果预览区域,输入代码后可以实时看到效果变化 渐变背景 首先来一段基本HMTL骨架: <!DOCTYPE html>...

JavaScript框架jQuery入门

jQuery入门 jQuery 是一个快速简单的JavaScript工具库,为快速开发提供了DOM遍历、事件处理、动画、AJAX交互几个方面的工具。jQuery会改变你写JavaScript的方式。 先来看看jQuery用起来是怎样的: // 给拥有continue类的<button>元素设置文本为:Next Step......

使用天码营前端预览工具:Web前端开发(HTML/CSS/JavaScript)实验

本实验将创建一个简单的HTML页面,展现北京大学创新工程实践课程的老师的信息。 更酷的是,我们可以通过向微信公众号发送消息,来为这个HTML页面发送弹幕。 大家做完实验,向这个公众号发送弹幕,即可在页面上看到自己发送的信息以弹幕的形式在HTML页面上飞出来。 同学们将在这个实验中学习HTML、CSS和JavaScript的基本使用,对于Web前端开发有一个初步了解。 最终的效果图如下: 实验要求 团队页面: 请同学们参考接下来的实验步骤,实现一个展示团队成员信息的HTML页面。通过点击分享生成链接,将链接发送给老师。分享时请输入学校和团队名称。实验步骤是展示创新工程实践的老师信息,你们需要替换...

JavaScript编程入门简介:DOM、AJAX与Chrome调试器

JavaScript最广泛的用途仍然是浏览器端脚本。本文便来细述在浏览器中如何引入JavaScript,以及Chrome浏览器的调试功能。 我们知道 Javascript 等于 ECMAScript + 宿主环境。宿主环境提供了一系列的全局对象,例如Node.js提供的 require , console 等;浏览器提供的DOM、BOM对象。本节课我们便来了解浏览器,熟悉客户端脚本开发和调试。 HTML中引入JS Javascript 已经成为 Web 页面逻辑的默认脚本语言,可以直接在 HTML 文件中引入而不需表明脚本语言。Javascript 使用 <script> 标签引入...

10分钟了解Javascript

Javascript 是动态的,弱类型的,解释执行的程序设计语言。 Javascript极其灵活,支持多种程序设计范式:面向对象、指令式、函数式。JavaSCript最初被用于浏览器脚本,现在已经是所有主流浏览器的默认脚本语言。浏览器脚本的作用包括用户交互、DOM操作、以及与服务器通信。 Node.js 的流行已经将JavaScript从浏览器端引入到服务器端,并显示出卓越的并发性能。 Javascript 由 Netscape 浏览器首次引入到Web文档中。Javascript的出现使web文档变得更像动态的App,而不是静态的文档。现在主流的浏览器都有javascript支持。Javasc...

最受欢迎的前端框架Bootstrap 入门

Bootstrap 来自 Twitter,是目前最受欢迎的前端框架之一。Bootstrap 提供了一套HTML基础样式、一套观感一致的组件、以及一系列的javascript插件。通过引入Bootstrap的样式文件,可以更快捷地开发web页面。 本文介绍了Bootstrap的一些基本样式和组件,包括容器、页头、媒体组件、图片、列表组。重新实现了上节课的 hello.html 。我们并未写CSS文件,仅使用Bootstrap就达到了这样的效果,所以讲Bootstrap是一个强大的前端框架! Bootstrap已经有了较为完整的中文文档。在学习中,你可以参考 Bootstrap中文文档 ,也可以参...

快速学习Web前端:CSS入门

在Web早期样式和内容是不区分的,比如可以通过 <bold> 标签来显示加粗字体。随着页面内容的丰富,浏览器性能的提高,内容和样式的耦合使得HTML文件难以理解和维护。CSS的出现正是为了将样式分离到独立的文件中。 层叠样式表 (Cascading Style Sheets,CSS),又称串样式列表、层次结构式样式表文件,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护。 CSS 的历史 最初主流浏览器为了显示更丰富的web文档,不断地将新的标签和属性添加到HTML标签中。这最终使得文档内容与文档样式偶合在一起,难以创...

5分钟了解HTML的核心知识

HTML (HyperText Markup Language,超文本标记语言)也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。HTML是为了创建网页而设计的语言。 HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以 .html 作为后缀名。下文中HTML的相关内容均基于 HTML5 标准来介绍。 编写 HTML HTML是一种用于创建网页的语言,用HTML语言编写的网页我们称为HTML文件,一般以 .html 后缀来命名。一个最简单的HTML文件可以是这样的: <!DOCTYPE html>...

函数式JavaScript编程

也许你还觉得函数式编程很陌生,但许多的函数式编程风格已经渐渐开始流行。 比如 DOM 中常见的回调函数、 jQuery 的级联写法、 lodash 的partial函数、Java的 Guava 库... 到处都是函数式的编程风格。 啥叫函数式编程?Lisp?事实上只要语言将函数作为一等公民(或者借助工具达到类似效果) 就可以支持函数式编程。而将函数作为一等公民意味着函数可以像变量一样传参、赋值和返回。 回调函数 这正是函数作为一等公民的一大特征:函数可以作为参数传递。前端人员可能对回调函数非常熟悉,回调在处理不连续的事件时特别方便。例如从浏览器获取服务器的数据并更新页面时,最直接的实现可能是这...

JavaScript 对象有哪些用法?

JavaScript 是面向对象语言,通过原型机制实现继承,通过『闭包』等方式可以实现封装。 本文来探讨JavaScript对象的特殊之处:原型链、引用、反射、属性遍历等特性。 对象创建 JavaScript 拥有非常直观的对象创建方式: var emptyObject = {};...

CSS利用浮动和清除浮动进行布局

CSS有三种基本定位方式:正常流(static),浮动(float),绝对定位(absolute、fixed)。 HTML元素默认采取正常流的方式进行布局,而浮动是HTML布局中最常用的定位方式。 下面先探讨浮动定位的行为,然后介绍一个需要清除浮动的场景,以及几种替代方案。 浮动 浮动元素会向左/右偏移,直至外边界碰到容器或另一个元素的边缘。 浮动会使得元素脱离文档流,后面元素进行布局时,前面的浮动元素就像不存在一样。 如果右侧没有足够空间,浮动元素就会下坠,直到有足够的空间(折行)。 如果浮动元素有着不同的高度,那么可能在下坠过程中卡在某个位置。 清除浮动 虽然浮动也会使元素脱离文档流,但与...

CSS 外边距合并

外边距合并是CSS中一个特殊的概念。当两个外边距相邻时,它们会合并为较大的那一个。 无论是相邻元素的上下边距,还是父子元素的上边距,甚至是同一元素的上下边距。 相邻元素 当两个元素上下相邻时,上面的下外边距会与下面元素的上外边距会合并。 如果元素左右相邻呢?一个典型的场景是几个 inline block 元素并排显示。 但 inline block 元素的外边距是不合并的,它们会保持自己的间隔。 inline block 的上下外边距仍然是不起作用的,因为它们是行内元素呀! 父子元素 父子元素如果都有上边距,会合并为其中较大的那一个。 当然,只有两个外边距直接相邻时才会合并。如果父元素有内边距...

DOCTYPE的作用:文档类型与浏览器模式

DTD(document type definition,文档类型定义)是一系列的语法规则, 用来定义XML或(X) HTML 的文件类型。浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式。 事实上DTD可以定义所有 SGML 语族的文档类型,但由于太过繁琐, XML Schema反而更加流行。 多数 HTML 编辑器都会为我们添加一行DOCTYPE声明,但DOCTYPE却是我们最容易忽略的部分。 下面我们会看到,DOCTYPE声明并不是可有可无的。 <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN"...

那些 JavaScript 的优秀特性

说起编程语言,理科生们最初接触的应当是C++。那是P校的必修课。 事实上第一个让我认真去用的语言是.NET C , 我学习了几乎所有的语言特性、窗口控件以及WPF样式字典。 这样便可以成为一个C 伪专家,去解答别人关于C 的各种问题 :) 此后由于各种原因去学习JavaScript、Python、Ruby,逐渐地发现成功使用一门语言的关键不在于熟悉所有语言特性,而是学着只用那些优雅的、表达力强的语言特性来完成整个工程。 那么 JavaScript 能否进化为一个只包含有点的语言呢? 在这一点上标准化协会其实也无能为力,去除任何语言特性都会造成依赖于该特性的工程失效。 我们可以使用JSLint等...

10分钟了解互联网及其发展历史

互联网及其历史 互联网 ,又称网际网络,是众多互联网应用的基础,也是当今计算机网络的基础设施。 我们所讲的 移动互联网,便是将移动通信和互联网结合,使移动设备通过Wifi(802.11x)、3G、4G等技术,在移动设备或移动电话网络之上运行TCP/IP协议,使移动设备接入互联网。 在技术上,互联网(Internet)是指使用 TCP/IP 协议族互相连接在一起的计算机网络。互联网的概念强调了:将运行着不同链路协议的子网,通过网际互联技术连接起来,于是才称为Inter Net。 TCP/IP协议,又称TCP/IP协议族,是一个网络通讯模型,是当前互联网的基础通讯架构。其中TCP(传输控制协议)和...

反馈意见