0

点赞

1

回复

1105

浏览

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

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

htmlcss

11

点赞

8

回复

6629

浏览

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

本实验将创建一个简单的HTML页面,展现北京大学创新工程实践课程的老师的信息。 更酷的是,我们可以通过向微信公众号发送消息,来为这个HTML页面发送弹幕。 大家做完实验,向这个公众号发送弹幕,即可在页面上看到自己发送的信息以弹幕的形式在HTML页面上飞出来。 同学们将在这个实验中学习HTML、CSS和JavaScript的基本使用,对于Web前端开发有一个初步了解。 最终的效果图如下: 实验要求 1. 团队页面: 请同学们参考接下来的实验步骤,实现一个展示团队成员信息的HTML页面。通过点击分享生成链接,将链接发送给老师。分享时请输入学校和团队名称。实验步骤是展示创新工程实践的老师信息,你们需要替换成自己团队成员的信息。当然你们可以添加更多酷炫的效果,比如这是吉林大学的同学们的一个很酷的 作品 https://www.tianmaying.com/snippet/318/external preview 。 2. 个人页面: 请每一个团队成员实现一个展示个人信息的HTML页面,个人页面如何制作请参考另外一篇文章, 使用HTML5打造一个漂亮的个人简介页面 https://www.tianmaying.com/tutorial/morden profile 。在团队页面中,每个人的名字请增加链接,链接到个人介绍页面。个人介绍页面的链接地址可以通过分享按钮生成。 实验概览 实验分为三个步骤: 1. 编写HTML代码,展示我们希望显示的内容 2. 编写CSS代码,为内容增加样式,让展示更加美观 3. 编写JavaScript代码,让页面出现动态的弹幕效果 整个实验通过 前端预览工具 http://preview.tianmaying.com/ 完成,请访问 https://preview.tianmaying.com https://preview.tianmaying.com/ 前端预览工具的截图如图所示: 预览工具一共分为四个部分: 左上角为HTML代码输入区域 右上角为CSS代码输入区域 左下角为JavaScript代码输入区域 右下角的效果预览区域,输入代码后可以实时看到效果变化 可以点击右上角的 分享 ,生成这个页面的URL链接,在微信和微博中分享。 1 编写HTML代码 1.1 创建HTML页面框架 首先创建一个HTML页面的框架,HTML页面由 和 两部分构成。 与 之间可以编写基本的元信息,比如字符编码 与 之间是HTML的正文部分 注意大部分标签都是成对出现的,后面出现的标签会有一个 / 符号。 打开前端预览工具,已经默认给大家创建好了一个HTML页面框架: ...

javascriptcsshtml

0

点赞

0

回复

1604

浏览

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

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

bootstraphtmlcss

0

点赞

0

回复

533

浏览

5分钟了解HTML的核心知识

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

html

0

点赞

0

回复

1172

浏览

JSP表单输入控件

表单控件 在之前的学习中,我们已经了解如何使用表单作为用户输入界面。最基本的两种表单组件是 和 ,都可以输入任意文本。但是只有文本输入的交互显然是不够的,当用户输入的值属于某一个固定集合,例如: 1. 用户性别:从{“男”,“女”,”保密”}中三选一(必选且只能选一个) 2. 调查类选项:从{"Java", "C", "Python"}中选择任意项(也可以不选)作为自己擅长的编程语言 为了满足这一类选择输入场景,HTML提供了几种不同类型的输入控件: 单选按钮(RADIO BUTTONS) 当用户从若干给定的的选择中选取其一时,就会用到单选框。用户性别可以这样实现: ...

servlethtmlform

0

点赞

0

回复

534

浏览

Web前端开发:初识HTML

HTML是什么? HTML也就是我们常说的网页。浏览器从服务器获取HTML文件,并显示给用户。 HTML(HyperText Markup Language,超文本标记语言)是为了创建网页而设计的语言。HTML是用一系列的HTML标签写成的,每种HTML标签都有对应的语义和大致的外观。html文件通常以 .html 作为后缀名。 接下来的介绍基于 HTML5 http://zh.wikipedia.org/zh cn/HTML5 标准。 一个HTML文件 一个简单的HTML文件是这样的: ...

web前端html

0

点赞

0

回复

467

浏览

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

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

html

0

点赞

0

回复

849

浏览

打造前端开发的Vim环境

前不久harttle着手搭建了 类似IDE的Vim环境 http://tianmaying.com/tutorial/vim ide ,然而对于前端开发者这还远远不够。 本文便记录一下如何实现前端开发者关心的那些特性:不同文件类型的缩进、HTML标签匹配注释移除、HTML/CSS/Javascript自动补全、代码风格检查等等。让我们来打造一个适合前端开发的 Vim http://tianmaying.com/tutorials/tag/vim ! 文件类型设置 前端文件有不同的类型,而每个人对于缩进又有不同都要求。Vim中我们可以为每种文件设置不同的缩进和Tab行为。 查看当前文件类型 使用 :set filetype 命令可以查看当前文件的类型。例如: filetype=html.handlebars...

bashjavascripthtmlcssvim

0

点赞

0

回复

885

浏览

CSS Line Box:溢出与折行

CSS 将 DOM 树转换为由矩形 Box 构成的树,并通过设置这些 Box 的属性来改变其位置和大小,描述每个元素或文本的布局。这些 Box 分为三个级别: block level Box: display 属性为 block 的Box,比如段落标签 ; inline level Box: display 属性为 inline block 的Box,它们就像一行中的单词一样布局。它里面可以包含其他 inline level 的Box,也可以包含 block level 的Box; line Box:一行单词就构成一个 line Box,这种Box是自动生成的,可以看做是 inline level Box的容器。 溢出、折行、断词是 line Box中常见的问题,设置这些行为的 CSS http://tianmaying.com/tag/css/tutorials 属性包括 white space 、 line spacing 、 text overflow 、 word wrap 、 word break 等。 下面几小节中详细介绍这些属性的取值与对应的行为、以及常见的使用方法。 更多信息请参考: W3C 标准:CSS3 Box http://www.w3.org/TR/css3 box/ LINE BOX 下面的小节中介绍的CSS属性只适用于 line Box,那么什么是 line Box呢?请看下面的HTML片段: ...

盒模型csshtml

0

点赞

0

回复

593

浏览

inline元素的对齐问题

元素对齐是 CSS http://tianmaying.com/tag/css/tutorials 中最常见的问题之一,控制元素对齐的属性包括 text align , verticle align , margin , line height 等。 本文便来探讨inline元素的对齐行为,以及 text align 和 verticle align 的使用方法,并给出实例。 TEXT ALIGN text align https://developer.mozilla.org/zh CN/docs/CSS/text align 指定了行内内容(例如文字)如何相对它的块父元素对齐。作用于当前元素的子元素,且子元素需是 inline 的。例如: 常用的取值有: left , right , center 。 ...

盒模型csshtml

0

点赞

0

回复

735

浏览

搜狐快站快巴士开发快速入门

如何成为快站插件开发者 开发者要求: 具有前端开发经验的个人或者团队,要求有成功的产品开发经验,能够开发出具有移动端特点的快站插件。 插件开发技术要求: 前端:Javascript , CSS , HTML5 后端:需要部署在可被快站服务器抓取的自有服务器中,开发语言不限。 如何成为开发者: 首先请加入快站开发者服务群:348577565 通过验证后,向管理人员申请成为开发者,需要提供开发者资料,以及插件的详细规划。 审批通过后,可在插件开发者管理后台提交代码。 快巴士系统简介 快巴士为开发者提供两大功能 前端代码部署, 开发者不再需要自己购买服务器,也不需要自己管理服务器,本系统提供一键部署功能,并提供了开发和生产环境供大家使用; 数据存取服务, 在本系统中申请的每一个app都拥有一个独立的数据空间,通过sdk中的接口,无需编写服务器端代码,即可将数据存储到云端,并可随时查询,更新。 第一步 创建APP 点击添加app按钮, 输入app名字即可创建,安全域名可不填。 第二步 下载项目模版 创建完app后,会跳转至快速开始页面,在快速开始页面中点击下载项目模版即可。 第三步 将项目托管至GIT仓库 首先在 coding.net https://coding.net/ 中,创建一个项目,将上步中下载的项目push到coding.net中,具体git如下 //在项目框架的根目录下...

html快站cssjavascript

0

点赞

0

回复

1047

浏览

表单提交:button与input submit 的区别

最近项目代码中的表单提交的方式已经百花齐放了,现在用这篇文章来整理一下不同表单提交方式的区别,给出最佳实践。先给结论: 建议使用 button type=submit 来提交表单,而不是 input ; 只有单行文本控件时,回车会引发表单提交; 通过 onsubmit 事件可阻止表单提交。 INPUT TYPE=SUBMIT 这是最常见的提交方式。不多说了,看图: 图中可以看到点击提交按钮后的URL是 /?key=foo 。代码如下: ...

表单htmljavascript

0

点赞

0

回复

1100

浏览

如何减少HTML页面回流与重绘(Reflow & Repaint)

如果你的HTML变得很大很复杂,那么影响你JavaScript性能的可能并不是JavaScript代码的复杂度,而是页面的回流和重绘。 回流(Reflow)是指布局引擎为frame计算图形的过程。 frame是一个矩形,拥有宽高和相对父容器的偏移。frame用来显示盒模型(content model), 但一个content model可能会显示为多个frame,比如换行的文本每行都会显示为一个frame。 关于CSS盒模型的介绍请参考: CSS 盒模型及其呈现方式 http://www.tianmaying.com/tutorial/css display 重绘(Repaint)发生在元素的可见性发生变化时,比如背景色、前景色等。 因此回流必然会引起重绘。 HTML 布局 HTML使用流式布局模型(flow based layout), 这意味着多数情况下一次扫描就可以计算所有的图形显示。 处于流后面的元素一般不会影响前面元素的图形, 所以布局过程可以从左到右、从上到下来进行。 所有的HTML回流都是从根frame开始(HTML标签)的,递归地处理部分或全部子frame。 回流过程中也可能创建新的frame,比如文本发生了换行。 一个frame的回流会导致它的所有父节点以及所有后续元素的回流。 有些HTML回流是立即执行的(immediate to user or script)并且会影响整个frame树, 比如窗口大小变化、更改文档的默认字体;有些HTML回流则是异步的、渐进的(incremental), 比如更多的文档流从网络中到达,这些渐进的回流可以入队列进行批量处理。 回流的原因 浏览器在实现回流时,会递归地处理frame。 每个frame的回流都有一个原因, 这个原因会随着frame逐级向下传递(传递过程中可能会改变)。 回流的原因决定了当前frame的回流行为,有这样5种原因: 1. 初始化(Initial)。DOM载入后的第一次回流,将会遍历所有frame。 2. 渐进(Incremental)。当一个frame发生渐进回流时,意味着它前面的元素都没有变, 而是它里面的元素变了。这会引起自底向上的作用。 3. 改变大小(Resize)。元素的容器边界发生变化时,此时元素内部状态没变。 在计算自顶向下的布局约束的同时,可以复用内部状态。 4. 样式改变(StyleChange)。整个frame树都应得到遍历。 5. Dirty。当一个容器已经缓存了多个子元素的Incremental回流时,该容器出于Dirty的状态。 前面四种原因的回流都是在Presentation Shell中立即调用的, 而最后一种回流只有Incremental回流已经到达目标frame时才进行。 (因为这时自底向上的影响才被计算出来,才能决定容器的图形显示) 如果你是Web开发者,可能更关注的是哪些具体原因会引起浏览器的回流,下面罗列一下: 1. 调整窗口大小 2. 改变字体大小 3. 样式表变动 4. 元素内容变化,尤其是输入控件 5. CSS伪类激活 6. DOM操作 7. offsetWidth , width , clientWidth , scrollTop/scrollHeight 的计算, 会使浏览器将渐进回流队列Flush,立即执行回流。 既然提到了 offsetHeight ,来总结一下这几个容易混淆的HTML元素属性吧: clientHeight : 内部可视区域大小。 returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin offsetHeight :整个可视区域大小,包括border和scrollbar在内。 is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height. scrollHeight :元素内容的高度,包括溢出部分。 is a measurement of the height of an element's content including content not visible on the screen due to overflow scrollTop :元素内容向上滚动了多少像素。 the number of pixels that the content of an element is scrolled upward. 最佳实践 对我们Web开发者最有用的还是如何去做,才能减少页面回流。先来个例子: var s = document.body.style; ...

javascriptcsshtml

0

点赞

0

回复

821

浏览

原生JavaScript的DOM操作汇总

程序员经常讲在IDE中写C 、Java会越来越手残,那么经常用jQuery也会让我们忘记JavaScript是如何作用于DOM的。 JavaScript的DOM操作也是面试中的常见问题,尤其是当你需要回答jQuery的性能问题时,便需要再次回到JavaScript DOM API。 本文便总结一下常见的JavaScript DOM操作方法,关于JavaScript DOM事件可以参考另一篇文章: DOM Level 2 Event与jQuery源码:捕获与冒泡 http://harttle.com/2015/07/31/javascript event.html 什么是DOM? 外行看来前端工程师的工作就是改页面(HTML、CSS),写脚本(JavaScript)。当你意识到你不是在改HTML而是在操作DOM时,你就升级了! 那么什么是DOM? MDN: 文档对象模型 (DOM) https://developer.mozilla.org/zh CN/docs/Web/API/Document_Object_Model/Introduction 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。 说白了DOM就是浏览器为JavaScript提供的一系列接口(通过 window.documnet 提供的),通过这些接口我们可以操作web页面。 但DOM并不是编程语言,它是文档对象的模型,该模型是独立于编程语言的。比如我们在Python中也可以操作DOM: import xml.dom.minidom as m...

javascriptdomhtml

0

点赞

0

回复

565

浏览

Web性能优化:prefetch, prerender

本文从预加载的角度介绍如何优化页面载入和渲染的性能,在展开内容之前先了解一下浏览器显示页面的过程: 首先是DNS解析,然后建立TCP连接,接着下载HTML内容以及资源文件,最后才是整个页面的渲染。如图: 图片来源: https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj 6sWLmnjl6TLnaru_WH0LJTjP o/present?slide=id.gc03305a_0106 https://docs.google.com/presentation/d/18zlAdKAxnc51y_kj 6sWLmnjl6TLnaru_WH0LJTjP o/present?slide=id.gc03305a_0106 预加载和缓存是两个概念,缓存通常使用304响应状态码来标识,参考文章: 怎样理解HTTP状态码? http://harttle.com/2015/08/15/http status code.html 。 这四个阶段必须是串行的,任何一步的延迟都会最终影响到页面加载时间。但浏览器在这方面已经做了很多优化,例如它会猜测你将要打开的页面,并预先解析DNS甚至直接下载它们。 但浏览器猜测的能力是有限的,作为Web开发者我们可以通过 dns prefetch , subresource , prefetch , prerender 等指令来帮助浏览器优化性能。 DNS PREFETCH dns prefetch 可以指示浏览器去预先解析DNS域名。这样可以减少将要打开页面的延迟, ...

htmlweb

新建主题 记录代码

学员动态

  • h**u向课程作业中提交了代码
  • 1**9评论了:问一下 第七课的实战...
  • z**o向课程作业中提交了代码
  • f**o向课程作业中提交了代码
  • E**7添加了笔记:这样初始化数组比较麻...
  • 天**君回复了d**h在课程中的问题:欢迎来到天码营学习,...
  • E**7添加了笔记:这样初始化数组比较麻...
  • 骸**泯向课程作业中提交了代码
  • s**9向课程作业中提交了代码
  • z**o完成了课程的作业
  • S**k评论了z**o在课程中的作业:是后台这边的测试文件...
  • z**o完成了课程的作业
  • 天**君回复了c**5在课程中的问题:欢迎来到天码营学习,...
  • 小**童向课程作业中提交了代码
  • q**1在课程中提出了问题:我使用的是linux...
  • z**o评论了:问一下,这个是否启用...
  • i**i添加了笔记:ava要求在使用一个...
  • w**3评论了H**i在课程中的作业:你是学过别的语言吗,...
  • 1**9完成了课程的作业
  • w**3回复了g**i在课程中的问题:你的包里面有clas...
  • q**1在课程中提出了问题:我现在每次点进去都是...
  • z**o完成了课程的作业
  • d**n向课程作业中提交了代码
  • 三**年添加了笔记:为了让Servlet...
  • 天**君评论了f**n在课程中的作业:太复杂了,用dire...
  • 三**年添加了笔记:本课程中我们采用开源...
  • c**3向课程作业中提交了代码
  • z**o在课程作业中回复了老师:老师,您好。下面多一...
  • d**h向课程作业中提交了代码
  • w**7向课程作业中提交了代码
  • z**o在课程作业中回复了老师:老师,您好。我本地测...
  • q**1评论了:不解决问题反而删我评...
  • z**o在课程作业中回复了老师:老师帮忙看一下哪个地...
  • h**u向课程作业中提交了代码
  • 天**君回复了1**9在课程中的问题:启动和终止线程 实战...
  • q**1在课程中提出了问题:你那能不能手动帮我解...
  • 晨**望向课程作业中提交了代码
  • 天**君回复了q**1在课程中的问题:稍安勿躁,可能最近升...
  • f**n在课程作业中回复了老师:我这个方法有可行性吗...
  • 天**君评论了c**4在课程中的作业:提示的两种情况,你自...
  • 三**年添加了笔记
  • 时**啦向课程作业中提交了代码
  • z**o完成了课程的作业
  • 骸**泯向课程作业中提交了代码
  • w**3评论了O**T在课程中的作业:对了啊,你把c的结果...
  • f**n在课程作业中回复了老师:老师,这边能不能点一...
  • 天**君回复了b**e在课程中的问题:稍等,应该是系统bu...
  • 天**君回复了听**风在课程中的问题:欢迎来到天码营学习,...
  • O**T在课程作业中回复了老师:是这样做的吗 然后想...
  • a**y向课程作业中提交了代码
  • a**6在课程作业中回复了老师:报这样一个错误,难以...
  • q**1在课程中提出了问题:能否给个解决方案? ...
  • 1**9完成了课程的作业
  • c**y创建了代码片段:详...
  • 天**君回复了J**_在课程中的问题:欢迎来到天码营学习,...
  • E**7添加了笔记:这样初始化数组比较麻...
  • 天**君评论了f**o在课程中的作业:怎么会是重定向到cr...
  • 晨**望向课程作业中提交了代码
  • H**i添加了笔记:Java中的数据类型...
  • E**7添加了笔记:这样初始化数组比较麻...
  • q**1评论了:我之前发了如下评论,...
  • w**3评论了H**i在课程中的作业:在helloworl...
  • s**t向课程作业中提交了代码
  • s**t向课程作业中提交了代码
  • j**y添加了笔记:equals与==区...
  • q**1在课程中提出了问题:可以用了,谢谢 这个...
  • q**1向课程作业中提交了代码
  • 天**君回复了H**i在课程中的问题:解决环境配置问题,可...
  • a**6向课程作业中提交了代码
  • E**7在课程作业中回复了老师:为什么这里显示无法从...
  • g**i在课程中提出了问题:请问老师,这一句放在...
  • q**1在课程中提出了问题:我已经做了n遍这些这...
  • d**_向课程作业中提交了代码
  • E**7向课程作业中提交了代码
  • 天**君回复了q**1在课程中的问题:第二问题,你刷新一下...
  • H**i添加了笔记:startup()和...
  • z**o完成了课程的作业
  • 1**9在课程中提出了问题:实战任务7中的 按空...
  • t**1向课程作业中提交了代码
  • 三**年添加了笔记:Servlet依托于...
  • d**h向课程作业中提交了代码
  • q**1在课程中提出了问题:刷新,大退都没有用。...
  • w**3评论了a**6在课程中的作业:Long id ,要...
  • 三**年添加了笔记:Servlet AP...
  • 天**君回复了g**i在课程中的问题:欢迎来到天码营学习,...
  • 天**君回复了Y**n在课程中的问题:欢迎来到天码营学习,...
  • H**i向课程作业中提交了代码
  • b**e在课程中提出了问题:数组成员之间需要遵循...
  • M**s添加了笔记:相反,如果表单请求不...
  • E**7向课程作业中提交了代码
  • 1**9完成了课程的作业
  • a**6向课程作业中提交了代码
  • 天**君回复了q**1在课程中的问题:你可以加QQ群(在课...
  • 三**年添加了笔记:Servlet容器监...
  • M**s添加了笔记:这样相当于浏览器重新...
  • s**t向课程作业中提交了代码
  • s**9向课程作业中提交了代码
  • 三**年添加了笔记:Servlet是运行...
  • z**o在课程作业中回复了老师:圆测试[点击查看详情...
  • 时**啦向课程作业中提交了代码
反馈意见